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

<!-- 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">French Vanilla</p>
            <p class="price">3.00</p>
          </article> 
          <article 
            <p class="item">Caramel Macchiato</p>
            <p class="price">3.75</p>
           </article>
          <article 
             <p class="item">Pumpkin Spice</p>
             <p class="price">3.50</p>
           </article>
           <article 
              <p class="item">Hazelnut</p>
              <p class="price">4.00</p>
            </article>
            <article 
               <p class="item">Mocha</p>
               <p class="price">4.50</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/107.0.0.0 Safari/537.36 Edg/107.0.1418.26

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

Link to the challenge:

`Sorry, your code does not pass. Hang in there.

Hint
You should apply the class to your element.itemarticle`

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I cannot figure out what I am doing wrong. I replaced flavor in each with item still wrong

4

3 issues here:

  1. Look at the color of the letters. Your first p here is a funny color, indicating a syntax error. Every tag needs a < and a >, but you deleted the > on the line above.

  2. You didn’t add a class attribute to the article element.

  3. You added a class attribute to the p element.

Also, you added a bunch of new elements here, but the instructions didn’t ask for that. I’d delete all those extra elements.

5

The item class was to be attributed to the first article element under the Coffee. If you do it as you have your other attributions, you should succeed. :slight_smile:

6

Please provide me an example as the wording is confusing

7

We cannot write the answer for you. That’s against the rules.

Try fixing the issues I pointed out one at a time.

First:

Delete all the extra elements (or reset the code for the Step)

Second:

Put the > back (or reset the code for the Step and it will happen automatically)

Third:

Add a class attribute only to the article element here and nowhere else:

8

Tank You…I appreciate your insight

1 Like
9

I hope some day to be as good at answering the questions as you are, JeremyLT. :slight_smile:
This forum, and people, like you, assisting others is great!
I try to assist and know I will get better with time.

10

Jeremy got it done. :slight_smile:
Keep up the great progress, MeJ_68.
Happy coding!