Learn Basic CSS by Building a Cafe Menu - Step 63

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I am on step 63 of learning basic CSS and everytime that I put in below the element it is not registering that it was done properly. Idk what I am doing wrong?
Your code so far

Cafe Menu

CAMPER CAFE

Est. 2020

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

![Screenshot from 2023-04-25 11-31-44|633x348](upload://5KybyPgU5ugNiqvn62tiFtdiDuL.png) 
<!-- 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">

<!-- User Editable Region -->

      <main>

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

<!-- User Editable Region -->

    </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 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/110.0

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

Link to the challenge:

Screenshot from 2023-04-25 11-31-25

2

the question asks for a ‘footer’ element below the ‘main’ element

most tags have opening and closing
<h1></h1>
you will need to add the footer bellow the closing tag of ‘main’

main is very large this is why you have so much area to edit.

1 Like
3

thank you so much I was so confused!!!

1 Like
4

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