Learn Basic CSS by Building a Cafe Menu - Step 31

HTML-CSS
1

What am I not doing correctly?

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>

            <p>French Vanilla</p>
            <p>3.00</p>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
            <p>Hazelnut</p>
            <p>4.00</p>
            <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/108.0.0.0 Safari/537.36

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

Link to the challenge:

2

Nest two p elements between the ‘article’ tags for each menu item.

<article>
<p>text</p>
<p>price</p>
</article>
1 Like
3

I have done that, I though. And the error code is I should have 5 elements. My preview has them well listed.

4

You have typed in all ‘p’ elements nested between one pair of ‘article’ tags. Each flavour and price should be surrounded by ‘article’ tags. And there are five of them in sum.

2 Likes
5

Thank you. It worked.

1 Like