Aprenda CSS básico criando um menu de restaurante - Passo 71

Português HTML-CSS
1

i putting the code in correct place and continues wrong

<!-- 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>
        <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>
      <footer>
        <hr>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
        <hr>
      </footer>
      

<!-- User Editable Region -->

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

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

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

.item p {
  display: inline-block;
}

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

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

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Desafio: Aprenda CSS básico criando um menu de restaurante - Passo 71

Link para o desafio:

2

Olá!

Você colocou o elemento hr dentro do elemento footer. O exercício pede que seja colocado entre os elementos main e footer, e não dentro de um deles.

Após o fechamento do elemento main, e antes da abertura do elemento footer, coloque o elemento pedido nesse local.

Se ainda não conseguir basta avisar.

:slight_smile:

3 Likes
3

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

[details="Summary"] This text will be hidden [/details] 
      <article class="item">
        <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
      </article>
      <article class="item">Preformatted text
        <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> 
  <footer>
    <p>
      <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
    </p>
    <p>123 Free Code Camp Drive</p>
  </footer>

fiz dessa maneira mas ainda fica dando erro

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

Desserts

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll

2.50

Visit our website

123 Free Code Camp Drive

fiz dessa que eu acho que está errado e continua dando erro

4

Use o botão para reiniciar a etapa e limpar os erros que podem existir.

Observe na imagem onde começa e termina o elemento main, e onde começa e termina o elemento footer.

Após o main e antes do footer é onde você deve colocar o elemento hr, entre os dois.

Screenshot_20230131-111144_Opera
Screenshot_20230131-111144_Opera1078×1910 471 KB

2 Likes
5

O certo é colocar abaixo da tag de fechamento main ,e antes da tag de abertura de footer apenas.
Captura de tela 2023-03-10 023847

1 Like