Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

I donot understand what to do???

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">
     <div class="header">
      <div class="label">
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
    </div>
    </div>
      </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;
}

h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

Your browser information:

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

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

Link to the challenge:

2

In your html file you don’t need to put the period for the class in there. That’s only for the css file to let it know to look for the class named label. You also need to close the header tag as that’s missing from your code.

3

still not getting???

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

4

In your first div remove the period in front of the word label.
Delete the 2nd label div that’s under the header and it’s closing div at the bottom.

Try that and check your code again.

5

Thankyou ! it works :grinning: :grinning: :grinning:

6

YAY!!! You’re very welcome :slight_smile:

Keep going! You got this!

1 Like
7

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