Learn Basic CSS by Building a Cafe Menu - Step 66

Tell us what’s happening:
i tried the add the <hr to all the p elements but it still tells me i have add some <hr elements. So please i want to findout where i am suppose to add some <hr elements

<!-- 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">

<!-- User Editable Region -->

      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p> <hr class="established"
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><hr class="established"<p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><hr class="established"<p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p> <hr class="established"<p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><hr class="established"<p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><hr class="established"<p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><hr class="established"<p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><hr class="established" <p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><hr class="established"<p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p> <hr class="established" <p class="price">2.50</p>
          </article>
        </section>
      </main>

<!-- User Editable Region -->

      <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>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

.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/114.0.0.0 Safari/537.36 OPR/100.0.0.0

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

Link to the challenge:

<p class="established">Est. 2020</p> <hr class="established"

Where did you find the instruction to add a class attribute to the hr element?
The hr element is missing the closing right angle bracket >.
The hr element should be added only after the first p element with the class attribute set to the value of “established”. You have added the hr after each p element?!

The <hr/> element is a self closing element.
It has no content. but will draw a line across your page to help break it up.

<hr/> = thematic break

If you type into your search engine:
‘thematic break html’

You can find out more about this tag.
Finding a good reference website early on will make it much easier to learn new tags and how they are used.

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