Learn Typography by Building a Nutrition Label - Step 43

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">% Daily Value *</p>
      <div class="divider"></div>
      <p><span>Total Fat 8g</span> 10%

        <span class="bold">Total Fat</span>
        <span class="bold">10%</span>
        
      </p>
      
      
    </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;
}

Your browser information:

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

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

Link to the challenge:

2

Welcome to the community!
Please tell us in your own words the problems, or error messages received, for your code?
The more you say the more opportunity for timely, accurate responses from the community.

Happy coding! :slight_smile:

3

Hello and wellcome:

Advice: for new post, you may describe your issue. If you tell us what is your problem, we can help you more easy. If possible, it would be nice if you could tell us what type of error this step says. You can learn a bit how the things works. It´s better for everybody! Keep that in mind for future posts.

Solution: You don´t need 2nd. and 3rd. span you only need the first. And look this example:

Example:

  • create a p element and give it the text Text 12 34

You need write <p>Text 12 34</p>

  • Wrap the text Text in a span element.

You need write <p><span>Text</span> 12 34</p>

  • Wrap the text 34 in another span element.

You need write <p><span>Text</span> 12 <span>34</span</p>

  • Finally, nest the Text span element and the text 12 in an additional span element for alignment.

You need write <p><span><span>Text</span> 12 </span><span>34</span</p>

Look this example. Adjust your code and don´t forget to apply the corresponding class to the span

I hope have explained me well.

Have a nice day. Grets.