Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

i’ve tried this over 20 times with different combinations, I can not get it. Not exactly sure how to explain it

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>Total Fat 8g 10%>
        <span class="bold">Total Fat</span>
        <span class="bold">10%</span>
        <span Total Fat 8g</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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

you have a lot of mistakes unfortunately.

First problem is that you have misunderstood the requirements.
They said to create a p element with the text Total Fat 8g 10%
and you actually create this text multiple times
(look at your code to see what I mean, there are -three- “Total Fat” and -two- “8g” and -two “10%”)

You only need to write this text -once-.
Then add the required spans around the text you just entered. (don’t make more copies of the text)

And use proper syntax. All p element need closing tags
All html tags need a < and > around them

3

Unfortunately i still don’t understand it, i’m very very new to this. Is there any way of seeing an example?
I’ve rewritten it without using the text more than once, but not sure how to add the
Total Fat 8g without writing the text again

4

Don’t add the text again. Just add the tags they said you should add. If they said add a span element for example then add that around the text you just wrote .

5

how do i wrap a span around “Total Fat” and Total Fat 8g?

6

Just write the span opening tag on the left of the word(s) and the closing tag on the right. (Just like any other html code that you have written before)

7

I think you said you wanted an example before. So here is a series of examples that may help you understand what is needed:

<p>This is a paragraph element</p>

<p>This is a <span>paragraph</span> element</p>

<p>This is <span>a <span>paragraph</span></span> element</p>

So above are three lines of code and they show a paragraph element that I progressively added spans to.

8

this is where i am at now
<p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>

i am sorry, not understanding how to include Total Fat and Total Fat 8g both in span wrap

9

What you have is good I think except for the last step.
So I would try to add one more span opening tag to the immediate right of the opening p tag and another closing span tag to the immediate right of the 8g.

10

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

11

I think this is what you mean? but still no go.

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

that is just one character away from perfection.

You have a slash missing in one of your closing span tags

2 Likes
13

OMG!! THANK YOU!!! thank you for being so patient and understanding.

1 Like
14

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