Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

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.

/* 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; rv:109.0) Gecko/20100101 Firefox/114.0

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

Link to the challenge:

2 
<!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">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
        <div class="left-container">
          <span>230</span>
      </div>
    </div>
  </div>
1 Like
3

The following is what you get in this challenge:

image
image939×192 15.2 KB

As you can see, the closing div tag is marked here. After that tag, you should add the ‘span’ element. The ‘p’ element is positioned correctly.

Restart step.

10 Likes
4

thanks man
really helpful!

3 Likes
5

Thanks, brain got stuck couldn’t think am including the span inside the div