Files
freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
Naomi Carrigan 16e7cdedb1 feat: migrate filenames to IDs (#45146)
* feat: migrate filenames to IDs

* feat: migrate balance sheet file names

* revert: no id name for cert projects

* fix: i swear i know what i'm doing
2022-03-02 09:06:00 -06:00

2.5 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
5f716ad029ee4053c7027a7a Step 50 0 step-50

--description--

Nest two p elements inside your article element. The first one's text should be Donut, and the second's text 1.50. Put both of them on the same line making sure there is no space between them.

--hints--

You should not change your existing article element.

assert($('article').length === 6);

Your new article element should have two p elements.

assert($('article').last().children('p').length === 2);

Your first p element should have the text Donut.

assert($('article').last().children('p')[0].innerText.match(/Donut/i));

Your second p element should have the text 1.50.

assert($('article').last().children('p')[1].innerText.match(/1\.50/i));

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camper Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
          <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>
          <h2>Desserts</h2>
--fcc-editable-region--
          <article class="item">
          </article>
--fcc-editable-region--
        </section>
      </main>
    </div>
  </body>
<html>
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: 75%;
}

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