fix(learn): Remove isHidden from frontmatter for steps 87-94 of Cafe Menu project (#39974)
* fix: remove isHidden from frontmatter * fix: corrected ERM name * fix: removed duplicate step (54)
This commit is contained in:
Randell Dawson
GitHub
@ -223,168 +223,164 @@
|
||||
"Part 53"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"5f3ef6e0086dc80481f8cb03",
|
||||
"Part 54"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0086dc80481f8cb03",
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"Part 55"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0eaa7da26e3d34d78",
|
||||
"5f3ef6e050279c7a4a7101d3",
|
||||
"Part 56"
|
||||
],
|
||||
[
|
||||
"5f3ef6e050279c7a4a7101d3",
|
||||
"5f3ef6e04559b939080db057",
|
||||
"Part 57"
|
||||
],
|
||||
[
|
||||
"5f3ef6e04559b939080db057",
|
||||
"5f3ef6e03d719d5ac4738993",
|
||||
"Part 58"
|
||||
],
|
||||
[
|
||||
"5f3ef6e03d719d5ac4738993",
|
||||
"5f3ef6e05473f91f948724ab",
|
||||
"Part 59"
|
||||
],
|
||||
[
|
||||
"5f3ef6e05473f91f948724ab",
|
||||
"5f3ef6e056bdde6ae6892ba2",
|
||||
"Part 60"
|
||||
],
|
||||
[
|
||||
"5f3ef6e056bdde6ae6892ba2",
|
||||
"5f3ef6e0e9629bad967cd71e",
|
||||
"Part 61"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0e9629bad967cd71e",
|
||||
"5f3ef6e06d34faac0447fc44",
|
||||
"Part 62"
|
||||
],
|
||||
[
|
||||
"5f3ef6e06d34faac0447fc44",
|
||||
"5f3ef6e087d56ed3ffdc36be",
|
||||
"Part 63"
|
||||
],
|
||||
[
|
||||
"5f3ef6e087d56ed3ffdc36be",
|
||||
"5f3ef6e0f8c230bdd2349716",
|
||||
"Part 64"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0f8c230bdd2349716",
|
||||
"5f3ef6e07276f782bb46b93d",
|
||||
"Part 65"
|
||||
],
|
||||
[
|
||||
"5f3ef6e07276f782bb46b93d",
|
||||
"5f3ef6e0a81099d9a697b550",
|
||||
"Part 66"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0a81099d9a697b550",
|
||||
"5f3ef6e0b431cc215bb16f55",
|
||||
"Part 67"
|
||||
],
|
||||
[
|
||||
"5f3ef6e0b431cc215bb16f55",
|
||||
"5f3ef6e01f288a026d709587",
|
||||
"Part 68"
|
||||
],
|
||||
[
|
||||
"5f3ef6e01f288a026d709587",
|
||||
"5f3f26fa39591db45e5cd7a0",
|
||||
"Part 69"
|
||||
],
|
||||
[
|
||||
"5f3f26fa39591db45e5cd7a0",
|
||||
"5f459225127805351a6ad057",
|
||||
"Part 70"
|
||||
],
|
||||
[
|
||||
"5f459225127805351a6ad057",
|
||||
"5f459a7ceb8b5c446656d88b",
|
||||
"Part 71"
|
||||
],
|
||||
[
|
||||
"5f459a7ceb8b5c446656d88b",
|
||||
"5f459cf202c2a3472fae6a9f",
|
||||
"Part 72"
|
||||
],
|
||||
[
|
||||
"5f459cf202c2a3472fae6a9f",
|
||||
"5f459fd48bdc98491ca6d1a3",
|
||||
"Part 73"
|
||||
],
|
||||
[
|
||||
"5f459fd48bdc98491ca6d1a3",
|
||||
"5f45a05977e2fa49d9119437",
|
||||
"Part 74"
|
||||
],
|
||||
[
|
||||
"5f45a05977e2fa49d9119437",
|
||||
"5f45a276c093334f0f6e9df4",
|
||||
"Part 75"
|
||||
],
|
||||
[
|
||||
"5f45a276c093334f0f6e9df4",
|
||||
"5f45a5a7c49a8251f0bdb527",
|
||||
"Part 76"
|
||||
],
|
||||
[
|
||||
"5f45a5a7c49a8251f0bdb527",
|
||||
"5f46fc57528aa1c4b5ea7c2e",
|
||||
"Part 77"
|
||||
],
|
||||
[
|
||||
"5f46fc57528aa1c4b5ea7c2e",
|
||||
"5f4701b942c824109626c3d8",
|
||||
"Part 78"
|
||||
],
|
||||
[
|
||||
"5f4701b942c824109626c3d8",
|
||||
"5f46ede1ff8fec5ba656b44c",
|
||||
"Part 79"
|
||||
],
|
||||
[
|
||||
"5f46ede1ff8fec5ba656b44c",
|
||||
"5f45a66d4a2b0453301e5a26",
|
||||
"Part 80"
|
||||
],
|
||||
[
|
||||
"5f45a66d4a2b0453301e5a26",
|
||||
"5f45b0731d39e15d54df4dfc",
|
||||
"Part 81"
|
||||
],
|
||||
[
|
||||
"5f45b0731d39e15d54df4dfc",
|
||||
"5f45b25e7ec2405f166b9de1",
|
||||
"Part 82"
|
||||
],
|
||||
[
|
||||
"5f45b25e7ec2405f166b9de1",
|
||||
"5f45b3c93c027860d9298dbd",
|
||||
"Part 83"
|
||||
],
|
||||
[
|
||||
"5f45b3c93c027860d9298dbd",
|
||||
"5f45b45d099f3e621fbbb256",
|
||||
"Part 84"
|
||||
],
|
||||
[
|
||||
"5f45b45d099f3e621fbbb256",
|
||||
"5f45b4c81cea7763550e40df",
|
||||
"Part 85"
|
||||
],
|
||||
[
|
||||
"5f45b4c81cea7763550e40df",
|
||||
"5f45b715301bbf667badc04a",
|
||||
"Part 86"
|
||||
],
|
||||
[
|
||||
"5f45b715301bbf667badc04a",
|
||||
"5f46e270702a8456a664f0df",
|
||||
"Part 87"
|
||||
],
|
||||
[
|
||||
"5f46e270702a8456a664f0df",
|
||||
"5f46e36e745ead58487aabf2",
|
||||
"Part 88"
|
||||
],
|
||||
[
|
||||
"5f46e36e745ead58487aabf2",
|
||||
"5f46e7a4750dd05b5a673920",
|
||||
"Part 89"
|
||||
],
|
||||
[
|
||||
"5f46e7a4750dd05b5a673920",
|
||||
"5f46e8284aae155c83015dee",
|
||||
"Part 90"
|
||||
],
|
||||
[
|
||||
"5f46e8284aae155c83015dee",
|
||||
"5f475bb508746c16c9431d42",
|
||||
"Part 91"
|
||||
],
|
||||
[
|
||||
"5f475bb508746c16c9431d42",
|
||||
"5f475e1c7f71a61d913836c6",
|
||||
"Part 92"
|
||||
],
|
||||
[
|
||||
"5f475e1c7f71a61d913836c6",
|
||||
"Part 93"
|
||||
],
|
||||
[
|
||||
"5f47fe7e31980053a8d4403b",
|
||||
"Part 94"
|
||||
"Part 93"
|
||||
]
|
||||
],
|
||||
"helpRoom": "Help",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
id: 5f3ef6e0086dc80481f8cb03
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can give your menu some space between the content and the sides with various `padding` properties.
|
||||
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.
|
||||
|
||||
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
|
||||
Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -98,23 +98,23 @@ 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 {
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0086dc80481f8cb03
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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.
|
||||
You can give your menu some space between the content and the sides with various `padding` properties.
|
||||
|
||||
Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
|
||||
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -98,23 +98,23 @@ 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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
title: Part 56
|
||||
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`.
|
||||
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
|
||||
|
||||
</section>
|
||||
|
||||
@ -104,6 +102,8 @@ h1, h2, p {
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
id: 5f3ef6e04559b939080db057
|
||||
title: Part 57
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -104,6 +104,8 @@ h1, h2, p {
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e04559b939080db057
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
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`.
|
||||
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>
|
||||
|
||||
@ -102,10 +104,7 @@ h1, h2, p {
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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.
|
||||
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.
|
||||
|
||||
Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
|
||||
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>
|
||||
|
||||
@ -90,23 +90,24 @@ 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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
title: Part 60
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
|
||||
|
||||
</section>
|
||||
|
||||
@ -90,11 +90,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, h2, p {
|
||||
text-align: center;
|
||||
@ -109,6 +108,10 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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.
|
||||
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.
|
||||
|
||||
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
|
||||
Add the fallback font `serif` after the `Impact` font.
|
||||
|
||||
</section>
|
||||
|
||||
@ -109,7 +109,9 @@ h1, h2, p {
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ 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.
|
||||
|
||||
Add the fallback font `serif` after the `Impact` font.
|
||||
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -95,6 +93,10 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
@ -108,11 +110,9 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact;
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ 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`.
|
||||
Now apply the `established` class to the `Est. 2020` text.
|
||||
|
||||
</section>
|
||||
|
||||
@ -39,10 +39,12 @@ 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>
|
||||
@ -93,9 +95,9 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now apply the `established` class to the `Est. 2020` text.
|
||||
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`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -39,12 +41,10 @@ tests:
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -95,6 +95,10 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
title: Part 65
|
||||
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`.
|
||||
Add a `footer` element below the `main` element, where you can some additional information.
|
||||
|
||||
</section>
|
||||
|
||||
@ -45,6 +43,7 @@ tests:
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -80,6 +79,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -95,9 +95,13 @@ body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
title: Part 66
|
||||
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.
|
||||
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>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -80,6 +80,9 @@ tests:
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ 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`.
|
||||
Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -26,7 +26,6 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
@ -79,10 +78,13 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
title: Part 68
|
||||
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 freeCodeCamp Drive`.
|
||||
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,6 +41,7 @@ tests:
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
@ -78,12 +81,12 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
title: Part 69
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,10 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
You can use an `hr` element to display a divider between sections of different content.
|
||||
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`.
|
||||
|
||||
First, add an `hr` element between the first `header` element and the `main` element.
|
||||
|
||||
</section>
|
||||
|
||||
@ -41,11 +42,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>
|
||||
@ -81,7 +82,6 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--editable-region-marker--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -128,6 +128,10 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
id: 5f459225127805351a6ad057
|
||||
title: Part 70
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,10 +7,7 @@ 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 height of the line by specifying a value for the `height` property.
|
||||
|
||||
Change the height the `hr` element to be `3px`.
|
||||
|
||||
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
|
||||
|
||||
</section>
|
||||
|
||||
@ -129,7 +126,9 @@ h1, h2, p {
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 3px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459225127805351a6ad057
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
title: Part 71
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
|
||||
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>
|
||||
|
||||
@ -128,6 +130,7 @@ h1, h2, p {
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
title: Part 72
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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.
|
||||
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`).
|
||||
|
||||
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
|
||||
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -131,6 +131,7 @@ h1, h2, p {
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
title: Part 73
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ 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`).
|
||||
|
||||
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
|
||||
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>
|
||||
@ -87,6 +86,7 @@ tests:
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
@ -127,13 +127,11 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
title: Part 74
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -44,7 +44,6 @@ tests:
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffees</h2>
|
||||
@ -80,13 +79,13 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<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>
|
||||
@ -97,10 +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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
title: Part 75
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,9 @@ 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.
|
||||
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`.
|
||||
|
||||
</section>
|
||||
|
||||
@ -96,12 +98,11 @@ 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;
|
||||
@ -134,6 +135,7 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
@ -151,6 +153,7 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
title: Part 76
|
||||
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`.
|
||||
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>
|
||||
|
||||
@ -135,14 +133,17 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
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;
|
||||
@ -153,7 +154,6 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
title: Part 77
|
||||
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 larger by using a value of `18px`.
|
||||
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>
|
||||
|
||||
@ -133,17 +135,20 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
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;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
id: 5f4701b942c824109626c3d8
|
||||
title: Part 78
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,7 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
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.
|
||||
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>
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
@ -135,9 +135,9 @@ hr {
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f4701b942c824109626c3d8
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
title: Part 79
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -79,10 +79,7 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<hr class="bottom-line">
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
@ -159,6 +156,10 @@ h1, h2 {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
title: Part 80
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,7 +7,7 @@ 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`.
|
||||
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
|
||||
|
||||
</section>
|
||||
|
||||
@ -80,6 +80,7 @@ tests:
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
@ -157,6 +158,8 @@ h1, h2 {
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
title: Part 81
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -160,6 +162,9 @@ h1, h2 {
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
title: Part 82
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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.
|
||||
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; }`.
|
||||
|
||||
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.
|
||||
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
|
||||
|
||||
</section>
|
||||
|
||||
@ -165,6 +165,11 @@ h1, h2 {
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
title: Part 83
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,9 @@ 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; }`.
|
||||
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; }`.
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
|
||||
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -170,6 +170,10 @@ a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
title: Part 84
|
||||
challengeType: 0
|
||||
---
|
||||
@ -7,9 +7,10 @@ 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; }`.
|
||||
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.
|
||||
|
||||
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
|
||||
|
||||
</section>
|
||||
|
||||
@ -174,6 +175,10 @@ a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
title: Part 85
|
||||
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.
|
||||
|
||||
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>
|
||||
|
||||
@ -171,6 +168,7 @@ a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
@ -179,8 +177,9 @@ a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a:active {
|
||||
color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
id: 5f45b715301bbf667badc04a
|
||||
title: Part 86
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -102,9 +104,11 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
@ -168,9 +172,8 @@ a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: grey;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@ -178,9 +181,8 @@ a:hover {
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: white;
|
||||
color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
---
|
||||
id: 5f45b715301bbf667badc04a
|
||||
id: 5f46e270702a8456a664f0df
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -108,6 +105,7 @@ body {
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
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`.
|
||||
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>
|
||||
|
||||
@ -103,12 +104,11 @@ body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
@ -168,6 +168,10 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
---
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
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.
|
||||
Now apply the `address` class to the `p` element containing the address.
|
||||
|
||||
</section>
|
||||
|
||||
@ -83,12 +80,14 @@ 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>
|
||||
@ -169,9 +168,9 @@ footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
id: 5f46e8284aae155c83015dee
|
||||
title: Part 90
|
||||
challengeType: 0
|
||||
isHidden: true
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
|
||||
Now apply the `address` class to the `p` element containing the address.
|
||||
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>
|
||||
|
||||
@ -47,7 +48,9 @@ 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>
|
||||
@ -81,14 +84,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>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
<html>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
---
|
||||
id: 5f46e8284aae155c83015dee
|
||||
id: 5f475bb508746c16c9431d42
|
||||
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.
|
||||
The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
|
||||
|
||||
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`.
|
||||
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>
|
||||
|
||||
@ -49,9 +48,8 @@ tests:
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffees</h2>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
@ -134,6 +132,10 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
---
|
||||
id: 5f475bb508746c16c9431d42
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
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.
|
||||
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>
|
||||
|
||||
@ -68,7 +65,9 @@ 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>
|
||||
@ -133,9 +132,11 @@ h1, h2, p {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
@ -165,7 +166,7 @@ h1, h2 {
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
id: 5f47fe7e31980053a8d4403b
|
||||
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`.
|
||||
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>
|
||||
|
||||
@ -66,9 +67,182 @@ tests:
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
@ -137,6 +311,7 @@ img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -197,6 +372,4 @@ a:active {
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,376 +0,0 @@
|
||||
---
|
||||
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