06da30e48a
* feat: created step instructions for cafe menu fix: added instructions to steps 1-31 fix: changed steps 29-31 fix: added instructions for steps 32-42 fix: changed prototype class definition fix: padded file names fix: added instructions for steps 43-61 fix: add object id to final.md and final prototype to meta.json fix: correct typos in steps 26 and 27 fix: misc wording changes fix: added forward slash to closing html tag fix: added instructions for steps 62-75 feat: added instructions to steps 76-79 fix: added FOOTER comment for steps 68-75 fix: add steps 68a and 68b fix: add steps 69a and reorder steps fix: added instructions to the final steps * fix: remove final.md * fix: fixed typo of menue to menu Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: changed wording to improve readability Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: changed wording to improve readability Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: changed wording to improve readability Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: combined two lines into same paragraph Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
3.4 KiB
3.4 KiB
id, title, challengeType, isHidden
| id | title | challengeType | isHidden |
|---|---|---|---|
| 5f45b715301bbf667badc04a | Part 79 | 0 | true |
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.
Tests
tests:
- text: Test 1
testString: ''
Challenge Seed
<!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>
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;
}