Final Project: Style a Responsive Landing Page

Take a plain HTML page (your own, or a simple one you write for this project) and turn it into a polished, responsive landing page.

Requirements

1. Set box-sizing: border-box globally and use a consistent spacing scale (e.g. multiples of 8px) for padding and margin.
2. Build the page's navigation bar with Flexbox (logo on one side, links on the other).
3. Build at least one section, like a feature list or pricing cards, using CSS Grid with repeat() and minmax() so it reflows automatically.
4. Add at least one @media breakpoint that meaningfully changes the layout between mobile and desktop (e.g. stacked cards become a 3-column grid).
5. Add at least one transition (e.g. on button hover) and one @keyframes animation somewhere on the page.

Stretch goals

• Add a dark mode using the prefers-color-scheme media query.
• Use CSS custom properties (--brand-color: #2563eb;) for your color palette so the whole page can be re-themed by changing a handful of variables.
• Run the page through Lighthouse in Chrome DevTools and address any layout-related warnings.

Submit a link to your finished page (a repo, CodePen, or hosted URL) below, an instructor will review it before you can mark this lesson complete. Good luck! 🚀