Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:

Sorry, your code does not pass. Try again.

Your p element should have two span elements.I have a different question After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Then, wrap the text Total Fat in one span element, the text 10% in another, and give them each a class of bold.

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> <span class='bold'>Total Fat</span> 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

2

here’s my answer


% Daily Value *



Total Fat 8g 10%


I got it wrong
what does the coding mean for your p element and two span elements

3

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
4

I got it wrong
what does the coding mean for your p element and two span elements

5

I don’t understand that question?

It looks like you have 3 span elements instead of the 2 the instructions ask for? Also, you should not add any extra spaces in your code.

6

which span element should i delete?

7

Which two did the instructions ask for?

8

The question is saying that the span should be around the Total Fat text and another on the 10%.

9

Hello @kyra.dillard2003 !

If you searched and found guidance for this step that included the third span, that was how it was prior to the updates that occurred. You did a great job!

Now, the third span is not asked for until the next step.

So, if you remove the third one that was placed around the Total Fat span and the 8g your code may pass for you.

Keep up the good progress! Wishing good progress on you coding journey. :slightly_smiling_face:

1 Like
10

thanks i need help with step 44 i have a different question on that as well

1 Like
11

Hello @kyra.dillard2003 !

I am happy to help.

Looking forward to being able to help you in your continued good progress on your coding path. :slightly_smiling_face:

12

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