▦
CSS Grid Layout
The features section uses a responsive CSS Grid with
auto-fit and minmax() so cards
reflow naturally at every breakpoint.
What's Inside
Every technique from the assignment, demonstrated in a real layout.
⇄
Flexbox Alignment
The navbar, banner, and CTA strip all use Flexbox for alignment, spacing, and wrapping — no floats, no hacks.
Flexbox🌈
CSS Custom Properties
Every color, radius, shadow, and transition lives in
:root variables. Swapping themes is a single
attribute change on <html>.
☾
Dark / Light Toggle
Click the moon icon in the navbar. JavaScript flips
data-theme on <html> and
CSS variables do the rest — zero inline styles.
📄
BEM Naming
Every class follows Block__Element--Modifier convention:
.feature-card, .feature-card__title,
.feature-card--purple.
📱
Fully Responsive
Two media query breakpoints (900px tablet, 600px mobile) with a hamburger menu and stacked layouts for small screens.
Responsive
6
CSS Concepts
2
Theme Modes
100%
Responsive
0
Frameworks Used
Ready to Level Up Your CSS?
Fork this project, swap the colors, add your own sections, and make it yours. That's the whole point.