Learn Basic CSS by Building a Cafe Menu - Step 36

HTML-CSS
1

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

Your code so far

Coffee

3.00

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

<!-- User Editable Region -->

          <h2>Coffee</h2>
          <article><p class="item"><p class="flavor"French Vanilla></p>
            <p class="price">3.00</p>
          </article>

<!-- User Editable Region -->

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

.flavor {
  text-align: left;
}

.price {
  text-align: right;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.57

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

Link to the challenge:

2

You made changes where you shouldn’t have. I would restart the step to get the original HTML back.

The only thing you want to do is add the class attribute with a value of item to the article element. You would do this just like you added the flavor class or price class to the p elements.

1 Like
3

Coffee

item

French Vanilla

3.00

4

If you want to paste code in here you’ll need to use the triple back tick method. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

5

I’ve been stuck on this for months I’ve tried that

6

Well, I just tried it and it worked for me. So either you are not adding the item class correctly to the article element or you are doing something else that is causing the test to fail. Please paste all of your HTML in here (not just the part you are working on) so we can see what you are doing.

7

yes but i do not understand what it means write three back ticks?

8

Did you read what I posted above about how to paste your HTML in here? You must follow those instructions or we won’t be able to see what you are doing.

Also, paste all of your HTML in here.

9

Hello!
I believe what BBSmooth is explaining to you is that you need to not add a new p element with the class item. The class item is only to be added to the article element under the Coffee. It should be added the same way that you added the flavor class within the p element.
strong textOnly entering the class item within the article element. Do not add a p element within it.
I hope this helps some.

10

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