Learn Basic CSS by Building a Cafe Menu - Step 67

HTML-CSS
1

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">
    <header><hr>
      <h1>CAMPER CAFE</h1><hr>
      <p class="established">Est. 2020</p><hr>
      <hr>
    </header>
    <main><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>

/* 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/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

I put the

element between the first header element and the main element but an error occurred.

4

You have to add the hr element between the header and the main element, but you have added many hr elements in your html, which confuses the tests. You might have to delete all the <hr> elements and then add a new hr in between the header and main elements.

Remember, that an element consists of both the opening(<>) and closing(</>) tags.

5 
<header><hr>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <main><hr>

I remove the all the <hr> element and added <hr> element between the header and main elements.

6

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

The hr element should be between the header and the main elements.
Right now it is inside the header element.

The header element includes both the opening <header> and closing </header>.

So, if you need to add a hr element between the header and main elements, the <hr> should be just after the header element, and I would again remind you that the header element includes both the opening <header> and closing </header> tags.

8 
<header><hr>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <main><hr>

but the problem is not solved. same error again

9

I hope you had read my reply properly, you have to add the hr after the closing header tag, as the the header element consists of both the opening and closing tags.

The tests require you to add a hr between the header and main elements.
So, the <hr> has to be after the closing tag of the header and before the opening tag of the main

10

An element means the block of code from the opening tag until the closing tag.

The header element of the following code means the whole line from <header> until </header>.

      <header>
        <h1>CAMPER CAFE</h1> <!-- This is part of the header element-->
        <p class="established">Est. 2020</p> <!-- This is also part of the header element-->
      </header>

The question asks you to put hr element in between the header element and the main element.

Meaning that the hr should be added after the closing tag of header element and the opening tag of the main element.

      <header>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
      </header>
      <!-- This part is in between the header element and main element -->
      <main>
         ...
      </main>

I hope this helps

1 Like
11

Thank you very much. The problem is solved

12

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