Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

I have made changes to different format and i am still getting the following request.
At this point i am running out of ideas what the request is really asking of me.

I am getting the following request
Sorry, your code does not pass. Try again.

One span element should wrap the text Total Fat.

Your code so far

% Daily Value *

Total Fat 8g 10%

Total Fat 8g 10% 

<!-- 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">
        <p>
            <span class="wrap">Total Fat</span>
            <span> 8g</span>
            <span class="bold">10%</span>
        </p>
    </div>
    <p>
        <span class="bold">Total Fat</span>
        <span> 8g </span>
        <span class="wrap bold">10%</span>
    </p>

     
   

<!-- 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

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 43

2

you should have the text Total Fat 8g 10% only once
also, you need to have the text separated in two chunks, so you need one span for Total Fat 8g so that it is aligned to the left, and one span for 10% so that it is aligned to the right. Total Fat also needs an additional span to make it bold

3

After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap the text Total Fat in a span element with the class of bold. Wrap the text 10% in another span element with the class of bold. Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment.

You have modified your code.Reset your challenge and following the instructions carefully add all the required tags, attribute and values step by step.
@lifejacketz

4

Hello @lifejacketz !

This step is tricky. Here is how I broke it down to complete it and pass the code through as per the instructions. I hope it can help you, too.

Step 43
1. After last .divider element create a ```p``` element.
2. Give it text ```Total Fat 8g 10%```
3. Wrap ```Total Fat``` in a ```span ```with ```class bold```
4. Wrap ```10%``` in a ```span ```with ```class bold```
5. Final step ```Wrap the Total Fat Span together with the 8g.```

This worked for me to help me understand it step by step better.
5

Thank you for your support.
This is my outcome.

% Daily Value *

Total Fat 8g 10%

Total Fat 10% Total Fat 8g

I am still getting a following request.
Your new p element should have the text Total Fat 8g 10% .

Have to be honest, at this point i am lost. but not broken :slight_smile: if you have a different way you could explain, i am all ears !

6

It looks like the 10% has been moved from the end of the p element statement.

Here is an example of how the outcome should appear. Not using the provided text.

<p><span><span class="value">Text</span> text</span> <span class="value">text</span> </p>

If we use the provided text and fill in the text areas, according to this, it should work.

If it is not working after fitting the span elements as above but with the provided information, I suggest trying another browser, clearing the cache, or reboot. As well, extensions and dark mode can cause issues.

I hope this helps you.

7

Thank you so much and that did the trick. Thank everyone for not giving up on me. :slight_smile:

1 Like
8

You are very welcome!

This is a community, as you can see, where all members help one another.

May you enjoy smooth coding from here.

9

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