52f27c1cbf
* fix: remove isHidden from frontmatter * fix: corrected ERM name * fix: removed duplicate step (54)
2.7 KiB
2.7 KiB
id, title, challengeType
| id | title | challengeType |
|---|---|---|
| 5f3ef6e05473f91f948724ab | Part 59 | 0 |
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.
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.
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>Est. 2020</p>
</header>
<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>
</div>
</body>
<html>
--fcc-editable-region--
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
}
--fcc-editable-region--
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}