Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

Tell us what’s happening:
Look the following.

Step 33 Says

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.

My solution( the code I write)

Amount per serving

Calories230

  </div>
</div>

=================
Errors displayed is posted bellow

Sorry, your code does not pass. Try again.

Hint

Your p element should have the text Calories.

I don’t Understand my mistake (any one who can help me)

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">
        <h2 class="bold small-text">Amount per serving</h2> 
        <p>Calories<span class="right">230</span></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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.61

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

Link to the challenge:

2

The instruction: " Also below the .left-container element, create a new span element with the text 230 ."
Restart step. After the h2 element, add the ‘p’ element with the text “Calories” and close it with the closing ‘p’ tag. Below this element goes the closing div tag of .left-container. After that add the ‘span’ element:

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

I have emphasized the opening and closing .left-container tags.

1 Like
3

Done. Thank You very much for your kind help.

1 Like
4

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