TaskBuild a hero. .hero has padding clamp(2rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem), text-align center, min-height 60vh, display flex, flex-direction column, justify-content center, gap var(--space-lg), background linear-gradient(135deg, primary 0%, accent 100%), color white. .hero h1 has font-size clamp(2rem, 6vw + 1rem, 4.5rem), font-weight 800, letter-spacing -0.02em, line-height 1.1, text-wrap balance, max-width 22ch, margin 0 auto. .hero p has font-size clamp(1rem, 2vw + 0.5rem, 1.25rem), opacity 0.9, max-width 50ch, margin 0 auto, text-wrap pretty. .hero .ctas display flex, gap var(--space-md), justify-content center, flex-wrap wrap. @keyframes appear from opacity 0 translateY 20px to opacity 1 translateY 0. Stagger animations on h1, p, ctas (delays 0/0.15/0.30s). reduced-motion override.
Capstone 8: Hero section with entrance animation
200 XP14 min
Theory
A landing-page hero that wins attention
- Fluid h1 with text-wrap: balance.
- Subtitle with text-wrap: pretty.
- Two CTAs (primary + secondary).
- Entrance animation: stagger fade + slide.
- All respects prefers-reduced-motion.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.