Learn Typography by Building a Nutrition Label - Step 30

HTML-CSS
1

Hi, any help on this would be much appreciated. Really stuck.

Step 30

Within your .calories-info element, create a div element. Give that div element a class attribute set to left-container. Within the newly created div element, create a h2 element with the text Amount per serving. Give the h2 element a class attribute set to bold small-text.

Hint

You should create a new div element within your .calories-info element.

This is how they start you off:

</div>

<!-- 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">
<h2 class="bold small-text" Amount per serving</h2>
    </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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

You haven’t created an additional div within your .calories-info element.
Also, your opening h2 tag isn’t closed properly.

3

This is what they start me off with

 <div class="calories-info">

    </div>

So I’m a little confused when they say “create a new div element within your .calories-info element.”

4

Thank you for helping,

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

I have tried this but now getting hint “You should create a new h2 element within your .left-container element.”

Is adding the > to the opening H2 tag what you meant?

5

Yes, you’ve successfully nested a div within a div. You still have an issue with your h2 element though. Your class attribute should be inside the opening tag. Also, you haven’t closed off your opening div tag above it properly.

6

Thanks, will keep trying

I tried it this way,

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

But it is still giving the message “You should create a new h2 element within your .left-container element.”

7

Every HTML tag needs both < and >. One of your div tags is missing >. Fix that and your code will pass.

1 Like
8

Thanks so much for your help! It has passed now.

9

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