Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

Tell us what’s happening:

i think ive code this right if im reading the other form post right but i keep getting you should add the flavor class to your p element

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

            <p> <div class="flavor"></div>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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 32

1 Like
2

Hello there.
You added the class to a div. The lesson does not ask you to add a div, only a class name. Remove the div, then add the class to the paragraph element.

In these lessons, do not add elements that you’re not asked to and neither should you interfere with what is default unless instructed. Do this to avoid unnecessary bugs.

3

<p> <class="flavor">French Vanilla</p>
<p>3.00</p>
so i took out the div but i still get this same thing

5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

You are almost there but remember, attributes are written in the opening tag of an element.

1 Like
7 
<p< class="flavor">French Vanilla></p>
            <p>3.00</p>
8

remove the mark that comes after p.

1 Like
9

so the back tick mark for the opening tag for the p element

10

I don’t get what you mean, can you kindly be a bit clearer?

11 
so it  should be 
<p  class="flavor" French Vanilla></p> ?
12 
<p  class="flavor">French vanilla</p>
13

These are not backticks <<< these are ``` . The key is located just above your Tab key.

You are almost there, but your opening tag is missing a closing mark.

1 Like
14

This is correct. It should pass the test.

15

finally got it cant thanks for all your help

16

You are very much welcome.

18

this didnt pass the test and im still stuck

19

what are you stuck on

20

nevermind, i figured it out, thank you for the quick reply. I have been stuck on step 33 of the cafe one. I cant quite figure out how to do it.