2.08 · Lab

Unit project: style your About Me page

Same page you framed in Unit 1, same HTML, and an empty styling sheet. Take one region at a time — a whole page styled in one pass is a whole page to debug at once.

Final inspection

Style your About Me page

Checks itself — try as often as you like

Style the About Me page below. Nothing in the HTML needs to change — every declaration you need was covered in this unit's lessons.

header — background-color: steelblue; and color: white;.
h1 — font-family: Georgia, serif;, font-size: 32px;, and font-weight: bold;.
p (every plain paragraph) — color: slategray;.
.tagline (the intro paragraph) — color: crimson; and width: 50%;.
main — width: 600px;, padding: 20px;, margin: 16px;, and border: 2px solid slategray;.
ul — display: flex;, flex-direction: column;, justify-content: center;, align-items: center;, gap: 8px;, and flex-wrap: wrap;.
Underneath, @media (min-width: 600px) { ul { flex-direction: row; } }.
footer — text-align: center;.

header
h1
.tagline
p
main
ul
@media
footer