Nutrition Label
Nutrition Facts
8 servings per container
Serving size 2/3 cup (55g)
Amount per serving
Calories 230
% Daily Value *
Total Fat 8g10%
Saturated Fat 1g 5%
Trans Fat 0g
Cholesterol 0mg 0%
Sodium 160mg 7%
Total Carbohydrate 37g 13%
Dietary Fiber 4g
Total Sugars 12g
Protein 3g
Here is my code and here is the question that is listed for step 60.
This is different from the forum help options and Iām lost and frustrated. I come back to it every so often but its been weeks and Iām starting to give up on coding.
Post your html code and a link to the challengeā¦
If you click on the </>
icon and paste all of your HTML code where indicated, we can see what you might be doing wrong.
Below this element <div class="divider double-indent"></div>"
(there is only one such element in the given code) you should add a new āpā element with class set to ādouble-indent no-dividerā and the text āIncludes 10g Added Sugars 20%ā:
<p class="smth">Text</p>
The next step is to wrap only ā20%ā in span tags: <span>X%</span>
. Nothing else should be changed.
The last step is to add a div element <div class="smth"></div>
with a class set to a value of ādividerā.
1 Like
Ive updated the code accordingly and was able to understand the corrections. However, iām still receiving the same error message.
Hint
You should create a new p
and div
element at the end of your .daily-value
element.
Always post your updated code here with the last revision.
How should I repost it? I added the link to it. Is there another way to add it?
In your editor click on the marked button in the picture and you will get two groups of three backticks ```. Within them paste your code. Never make another post on the same topic.
1 Like
<!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 class="right">2/3 cup (55g)</span></p>
</header>
<div class="divider lg"></div>
<div class="calories-info">
<p class="bold sm-text">Amount per serving</p>
<h1>Calories <span class="right">230</span></h1>
</div>
<div class="divider md"></div>
<div class="daily-value sm-text">
<p class="right bold no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
<div class="divider"></div>
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right 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 dbl-indent"></div>
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right aligned">20%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><span class="bold">Protein</span> 3g</p>
<p class="no-divider"></p>
<div class="indent lg"></div>
</div>
</div>
</body>
</html>
Restart the step.
Below your .double-indent element:
means below the div element with a class set to a value of ādouble-indentā, add what you have already done in your code but at the wrong place and with the small corrections:
<p class="two classes">Includes 10g Added Sugars <span class="bold right aligned">20%</span></p> .... without the word "aligned"!
<div class="divider"></div>
The instruction: " Your new p
element should also be double indented (double-indent), and have no bottom border (no-divider)".
Sorry if iām coming across as an idiot⦠but it looks like itās below the double indented div to me. Im not sure why I keep getting the same error. Ive tried it with and without the protein step.
<!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 class="right">2/3 cup (55g)</span></p>
</header>
<div class="divider lg"></div>
<div class="calories-info">
<p class="bold sm-text">Amount per serving</p>
<h1>Calories <span class="right">230</span></h1>
</div>
<div class="divider md"></div>
<div class="daily-value sm-text">
<p class="right bold no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
<div class="divider"></div>
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right 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 dbl-indent"></div>
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
<div class="divider"></div><p class="indent no-divider"><span class="bold">Protein</span> 3g</p>
<div class="divider lg"></div>
</div>
</div>
</body>
</html>
hbar1st
February 14, 2023, 5:32am
14
Are you doing step 60 still?
Why did you add two paragraph elements and two .dividers?
If you are still in step 60, please reset the step and add only what was requested. (One p and one div)
And they must be added exactly in the order requested.
If you are in a different step, then please open a new topic and mark this one as solved.
I am still on this step. Iāve seen that this step is listed as step 59 but for me itās 60. I wasnāt sure if it wanted me to complete what everyone else sees as 60 which is the protein step. Here is my codeā¦
<!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 class="right">2/3 cup (55g)</span></p>
</header>
<div class="divider lg"></div>
<div class="calories-info">
<p class="bold sm-text">Amount per serving</p>
<h1>Calories <span class="right">230</span></h1>
</div>
<div class="divider md"></div>
<div class="daily-value sm-text">
<p class="right bold no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
<div class="divider"></div>
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right 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="dbl-indent no-divider">Includes 10g Added Sugars <span class="bold right">20%</span></p>
<div class="divider"></div>
</div>
</div>
</body>
</html>
hbar1st
February 14, 2023, 5:38am
16
It said the new p should be double indented so you added the classes above.
What is the correct class name though?
double-indent or dbl-indent?
Not sure, Iāve tried both ways. I saw that people have used both classes in solution vids and forums. Both have been successful for others. Is there a reason this is showing as step 60 for me and not others?
hbar1st
February 14, 2023, 5:42am
18
Yes there is probably a reason. You are doing step 60 in fCC while everyone else you are talking about is not. The curriculum changes sometimes and the live experience is not always exactly the same as someone else who is not doing this live with you.
I am right here and I am seeing what you are seeing. Please donāt copy code and just read the given instructions and react to them as they are.
Well iām not copying anyoneās code, but I am reviewing, to see if iām missing any steps, misspellings or placements and I canāt seem to find it. Are you seeing the issue?
hbar1st
February 14, 2023, 5:46am
20
Yes . Your last code has the wrong class name. Check the instructions. Is it dbl or double?
The step uses .double-indent
Even with this correction nothing changes for me.
<!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 class="right">2/3 cup (55g)</span></p>
</header>
<div class="divider lg"></div>
<div class="calories-info">
<p class="bold sm-text">Amount per serving</p>
<h1>Calories <span class="right">230</span></h1>
</div>
<div class="divider md"></div>
<div class="daily-value sm-text">
<p class="right bold no-divider">% Daily Value *</p>
<div class="divider"></div>
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
<div class="divider"></div>
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
<div class="divider"></div>
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right 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 right">20%</span></p>
<div class="divider"></div>
</div>
</div>
</body>
</html>