Learn Typography by Building a Nutrition Label - Step 60

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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 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="right bold">20%</span>
        <div class="divider"></div>
         
      </div>
   <p class="indent no-divider"><span class="bold">Protein</span> 3g</p>
    </div>
  </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;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
  clear: right;
}

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

.lg {
  height: 10px;
}

.lg, .md {
  background-color: black;
  border: 0;
}

.md {
  height: 5px;
}

.sm-text {
  font-size: 0.85rem;
}

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

.calories-info span {
  font-size: 1.2em;
  margin-top: -7px;
}

.indent {
  margin-left: 1em;
}

.dbl-indent {
  margin-left: 2em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.1 Safari/605.1.15

Challenge: Learn Typography by Building a Nutrition Label - Step 60

Link to the challenge:

2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

3

Hi there. Please help me with above code. I am stuck and have no idea what to do. I followed the instruction:

Step 60

After your last divider, create another p element with the text Protein 3g. Use the necessary classes to remove the bottom border, and a span to make the Protein bold.

I cannot see any mistake, but I have message:
Sorry, your code does not pass. Keep trying.

Hint

Your new p element should have the text Protein 3g.

I read all previous advices on this forum, but it did not help. I put

below

and I don’t know how to fix the error? I made sure, that I have correct spaces in Protein 3g. I have no idea what to try next. Please hlep.
Thank you

4

I created new p element below div daily-value sm-text is missing above

5

the key is to understand where to put this code.
“after your last .divider”

If you reset the step, and look at the code shown in the editor area,
you must place this line of code after the last .divider element
(not after the div element that includes the last .divider element which is where you have it now)

6

Hi, thank yuo for your answer. I tiried to put after Includes 10g Added Sugars , then class divider and then my new p element, but it did not work either. The error message was Sorry, your code does not pass. You’re getting there.

Hint

You should create a new p and div element at the end of your .daily-value.sm-text element.

7

please show your current code so I can see where you have placed everything and can try your code on my end
(before your code was correct in terms of the p element but it was in the wrong place)

8 
 <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
        <div class="divider"></div>
        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
9

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.

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 (').

10

Can you post more code? The snippet you posted doesn’t show the new div you should have created.

11 
<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="right bold">20%</span>
        <div class="divider"></div>
        <p class="no-divider"><span class="bold">Protein</span> 3g</p> 
<div class="divider lg"></div>
</div>
    </div>
  </body>
</html>
12

The message fro above code is : Sorry, your code does not pass. Keep trying.

Hint

You should create a new p and div element at the end of your .daily-value.sm-text element.

13

Ok, it works. Thank you. This was a bit confusing. Now it is sorted. Thanks again.

1 Like