Learn Basic CSS by Building a Cafe Menu - Step 64

I am stumped. Ive tried a number of different things but nothing seems to work

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">
      <main>
        <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 -->

      <footer>
      <p a="https://www.freecodecamp.org">Visit our website</a></p> 
      </footer>

<!-- 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 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

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

Link to the challenge:

This isn’t the correct syntax :3

Please talk to us about the error message and what you’ve tried to fix it!


this is my error message. to me it looks the same as the others i’ve done so far
Your new a element should be nested within your new p element. You should have exactly one a element.

missed this part :wink:


Like @nhcarrigan said, you can’t merge two opening tags together. Each opening tag must be separate (you can’t make a super p-a tag but instead must have an opening p and an opening a tag)

You can look back at Step 12 of the Cat Photo App project for an example.

<p>Visit our website</p><a href="https://www.freecodecamp.org"</a>

I tried this but it doesn’t work. also tried separating them by a line but that didn’t work either.

Three problems with that

  1. The anchor element is outside of the p element

  2. The opening ancor tag is missing a >

  3. The anchor element contains no text to turn into a link

If I add a > to the opening anchor element it just turns it into text.

Did you fix all 3 issues I mentioned? What is your current code?

<p><a href="https://www.freecodecamp.org">Visit our website</a></p>

I got it. I had to go back to step 12 like you said.

1 Like

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