Learn Basic CSS by Building a Cafe Menu - Step 33

Tell us what’s happening:
Describe your issue in detail here. Hi - been at this for quite some time. Doesn’t make sense it isn’t passing

  **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">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <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/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

Helloo
Incorrect syntax

We usually declare classes and other attributes inside opening tag

1 Like

Hi @ShayD ,

This is not how you add a class to your html element.

You already have used a class before in your code :wink:

1 Like

I think I am doing it - please look -

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

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.

```
Your code goes here
```

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

Hey there. How did you make these triple backticks in your post to look like text? I can’t figure it out :upside_down_face:

Even if I quote your text with them, they disappear. It’s kinda confusing

1 Like

You add a backslash \ before the character you wanna escape :wink:

1 Like
            <p>3.00 </p>
            <p>3.00 </p>```/

it only letting me paste the end of the code

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

Why is that? I am not sure why.
I hope this will help you :

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

Now, you always add the class to the opening tag of the element you want.

Here, you have to add the class to the p element. So, the class should be within the opening <p> tag .

The div with the class menu was just an example for you.

1 Like

yes! I got it! so simple yet so hard to figure out. I hope I retain this stuff. :slight_smile:

1 Like

You did so well figuring it out on your own. Good job :clap:

1 Like

You are told to add the /* class = “flavour”*/ to the P element.

French Vanilla

3.00

sup guys
should I switch to python?

switch to python from what? this thread is about a specific challenge on the responsive web design curriculum. Maybe it’s better if you open your own topic for your own question?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.