Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

After your last .divider element, create a p element and give it the text Total Fat 8g 10% . Wrap the text Total Fat in a span element with the class of bold . Wrap the text 10% in another span element with the class of bold . Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment. ///i did it but i think i have something isn’t clear to understand anybody could help

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>

<!--here i don't understand-->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider">
      </div>
      <p><span class="bold"><span> Total Fat 8g</span> <span class="bold">10%</span></span></p>
    </div>

<!-- . this is what's asked to do below////:
 After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap the text Total Fat in a span element with the class of bold. Wrap the text 10% in another span element with the class of bold. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment -->

  </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/114.0.0.0 Safari/537.36

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

Link to the challenge:

2
  • delete the opening ‘span’ tag before the text “Total Fat”
  • add the opening ‘span’ tag before the opening span tag with the class attribute set to the value of “bold” (the 'span tag that is the first from the left side of the “Total Fat” text)
  • add the closing ‘span’ tag after the text “Total Fat”
  • delete the closing ‘span’ tag before the closing </p> tag
3

<p><span class="bold"><span> Total Fat 8g</span> <span class="bold">10%</span></span></p>

Now we fix this:

  1. create a p element and give it the text Total Fat 8g 10% .
    Eg: <p>Total Fat 8g 10% </p>

  2. Wrap the text Total Fat in a span element with the class of bold .
    Eg: <p><span class="bold">Total Fat</span> 8g 10% </p>.

  3. Wrap the text 10% in another span element with the class of bold .
    Eg: <p><span class="bold">Total Fat</span> 8g <span class="bold"> 10%</span></p>.

  4. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

Try This.
Thanks.

4

@meganfullsd

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

6

“< p > < span >< span class=“bold”> Total Fat< /span > 8g< /span >
< span class=“bold” >10%< /span >
< /p>”

Try this code
Hope it works
Just remove some spaces inside between the tags

7

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