Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
i do like this but it dosent work, says that atleast one have to say “Total Fat”, but its already set in that way… im stook…

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 class="bold">Total Fat</span><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 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

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

Link to the challenge:

2

Welcome, Angel @soyfullclip.7
I think that you have a <span without a class around the 8g.
Good luck!

3

hi, good morning, i just change that and jejeje it still no working… says that total fat is not wrap on a span… thnks

4

why do you have this span?

5

becouse aksme for 3 span… and i dont know where put the third span

6

EXAMPLE:

<p>I like <span class="bold">cheese</span> but not <span>smelly cheeses like <span class="bold">stinking bishop</span></span>.</p>

I nested a span within a span… that’s what you need to do.

7

Your p element should have three span elements.

thats what thehint says

8

i think i cant… im really stressed out

9

i think i cant… im really stressed out

Well done, you’re now a fully-fledged coder :rofl:

Seriously though, just take a step back, go have a cup of tea or scream into the void for a minute. Then come back and try again. Reset the lesson if you have to and work methodically through each step in turn. Use the example above which I gave you, as an idea of how the syntax works for nesting elements within other elements…

2 Likes
10

thanks a lot man… jajaja i guess i need to walk a few minutes… jajaja

11

Did you get it, @soyfullclip.7 ?
Sometimes it helps to read these instructions from the bottom to the top.
" Also wrap the words Total Fat 8g in an additional span…"

12

bro did you got it??
i am unable to get it bro…it keep saying " One span element should wrap the text Total Fat "
can you help me broo

13

bro did you got it??
i am unable to get it bro…it keep saying " One span element should wrap the text Total Fat "
can you help me broo??

14

Hi there @azizuddinkhateeb and welcome to the forum!

If you need help with this challenge, please click the Help icon which appears after you have submitted incorrect code three times.

Untitled

This will create a forum post which includes your full code, a link to the challenge and an opportunity to explain in your own words what you are having difficulty with.

15

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