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

Español HTML-CSS
1

Cuéntanos qué está pasando:

No entiendo cual es el error, me dice “debes utilizar un selector h1” no se supone que ya lo estoy usando?

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>
        <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>
    </div>
  </body>
</html>

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


/* User Editable Region */

.h1,h2 {font-size: 40px;
        font-size: 30px;}

/* User Editable Region */


.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;
}

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

.item p {
  display: inline-block;
}

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

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

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/131.0.0.0 Safari/537.36 OPR/116.0.0.0

Información del Desafío:

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

2

Bienvenido al foro @Semimaru

Debe crear selectores separados para cada tamaño de fuente.

Feliz codificación

1 Like
3

Muy buenas y gracias por la bienvenida. En primer lugar gracias por tu respuesta. Lo hice también de esta forma y sigue diciendo que el código no pasa. Que debo utilizar un selector h1

body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

.h1 {font-size: 40px;}
.h2 {font-size: 30px;}

4

Lo que pasa es que estás usando el selector como si fuera un selector de clase .h1 para que sea un selector de un elemento le tienes que quitar ese punto h1

1 Like
5

Aaay! Que fallo mas tonto!! dos días encajado aqui por un punto jo me siento idiota :sweat_smile:jajaja, muchas gracias amigo

1 Like
6

No te preocupes, son cosas que les pasa hasta a los mejores.
Éxitos en tu aprendizaje :+1: