Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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>

<!-- User Editable Region -->

 <div class="calories-info">
      <div class="left-container">
        <span>230
        <h2 class="bold small-text">Amount per serving</h2>
       <p>Calories</p>
      </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;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info h2 {
  margin: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

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

Link to the challenge:

2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

3

I have entered

element correct but is coming back as code does not pass. also when I closed the span tag it came back with a fail on that to, so I left the closing tag off and then it told me the p element is wrong

Test

Sorry, your code does not pass. Try again.

Hint

Your p element should have the text Calories.

4

this is the question.

Below your .small-text element, create a new p element with the text Calories . Also below the .left-container element, create a new span element with the text 230 .

5

You forgot to close your span element.

6

here is the problems I have

7

when I close the span element it comes back failing the span part of the question, when I took the closing span tag off it let me pass the span part of the question

8

Oh wait, I see what you’ve done wrong. With your span element closed (above), the issue is that you haven’t placed it correctly. You should have it after your .left-container element, not just after the opening tag of the .left-container element. The element as a whole includes the opening and closing tags (as well as everything in between).

9

here is my code

<div class="calories-info">
      <div class="left-container">
        <span>230</span>
        <h2 class="bold small-text">Amount per serving</h2>
       <p>Calories</p>
      </div>
    </div>

this is what I get back when I put closing span tag.

Test

Sorry, your code does not pass. Don’t give up.

Hint

Your span element should come after your .left-container element.

10

You need to move your span element (see my explanation above).

11

got it mate thanks, question passed. thanks for help

12

I’ve edited your code for readability. 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 (').

13

i tried everything the error i am getting is
Your p element should come after your .small-text element.

14

the hint is not very helpful but basically you are missing the span element as you have it in the wrong place (not to mention you forgot the closing tag for span)
Redo the exercise and pay attention to where the span element is supposed to go.

If you need further help, please open your own topic in future.

1 Like
15

thank you very new here don’t really know how it works thanks for the help!

1 Like