Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Tell us what’s happening:

I have added four article elements to the code, however, I’m having trouble submitting the code .

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

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>
            <p class = "dessert"> Cherry</p><p class="price">2.75</p>
            <p class = "dessert"> Cheesecake</p><p class = "price">3.00</p>
            <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/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 52

2

hi

Copy and past

Donut

1.50

,three times ,and replace the text in each element with the given p elements.

here is the answer:

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll

2.50

3

@pravalikasami

Hello! You are doing well. Looking at your code I noticed a couple of things

  1. The article tag syntax.
    The opening article tag

The closing article tag

html element structure image
html element structure image903×352 57 KB

This is the correct spacing, but you only have one in your code when the instructions state to add three, so you will have a total of four.
This mean these below should all be in their own article tags. (wrapped in their own article tag)

  1. Spacing needs to be corrected. you can look at an example at the link below. The class attribute syntax it is important the spacing or in the case no space between. Again refer to the link at the bottom of my reply.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

~Happy Coding!

4

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