Learn Typography by Building a Nutrition Label - Step 60

HTML-CSS
1

Tell us what’s happening:

Hi, I am not understanding what I am doing wrong since the

element is well written.
I haven´t done the rest of the instructions.
Thanks for the attention.

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

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</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>
      <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">Includes 10g Added Sugars 20%</p>
<div class="divider"></div>

      </div>

<!-- User Editable Region -->

  </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;
  display: flex;
  justify-content: space-between;
}

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

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

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


.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

.indent {
  margin-left: 1em;
}

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 60

2

hello and welcome to the forum.
Why don’t you finish the rest of the instructions first?

3

What hint are you getting when you click the Check Your Code button?

1 Like
4

“Your new p element should have the class attribute set to double-indent no-divider .”
This one.

5

My suggestion would be to do what the hint says.

6

Hi, because I have already done them, but the error stays the same so I deleted them to try to figure out what was the problem.

7

so this hint is being given because you have not completed all the requests made by the step.

1 Like
8

please show us your attempt as that is how we will be able to help you.

1 Like
9

image
image897×340 24.4 KB

Sorry guys, the hint changed, before it was like this… thanks for the help and the fast reply anyways.

10

you still have 2 more things to do:

Your new p element should also be double indented, and have no bottom border. Use a span to make the 20% bold and right aligned.

This wording asks for 3 things. You’ve done the first (double indented) but not the last 2 things.

1 Like
11

I have done them now and passed the step, now I am at the 61 and it’s saying the same thing about the

element not being well written, even when it is.

image
image1066×402 26.3 KB

12

I am glad you are done. Normally when you post in the forum, you should mark the post that helped you to solve the problem (using the check mark icon below that post). After that if you need more help with a different problem, use the Help button to open a new topic. The Help button will show after you have tried 3 times without success to pass a certain step.
Give this button a try now to open a request for help with step 61.
Remember to read the instructions carefully and make sure to follow them exactly.

13

Okay, thanks a lot for the help.
My best regards.

1 Like