Https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-33

Tell us what’s happening: Please I’m finding it very hard to pass step 33 on building a Cafe menu, its complicated
Describe your issue in detail here.

  **Your code so far**
/* file: index.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: 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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36

Challenge: Step 33

Link to the challenge:

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

yes i did that but it doesn’t seem to have any effect
Please help me out maybe with a screenshot or something

What does your current code look like?

.flavorFrench Vanilla

I even tried <p .flavor="French Vanilla</p> none of them worked

please kindly just show me how it out to look like

The syntax is incorrect.

<element class="className"></element>

so are you saying that I should remove that French Vanilla value and just put one <p class=“flavor”

?

Class is an attribute of the element, and it goes inside the tag. The text French Vanilla is between the tags, and you don’t want to delete it. The task requires only adding a class to the element p.

This is correct start

<p class=“flavor”

Yes you are so correct and helpful, I really appreciate it. I have finally passed it. Thank you very much for your help :slightly_smiling_face:

1 Like