Step 56 Typography

HTML-CSS
1

I need help in placing the p and the div element in step 56 Building a Nutritional label

1 Like
2

Hi @Dan2006

Put the link to the problem and paste your code too. Easier to help.
Thank you

3

Step 56

Create another p element after your last .divider , and give it the text Total Sugars 12g . Assign that p element the class values necessary to indent it and remove the bottom border. Then create another .divider below your new p element. Here is my code

<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">

<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>

 

</div>

    </body>
1 Like
4

Hi @Dan2006

Take a break and back to problem later. It is easier than you think. Read the instructions carefuly because all that code is there already, it is only repeat the same pattern. And read the error message too if one shows.
Let us now if you got it.
Happy coding!!

5

Dietary Fiber 4g

Total Sugars 12g

6

Please don’t share solution code in here.
You are welcome to provide tips and hints though.