Learn Typography by Building a Nutrition Label - Step 24

HTML-CSS
1

Tell us what’s happening:
how do you put your header element within you .label element

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">
      <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>

  
    
  </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/105.0.0.0 Safari/537.36

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

Link to the challenge:

2

Actually the question wanted something else:

Wrap everything within the .label element in a new header element.

I can still answer your question though if you want? (let me know)

But w.r.t. this exercise what you should know is:
they want you to take all the code currently inside the label element (that means the code that is between its opening and closing tags)
and ‘wrap’ it with another tag ‘header’

This whole block is called a ‘label element’. And they said to do something with what is “within it” so that means everything from the h1 down to the last p tag.
And wrap these lines with a header which means putting a new header tag above the h1 and a closing tag below the last p line. (but all within the .label div)

Hope this helps

3

Got it, thanks a lot

4

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