Learn Basic CSS by Building a Cafe Menu - Step 31

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>
          <h2>Coffee</h2>
          <article>
          <articel><p> French Vanilla</p><p>3.00</p></article>
         <article><p> Caramel Macchiato</p><p> 3.7</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>
          </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/108.0.0.0 Safari/537.36 Edg/108.0.1462.46

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

Link to the challenge:

Step 31
Starting below the existing coffee/price pair, add the following coffee and prices using article elements with two nested p elements inside each. As before, the first p element’s text should contain the coffee flavor and the second p element’s text should contain the price.

Caramel Macchiato 3.75
Pumpkin Spice 3.50
Hazelnut 4.00
Mocha 4.50

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!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>
          <articel><p> French Vanilla</p><p>3.00</p></article>
         <article><p> Caramel Macchiato</p><p> 3.7</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>
          </article>/
what am i getting wrong?
        </section>
      </main>
    </div>
  </body>
</html>
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
…         <article><p> Hazelnut</p><p>4.00</p></article>
         <article><p> Mocha</p><p>4.50</p></article>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

I noticed you have extra spaces here and there inside the new p elements you created.
Try cleaning those up.

I have closed all the space however, testing the code still shows the
error message below.
Sorry, your code does not pass. You’re getting there.

Hint

Each article element should have two p elements.


The first article should be erased. As it is there for no reason.
Then also fix the typo in the second opening tag.

i have done that, still code couldn’t pass.

Please show us the newest code.

I also found this article closing tag which should be erased also

You have an extra article tag ata the top and bottom of the code.

Thank you all for your support! the code passed

1 Like

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