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

1

Conte-nos o que está acontecendo:

Eu estou parada no passo 51 , do criando um menu de restaurante no CSS. Não estou entendo como fazer , pois a verificação traz que deve se adicionar a classe .dessert ao seletor flavor , já fiz mil e uma tentativas . Inclusive pesquisei no gemini , ainda não ficou claro para mim . Quem pode me ajudar?

Seu código até o 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>
          <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>
        </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;
}

.item p {

/* User Editable Region */

  display: inline-block;
  .flavor{
    text-align: left;
    width: 75%
    class= ".dessert"
  }



/* User Editable Region */


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

Informações do seu navegador:

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

Informações do desafio:

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

2 
.item p {

/* User Editable Region */

  display: inline-block;
  .flavor{
    text-align: left;
    width: 75%
    class= ".dessert"
  }

That is not valid CSS. Reset and try it again.

It is asking you to add the class selector .dessert to the exiting .flavor selector. You add it by comma separating the two selectors.

.selector1, .selector2 {
  /* some styles */
}
1 Like
3

Oi, @lizaraxamg! Traduzindo o que foi passado por @lasjorg, para adicionar uma classe a um seletor no CSS, tudo o que você precisa fazer é colocar uma vírgula após o primeiro seletor (no caso, .flavor) e adicionar a nova classe (.dessert). O formato é como ele descreve:

.seletor1, .seletor2 {
  /* os estilos vão aqui*/
}

Espero ter ajudado! Bons estudos! :smiley:

1 Like
4

Muito obrigada @lasjorg

5

Obrigada @danielrosa … Espero contribuir com você um dia .

6

Conte-nos o que está acontecendo:

Nosssa coloquei a classe .dessert no seletor .flavor ainda não deu certo , não sei o que estou errando , pode ser uma coisa imperceptivel. Mas ainda não passou , alguém pode me dar mais alguma ajuda.

Seu código até o 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>
          <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>
        </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;
}

.item p {

/* User Editable Region */

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



/* User Editable Region */


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

Informações do seu navegador:

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

Informações do desafio:

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

7

Oi, @lizaraxamg! Tem uma linha de propriedades fora do seletor, a que diz display: inline-block;. Coloque essa linha para dentro do seletor. Além disso, por convenção, não se esqueça de separar o seletor .dessert da vírgula e da chave inicial com um espaço.
Teste novamente depois dessas alterações. Bons estudos! :smiley: