Camper Cafe step #33

HTML-CSS
1

Stuck and can’t find an answer. Played with this for over an hour. Ideas? Thanks in advance.

What Im supposed to do:
The flavors and prices are currently stacked on top of each other and centered with their respective p elements. It would be nice if the flavor was on the left and the price was on the right.

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

  **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>
         **<div class="flavor">**
**           <p>French Vanilla</p>**
**           </div>**
          <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/102.0.0.0 Safari/537.36

Challenge: Step 33

Link to the challenge:

1 Like
2

Hi @dkrhino68 and welcome to the forum!

The instructions ask you to add the class to the p element.

It looks as if you’ve added a div element, and added the class to that.

Just add the class to the p element and delete the div element and I think your code should pass the test.

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

I think this is what you were trying to tell me. This is what finally worked. Hardest one so far. :grimacing: Thanks. Is there a guide I’m supposed to be using? Feels like there is info I’ve missed. Anyway,…moving on.

1 Like
4

That’s exactly what I was trying to tell you. :smiley:

You figured it out.
And that process of “figuring it out” is where the learning happens.

From what I’ve seen and read about the new Responsive Web Design curriculum, my understanding is that’s it’s very much based on “figuring it out” (with some instruction) followed by lots of repetition to help the new knowledge “stick”.

So, for example, you’ll be doing a lot of adding class (and other) attributes to html elements in future challenges.
So, with practice, it should become much easier.

1 Like
5

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