Learn Basic CSS by Building a Cafe Menu - Step 44

HTML-CSS
1

Tell us what’s happening:

No matter how I put in “flavor” it won’t work. It continues to say I need five .flavor elements

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>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla<p><p class="price">3.00</p>
          </article>

<!-- User Editable Region -->

          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p calss="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>

<!-- User Editable Region -->

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

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 44

2

Hmmm just glancing at it…you have a issue with this spelling for “class”. In your hazelnut line. I cant copy the rest of the code to see if there any other errors. So, if that doesnt fix it then maybe someone not on their phone can see better, or I can take a look a bit later when I am on my computer

Updating since I looked at it on my computer. You need to fix the above, and then you have an issue here

You need to close the paragraph element correctly </p> not another <p> at the end

3

@Cody_Biggs is correct.

image
image1230×516 65.6 KB

1 Like
4

I fixed the class right after I posted this, I read over it so many times and still missed the /, so thank you.

1 Like