Learn Basic CSS by Building a Cafe Menu - Step 76

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Its asking me too create a bottom line selector which I did what else could be the problem?
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>
      <h1>CAMPER CAFE</h1>
      <p class="established">Est. 2020</p>
    </header>
    <hr>
    <main>
      <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>
    <hr>
    <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;
padding: 20px;
}

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;
}

hr {
height: 2px;
background-color: brown;
border-color: brown;
}

hr {
margin-bottom: 5px;
bottom-line: 25px;
}

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

.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

.flavor, .dessert {
text-align: left;
width: 75%;
}

.price {
text-align: right;
width: 25%
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15

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

Link to the challenge:

2

I’m sorry I cannot see the class you created in the stylesheet code posted.

In case it helps, please re-read the instructions:

Add some more space by creating a class named bottom-line using 25px for the margin-top property.

3

I did this one as the answer

4

ah I see.

In the code you just quoted, the hr is the css selector right?
So the code will target all elements hr
And you made a new line treating the word bottom-line like a css property.

So the only problem then is that you have misinterpreted the instructions.
Here are the instructions again:

Look for the word property… which keyword in the given instructions is the property?
(Is it margin-top or is it bottom-line)

And then look for the word ‘class’ in the instructions. What is a class in CSS?

Let me know what you think of these two ideas…

5 
<style>

.bottom-line{

margin-top:25px;

}

</style>

does this look more accurate

6
.bottom-line{ margin-top:25px; }

BlockquotePreformatted text

7

you don’t have to post a 2nd time if you want to edit a previous post (just click on the ... three dots in the post and the editing menu will show you some icons that include one that looks like a pencil. Click that and you will be able to edit your previous post)

8

I’ve edited your code 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 (').

9 
<style>
.bottom-line{
  margin-top:25px;
}
</style>
10

So at this point, do you have a further question?

11

its still marking as wrong

12

remove the style tags.

The step you are on is for learning css and all the code you are writing is already inside a stylesheet called styles.css. You can see that if you look at near the top of the site on the left (there’s a dark button called styles.css, try clicking on the index.html button next to it as well, that’s just to toggle the code)

13

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