Aprende tipografía construyendo una etiqueta de nutrición - Paso 43

Español HTML-CSS
1

Tell us what’s happening:

I have problems with what is asked of me in step 4. Create my

element with the nested in the text “total fat” and this same one nested in another with the text “8g”… final does not work for me and I left it this way "

Total Fat 8g10 %

" HELP

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">% Daily Value *</p>
      <div class="divider"></div>
      <p class='bold'><span class='bold'> Total Fat</span><span> 8g</span><span class='bold'>10%</span></p>
      <p class='bold'><span class='bold'>Total Fat</span> <span class='bold'> 8g </span><span class='bold'>10%</span></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;
}

Your browser information:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Aprende tipografía construyendo una etiqueta de nutrición - Paso 43

2

Welcome to the forum @ChristoRD

You have duplicated the code.

[quote=“ChristoRD, post:1, topic:698795”]

      <p class='bold'><span class='bold'> Total Fat</span><span> 8g</span><span class='bold'>10%</span></p>
      <p class='bold'><span class='bold'>Total Fat</span> <span class='bold'> 8g </span><span class='bold'>10%</span></p>

[/quote]

  1. please remove the second p element.
  2. remove the bold class from the p opening tag.
  3. remove the span element nesting the text 8g
  4. place a span opening tag after the opening p tag
  5. place a span closing tag after the text 8g

Happy coding

1 Like