Learn Basic CSS by Building a Cafe Menu - Step 32

Tell us what’s happening:
Describe your issue in detail here.
I’m not following how to add flavor, I put a class element similar to what was used for menu but it isn’t right.
Your code so far

“”“

<class=“flavor”>French Vanilla

”“”

<!-- 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>
           
            <p><class="flavor">French Vanilla</p>
            <p>3.00</p>
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 32

Link to the challenge:

Hi!
So let’s compare how you wrote the class for the div,

<div class="menu">

To the p element.

<p><class="flavor">French Vanilla</p>

The class for the div is inside the opening tag which is correct. Your p elements class should also be inside the opening div.

1 Like

like this?

<p><div class="flavor">French Vanilla</p>

When you wrote this

<div class=“menu”>

You were adding a class attribute of value “menu” to the div element.

For this exercise, you are asked to add a class attribute but to a different element and with a different value. Try to use what you did before as inspiration.

You’re also gonna need to assign an article class. The reason for this is so you can stylize the article class in your stylesheet later.

that did the trick, thank you

1 Like