freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md

1.2 KiB

id title challengeType dashedName
5f35e5c44359872a137bd98f Part 29 0 part-29

--description--

Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.

Delete the comment and its contents inside the body type selector. Now add a background-image property and set its value to url(https://tinyurl.com/coffee-beans-fcc).

--hints--

Test 1


--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>Coffees</h2>
        </section>
      </main>
    </div>
  </body>
<html>
body {
--fcc-editable-region--
  /*
  background-color: burlywood;
  */
--fcc-editable-region--
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}