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

Español HTML-CSS
1

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.

Tu código hasta el momento

<!-- 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><span class="bold">Total Fat</span> 8g <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;
}

Información de tu navegador:

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

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

Enlaza al desafío:

2

Hola Armando y bienvenido.

Te falta el último paso:

Por último, anide el elemento span Total Fat y el texto 8g en un elemento span adicional para alineamiento.

Un saludo.

3

hola crloszgz, disculpa la molestia, estoy con el mismo problema y no puedo pasar, me podrias ayudar, y si podes escribir el codigo para solucionarlo te agradeceria, saludos

4

Hola Axel y bienvenido al foro.

No puedo ponerte el código aquí, ya que una norma del foro es no publicar las soluciones para que la gente pueda sacar el código por sus medios.

Es muy fácil y sólo hay que seguir los pasos. Como diría Fonsi: ´Despacito´.

Te pongo un ejemplo y luego tú saca tus conclusiones y lo adaptas al ejercicio.

Paso 1: " cree un elemento p y asígnele el texto Quiero 1 bicicleta."

<p>Quiero 1 bicicleta</p>

Paso 2: (lo pone en inglés, pero te lo traduzco) “Envuelva el texto Quiero en un elemento span con la clase fonsi”

<p><span class="fonsi">Quiero</span>1 bicicleta</p>

Paso 3: “Envuelva el texto bici en otro elemento span con la clase fonsi”

<p><span class="fonsi">Quiero </span>1 <span class="fonsi">bicicleta</span></p>

Paso 4: " Por último, anide el elemento span Quiero y el texto 1 en un elemento span adicional para alineamiento."

<p><span><span class="fonsi">Quiero </span>1 </span><span class="fonsi">bicicleta</span></p>

Y eso es todo. Revisa el código y adáptalo a tu solución.

Espero haberme explicado bien y que se entienda.

Un saludo.

5

Gracias, solucionado gracias a tu guia