Learn Typography by Building a Nutrition Label - Step 51

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

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="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p></div>
      <div class="divider"></div>
    <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>

<!-- 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;
}

.medium {
  height: 5px;
}

.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;
}

.right {
  justify-content: flex-end;
}

.indent {
  margin-left: 1em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 51

2

You appear to have created this post without editing the template. Please edit your post to 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!

4

Remove add blocker or change the browser…your code is passing

5

I have been stalked in these challenge since yesterday , I inserted the correct sentence they said that I should insert in the new p element, still yet it fails​:person_facepalming::person_facepalming::person_facepalming:

6

i paste your code and it was passing for me…

1 Like
7

You did almost according to the instructions, but kindly indent your p tag as your other elements are, when you will do that then you will be able to pass this test.

Hope you understand. :partying_face:

1 Like
8

:roll_eyes::roll_eyes::roll_eyes:What is the name of the browser u are using?

9

Ok thank u very much let me try it

1 Like
10

I am using Chrome and i dont have add blockers

11

But it is thesame chrome that I am using

12

Its stil passing the lesson :rofl:

13

Your code is not passing the lesson. I am not sure why people are saying it is. I think they are only copying the one line instead of all your code. Forget the the new browser because its not going to work with your current code

You need to remove the closing div here for your code to pass

2 Likes
14

Ok thank u very much let me go and remove it

15

You are right I was copying only one line…

16

Thank you very much everyone I have finally passed it​:dancer::dancer::dancer:

1 Like
17

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