Learn Typography by Building a Nutrition Label - Step 60

can sombody give me a solution, because they made some mistake with explanation and not accepting anything,
thanks

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>
    </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; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 60

can sombody give me a solution, because they made some mistake with explanation and not accepting anything,
thanks

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Hello and Welcome!

Forum rules do not allow us to post the solution to problems. However, we are allowed to guide you by providing hints.

The instructions are good, as far as I can see.

They are very similar to most of the previous steps.

Here, I have broken them down for you to attempt the lesson.

The below is quoted from the instructions with the exception of Next part of the step and and last part of the step:

Below your .double-indent element, add a new p element
 with the text Includes 10g Added Sugars 20%

Next part of the step

Your new p element should also be double indented, and have no bottom border. 

Next part of the step

Use a span to make the 20% bold and right aligned.

and last part of the step

Then create another divider after that p element.

Wishing you good progress.

Hi, thanks for the answer, I got lost, and I’m starting againg from step one,
in my opinion it’s possible do this label in easier way, but of course this camp is not for an easy way , it’s for get some knowledge.
So, thanks again, and I’m sure if I start from step on and slowly with analyzing I get it right.

You are doing good. You do not need to start at the beginning again.

Just the beginning of this step to clear any failed code and enter it as directed.

This step is actually easier than the last step because you only need to place one span, and that is around the 20%

We all find it difficult, sometimes, rob.bob.50p. Just remember the community can offer guidance and help us all get there.

Wishing you good progress!

1 Like

I know that I don’t need to start again, but I like to understand it all not just ''oh , I did it , now I will build my own label for better understanding they way, and when I finish I will do again from step one.

1 Like

yeah, I’m doing several times each ones and I’m doing my own ideas to understand it better, and I don’t like a youtube version, there’s something I cannot explain but it’s not for me, I like this course .
I tried another courses like codecademy or odin but there’s something wrong with them. This so far is ok, but you have to work with your editor the same time, then you can see how it work, you can feel it, …
Anyway it’s manyways to atchive the understanding.
My plan is to get to js, then libraries , … and then play around with them feel and create , get some backend , and then comeback to the path in here ,freecodecamp’’
I don’t know it make sense yet, because I did’t pass so many times like you.

1 Like