Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

I don’t know what I am doing wrong and I am lost in a fog.
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><p <span> <span class="bold";> Total Fat</span> <span class="bold"> 10%</span><span> Total Fat 8g 10% </span></p>
      <div class="divider"></div>
    </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/114.0.0.0 Safari/537.36

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

Link to the challenge:

2

The instructions on this challenge says that you create a p tag after the div with a class of divider and add some text.

I cant see one in your code, maybe that’s why it isn’t passing. So below that div with class of divider, add a p tag then continue adding the text given in the challenge.

Hope his helps.

3

After div element with the class of divider add p element and inside that p element all instructions are applied
p element text is “Total Fat 8g 10%”
but you have to wrap “Total Fat” and “10%” text into two span elements and give these span elements a class of bold.
and lastly wrap span element with the text “Total Fat” and text “8g” into another simple span element with no class.

4

Hi this is where I am and I have been posting to an old question but this 43 is correct.

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

I made some changes and am still wrong.

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

It has been hours and no one has helped with my question


% Daily Value *


7

You need to be patient. I dont have time to help right now, and everyone on here is either working on their own challenge or may be answering other questions at the moment. Anyone who gives you a response is volunteering their own time to help

8

sorry about that my friend

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

This will probably be my last response for a while because I have to get back to work, but you should not have total fat 8g 10% at the end. You shouldnt add that text twice you need to wrap the spans around the text you added the first time

10

This is where I am

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

  1. The span element with the bold class should only have the text Total Fat inside it.

  2. The text 8g should be between the two span elements you have now (with a space in front of it).

  3. Now with that fixed, you need to add a third span element that will contain both the span element with the bold class and the text 8g.

This is the structure you are going for. I kept the 8g text just for reference but removed all other attribute/values and text content.

<p>
  <span>
    <span></span> 8g
  </span>
    <span></span>
</p>
12

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