Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

I’m getting a “you should have four .dessert elements” hint and from what i can tell, i do have four dessert elements. . i’ve added “.dessert” … checked spelling… counted… over and over. added a fifth element… i went through some the questions asked on this step (there are A LOT) and made it through about half, of those i haven’t seen anyone ask this question… sorry if this has been asked already.

thanks for the help!

Cafe Menu

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

Desserts

Donut

1.50

Cherry Pie

2.75

<article class="item>"

Cheesecake

3.00

<article class="item>"

Cinnamon Roll

2.50

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>
          <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 class="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>
        </section>
        <section>
          <h2>Desserts</h2>

<!-- User Editable Region -->

            <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
            </article>
            <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
            </article>
            <article class="item>"
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
            </article>
            <article class="item>"
            <p class="dessert">Cinnamon Roll</p><p class="price">2.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  .dessert {
  text-align: left;
  width: 75%;
}

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

Your browser information:

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

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

Link to the challenge:

2

Hi johanna1

Your closing tags are in the wrong place in the p tag “>”

here is corrected version…

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll>

2.50

3 
<article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
            </article>
            <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
            </article>
            <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
            </article>
            <article class="item">
            <p class="dessert">Cinnamon Roll></p><p class="price">2.50</p>
            </article>
1 Like
4

hello and welcome to fcc forum :slight_smile:

  • syntax error in couple of these <article class=“item>”

address those changes and it should be alright, happy learning :slight_smile:

1 Like
5

thats very nice of you to help, but dont give out “answers” rather “show them their mistakes” so that they can correct themselves. happy learning to us all :slight_smile:

2 Likes
6

OMG :woman_facepalming:t3: thank you so much!

1 Like
7

Thank you! that’s what i get for copy pasting too quickly lol. much appreciated!

1 Like
8

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