feat: css photo gallery (#43602)
* feat: initial infra * feat: create steps * feat: prototype tests Haven't tested locally yet :) * feat: complete tests * feat: move image size step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: apply kris' review suggestions Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: index.md linting * chore: steps are parts in disguise * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: colon to period Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
c1fb339bbc
commit
2868347742
@ -95,10 +95,8 @@
|
||||
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
|
||||
]
|
||||
},
|
||||
"css-piano": {
|
||||
"title": "CSS Piano",
|
||||
"intro": ["", ""]
|
||||
}
|
||||
"css-piano": { "title": "CSS Piano", "intro": ["", ""] },
|
||||
"css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
"javascript-algorithms-and-data-structures": {
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the CSS Photo Gallery
|
||||
block: css-photo-gallery
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the CSS Photo Gallery
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -78,5 +78,6 @@
|
||||
"learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases",
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"accessibility-quiz": "HTML-CSS",
|
||||
"registration-form": "HTML-CSS"
|
||||
"registration-form": "HTML-CSS",
|
||||
"css-photo-gallery": "HTML-CSS"
|
||||
}
|
||||
|
||||
98
curriculum/challenges/_meta/css-photo-gallery/meta.json
Normal file
98
curriculum/challenges/_meta/css-photo-gallery/meta.json
Normal file
@ -0,0 +1,98 @@
|
||||
{
|
||||
"name": "CSS Photo Gallery",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "css-photo-gallery",
|
||||
"order": 20,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61537485c4f2a624f18d7794",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"61537a8054753e2f1f2a1574",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"61537bb9b1a29430ac15ad38",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"61537c5f81f0cf325b4a854c",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"61537c9eecea6a335db6da79",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"61537d86bdc3dd343688fceb",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"615380dff67172357fcf0425",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"615f171d05def3218035dc85",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6153893900438b4643590367",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"6153897c27f6334716ee5abe",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"615389bd81347947ea7ba896",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"6153908a366afb4d57185c8d",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"615392916d83fa4f02f7e2cf",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"6153938dce8b294ff8f5a4e9",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"6153947986535e5117e60615",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"61539e07e7430b528fbffe21",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"61539f32a206bd53ec116465",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6153a04847abee57a3a406ac",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6153a3485f0b20591d26d2a1",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6153a3952facd25a83fe8083",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6153a3ebb4f7f05b8401b716",
|
||||
"Step 21"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 61537485c4f2a624f18d7794
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 61537a8054753e2f1f2a1574
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `meta` tag with the `name` set to `viewport` and the `content` set to `width=device-width, initial-scale=1`.
|
||||
|
||||
Also add a `meta` tag with the `charset` set to `UTF-8`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset'));
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
Your other `meta` element should have the `charset` attribute set to `UTF-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61537bb9b1a29430ac15ad38
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `title` element with the text set to `CSS Flexbox Photo Gallery`, and a `link` element to add your `styles.css` file to the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `CSS Flexbox Photo Gallery`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'css flexbox photo gallery')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'CSS Flexbox Photo Gallery');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61537c5f81f0cf325b4a854c
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `body` element, create a `div` with the `class` set to `header`.
|
||||
|
||||
Inside the `.header` element nest an `h1` element with the text `CSS FLEXBOX PHOTO GALLERY`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` element within your `body` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body')?.querySelector('div'))
|
||||
```
|
||||
|
||||
Your `div` element should have the `class` set to `header`.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header'))
|
||||
```
|
||||
|
||||
Your `.header` element should have an `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.header')?.querySelector('h1'));
|
||||
```
|
||||
|
||||
Your `h1` should have the text `CSS FLEXBOX PHOTO GALLERY`. Remember that casing matters.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 61537c9eecea6a335db6da79
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.header` element, create a new `div` element with the `id` set to `gallery`.
|
||||
|
||||
In that `#gallery` element, create ten `img` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a second `div` element in your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should come after your `.header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header'));
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` set to `gallery`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery');
|
||||
```
|
||||
|
||||
Your `#gallery` element should have ten `img` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 61537d86bdc3dd343688fceb
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, replacing `#` with the `img` element order.
|
||||
|
||||
So your first `img` element would use `1.jpg`, your second would use `2.jpg`, and so on.
|
||||
|
||||
# --hints--
|
||||
|
||||
All ten of your `img` elements should have a `src` attribute.
|
||||
|
||||
```js
|
||||
const images = [...document.querySelectorAll('img')];
|
||||
assert(images.every(image => image.getAttribute('src')));
|
||||
```
|
||||
|
||||
Your first `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
|
||||
```
|
||||
|
||||
Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
|
||||
```
|
||||
|
||||
Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
|
||||
```
|
||||
|
||||
Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
|
||||
```
|
||||
|
||||
Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
|
||||
```
|
||||
|
||||
Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
|
||||
```
|
||||
|
||||
Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
|
||||
```
|
||||
|
||||
Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
|
||||
```
|
||||
|
||||
Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
|
||||
```
|
||||
|
||||
Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="gallery">
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 615380dff67172357fcf0425
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `*` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
Your `*` selector should have a `box-sizing` property set to `border-box`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 615f171d05def3218035dc85
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your images are currently too large, and you will not be able to see your CSS changes.
|
||||
|
||||
Create a `#gallery img` selector to target your images. Give it a `width` property set to `25%`.
|
||||
|
||||
Also set the `height` property to `300px` to keep your images a uniform size.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#gallery img` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img'))
|
||||
```
|
||||
|
||||
Your `#gallery img` selector should have a `width` property set to `25%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%')
|
||||
```
|
||||
|
||||
Your `#gallery img` selector should have a `height` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 6153893900438b4643590367
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the margin from your `body` element, set the font to `Arial`, and give it a background color of `#EBE7E7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'))
|
||||
```
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `Arial`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `#EBE7E7`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 6153897c27f6334716ee5abe
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Align your `.header` text in the center, give it a padding of `32px` on all sides, and set the background to `#E0DDDD`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.header` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `padding` property set to `32px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `background-color` property set to `#E0DDDD`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 615389bd81347947ea7ba896
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container.
|
||||
|
||||
To set an element to use Flexbox, you give it a `display` property set to `flex`. Create a `#gallery` selector and give it that property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#gallery` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery'));
|
||||
```
|
||||
|
||||
Your `#gallery` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 6153908a366afb4d57185c8d
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox can be thought of as having two axes, the main axis and the cross axis. The main axis is determined by the `flex-direction` property. If `flex-direction` is set to `row` or `row-reverse`, the main axis is horizontal. If `flex-direction` is set to `column` or `column-reverse`, the main axis is vertical.
|
||||
|
||||
Give your `#gallery` selector a `flex-direction` property set to `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `flex-direction` property set to `row`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 615392916d83fa4f02f7e2cf
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed that your images have all moved onto the same row.
|
||||
|
||||
The `flex-wrap` property determines how your items should behave when the flex container is too small. Setting this property to `wrap` will allow your items to wrap to the next row/column (depending on your main axis), where `nowrap` will prevent your items from wrapping. When this is set to `nowrap`, items may either shrink to fit or overflow.
|
||||
|
||||
Give the `#gallery` selector a `flex-wrap` property set to `wrap`. You should see your images take a four-column layout. This is because you set their `width` to `25%` in an earlier step.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `flex-wrap` property set to `wrap`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 6153938dce8b294ff8f5a4e9
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
|
||||
|
||||
Give your `#gallery` selector a `justify-content` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `justify-content` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6153947986535e5117e60615
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
|
||||
|
||||
To vertically center your images, give your `#gallery` selector an `align-items` property set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have an `align-items` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 61539e07e7430b528fbffe21
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `#gallery` selector a `padding` property set to `0 4px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `padding` property set to `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.padding === '0px 4px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 61539f32a206bd53ec116465
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
|
||||
|
||||
Give your `#gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery img` selector should have an `object-fit` property set to `cover`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 6153a04847abee57a3a406ac
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your images need some space between them.
|
||||
|
||||
Give your `#gallery img` selector a `margin-top` property of `8px` and a `padding` property of `0 4px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery img` selector should have a `margin-top` property of `8px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px');
|
||||
```
|
||||
|
||||
Your `#gallery img` selector should have a `padding` property of `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 6153a3485f0b20591d26d2a1
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Smooth out your images a bit by giving the `#gallery img` selector a `border-radius` property of `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery img` selector should have a `border-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6153a3952facd25a83fe8083
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a media query for screens smaller than `800px` in width. In that media query, create a `#gallery img` rule and set the `width` property to `50%`. This will convert your gallery to a two-column layout.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `@media` query.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `max-width` of `800px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
Your `@media` query should have a `#gallery img` rule.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
assert(rules?.find(rule => rule.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
Your `#gallery img` rule should have a `width` property set to `50%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
const imgRule = rules?.find(rule => rule.selectorText === '#gallery img');
|
||||
assert(imgRule?.style.width === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6153a3ebb4f7f05b8401b716
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Resize the preview to see the layout change from your media query.
|
||||
|
||||
Finally, create another media query for screens smaller than `600px` wide. In that media query, create a `#gallery img` rule and set the `width` property to `100%`. This will give your gallery a single-column layout.
|
||||
|
||||
Your CSS Flexbox Photo Gallery is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a second `@media` query.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `@media` query should come after your existing one.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `max-width` of `600px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `#gallery img` selector.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
assert(rules?.find(rule => rule?.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
Your `#gallery img` rule should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img');
|
||||
assert(imgRule?.style?.width === '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#gallery img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -27,5 +27,6 @@
|
||||
"javascript-spreadsheet": "JavaScript Spreadsheet",
|
||||
"intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
|
||||
"d3-dashboard": "D3 Dashboard",
|
||||
"registration-form": "Registration Form"
|
||||
"registration-form": "Registration Form",
|
||||
"css-photo-gallery": "CSS Photo Gallery"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user