Learn Basic CSS by Building a Cafe Menu Step 66

HTML-CSS
1

I have added an <hr element between my p element and my section element but I am still being marked as incorrect. Unsure where to go from here

Step 66 First, add an hr element between the p element with the class established and the first section element. Note that hr elements are self closing.
You can use an hr element to display a divider between sections of different content.
First, add an hr element between the p element with the class established and the first section element. Note that hr elements are self closing.

<!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 class="established">Est. 2020</p> 
        <hr
        <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>
          <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>
        </section>
      </main>
      <footer>
        <p>
          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
        </p>
        <p>123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
</html>

Sorry, your code does not pass. Keep trying.
You should add an hr element. hr elements are self-closing.

2

Hello!
Just place the closing > at the end of the hr.

3

Welcome to the community!

You are doing great! :slight_smile:

I think there was a bit of misunderstanding about the hr being self closing.

Here is an example:
< p> requires a closing tag < /p>
< input /> does not require a closing tag as it is self closing. Even without the / in the before the > it would self close. But, it is best to include the / close tag.

I hope this helps you!

Happy coding! :slight_smile:

1 Like
4

Thank you, I will keep a note of that for future reference.

1 Like
5

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