fix(learn): Broke several steps down into smaller steps for the Cafe Menu project - v7 (#39778)
* fix: made some verbiage changes to existing steps * fix: rewrite step 45 instructions * fix: added two steps between 45 and 46 * fix: miscellaneous edits for steps 21,22, 27 * fix: change step 35 to allow for smaller steps * fix: update 36-41 seed code * fix: added new step between 41 and 42 * fix: add new step between 42 and 43 * fix: broke step 33 into 4 new steps * fix: removed unnecessary step 37 * fix: change wording of step 33 instructions * fix: corrected ERM syntax * fix: corrected seed code typos in steps 45 and 46 * fix: corrected typo Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: changed wording to improve readability Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: changed "Free Code Camp" to "freeCodeCamp" Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo and improved wording Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: correct typos Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: corrected punctuation Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: added missing period Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: corrected typo Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: added the missing word "larger" Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: corrected typo Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: change paragraph to `p` * fix: reorderd steps after step 37 deleted * fix: added two new steps to fix missing steps problem * fix: added missing ERMs for step 69 Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
This commit is contained in:
Randell Dawson
GitHub
@ -143,218 +143,250 @@
|
||||
"Part 33"
|
||||
],
|
||||
[
|
||||
"5f3c866d697fb245bc801648",
|
||||
"5f769541be494f25449b292f",
|
||||
"Part 34"
|
||||
],
|
||||
[
|
||||
"5f3c866de7a5b784048f94b1",
|
||||
"5f76967fad478126d6552b0d",
|
||||
"Part 35"
|
||||
],
|
||||
[
|
||||
"5f3c866dbf362f99b9a0c6d0",
|
||||
"5f769702e6e33127d14aa120",
|
||||
"Part 36"
|
||||
],
|
||||
[
|
||||
"5f3c866d0fc037f7311b4ac8",
|
||||
"5f3c866de7a5b784048f94b1",
|
||||
"Part 37"
|
||||
],
|
||||
[
|
||||
"5f3c866dd0d0275f01d4d847",
|
||||
"5f3c866dbf362f99b9a0c6d0",
|
||||
"Part 38"
|
||||
],
|
||||
[
|
||||
"5f3cade9fa77275d9f4efe62",
|
||||
"5f3c866d0fc037f7311b4ac8",
|
||||
"Part 39"
|
||||
],
|
||||
[
|
||||
"5f3cade94c6576e7f7b7953f",
|
||||
"5f3c866dd0d0275f01d4d847",
|
||||
"Part 40"
|
||||
],
|
||||
[
|
||||
"5f3cade9993019e26313fa8e",
|
||||
"5f3cade9fa77275d9f4efe62",
|
||||
"Part 41"
|
||||
],
|
||||
[
|
||||
"5f47633757ae3469f2d33d2e",
|
||||
"5f3cade94c6576e7f7b7953f",
|
||||
"Part 42"
|
||||
],
|
||||
[
|
||||
"5f3cade99dda4e6071a85dfd",
|
||||
"5f3cade9993019e26313fa8e",
|
||||
"Part 43"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0e0c3feaebcf647ad",
|
||||
"5f7691dafd882520797cd2f0",
|
||||
"Part 44"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0819d4f23ca7285e6",
|
||||
"5f7692f7c5b3ce22a57788b6",
|
||||
"Part 45"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0835da6ccc3ee9958",
|
||||
"5f47633757ae3469f2d33d2e",
|
||||
"Part 46"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0086dc80481f8cb03",
|
||||
"5f3cade99dda4e6071a85dfd",
|
||||
"Part 47"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"5f3ef6e0e0c3feaebcf647ad",
|
||||
"Part 48"
|
||||
],
|
||||
[
|
||||
"5f3ef6e050279c7a4a7101d3",
|
||||
"5f3ef6e0819d4f23ca7285e6",
|
||||
"Part 49"
|
||||
],
|
||||
[
|
||||
"5f3ef6e04559b939080db057",
|
||||
"5f716ad029ee4053c7027a7a",
|
||||
"Part 50"
|
||||
],
|
||||
[
|
||||
"5f3ef6e03d719d5ac4738993",
|
||||
"5f7b87422a560036fd03ccff",
|
||||
"Part 51"
|
||||
],
|
||||
[
|
||||
"5f3ef6e05473f91f948724ab",
|
||||
"5f7b88d37b1f98386f04edc0",
|
||||
"Part 52"
|
||||
],
|
||||
[
|
||||
"5f3ef6e056bdde6ae6892ba2",
|
||||
"5f716bee5838c354c728a7c5",
|
||||
"Part 53"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0e9629bad967cd71e",
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"Part 54"
|
||||
],
|
||||
[
|
||||
"5f3ef6e06d34faac0447fc44",
|
||||
"5f3ef6e0086dc80481f8cb03",
|
||||
"Part 55"
|
||||
],
|
||||
[
|
||||
"5f3ef6e087d56ed3ffdc36be",
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"Part 56"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0f8c230bdd2349716",
|
||||
"5f3ef6e050279c7a4a7101d3",
|
||||
"Part 57"
|
||||
],
|
||||
[
|
||||
"5f3ef6e07276f782bb46b93d",
|
||||
"5f3ef6e04559b939080db057",
|
||||
"Part 58"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0a81099d9a697b550",
|
||||
"5f3ef6e03d719d5ac4738993",
|
||||
"Part 59"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0b431cc215bb16f55",
|
||||
"5f3ef6e05473f91f948724ab",
|
||||
"Part 60"
|
||||
],
|
||||
[
|
||||
"5f3ef6e01f288a026d709587",
|
||||
"5f3ef6e056bdde6ae6892ba2",
|
||||
"Part 61"
|
||||
],
|
||||
[
|
||||
"5f3f26fa39591db45e5cd7a0",
|
||||
"5f3ef6e0e9629bad967cd71e",
|
||||
"Part 62"
|
||||
],
|
||||
[
|
||||
"5f459225127805351a6ad057",
|
||||
"5f3ef6e06d34faac0447fc44",
|
||||
"Part 63"
|
||||
],
|
||||
[
|
||||
"5f459a7ceb8b5c446656d88b",
|
||||
"5f3ef6e087d56ed3ffdc36be",
|
||||
"Part 64"
|
||||
],
|
||||
[
|
||||
"5f459cf202c2a3472fae6a9f",
|
||||
"5f3ef6e0f8c230bdd2349716",
|
||||
"Part 65"
|
||||
],
|
||||
[
|
||||
"5f459fd48bdc98491ca6d1a3",
|
||||
"5f3ef6e07276f782bb46b93d",
|
||||
"Part 66"
|
||||
],
|
||||
[
|
||||
"5f45a05977e2fa49d9119437",
|
||||
"5f3ef6e0a81099d9a697b550",
|
||||
"Part 67"
|
||||
],
|
||||
[
|
||||
"5f45a276c093334f0f6e9df4",
|
||||
"5f3ef6e0b431cc215bb16f55",
|
||||
"Part 68"
|
||||
],
|
||||
[
|
||||
"5f45a5a7c49a8251f0bdb527",
|
||||
"5f3ef6e01f288a026d709587",
|
||||
"Part 69"
|
||||
],
|
||||
[
|
||||
"5f46fc57528aa1c4b5ea7c2e",
|
||||
"5f3f26fa39591db45e5cd7a0",
|
||||
"Part 70"
|
||||
],
|
||||
[
|
||||
"5f4701b942c824109626c3d8",
|
||||
"5f459225127805351a6ad057",
|
||||
"Part 71"
|
||||
],
|
||||
[
|
||||
"5f46ede1ff8fec5ba656b44c",
|
||||
"5f459a7ceb8b5c446656d88b",
|
||||
"Part 72"
|
||||
],
|
||||
[
|
||||
"5f45a66d4a2b0453301e5a26",
|
||||
"5f459cf202c2a3472fae6a9f",
|
||||
"Part 73"
|
||||
],
|
||||
[
|
||||
"5f45b0731d39e15d54df4dfc",
|
||||
"5f459fd48bdc98491ca6d1a3",
|
||||
"Part 74"
|
||||
],
|
||||
[
|
||||
"5f45b25e7ec2405f166b9de1",
|
||||
"5f45a05977e2fa49d9119437",
|
||||
"Part 75"
|
||||
],
|
||||
[
|
||||
"5f45b3c93c027860d9298dbd",
|
||||
"5f45a276c093334f0f6e9df4",
|
||||
"Part 76"
|
||||
],
|
||||
[
|
||||
"5f45b45d099f3e621fbbb256",
|
||||
"5f45a5a7c49a8251f0bdb527",
|
||||
"Part 77"
|
||||
],
|
||||
[
|
||||
"5f45b4c81cea7763550e40df",
|
||||
"5f46fc57528aa1c4b5ea7c2e",
|
||||
"Part 78"
|
||||
],
|
||||
[
|
||||
"5f45b715301bbf667badc04a",
|
||||
"5f4701b942c824109626c3d8",
|
||||
"Part 79"
|
||||
],
|
||||
[
|
||||
"5f46e270702a8456a664f0df",
|
||||
"5f46ede1ff8fec5ba656b44c",
|
||||
"Part 80"
|
||||
],
|
||||
[
|
||||
"5f46e36e745ead58487aabf2",
|
||||
"5f45a66d4a2b0453301e5a26",
|
||||
"Part 81"
|
||||
],
|
||||
[
|
||||
"5f46e7a4750dd05b5a673920",
|
||||
"5f45b0731d39e15d54df4dfc",
|
||||
"Part 82"
|
||||
],
|
||||
[
|
||||
"5f46e8284aae155c83015dee",
|
||||
"5f45b25e7ec2405f166b9de1",
|
||||
"Part 83"
|
||||
],
|
||||
[
|
||||
"5f475bb508746c16c9431d42",
|
||||
"5f45b3c93c027860d9298dbd",
|
||||
"Part 84"
|
||||
],
|
||||
[
|
||||
"5f475e1c7f71a61d913836c6",
|
||||
"5f45b45d099f3e621fbbb256",
|
||||
"Part 85"
|
||||
],
|
||||
[
|
||||
"5f47fe7e31980053a8d4403b",
|
||||
"5f45b4c81cea7763550e40df",
|
||||
"Part 86"
|
||||
],
|
||||
[
|
||||
"5f45b715301bbf667badc04a",
|
||||
"Part 87"
|
||||
],
|
||||
[
|
||||
"5f46e270702a8456a664f0df",
|
||||
"Part 88"
|
||||
],
|
||||
[
|
||||
"5f46e36e745ead58487aabf2",
|
||||
"Part 89"
|
||||
],
|
||||
[
|
||||
"5f46e7a4750dd05b5a673920",
|
||||
"Part 90"
|
||||
],
|
||||
[
|
||||
"5f46e8284aae155c83015dee",
|
||||
"Part 91"
|
||||
],
|
||||
[
|
||||
"5f475bb508746c16c9431d42",
|
||||
"Part 92"
|
||||
],
|
||||
[
|
||||
"5f475e1c7f71a61d913836c6",
|
||||
"Part 93"
|
||||
],
|
||||
[
|
||||
"5f47fe7e31980053a8d4403b",
|
||||
"Part 94"
|
||||
]
|
||||
],
|
||||
"helpRoom": "Help",
|
||||
"fileName": "01-responsive-web-design/basic-css-cafe-menu.json"
|
||||
}
|
||||
}
|
||||
@ -7,16 +7,15 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Without specifying any CSS (Cascasing Style Sheets) styling, an element's content is positioned to the left. To center content of block-level elements (i.e. `h1`, `section`, `p`, etc.) you would put the following between the `style` element's opening and closing tags, where `elementName` is an element name like `h3`.
|
||||
You can add style to an element by specifying it in the `style` element and setting a property for it like this:
|
||||
|
||||
```css
|
||||
elementName {
|
||||
text-align: center;
|
||||
element {
|
||||
property: value;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Center the menu's `h1` element by using the syntax shown above.
|
||||
Center your `h1` element by setting its `text-align` property to the value `center`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,7 +7,13 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You currently have three type selectors with the exact same styling. To reduce the amount of CSS, you can create a single type selector by specifying all the element names by commas.
|
||||
You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this:
|
||||
|
||||
```css
|
||||
selector1, selector2 {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
Use a single type selector to center the `h1`, `h2` and `p` elements at the same time.
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
So far you have styled three elements by writing CSS inside the `style` element of the `index.html` file. Since there will many more styles, you can write CSS in a separte file (`styles.css`) and then link to it.
|
||||
|
||||
Get started by taking the content of the `index.html` file's `style` element (exclude the opening and closing tags) and rewrite it in the `styles.css`.
|
||||
You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now you need to link the `styles.css` file content, so your page will reflect the CSS styles defined in it.
|
||||
|
||||
Nest a `link` element within the `style` element. `link` elements are used for other purposes besides CSS, so you will also need to add an `rel` attribute with the value `stylesheet` and a `type` attribute with the value `text/css`.
|
||||
Now you need to link the `styles.css` file so the styles will be applied again. Next a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can change the entire background color of the page to brown by using a `body` type selector and specifying the value `brown` for the `background-color` property. As you have already seen, selector properties and their values have a colon (`:`) between them.
|
||||
|
||||
Add a new selector to the `styles.css` file to change the color of the entire page to `brown`.
|
||||
The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
That brown background makes it hard to read the text on the page.
|
||||
|
||||
Change the `body` element's background color to be `burlywood` to have some color but still be able to read the text.
|
||||
That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The menu takes up the full width of the page. You can use a `div` element to hold all the elements located in the `body` element and then apply some special styling to it. The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far.
|
||||
|
||||
Start by adding a `div` element inside the `body` element and then move all the elements located in the `body` element inside it.
|
||||
The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The goal now is to make the `div` element not take the entire width of the page. The CSS `width` property is perfect for this.
|
||||
|
||||
Create a `div` type selector in `styles.css` and give it a `width` property with value of `300px`.
|
||||
The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,13 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Currently the entire background color of the page is `burlywood`. So you can see the effect of only styling `div` element, you will need to first temporarily comment out the line that defines the `background-color` for the `body` element.
|
||||
Comments in CSS look like this:
|
||||
|
||||
Add `/*` before the line and `*/` after the line to make the line a comment instead of CSS code which will make the background color of the page white again.
|
||||
```css
|
||||
/* comment here */
|
||||
```
|
||||
|
||||
In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
By now it is easy to see all the text is centered inside the `div` element. The white space on the top and left sides of the `div` element will be dealt with in a later step.
|
||||
|
||||
Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, so that the element's width is 80% of the `body` element's width.
|
||||
Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it is 80% the width of its parent element (`body`).
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Next, you need to center the `div` element horizontally. This is accomplised by adding both a `margin-left` and `margin-right` property to the it and setting the value of both `auto`. You can think of a margin as invsible space around an element.
|
||||
|
||||
Using these margin properties, center the `div` element within the `body` element.
|
||||
Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,15 +7,15 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front it. For example, if you wanted to create a class selector named `container` that makes the width of a `div` element `700px`, you would write:
|
||||
So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front it, like this:
|
||||
|
||||
```css
|
||||
.container {
|
||||
width: 700px;
|
||||
.class-name {
|
||||
styles
|
||||
}
|
||||
```
|
||||
|
||||
Turn the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
|
||||
Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now that you have your coffee background, it would be a good time to add some coffee flavors and prices under the `Coffees` heading. To do this, you are going to add an `article` element that will contain a flavor and price.
|
||||
|
||||
Add an `article` element under the `Coffees` heading.
|
||||
It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffees` heading. It will contain a flavor and price of each coffee you currently offer.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The `article` element you added is commonly found inside `section` elements when you plan on having other informational elements that are grouped.
|
||||
|
||||
Go ahead nested two `p` elements inside your `article` element. The text for the first `p` element should be `French Vanilla` and the text for the second `p` element should be `3.00`.
|
||||
`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`.
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ challengeType: 0
|
||||
|
||||
The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right.
|
||||
|
||||
To style the flavor `p` element different from the price `p` element, first create two separate class selectors named `flavor` and `price` in `styles.css`. Then, align the text for the `flavor` class to the left and the `price` class to the right.
|
||||
Add the class name `flavor` to the `French Vanilla` `p` element.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,8 +49,10 @@ tests:
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article>
|
||||
--fcc-editable-region--
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
@ -94,11 +96,6 @@ h1, h2, p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3c866d697fb245bc801648
|
||||
id: 5f769541be494f25449b292f
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now that you have defined the classes, apply them to the first `article` element's `p` elements (representing `French Vanilla`).
|
||||
Using your new `flavor` class as a selector, set the `text-align` property's value to `left`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -46,12 +46,10 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>French Vanilla</p>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
@ -95,14 +93,9 @@ h1, h2, p {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
id: 5f76967fad478126d6552b0d
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
That is kind of what you want, but now it would be nice if the flavor and price were on the same line. Remember that `p` elements are <dfn>block-level</dfn> elements, so they take up the entire width of the parent element.
|
||||
|
||||
To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Start by adding a `class` attribute with the value `item` to each `article` element.
|
||||
Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text.
|
||||
|
||||
</section>
|
||||
|
||||
@ -48,10 +46,11 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
@ -69,7 +68,6 @@ tests:
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -100,11 +98,6 @@ h1, h2, p {
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
id: 5f769702e6e33127d14aa120
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,13 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The `p` elements are nested in `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` by defining a selector as:
|
||||
|
||||
```css
|
||||
.item p { }
|
||||
```
|
||||
|
||||
Define a new style using the above selector. Add a `display` property with the value `inline-block` so the `p` elements behave more like `inline` elements instead of `block-line` elements.
|
||||
Now align the text to the `right` for the elements with the `price` class.
|
||||
|
||||
</section>
|
||||
|
||||
@ -52,23 +46,23 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
@ -99,18 +93,13 @@ h1, h2, p {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
|
||||
That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are <dfn>block-level</dfn> elements, so they take up the entire width of their parent element.
|
||||
|
||||
To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffees` heading.
|
||||
|
||||
</section>
|
||||
|
||||
@ -45,24 +47,26 @@ tests:
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
@ -93,11 +97,6 @@ h1, h2, p {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
@ -105,7 +104,7 @@ h1, h2, p {
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,13 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Well that did not work. The reason is, by styling the `p` elements as `inline-block`, placing them on a separate lines in the code, there is an extra space that adds to the right of the first `p` element, so the second one shifts to the next line. There are a couple of ways to handle this. One way is to make each's width a little less than `50%`.
|
||||
The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this:
|
||||
|
||||
Change the `width` value to `49%` for each class to see what happens.
|
||||
```css
|
||||
.item p { }
|
||||
```
|
||||
|
||||
Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements.
|
||||
|
||||
</section>
|
||||
|
||||
@ -52,19 +56,19 @@ tests:
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
@ -95,21 +99,18 @@ h1, h2, p {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
That worked, but there is still a little space on the right of the price.
|
||||
|
||||
You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them.
|
||||
That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,24 +47,22 @@ tests:
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
@ -101,15 +97,15 @@ h1, h2, p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again.
|
||||
Well that did not work. Styling the `p` elements as `inline-block` and placing them on a separate lines in the code, creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p`'s width a little less than `50%`.
|
||||
|
||||
Change the `width` value to `49%` for each class to see what happens.
|
||||
|
||||
</section>
|
||||
|
||||
@ -47,21 +49,22 @@ tests:
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
@ -99,12 +102,12 @@ h1, h2, p {
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now that you know it works, change the other `article` elements so that the `p` elements are on the same line with no space between them. You also need to apply the applicable styles `flavor` and `price` to the corresponding `p` elements.
|
||||
That worked, but there is still a little space on the right of the price.
|
||||
|
||||
You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them.
|
||||
|
||||
</section>
|
||||
|
||||
@ -47,26 +49,27 @@ tests:
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -100,12 +103,12 @@ h1, h2, p {
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
width: 49%;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f47633757ae3469f2d33d2e
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space.
|
||||
|
||||
Since you know the prices on the right have significantly less numbe of characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`.
|
||||
Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again.
|
||||
|
||||
</section>
|
||||
|
||||
@ -51,17 +49,21 @@ tests:
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
@ -97,12 +99,12 @@ h1, h2, p {
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
width: 49%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe.
|
||||
Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements.
|
||||
|
||||
</section>
|
||||
|
||||
@ -44,26 +44,30 @@ tests:
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
@ -96,12 +100,12 @@ h1, h2, p {
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0e0c3feaebcf647ad
|
||||
id: 5f7691dafd882520797cd2f0
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Add an `h2` element in the new section add give it the text `Desserts`.
|
||||
Next, position the other `p` elements to be on the same line with no space between them.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,23 +49,25 @@ tests:
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
<p>Carmel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
@ -98,12 +100,12 @@ h1, h2, p {
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
id: 5f7692f7c5b3ce22a57788b6
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now you need to add four `article` elements below the `h2`. Each should have a `class` attribute with the value `item`.
|
||||
To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,22 +49,19 @@ tests:
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p>Carmel Macchiato</p><p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p><p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p><p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p><p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
@ -99,12 +96,12 @@ h1, h2, p {
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0835da6ccc3ee9958
|
||||
id: 5f47633757ae3469f2d33d2e
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,14 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Within each of the four `article` elements, add the following desserts and prices using an `article` element with two nested `p` elements inside each. Similar to what you did with the coffees, the first `p` element's text should contain the dessert name and the second `p` element's text should contain the price.
|
||||
If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space.
|
||||
|
||||
```bash
|
||||
Donut 1.50
|
||||
Cherry Pie 2.75
|
||||
Cheesecake 3.00
|
||||
Cinammon Roll
|
||||
```
|
||||
Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -69,19 +64,6 @@ tests:
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
</article>
|
||||
<article class="item">
|
||||
</article>
|
||||
<article class="item">
|
||||
</article>
|
||||
<article class="item">
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
@ -112,15 +94,17 @@ h1, h2, p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0086dc80481f8cb03
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it.
|
||||
|
||||
Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
|
||||
You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe.
|
||||
|
||||
</section>
|
||||
|
||||
@ -46,6 +44,7 @@ tests:
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
@ -64,21 +63,7 @@ tests:
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
@ -109,12 +94,10 @@ h1, h2, p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
id: 5f3ef6e0e0c3feaebcf647ad
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can give your menu some space between the content and the sides with various `padding` properties.
|
||||
|
||||
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
|
||||
Add an `h2` element in the new section add give it the text `Desserts`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -64,21 +62,10 @@ tests:
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
@ -98,20 +85,18 @@ h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
|
||||
Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -63,19 +63,9 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -96,22 +86,18 @@ h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e04559b939080db057
|
||||
id: 5f716ad029ee4053c7027a7a
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Since all 4 sides of the menu have the same internal spacing, go ahread and delete the four properites and use a single `padding` property with the value `20px`.
|
||||
Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them.
|
||||
|
||||
</section>
|
||||
|
||||
@ -64,18 +64,10 @@ tests:
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -96,24 +88,18 @@ h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
id: 5f7b87422a560036fd03ccff
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
|
||||
|
||||
Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
|
||||
For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute.
|
||||
|
||||
</section>
|
||||
|
||||
@ -67,16 +65,9 @@ tests:
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
--fcc-editable-region--
|
||||
<p>Donut</p><p>1.50</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
@ -98,21 +89,18 @@ h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
id: 5f7b88d37b1f98386f04edc0
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it.
|
||||
Something does not look right. You added the correct `class` attribute value to the `p` element with `Donunt` as its text, but you have not defined a selector for it.
|
||||
|
||||
Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
|
||||
Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -69,15 +69,6 @@ tests:
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -90,11 +81,9 @@ tests:
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
@ -105,18 +94,18 @@ h1, h2, p {
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
id: 5f716bee5838c354c728a7c5
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,13 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector.
|
||||
Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes.
|
||||
|
||||
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
|
||||
```bash
|
||||
Cherry Pie 2.75
|
||||
Cheesecake 3.00
|
||||
Cinammon Roll 2.50
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -66,18 +70,11 @@ tests:
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@ -92,7 +89,6 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
@ -104,14 +100,8 @@ h1, h2, p {
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can add a <dfn>fallback</dfn> value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it.
|
||||
You can give your menu some space between the content and the sides with various `padding` properties.
|
||||
|
||||
Add the fallback font `serif` after the `Impact` font.
|
||||
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -92,25 +92,18 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
id: 5f3ef6e0086dc80481f8cb03
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
|
||||
Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it.
|
||||
|
||||
Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -90,13 +92,8 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
@ -106,22 +103,18 @@ h1, h2, p {
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now apply the `established` class to the `Est. 2020` text.
|
||||
You can give your menu some space between the content and the sides with various `padding` properties.
|
||||
|
||||
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -39,12 +41,10 @@ tests:
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -92,29 +92,20 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The `h1` and `h2` elements' text are set by default values of the user's browser.
|
||||
|
||||
Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
|
||||
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
|
||||
|
||||
</section>
|
||||
|
||||
@ -43,7 +41,7 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
@ -92,33 +90,22 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
id: 5f3ef6e04559b939080db057
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Add a `footer` element below the `main` element, where you can some additional information.
|
||||
Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -41,9 +41,8 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -79,7 +78,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -92,37 +90,24 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`.
|
||||
The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
|
||||
|
||||
Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
|
||||
|
||||
</section>
|
||||
|
||||
@ -26,7 +28,6 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
@ -42,7 +43,7 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
@ -79,10 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -95,37 +92,21 @@ tests:
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
title: Part 60
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`.
|
||||
You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it.
|
||||
|
||||
Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
|
||||
|
||||
</section>
|
||||
|
||||
@ -41,7 +43,7 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
@ -78,13 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -95,22 +90,11 @@ tests:
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
@ -125,10 +109,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can use an `hr` element to display a divider between sections of different content.
|
||||
It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector.
|
||||
|
||||
First, add an `hr` element between the first `header` element and the `main` element.
|
||||
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
|
||||
|
||||
</section>
|
||||
|
||||
@ -43,7 +43,7 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
@ -80,12 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -101,18 +95,6 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
@ -126,9 +108,9 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,10 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The default properties of an `hr` element will make it appear as a thin light grey line. You can change the heighth of the line by specifying a value for the `height` property.
|
||||
|
||||
Change the height the `hr` element to be `3px`.
|
||||
You can add a <dfn>fallback</dfn> value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it.
|
||||
|
||||
Add the fallback font `serif` after the `Impact` font.
|
||||
|
||||
</section>
|
||||
|
||||
@ -44,9 +43,8 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -82,12 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -103,18 +95,6 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
@ -129,12 +109,10 @@ h1, h2, p {
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
font-family: Impact;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459225127805351a6ad057
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Change the background color of the `hr` elemnent to be `brown` to make it match the color of the coffee beans.
|
||||
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -41,9 +41,8 @@ tests:
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -79,12 +78,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -100,17 +93,9 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
@ -125,12 +110,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. Each side of an element can have a different color or they can all be the same.
|
||||
|
||||
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
|
||||
Now apply the `established` class to the `Est. 2020` text.
|
||||
|
||||
</section>
|
||||
|
||||
@ -41,11 +39,12 @@ tests:
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -81,12 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -102,14 +95,6 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
@ -127,13 +112,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
title: Part 65
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`).
|
||||
The `h1` and `h2` elements' text are set by default values of the user's browser.
|
||||
|
||||
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
|
||||
Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -45,7 +45,6 @@ tests:
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -81,12 +80,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -102,13 +95,9 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
@ -127,14 +116,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
title: Part 66
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Go ahead and add another `hr` element between the `main` element and the `footer` element.
|
||||
Add a `footer` element below the `main` element, where you can some additional information.
|
||||
|
||||
</section>
|
||||
|
||||
@ -43,7 +43,6 @@ tests:
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
@ -80,12 +79,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
@ -127,12 +120,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
|
||||
Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -26,6 +26,7 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
@ -43,7 +44,6 @@ tests:
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -79,13 +79,10 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -96,12 +93,10 @@ tests:
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
@ -128,12 +123,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
title: Part 68
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Focusing on the menu items and prices, there is a fairly large gap between each line.
|
||||
|
||||
Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
|
||||
Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -45,7 +43,6 @@ tests:
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -81,12 +78,12 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
@ -101,7 +98,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -129,13 +125,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
@ -153,7 +142,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
title: Part 69
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Using the same style selector in the previous step, make the font size of the items and prices by using a value of `18px`.
|
||||
You can use an `hr` element to display a divider between sections of different content.
|
||||
|
||||
First, add an `hr` element between the first `header` element and the `main` element.
|
||||
|
||||
</section>
|
||||
|
||||
@ -39,11 +41,11 @@ tests:
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -79,7 +81,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
--editable-region-marker--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -99,7 +101,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -127,23 +128,13 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
title: Part 70
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,10 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinaommon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading.
|
||||
The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property.
|
||||
|
||||
Change the height the `hr` element to be `3px`.
|
||||
|
||||
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,7 +82,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -101,7 +101,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -129,12 +128,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
@ -145,9 +138,6 @@ h1, h2 {
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f4701b942c824109626c3d8
|
||||
id: 5f459225127805351a6ad057
|
||||
title: Part 71
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now add the `bottom-line` class to the second `hr` element so the styling is applied.
|
||||
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
|
||||
|
||||
</section>
|
||||
|
||||
@ -79,9 +79,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -101,7 +98,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -129,15 +125,11 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
height: 3px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
@ -145,9 +137,6 @@ h1, h2 {
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
title: Part 72
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`.
|
||||
Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. Each side of an element can have a different color or they can all be the same.
|
||||
|
||||
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
|
||||
|
||||
</section>
|
||||
|
||||
@ -79,7 +81,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
@ -98,7 +100,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -126,15 +127,12 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 2px;
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
@ -142,9 +140,6 @@ h1, h2 {
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -156,10 +151,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
title: Part 73
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
|
||||
Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`).
|
||||
|
||||
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -79,7 +81,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -99,7 +100,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -127,15 +127,13 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 2px;
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
@ -143,9 +141,6 @@ h1, h2 {
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -157,12 +152,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
title: Part 74
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple.
|
||||
|
||||
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
|
||||
Go ahead and add another `hr` element between the `main` element and the `footer` element.
|
||||
|
||||
</section>
|
||||
|
||||
@ -46,6 +44,7 @@ tests:
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -81,13 +80,13 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -101,7 +100,6 @@ tests:
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -135,19 +133,12 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -159,15 +150,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
title: Part 75
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue }`
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
|
||||
To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,7 +79,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -98,11 +96,12 @@ tests:
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
@ -135,19 +134,12 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -159,20 +151,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
title: Part 76
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue }`
|
||||
Focusing on the menu items and prices, there is a fairly large gap between each line.
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
|
||||
Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,7 +81,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -135,19 +135,13 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -159,23 +153,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
title: Part 77
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,10 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue }`
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
|
||||
|
||||
Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -82,7 +79,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -136,20 +133,17 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
@ -160,28 +154,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
title: Part 78
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
|
||||
Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading.
|
||||
|
||||
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
|
||||
|
||||
</section>
|
||||
|
||||
@ -79,7 +81,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -133,9 +135,9 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
@ -157,30 +159,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b715301bbf667badc04a
|
||||
id: 5f4701b942c824109626c3d8
|
||||
title: Part 79
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
|
||||
|
||||
Change the top margin of the `h1` element to `0` to remove all the top margin.
|
||||
Now add the `bottom-line` class to the second `hr` element so the styling is applied.
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,7 +79,9 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -104,11 +104,9 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
@ -161,28 +159,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
title: Part 80
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`;
|
||||
Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -80,7 +80,6 @@ tests:
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
@ -102,12 +101,9 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
@ -148,7 +144,7 @@ h1, h2 {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
@ -161,27 +157,9 @@ h1, h2 {
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
--fcc-editable-region--
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
title: Part 81
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
|
||||
|
||||
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
|
||||
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
|
||||
|
||||
</section>
|
||||
|
||||
@ -106,8 +104,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -164,29 +160,9 @@ h1, h2 {
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
title: Part 82
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now apply the `address` class to the `p` element containing the address.
|
||||
The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple.
|
||||
|
||||
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
|
||||
|
||||
</section>
|
||||
|
||||
@ -80,14 +82,12 @@ tests:
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -106,8 +106,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -167,26 +165,9 @@ h1, h2 {
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46e8284aae155c83015dee
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
title: Part 83
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The menu looks good, but other than the coffee beans background image, it is mainly just text.
|
||||
You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`.
|
||||
|
||||
Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`.
|
||||
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
|
||||
|
||||
</section>
|
||||
|
||||
@ -48,9 +48,7 @@ tests:
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffees</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
@ -88,7 +86,7 @@ tests:
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
@ -108,8 +106,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -170,25 +166,13 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f475bb508746c16c9431d42
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
title: Part 84
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
|
||||
You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`.
|
||||
|
||||
To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
|
||||
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,7 +49,6 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
@ -87,7 +86,7 @@ tests:
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
@ -107,8 +106,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -132,10 +129,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
@ -173,25 +166,17 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
title: Part 85
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,10 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`.
|
||||
You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`.
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@ -47,7 +50,6 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
@ -65,9 +67,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
@ -87,7 +87,7 @@ tests:
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
@ -107,8 +107,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -132,12 +130,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
@ -166,7 +158,7 @@ h1, h2 {
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
@ -175,25 +167,21 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f47fe7e31980053a8d4403b
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
title: Part 86
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
|
||||
|
||||
There is an easier way, simiply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
|
||||
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,7 +47,6 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
@ -68,7 +65,6 @@ tests:
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
@ -88,7 +84,7 @@ tests:
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
@ -108,8 +104,6 @@ body {
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -133,187 +127,6 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
@ -342,7 +155,7 @@ h1, h2 {
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
@ -351,16 +164,13 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: black;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@ -368,8 +178,11 @@ a:hover {
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 5f45b715301bbf667badc04a
|
||||
title: Part 87
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
|
||||
|
||||
Change the top margin of the `h1` element to `0` to remove all the top margin.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
title: Part 88
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
title: Part 89
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
|
||||
|
||||
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
title: Part 90
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now apply the `address` class to the `p` element containing the address.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 5f46e8284aae155c83015dee
|
||||
title: Part 91
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The menu looks good, but other than the coffee beans background image, it is mainly just text.
|
||||
|
||||
Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffees</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 5f475bb508746c16c9431d42
|
||||
title: Part 92
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
|
||||
|
||||
To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
title: Part 93
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,376 @@
|
||||
---
|
||||
id: 5f47fe7e31980053a8d4403b
|
||||
title: Part 94
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
|
||||
|
||||
There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Test 1
|
||||
testString: ''
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Camper Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div id='css-seed'>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://tinyurl.com/coffee-beans-fcc);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user