Learn Basic CSS by Building a Cafe Menu - Step 36

HTML-CSS
1

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

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>Est. 2020</p>
        <section>

<!-- User Editable Region -->

          <h2>Coffee</h2>
          <article>
             <article class="item"
            <p class="flavor">French Vanilla</p>
            <p class="price" class="item"> 3.00 </p>
          </article>

<!-- User Editable Region -->

          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.flavor {
  text-align: left;
}

.price {
  text-align: right;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

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

Link to the challenge:

2

You have bad syntax here:

<h2>Coffee</h2>
          <article>
             <article class="item"
            <p class="flavor">French Vanilla</p>
            <p class="price" class="item"> 3.00 </p>
          </article>

Instead of adding an attribute to the original opening article tag, you have added a second opening article tag, which you also haven’t closed properly.

3

I did add an attribute but it didn’t work out thats why I tried adding an article tag

4

the solution to it I’m yet to recover it

5

You should have only one opening article tag, so remove the extra one. Then you just need to ensure that your remaining opening article tag is properly closed (i.e. has both <>). Then just add the attribute (class=“item”) inside the opening tag.

<article class="item">
6

The class set to “price” should be found in the opening ‘p’ tag with the text “3.00”. You have added two classes to this html element. There is no such instruction in the step. For the ‘article’ element close the opening tag as already mentioned here.

7

Yeah, I hadn’t spotted that one. Probably the easiest solution is to reset the lesson, so that your initial code is correct again, and then complete the instructions for this challenge again.

8

I’m totally confuse. cos ive tried doing the necessary syntax for this but it keeps failing

9

Reset the lesson. Then all you have to do is add the class attribute (as above) to the opening article tag.

10

ok thanks, let me try…

11

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