Learn Basic CSS by Building a Cafe Menu - Step 31

HTML-CSS
1

The hint said to add

opening and closing around the opening and closing which I did then the hint said to add another

which I did but it still doesn’t work around the coffee and vanilla.

Your code so far

/* file: index.Ext.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><p>French Vanilla</p></p></article>
            <p><p>3.00</p></p>
            <p><p><article>Caramel Macchiato</p></p></article>
            <p><p>3.75</p></p>
            <p><p><article>Pumpkin Spice</p></p></article>
            <p><p>3.50</p></p>
            <p><p><article>Hazelnut</p></p></article>
            <p><p>4.00</p></p> 
            <p><p><article>Mocha</p></p></article>
            <p><p>4.50</p></p>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.Ext.css */
<!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><p>French Vanilla</p></p></article>
            <p><p>3.00</p></p>
            <p><p><article>Caramel Macchiato</p></p></article>
            <p><p>3.75</p></p>
            <p><p><article>Pumpkin Spice</p></p></article>
            <p><p>3.50</p></p>
            <p><p><article>Hazelnut</p></p></article>
            <p><p>4.00</p></p> 
            <p><p><article>Mocha</p></p></article>
            <p><p>4.50</p></p>
        </section>
      </main>
    </div>
  </body>
</html>

Your mobile information:

iPhone - iOS17.1.1

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

Link to the challenge:

2

Hey. Your code is so much mixed up. I would recommend you reset the lesson. Then only nest two paragraph elements inside an article element. The first paragraph should contain the coffee flavour while the second should contain the coffee price. Follow the syntax below.

<article>
<p>coffe flavour</p>
<p>coffee price</p>
</article>
3

I would remove all of the double element tags, to start. You should only have one p element here, for example.

1 Like
4

I’m honestly more of the I need to know what I’ve done wrong type of person. This still doesn’t work.

<article>
            <p>French Vanilla</p>
            </article>
            <p>3.00</p>
            <article>
            <p>Caramel Macchiato</p>
            </article>
            <p>3.75</p>
            <article>
            <p>Pumpkin Spice</p>
            </article>
            <p>3.50</p>
            <article>
            <p>Hazelnut</p>
            </article>
            <p>4.00</p>
            <article>
            <p>Mocha</p>
            </article>
            <p>4.50</p>
5

The price is not inside of the article element

1 Like
6

I’ve edited your code for readability. 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

1 Like
7

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