Builda nutritional label

HTML-CSS
1

It says put it after second divider. I have done that and tried several other ways and nothing please help.

<!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>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></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>
      </div>
    
  </div>
</body>
</html>
2

Please post your full code and a link to the step. Thanks

3

It says put it after second divider. I have done that and tried several other ways and nothing please help.Learn Typography by Building a Nutrition Label - Step 65 trying to find where to uplaod it at

4

It says put it after second divider. I have done that and tried several other ways and nothing please help. New to this. First time asking for help on here. Trying to figure it out without assistance but man it is not easy to load your code

5

Please post a link to the step.

6

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
7

I hope i did it crectly. I apologize if its not. Still trying to learn this lol :laughing:

8

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
9

Please post the link to the Step you are working on

10

It says put it after second divider. I have done that and tried several other ways and nothing please help.

<!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>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></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>
      </div>
    
  </div>
</body>
</html>

ok ty will keep that in mindhttps://forum.freecodecamp.org/t/learn-typography-by-building-a-nutrition-label-step-65/585160

11

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12

It says put it after second divider. I have done that and tried several other ways and nothing please help.

<!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>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></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>
      </div>
    
  </div>
</body>
</html>

ok ty will keep that in mind. Do i add the ink at the bottom of this. Or is there a specific spot. Once again i apologize for not knwoing this right away.

13

I think i found it. https://www.freecodecamp.org/learn/responsive-web-design-v9/workshop-nutritional-label/step-52

14

I still need to have the URL to the step you are working on so I can see what the instructions say.

1 Like
15

I need a link to the actual step on the learning platform, not to forum posts.

Edit - saw your edit.

Other edit - stealth editing old posts makes it harder on your reader

16

I sent another link i think is correct if not i will erase the post completely and move on to soemthing else to help me figure it out. This is too much of a hassle to ask for help. Nothing against you, its more of me still learning this.

17

Looking here, it seems like you added your changes above the second divider instead of below it.

1 Like
18

Ty for all your help as well i appreciate you.

19

I stuck it there as well and it said that it needed to be below the daily value element.

20

Where is “there”?

The instruction say

After your last .divider…

so your changes must be after the .divider element’s closing tag.