How can i create the class flovor?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

\ file: <!DOCTYPE html>
<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
      <p>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>
<!DOCTYPE html>
<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
      <p>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: 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;
}
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/102.0.5005.61 Safari/537.36

Challenge: Step 33

Link to the challenge:

2

lets say i said add class header to your h1

<h1 class="header"> Welcome </h1>

3

can you be more simpler?

4

of course

its asking you to create class for your <p>
simply add class like this <p class="Whatever-u-want-ur-class-name-is">

5

it wants you to give the <p> that says french vanilla a class that says flavor

6

This is how you add a class to a p element.

<p class="red">Some red text.</p>

It is asking you to do the same thing but to the French Vanilla, and adding flavor instead of red.

7

heads up, admins will yell at you if you post the answer, happened to me a few times

8

i agree with them, il try being more subtle

9

it’s not working i tried

10

Could you please show me your code? Then I can see what isn’t working.

11

French Vanilla

3.00

here is the code.
12

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

link code like this

13 
 <p class="flovor">French Vanilla</p>
            <p>3.00</p>
14

you mispelled flavor

15

sorry sorry for that​:sweat_smile::sweat_smile:

16

we’re all in this together! dont apologize!

17

when your coding in your own you can spell or name ur classes as you wish, but the lesson will ask you to CSS your class later so it wants to make sure you spelled it right.

just an FYI

18

Don’t worry about misspelling stuff, I am dyslexic and I am constantly misspelling code then wondering why it isn’t working. :laughing:

If you have a word processor that does spell checking for American English, and you tend to misspell things like this, perhaps try putting class names ect in there to check the spelling?

That way you will know if it is just a spelling mistake stopping your code working if the code itself is correct.

But we’re here to help with code and that includes the spelling parts. :smiley:

19 
 <p class =   "flavor">      French Vanilla </p>
            <p class =   "price">       3.00 </p>

Your p elements should not have any space between them.
how to do spacing in it?

20

Hi, if you’re stuck on the next lesson you need to make a new forum post about it.
Then folks will be able to help you with that next step. :slightly_smiling_face: