Learn Typography by Building a Nutrition Label - Step 51

HTML-CSS
1

please i need some help, i thing i did all the steps but it’s keep saying Your new p element should have the text Trans Fat 0g .

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 class="divider"></div>
   <p class="indent no-divider">
     <span>
       Trans Fat 0g
     </span>
     <i>
         Trans
     </i>
 </p>
 </div>    

<!-- 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Typography by Building a Nutrition Label - Step 51

2

After your last .divider , create another p element with the text Trans Fat 0g . Italicize the word Trans by wrapping it in an i element. Give the new p element the class attribute set to indent no-divider . Wrap Trans Fat 0g in a span element for alignment.

Breaking it down into simple steps:

  1. Put the text ‘Trans Fat 0g’ in a p element.
  2. Inside the p element, italicise the word ‘Trans’.
  3. Add the class attribute to the p element.
  4. Inside the p element, wrap a span tightly around the text.

You are not passing because:
You have no p element or class attribute.
You should italicise the exisiting text ‘Trans’, not duplicate the text.
The span should wrap tightly around the text, so there are no spaces on either side of the text.

2 Likes
6

Hey!
Don’t provide full code solution. It’s against the forum rule.
@nirutamagar760

1 Like
7

thanks, i got it. i have been repeating the Trans

1 Like
8

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