Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

I am so confused I don’t know if it’s because I don’t understand or if the wording is all sorts of messed up. Yes, I know I didn’t add the class elements to them because I can’t get passed this.

image
image1026×603 48.4 KB

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/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

2

Move that span opening tag before

That total fat opening span. And also add necessary class attribute with the required values within appropriate span opening tags.
@Shizukesa

3

i am even more confused

4

I think you should add the class “bold”, to make:

<span class="bold">Total Fat</span>

and also add the same class to the

 <span></span>

containing 10%

5

i did that now i just cant get 3 elements and it also be wrapping the words Total Fat and 8g

6

if i add 3 elements i get this error Sorry, your code does not pass. Keep trying.

One span element should wrap the text Total Fat.

7

Please paste your most recent HTML in here so we can see what you have tried. 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 (').

8

Does this now say:

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

ok thank you will try that

10

sorry, got caught in span-spamming myself. Edited now.

1 Like
11

that is what mine says it it wont take it

image
image1736×32 7.72 KB

12

hi
i want to know how did u learn html like advanced

13

Please paste it in here instead of posting pics of code. We can’t test your code if it is a pic :slightly_smiling_face:

How many spans do you have in your code?

14

3 because now its giving me this error Your new p element should have the text Total Fat 8g 10% . and how do i send the code here exactly?

15

% Daily Value *

Total Fat8g 10%

16

ok well copy paste didnt work

17

Are you sure there are only 3 spans in that line of code? I would count again.

18

theres 4 but i dont understand how to make it 3 and it work

19

if i get rid of any one of them it just gives me the error again

20

Follow the instructions exactly:

  • “Wrap the text Total Fat in a span element with the class of bold.” (You have done this)
  • “Wrap the text 10% in another span element with the class of bold.” (You have done this)
  • “nest the Total Fat span element and the text 8g in an additional span element” (This is the one you aren’t quite doing correctly. Notice, it doesn’t say wrap just the text 8g in a span. It says to wrap both the Total Fat span and the text 8g in one span.)
1 Like