Learn Basic CSS by Building a Cafe Menu - Step 78

Tell us what’s happening:
Help

  **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 class="bottom-line">
    <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;
}

.bottom-line {
margin-top: 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

You can add comments to your code, for the sake of readability and organizing.

In different languages different syntax is used for comments.

HTML

<!--comments goes here-->

CSS

/*comment goes here*/

/*
this way
you can write big comment
if you need

*/

For future:
JavaScript

/*
here I can write
big comment
on multiple lines
*/

//with that - quick one line comment
3 Likes

where should I put the comment

In this step:

add a comment at the end of styles.css with the text FOOTER

In general, you can add them in any place of the file.

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}<!--FOOTER-->
is this right

it’s HTML comment

and you are dealing with CSS file in this step

so no, this isn’t right

and it will be better, if comment will be on its own new line in this step
and not after body selector
you need to put it at the end of file

so how comment in css file

I wrote above. This example for CSS

I did this/*<!--FOOTER-->*/ but the site said You should have a CSS comment with the text FOOTER .

Yeah
this:

/**/

is good stuff.

but, do you really need HTML syntax in CSS file? nope. Comment text should be

FOOTER

not

<!--FOOTER-->

thanks and i just became a member

It’s about forum I assume?
congrats then)

1 Like

Wow! i appreciate your patience to help a fellow member. just reading your conversation has helped me alot. thanks alot. happy coding, Admit8490

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