Learn Basic CSS by Building a Cafe Menu - Step 31

Tell us what’s happening:
Describe your issue in detail here.
I Have studied the example instru. but where is the fifth element there are only 4 element please guide me

Thanks & Regards

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>
          <h2>Coffee</h2>
          <article>
            <p>French Vanilla</p><p>3.00</p>
            <p>Caramel Macchiato</p><p>3.75</p>
            <p>Pumpkin Spice</p><p>3.50</p>
            <p>Hazelnut</p><p>4.00</p>
            <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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

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

Link to the challenge:

1 Like

you should have duplicated the article elements too.
The original code was:

          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
          </article>

So you needed to make 4 more blocks just like this one (including the article)

2 Likes

Also, try to keep the following

format … for now:

< p >Coffee Flavor< /p >
< p >Price< /p >

edit: the < p > tags disappeared on me!

They have used 4 elements not 4 that was my Question-Where is the extra element I Am not in the industry so…

Hi again, are you still stuck? Can you show me your latest code if yes? (Remember that you need to add 4 more article elements)

This is an article element


          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
          </article>

You will need 4 more in addition to this one.

For each element this would be the code right

element


?

The code you posted is not readable. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Tell us what’s happening:
Describe your issue in detail here.
Is this the correct code
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>
          <h2>Coffee</h2>
          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
            <p>Caramel Macchiato</p>
          <p>3.75</p>
          <p>Pumpkin Spice</p>
          <p>3.50</p>
          <p>Hazelnut</p>
          <p>4.00</p>
          <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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

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

Link to the challenge:

Hey man!

Instead of a whole <article></article> that contains all your coffees and their prices you should have an article for each coffee and its price, like this:

<article>
  <p>Coffee name</p>
  <p>Coffe price</p>
</article>

Basically you should have 5 different articles.

article>

French Vanilla


3.00



Caramel Macchiato


3.75




Pumpkin Spice


3.50




Hazelnut


4.00




Mocha


4.50



What is basic thing wrong in this???

1 Like

We still cannot see your code.
I keep posting the instructions for how to use the forum and you ignore them.

Pls help

 <article>
            <p>French Vanilla</p>
            <p>3.00</p>
            <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>

You are getting closer but you haven’t made sure the syntax is correct.
For eg.

This article element has an opening tag but the closing tag is missing


For me it stills says you should have 5 article elements

Looking good. Maybe a little care with the spelling for the first and third < article > tag