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>

<!-- User Editable Region -->

    <article>

    <p>French Vanilla</p>
    <p>3.00</p>
    <article>
    <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>
    </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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; RMX2030) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36

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

Link to the challenge:

Each name/price pair needs to be in its own article element. I would restart the step to get the original HTML back. You will see the following in the white editor window:

<article>
  <p>French Vanilla</p>
  <p>3.00</p>
</article>

Do not make any changes to the above. You want to follow this exact structure for the four new pairs you need to add.

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