3.4 KiB
3.4 KiB
id | title | challengeType | dashedName |
---|---|---|---|
5f459cf202c2a3472fae6a9f | Part 71 | 0 | part-71 |
--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
.
--hints--
You should set the height
property to 2px
.
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
assert(hasHeight);
Your hr
element should have a height
of 2px
.
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
assert(hrHeight === '2px');
--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">Cinammon Roll</p><p class="price">2.50</p>
</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>
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
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;
}
--fcc-editable-region--
hr {
height: 3px;
background-color: brown;
border-color: brown;
}
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}