Impara le basi del CCS realizzando il menù di un bar - Step 66

Italiano HTML-CSS
1

Dicci cosa sta succedendo
Buonasera sono bloccata al livello 66. Viene visualizzato questo errore:" Dovresti aggiungere un elemento hr . Gli elementi hr sono autoconcludenti." Questo è il comando da eseguire:" Aggiungi un elemento hr tra l’elemento p con la classe established e il primo elemento section . Nota che gli elementi hr sono autoconcludenti." Qualcuno può cortesemente aiutarmi a capire dove sbaglio? Ho provato ad aggiungere l’elemento hr in diversi punti, dopo aver letto e riletto le istruzioni. E poi volevo chiedervi se per caso è possibile visualizzare oltre al lavoro da noi svolto, il lavoro finito, come appare all’inizio in modo da avere linee guida che ci consentano di capire dove sbagliamo nella scrittura del codice. Grazie a tutti
.

Il tuo codice fino ad ora

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

<!-- User Editable Region -->

      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <hr class="established">
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p><hr class="established">
          </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>
        <hr class="established">
        <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>

<!-- User Editable Region -->

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

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

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

.item p {
  display: inline-block;
}

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

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

Informazioni del tuo browser:

Lo user agent è: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Impara le basi del CCS realizzando il menù di un bar - Step 66

Link alla sfida:

2

nota che dice "elemento p con la classe established, non di dare quella classe all’elemento hr

Inoltre hai creato due elementi hr, mentre te ne chiede solo uno

1 Like