a72326cea1
* Change Sp from Cinammon to Cinnamon Steps 54-92 * Step 53 Changed sp of Cinammon to Cinnamon * Fix spelling of Cinnamon Step 92 L250
3.7 KiB
3.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5f46fc57528aa1c4b5ea7c2e | Step 76 | 0 | step-76 |
--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 Coffee heading.
Add some more space by creating a class named bottom-line using 25px for the margin-top property.
--hints--
You should add a .bottom-line selector.
const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
assert(hasBottomLine);
You should set the margin-top property to 25px.
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
assert(hasMarginTop);
Your .bottom-line selector should have a margin-top of 25px.
const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
assert(bottomLineMargin === '25px');
--seed--
--seed-contents--
<!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>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel 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">Cinnamon Roll</p><p class="price">2.50</p>
</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>
</div>
</body>
<html>
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
}
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;
}
--fcc-editable-region--
--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 {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}