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

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" />
    <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>

<!-- User Editable Region -->

          <article>
            <p>French Vanilla</p><p>3.00</p>
            <p>Caramel Macchiato</p><p>3.75</p>
            <p>Pumpkin Spice</p><p>3.50</p>
            <p>Hazelnut</p><p>4.00</p>
            <p>Mocha</p><p>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;
}

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/109.0.0.0 Safari/537.36 OPR/95.0.0.0

Desafío: Aprende CSS básico construyendo un menú de cafetería - Paso 31

Enlaza al desafío:

2

Hola y bienvenido.

Cada saber y su precio debe estar dentro de un elemento article.

Ejemplo:

<article>
  <p>Sabor 1</p><p>Precio 1</p>
</article>
<article>
   <p>Sabor 2</p><p>Precio 1</p>
</article>
<article>
  <p>Sabor 3</p><p>Precio 1</p>
</article>
etc...

Saludos.

3

Hola muchas gracias, pensaba que el foro no se mando, ahora ya entiendo pensaba que un solo elemento “article” tomaba los demás elementos “p”, pero ya me haz solucionado mi duda, mil gracias colega.