Learn Basic CSS by Building a Cafe Menu - Step 33

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
need help for the step 33 in cafe menu building and I don’t know what to do in this step?

  **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 .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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

Add the class name flavor to the French Vanilla p element

This is the instruction. Understand the instruction.
You are in index.html page and your code is for css page.

You have learned how to assign attribute and value at an element.

3

You just need to add the class name “flavor” to the p element that has “French Vanilla” as its content.
Just for an example, this is how you’d add a class name of “description” to a p element that has “Here’s a paragraph” as its content:
<p class="description">Here's a paragraph.</p>

4

Why would you accept hartatociptajaya answer as the solution?
His code snippet makes no sense.

5

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