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

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.
me ayudan porfi
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 class="established">Est. 2020</p>
        <hr>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line">
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

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

/* FOOTER {
font-size: 14px;
} 
*/


/* User Editable Region */



/* User Editable Region */


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

Challenge: Aprende CSS básico construyendo un menú de cafetería - Paso 78

Enlaza al desafío:

Por favor, díganos qué está pasando con sus propias palabras.

Aprender a describir problemas es difícil, pero es una parte importante de aprender a codificar.

Además, cuanto más digas, ¡más podremos ayudar!

osea no logro entender el problema

Pero debería haber descrito el error que está recibiendo.

El sistema está programado de tal manera que cuando tu código falla, te dirá qué es lo que está mal. Era ese mensaje que quería ver.

Sin embargo, revisaré su código y descubriré qué está mal.

1 Like

okey gracias igual sigo intentando

El error ocurrió aquí :point_up_2:

Primero, descomente el bloque de código y cambie FOOTER a footer
Se supone que debe estar en minúsculas, no en mayúsculas.

Se supone que su código debe aparecer así :point_down:

footer {
  font-size: 14px
}
1 Like

no me pasa y puse tal cual me dijiste

Es posible que hayas estropeado tu código.

Por favor, reinicie amablemente el desafío y coloque el código que publiqué antes. :point_down:

1 Like

…O muéstrame el código actualizado que no funciona.

1 Like

Como un extra a tu duda. o por si no lo has resuelto
image

El problema es que agregaste tu código dentro de esta parte

/* FOOTER (aqui) */

y todo lo que está entre estos caracteres /* */ es un comentario, o sea que tu navegador no lo va a ejecutar

Esta parte solo es un comentario para que sepas que a partir de ahí, es el código para modificar el “footer”

 /* FOOTER */

Ahora revisando tu código, y quitando los caracteres de comentario:

FOOTER {
font-size: 14px;
} 

Las instrucciones dicen que tenemos que modificar el elemento “footer” pero en tu código está mal escrito (ya que usaste el texto que ya estaba), "FOOTER ".
Mayúsculas y minúsculas importan mucho en la programación.

Por como aparece tu código, creo que lo añadiste en otra parte:

Ahora te muestro un ejemplo, pero apuntando a los elementos “p”

si ya intentaste varias veces y modificaste mucho el código, es recomendable resetearlo (en el botón restablecer).

extra: cuando estamos iniciando puede ser dificil explicar nuestras dudas, ya que no entendemos bien las instrucciones o ni siquiera sabemos lo que no sabemos, pero el añadir una descripcion de lo que creas que es el problema te ayudará a ti y los que traten de responderte. puedes empezar explicando tu error. por ejemplo: “ya añadi el footer pero no pasa mi prueba” o “como añado un selector” etc…
la misma página cuando no pasa una prueba nos da una pequeña ayuda también, en tu caso talvez te dio esta

2 Likes