Learn-basic-css-by-building-a-cafe menu step 47

HTML-CSS
1

TAS"You will come back to styling the menu in a few steps, but for now, go ahead and add a second section element below the first for displaying the desserts offered by the cafe."

<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>Est. 2020</p>
      </header>
    <main>
        <section>
          <h2>Coffee</h2>
          <section>
           <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>
     </main>
    </div>
  </body>
</html>
Cafe Menu

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

`Preformatted text`
2

When you ask for help we need to know what step this is for as well as the course. Also, we need to be able to see your actual code.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

Also, if you are typing in the editor, put the cursor on a line by itself and press Ctrl + e. This may automatically give you the triple back ticks.

3

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