Tell us what’s happening:
Describe your issue in detail here.
index.htmleditorstyles.csseditor
31
32
33
<span
10%</
p>
Step 43
After your last .divider
element, create a p
element and give it the text Total Fat 8g 10%
. Wrap the text Total Fat
in a span
element with the class
of bold
. Wrap the text 10%
in another span
element with the class
of bold
. Finally, nest the Total Fat
span
element and the text 8g
in an additional span
element for alignment.
Check Your Code
Test
Sorry, your code does not pass. You’re getting there.
Hint
One span
element should wrap the text I have done what was the wrong ? .It say wrap Total Fat in firt span element that have been done.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nutrition Label</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="label">
<header>
<h1 class="bold">Nutrition Facts</h1>
<div class="divider"></div>
<p>8 servings per container</p>
<p class="bold">Serving size <span>2/3 cup (55g)</span></p>
</header>
<div class="divider large"></div>
<div class="calories-info">
<div class="left-container">
<h2 class="bold small-text">Amount per serving</h2>
<p>Calories</p>
</div>
<span>230</span>
</div>
<!-- User Editable Region -->
<div class="divider medium"></div> <div class="daily-value small-text">
<p class="bold right">% Daily Value *</p>
<div class="divider"></div>
<p> <span class="bold">Total Fat </span><span>8g</span>
<span</span>
<span class=" bold">10%</span></p>
</div>
<!-- User Editable Region -->
</div>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: 'Open Sans', sans-serif;
}
.label {
border: 2px solid black;
width: 270px;
margin: 20px auto;
padding: 0 7px;
}
header h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}
p {
margin: 0;
display: flex;
justify-content: space-between;
}
.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
}
.bold {
font-weight: 800;
}
.large {
height: 10px;
}
.large, .medium {
background-color: black;
border: 0;
}
.medium {
height: 5px;
}
.small-text {
font-size: 0.85rem;
}
.calories-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.calories-info h2 {
margin: 0;
}
.left-container p {
margin: -5px -2px;
font-size: 2em;
font-weight: 700;
}
.calories-info span {
margin: -7px -2px;
font-size: 2.4em;
font-weight: 700;
}
.right {
justify-content: flex-end;
}
Your browser information:
User Agent is: Mozilla/5.0 (Linux; Android 6.0; BGO-DL09) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36
Challenge: Learn Typography by Building a Nutrition Label - Step 43
Link to the challenge: