Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

i dont understand this step i wrapped the total fat and 8g in a span element and kept everything else the same also i followed the step step by step and im still confused can someone pls help me on this code and challenge are below

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 class="bold"><span>Total Fat 8g</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 (X11; CrOS aarch64 15117.111.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

2

I see two opening span tags and one closing span tag.

Also the inner tag was the one that was supposed to have the class I think? (Check the instructions)

3

im still confused by what you mean

4

which inner tag are you talking about?

5

you span tags should be matched (opening to closing).
In the code you posted you had 2 opening tags and one closing tag so that means that you were missing one.

The -inner- one (the one nearest to the word Total should have the class.

You’re supposed to go through the steps one by one and implement each one in chronological order. (so first wrap the words Total Fat in a span if I recall the steps correctly, then add a class to that span, then wrap the 10% in a span and add a class to it.
Then finally wrap the whole Total Fat 8g in a span (around the existing code)

6

thanks so much i have been stuck on this problem for a while now im glad this community is so helpful and im glad to be a part of it

1 Like