Learn Basic CSS by Building a Cafe Menu - Step 63

HTML-CSS
1

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

Your code so far

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

Desserts

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll

2.50

<!-- 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">
     <main>
    <footer></footer>
    <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>
     
    </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/106.0.0.0 Safari/537.36 OPR/92.0.0.0 (Edition Campaign 34)

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

Link to the challenge:

2

When then instructions say to add something “below” an element, it means below the entire element, not just the opening tag for the element. An element begins with its opening tag and ends with its closing tag. So adding something below, or after an element means adding it after its closing tag.

1 Like
3

Very well explained.

4

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