Learn Typography by Building a Nutrition Label - Step 55

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>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 class="bold">Total Carbohydrate</span>
    <span> 37g </span>
    <span class="bold">13%</span>
  </p>

          

<!-- 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;
}

.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:123.0) Gecko/20100101 Firefox/123.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 55

2

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!

3

Anyone an idea why the Code didnt work ?

4

Hello!
Next time you create a post, remember to try describing your issue.
Good job on your code so far. You are not supposed to wrap the 37g in an individual span element. Go ahead and remove the span that is nesting it.
Then one span element needs to wrap the text Total Carbohydrate 37g. So before your .bold add one span element opening tag and then after the text 37g add your span element closing tag.
After doing that, your code should pass.

1 Like
5

Thank you for your fast response on my topic. I triedn your solution before and when i do it like you said the system said error because there are three span’s needed :frowning:

1 Like
6

Remove space after 37g text, cut span opening tag before 37g and paste after your p opening tag before span class bold .

1 Like
7

You need three span elements.
One nesting the text Total Carbohydrate with the class of bold
One nesting Total Carbohydrate 37g
And one nesting 13%

1 Like
8

Perfect , worked . thank you !

1 Like
9

Happy it did. Keep it up, happy coding!

10

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