Learn Basic CSS by Building a Cafe Menu - Step 91

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>
      <h1>CAMPER CAFE</h1>
      <p class="established">Est. 2020</p>
    </header>
    <hr>
    <main>
      <section>
        <h2>Coffee</h2>
        <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
        <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 class="address">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;
margin-top: 0;
margin-bottom: 15px;
}

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

img {
display: block;
margin-left: auto;
margin-right: auto;
}

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

/* FOOTER */

footer {
font-size: 14px;
}

.address {
margin-bottom: 5px;
}

a {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: brown;
}

a:active {
color: brown;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; U; Android 11; TECNO BE7 Build/RP1A.200720.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/94.0.4606.85 Mobile Safari/537.36 OPR/63.0.2254.62299

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

Link to the challenge:

I don’t see where you have added the image? Do you have a specific question about this step?

No not at all, I was only trying to copy all the codes so far

Is there a way I can like download all the codes altogether?

Really? Wait lemme check it

1 Like

You actually don’t need quotes for the url string in CSS unless it has spaces in it. But that’s not the issue here in this step.

1 Like

I don’t think FCC provides a mechanism to do this. You can copy/paste. But I’m not sure I understand your question.

1 Like

Yeah thanks I understand :smiley::smiley::smiley::smiley::smiley::smiley::smiley:

Thanks for correcting me, I’m sorry for the confusion. My apologies for that mistake. I deleted my comment. I have a great desire to help and learn. I’m a bit scared of making those mistakes again.

@Mikael3211 No worries. I hope I didn’t come of as rude, because I did not intend it to be that way. I just didn’t want the OP to go off on a tangent. But then I’m not sure the OP wanted help about this step from either of us :slight_smile:

Don’t stop replying. Everyone makes mistakes now and then (I know I’ve made my share of them). You fess up, learn from it, and move on. I’m sure you will help many more people than the few mistakes you might make every once in a while.

Have a good one.

1 Like

Thanks a bunch :pray:t4: :pray:t4:

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