Learn Typography by Building a Nutrition Label - Step 38

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
# Step 38

Below your .calories-info element, add a div with the class attribute set to divider medium.

ERROR : Test

Sorry, your code does not pass. Don’t give up.

## Hint

You should create a new div within your .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">
    <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">
      <div class="divider medium"> </div> 
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>

    </div>

<!-- User Editable Region -->



<!-- 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 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

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 38

Link to the challenge:

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

# Step 38

Below your .calories-info element, add a div with the class attribute set to divider medium.

ERROR : Test

********You should create a new div within your .label element.

4

Yes, you have copy-pasted the instructions and error. But you did not tell us about what parts of those instructions you don’t understand or find confusing. I want to talk to you, the fellow human, not a copy-paste of instructions.

I can provide much more effective help if you tell me what specifically is confusing about those instructions or errors.

5

image
image778×448 40.6 KB

I want to know why, when I place what it asks for, it throws me an error, it will be a bad closing of the =. I get a little dizzy.

6

You are making a change outside of the editable region. If you put that code you wrote on line 27, it will work.

‘below the element’ means after both the opening and closing tag for the element.

7

image
image512×596 34.6 KB

THANKS VERY MUCH.

I apologize, Jeremy.
I’m new to this. You are right about human contact, we should put aside the behavior of machines and socialize more. I am about to start a diploma in front end development, in the month of April. I found it interesting to at least take a tour here before hand. Is a pleasure to meet you. Maybe we can stay in touch.

1 Like
8

but how share code here

9

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