Learn Basic CSS by Building a Cafe Menu - Step 65

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
how do I nest the a element in the p element

  **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>
    <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>
    <footer><p a= "https://www.freecodecamp.org">Visit our website</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;
}

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/104.0.5112.102 Safari/537.36

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

Link to the challenge:

2

Hi @trixiedownnie

An element consists of opening tags and closing tags
You can put anything in between those tags
Nesting element means putting an element inside an element.

Just like how you put h1 element inside the header element. That is called element nesting.

Hope this helps

3

Is “a” a self closing element
i think i have done what you have said

4

a is not a self closing element. It has pair tags, opening tag and closing tag

5

i have tried and it is not working

6

Can I see your latest code?

7

few things to note:

  • alfonsusac mentioned , “element” needs to have an “opening and closing bracket, tag”, here “a” tag doesn’t have those
  • “a” tag is missing use of “href” for that “url address”
  • also “p” tag is missing “>” as part of its “opening tag”

address these things it should be fine,

if it seems too confusing, then restart this step and simply “add” an anchor tag within “p” element, as it mentioned in instructions, with that given “url” as a value for “href” in that anchor tag

happy learning :slight_smile:

8

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