Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:

Describe your issue in detail here.
the hit say’s i have to place three span element’s in the text in p element . I have wrapped the entire text with the span elements but still my code doesn’t pass

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>

<!-- User Editable Region -->

    <div class="calories-info">
      <div class="left-container">      
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </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;
}

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

.calories-info h2 {
  margin: 0;
}

Your browser information:

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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 33

Part of the step ask you to make a <span> element with the text 230, but I don’t see that in your code.

I’m a bit confused though, your title says step 43 but the link is to step 33. Which step are you stuck on?

This is a very tricky step that many people have difficulty with @james24 !

I am including my breakdown for this step to try to make it easier


Nutrition Label Step 43 Breakdown
1. Create a new p  element below the last divider closing div.
2.Text to be entered within p element Total Fat 8g 10%
3. Wrap the text Total Fat within a span element. 
4. Give the span element a class of "bold"
5. Wrap the text 10% within a span element. 
6. Give the span element a class of "bold"
7.Wrap the first span element wrapped around Total Fat in a span that extends to include 8g.
Note: Total span elements should be three.  Make sure there is a space before 8g.

I hope it helps you.

Keep up the good progress!

sorry am stuck on step 43

1 Like

it worked thanks alot

1 Like

You are very welcome!

You may either copy and paste it for some of the future tricky steps ahead in the Cafe Menu, or just use your step 43 as guidance.

Keep up your great progress and happy coding!

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