Learn Typography by Building a Nutrition Label - Step 55

HTML-CSS
1

Tell us what’s happening: not getting this yet I know I learned this not long ago …
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>
      <div>
      <p class="indent no-divider"><span>Dietary Fiber</span><span class="right bold">4g</p>
      </div>
    </div>
  </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;
}

.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_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

You have wrapped your new p element in a div. I don’t think the instructions asked you to do that. The new div should be below the new p element, not wrapping it.

3

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

 <p class="indent no-divider"><span>Dietary Fiber</span>4g<span class="right bold"></span></p>
4

You are trying to do too much here. This step is asking you to only do two things:

  • Below your last p element, add another p element with the text Dietary Fiber 4g. Give the p element the class necessary to indent it and remove the dividing border.

  • Then create a divider below that p element.

For the first one, don’t add any spans in the text. The instructions aren’t asking you to do that yet. Just add the plain text.

And then don’t forget about the second one.

It is best to read the instructions literally. If all they ask you to do is add text, then just add text, nothing else. Even if you know that eventually you will be adding spans to that text. Chances are that you will do that in the following steps.

1 Like
5

thank. you so much! got it

6

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