CSS Flexbox & Grid Assignment

A multi-page assignment demonstrating layout with Flexbox and CSS Grid. The navigation bar above is Task 0 — a flex container with the logo on the left, links on the right, and everything vertically centered. Use it to visit the other tasks.

Part 1 · Flexbox

Task 1 — Card Row

Three equal-height cards in a flex row with consistent gaps and a hover lift effect.

Part 2 · Grid

Task 2 — Page Layout

Header, sidebar, main content and footer placed with named grid areas.

Part 2 · Grid

Task 3 — Image Gallery

Nine images in an equal-column grid with caption overlays on hover.

Part 3 · Flexbox + Grid

Task 4 — Portfolio Page

A full page combining a flex navbar, a grid main section and flex project cards.