Learn Typography by Building a Nutrition Label - Step 43

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</span>
        <span>8g</span> 
        <span>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/112.0.0.0 Safari/537.36

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

Link to the challenge:

Welcome to the forum. Are you having a particular issue with this challenge? Can you explain what you’re struggling with in your own words please?

please let us know what you need help with is you still need help :smiley:

Hello, I’m a bit confused about placing the span element. I don’t understand in which order I should put the span.

Ok, this one is a bit fiddly. The easiest thing to do is to reset the lesson first and then start afresh.

Follow the instructions in order, very carefully:

  1. After your last .divider element, create a p element and give it the text Total Fat 8g 10% .
  2. Wrap the text Total Fat in a span element with the class of bold .
  3. Wrap the text 10% in another span element with the class of bold .
  4. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

So, for the first three steps you just create your p element, and then enclose the relevant bits of text in span elements, giving the spans the correct class attribute.
The final step is what trips up most people. You need to enclose ‘Total Fat 8g’ in one more span (with no class attribute). This new span will also enclose the span which you have already put around ‘Total Fat’.

I hope that makes sense?

:astonished: Ohh okayy, Now I can understand. Thank you.

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