Learn Typography by Building a Nutrition Label - Step 43

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

Your code so far

/* file: index.Ext.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>
    <div class="daily-value small-text"></div>
      <p class="bold right"> % Daily Value *</p>
<p> <span class="bold">Total Fat 8g</span> <span class="bold"> 10%</span></p>
      <div class="divider"></div>
    </div>
  </div>
</body>
</html>
/* file: styles.Ext.css */
<!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>
    <div class="daily-value small-text"></div>
      <p class="bold right"> % Daily Value *</p>
<p> <span class="bold">Total Fat 8g</span> <span class="bold"> 10%</span></p>
      <div class="divider"></div>
    </div>
  </div>
</body>
</html>

Your mobile information:

M2101K6G - Android 13 - Android SDK 33

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

Link to the challenge:

You should create a new p element at the end of your .daily-value element.

Bu hatayı düzeltmedim, nerede yanlış yapıyorum?

“After your last .divider element, create a p element…”

You place the p element before the last .divider element instead of after the last .divider element.

You also have some problems with the spans. There should be three of them but you only have two.

1 Like

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