Learn Basic CSS by Building a Cafe Menu - Step 42

HTML-CSS
1

Tell us what’s happening:

i seem not ot be getting this stuff right. i do not get

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 class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>

<!-- User Editable Region -->

          <article>
            <p class="flavor">Caramel Macchiato</p>
            <p class="price">3.75</p>
          </article>
          <article>
            <p class="flavor">Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p class="flavor">Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p class="flavor">Mocha</p>
            <p>4.50</p>
          </article>

<!-- User Editable Region -->

        </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;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 42

2

For that step, only add the class item to your <article> elements.

Start by adding the class item to the other article elements.

3

Add the class item to all the remaining article elements.

4

are u sure didi ti work for u

5

Yes! Did yours work?

6

for the request,only need add class=“item” before each of

in HTML,cancel the function for price and flavor in CSS.
just like for one flavor and price,revise for five:
[

Caramel Macchiato

3.75


7

how to show the codes in here? for inquire?

8

Learn Basic CSS by Building a Cafe Menu - Step 42

i try but i get the massage:(1. You should only have five article elements.)
any clue?

      <article>
        <p class="flavor">French Vanilla</p>
        <p class="price">3.00</p>
      </article>
      <article>
        <p class="flavor">Caramel Macchiato</p>
        <p class="price">3.75</p>
      </article>
      <article>
        <p class="flavor">Pumpkin Spice</p>
        <p class="price">3.50</p>
      </article>
      <article>
        <p class="flavor">Hazelnut</p>
        <p class="price">4.00</p>
      </article>
      <article>
        <p class="flavor">Mocha</p
        ><p class="price">4.50</p>
      </article>
9

Hi there!

Create your own topic to the challenge step using Help button. That’s appear below the challenge editor when you try to submit the wrong code more than three times.

1 Like
10

thanks Hasanzaib1389
i will try
thanks

2 Likes
11

hasanzaib1389 please we all trying to learn the basics please be more patient with those who are trying to understand coding

1 Like
12

Hi there @malibux6!

It’s been asked by forum moderators everytime, when you asking for help in other person’s topic on the forum.

13

hi my apologies was not meant as disrespec :smiley:t

1 Like
15

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.