Tell us what’s happening:
Vitamin D 2mcg 10%
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>
<div class="divider medium"></div>
<!-- User Editable Region -->
<div class="daily-value small-text">
<p class="bold right no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
<div class="divider"></div>
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
<p class="indent no-divider">Dietary Fiber 4g</p>
<div class="divider"></div>
<p class="indent no-divider">Total Sugars 12g</p>
<div class="divider double-indent"></div>
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
<div class="divider"></div>
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
<div class="divider large"></div>
<p class="no-divider"><span><span class="bold">Vitamin D</span> 2mcg</span> <span class="bold">10%</span></p>
</div>
</div>
<!-- User Editable Region -->
</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;
}
.indent {
margin-left: 1em;
}
.double-indent {
margin-left: 2em;
}
.daily-value p:not(.no-divider) {
border-bottom: 1px solid #888989;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Learn Typography by Building a Nutrition Label - Step 63
Please Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
I’m getting this error
Sorry, your code does not pass. You’re getting there.
Your new p element should have a span element.
This is my code s
<div class="divider large"></div>
<p class="no-divider"><span><span class="bold">Vitamin D</span> 2mcg</span> <span class="bold">10%</span></p>
</div>
</div>
Ok. Can you talk in your own words about how you are confused about the error message?
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
I dont understand whats the error , what could possibilly be the error in my code
It really helps if you try to talk about how you are stuck
This is my code
<p class="no-divider"><span><span class="bold">Vitamin D</span> 2mcg <span class="bold">10%</span></span></p>
, this is my error Sorry, your code does not pass. Hang in there.
Your new p element should have a span element.
Just posting the code and error message again and again without trying to talk in your own words about what you personally do not understand doesn’t help
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
I dont understand what a span element is and how my code doesnt have one
The elements that look like <span> ... </span> are span elements. You have already written several
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
<div class="divider"></div>
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
<p class="indent no-divider">Dietary Fiber 4g</p>
<div class="divider"></div>
<p class="indent no-divider">Total Sugars 12g</p>
<div class="divider double-indent"></div>
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
<div class="divider"></div>
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
My code seems to be correct to me , however I’m still getting the same error
please help , id appreciate it, so this is my code
<p class="no-divider"><span><span class="bold">Vitamin D</span> 2mcg</span> <span class="bold">10%</span></p>
Just posting your code without talking about how you are stuck doesn’t help
Im stuck here by this code
Yep. And you aren’t talking about how you are stuck or confused. And I’m not allowed to just write the answer for you.
It says my new p element which is the vitamin D should have a span element, I’m confused by this error i’m getting
You do have a span element, so you can ignore this hint if it’s not useful.
Look at the instructions again and break it down into steps. Make sure you’ve followed each step, and didn’t add anything extra:
- Create another
p element below your large divider.
- Give the
p element the text Vitamin D 2mcg 10%.
- wrap the percentage in a
span element
3 steps. You’ve added a lot of extra things that are not in this instruction.
1 Like
