Aprende CSS básico construyendo un menú de cafetería - Paso 42

Español HTML-CSS
1

Cuéntanos qué está pasando:

No consigo pasar de este nivel.

me dice que debo tener solamente cinco elementos .item.

no se que estoy haciendo mal.

¿me pueden ayudar?

gracias

Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article><pclass="item"><pclass="flavor">French Vanilla</p><pclass="price">3.00</p></article>

<!-- User Editable Region -->

          <article><pclass="flavor">Caramel Macchiato</p><pclass="price">3.75</p></article>
          <article><pclass="flavor">Pumpkin Spice</p><pclass="price">3.50</p></article>
          <article><pclass="flavor">Hazelnut</p><pclass="price">4.00</p></article>
          <article><pclass="flavor">Mocha</p><pclass="price">4.50</p></article>

<!-- User Editable Region -->

        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item {
  display: inline-block;
  }
.item {
  display: inline-block;
  }
.item {
  display: inline-block;
  }
.item {
  display: inline-block;
  }
.item {
  display: inline-block;
  }

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

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/128.0.0.0 Safari/537.36

Información del Desafío:

Aprende CSS básico construyendo un menú de cafetería - Paso 42

2

Hay algunos problemas con el código:

Primero.
Esto es parte del código original (abajo de <h2>Coffee</h2>)
las instrucciones nos dicen que podemos tomar esto como ejemplo, y está afuera del área que podemos modificar, pero en tu codigo lo modificaste.
(te recomiendo resetear el código)

<article class="item">
    <p class="flavor">French Vanilla</p>
    <p class="price">3.00</p>
</article>

este es el <article> de tu codigo,

<article>
    <pclass="item">
   <pclass="flavor">French Vanilla</p>
    <pclass="price">3.00</p>
</article>

las instrucciones nos piden

Empieza añadiendo la clase item a los demás elementos article

Añadiste un class item, pero también añadiste un elemento p extra y estás añadiendo clases que aún no se nos piden (price y flavor).

Solo nos estan pidiendo

añade la clase item a los demás elementos article

Volviendo al código que nos dan de ejemplo.

<article class="item">
    <p class="flavor">French Vanilla</p>
    <p class="price">3.00</p>
</article>

La etiqueta article tiene una clase con el valor item, esto es a lo que se refiere las instrucciones,
Recuerda solo usa el código que nos dan de ejemplo.
Si aún tienes problemas con como agregar una clase puedes buscar la sintaxis en google.

un detalle mas.

codigo original:

 <p class="flavor">French Vanilla</p>

Código que se modifico:

<pclass="flavor">French Vanilla</p>

hay una diferencia entre los codigos
correcto:

<p class=...

incorrecto:

<pclass=...
3

Recuerda que en los ejercicios solo hay que modificar lo que está en esta parte:

image
image973×290 19.9 KB

y solo añadir lo que se pide, no adelantarse a las instrucciones, porque aunque lo añadas sea correcto, te puede llegar a marcar un error