Step 65 Nutrition Label

Hi,

I am having trouble with the final step in the Nutrition Label project (HTML copies below - I am sure there is a better way to upload code, but not sure how as first time posting code here).

Would anyone be able to help?

The error is that I should create a new div after the .daily value element…

<!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>
    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value*</p>
    <div class="divider medium"></div>
      <p class="note">*The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
      <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>
      <div class="divider"></div>
      <p class="no-divider"><span class="bold">Protein</span> 3g</p>
      <div class="divider large"></div>
      <p>Vitamin D 2mcg <span>10%</span></p>
      <p>Calcium 260mg <span>20%</span></p>
      <p>Iron 8mg <span>45%</span></p>
      <p class="no-divider">Potassium 235mg <span>6%</span></p>
    </div>

Hello @coderostro !

You can upload all your code by using the </> at the top of this text box, or on the help that appears after three unsuccessful attempts at any step.

Happy coding!

2 Likes

great , thank you so much!

2 Likes

Sorry, but I typed the ‘</>’, paste the code and it didn’t appear as code?

Please use this topic instead of creating a new one.

Go ahead and try again - if it doesn’t work I can fix it up for you

ok, thank you. It’s not working unfortunately…

Did you try again? I don’t see another post in this topic!

I tried, but as I pasted the code, I saw that only the text part of the code appeared in the thread and not the code itself, so I did not post it. Should I?

Yeah… I was asking you to try again so I could fix it if it went wrong.

But, I found your code in your first post.

Note - Its much easier if you use the Ask For Help button so that the formatting is automatically done for you!

1 Like

Oops.
</> is a button…

thank you. I did actually try that, but must have done something wrong. Does the ‘ask for help’ automatically embed the code into the post into the correct format?

I was not aware of that. Thank you!

I fixed your first post. Your code is visible.

Yes.

1 Like

This is your .daily-value element. I don’t see anything after it?

1 Like

Sorry, I have just realised that for whatever reason I have been misinterpreting which part was the ‘daily value element’. I have fixed it now - thanks so much for your help.

2 Likes

thanks you very much!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.