Project: a one-page site

Nine of the lessons produced a piece of a page: a header, a toolbar, a card, a button, a table, a gallery, a form, a two-column section, and a set of type rules. They are saved in this browser, and when this project opens for the first time the editor holds all of them placed into one page, with their style rules gathered at the top of the style block. The workspace lists the pieces and says which version it is using; a lesson you skipped contributes the reference version until you do it, and Rebuild from my parts puts a fresh assembly in the editor whenever you want one.

Most of the checks pass as soon as the page is assembled, because the pieces already work. Three do not: they are the finishing rules that turn a pile of components into a page, and they are yours to write.

Your task

Add three rules below the gathered styles. main gets a max-width of 720px, margin: 0 auto to center it, and 16px of padding. nav becomes a flex row with a 16px gap, so the links sit side by side with space between them. footer gets text-align: center and the muted color rgb(95, 100, 112).

Then read the page as a visitor would and fix anything that looks wrong: rename the placeholder text, make sure there is exactly one h1, and check it on a narrow width with the preview.

This is the final project. It is built from the 9 parts you made along the way; the workspace lists them and which version it is using.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* parts */
main { max-width: 720px; margin: 0 auto; padding: 16px; }
nav { display: flex; gap: 16px; }
footer { text-align: center; color: rgb(95, 100, 112); }
</style>
</head>
<body>
<!-- part: semantic-structure -->
<main>
  <!-- part: flex-alignment -->
  <section class="about">
    <!-- part: backgrounds-and-borders -->
    <p class="lead">A short line about who this page is for.</p>
    <!-- part: links-and-buttons -->
  </section>
  <h2>Prices</h2>
  <!-- part: tables -->
  <h2>Gallery</h2>
  <!-- part: grid -->
  <h2>Hours</h2>
  <!-- part: responsive-media-queries -->
  <h2>Newsletter</h2>
  <!-- part: forms -->
</main>
<footer>
  <p>Built lesson by lesson.</p>
</footer>
</body>
</html>