Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

Tell us what’s happening:

Add the class name “flavour” to the p element.

I need help with this

Your code so far

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

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          </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/17.4 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 32

2

Hi @FELOPO

Add the class name flavor to the French Vanilla p element.

You do not need to create a new element for this step.
Take a look at the earlier code you wrote on how to add the class attribute.

Happy coding

1 Like
3

Kindly elaborate because I’m still confused

4

Please reset the step to restore the seed code.

Then, use the following code you write earlier to add the class attribute to the paragraph element.

5

You need to do this:

French Vanilla

3.00

![Screenshot 2025-02-11 000121|690x499](upload://rujc4bEelRXudA2NkReF9Xy2waD.png)
6

hi @romanmagarati

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

3 Likes
7

Hey Buddy See, How you’ve used the class attribute inside this div element.

But now you’re instructed to add the class flavor inside your p tag.

Note : Kindly do remove the class from div and delete this div element.

Hope You Understand.

8

Still stucked at this level. Maybe a more detailed illustration will help

9

@FELOPO
Question for you:
In your orignial code why did you create a div and add a class to that div instead of adding the class to inside the opening p tag?

<p  inside the p tag attributes go here>text goes here </p>

All your <tags> should be properly made with < and >

<!-- properly made  opening and closing tags with ">" -->
<p>text and stuff</p>
 <!-- NOT  properly made tags  where there  is ">" missing from the opening tag -->
<p    text and stuff </p>
10

Syntax for your elements:

<opening-tag  attribute="value"> TEXT </closing-tag>
11

Thank you buddy. Done finally

1 Like