TaskBuild a 3-tier pricing layout. .pricing has display: grid, grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)), gap: var(--space-md). Each .tier has padding var(--space-lg), background var(--surface), border 1px solid var(--border), border-radius var(--radius-lg). .tier.featured has scale(1.02), border-color var(--primary), box-shadow var(--shadow-lg), position: relative. .tier.featured::before has content 'Most popular', position absolute, top: -10px, padding: 4px 12px, background: var(--primary), color: white, font-size: 11px, border-radius: var(--radius-pill). .tier h3 = plan name, .tier .price = big font-size 36px, .tier ul = features list with no list-style, .tier .cta = button. Three plans: Free, Pro $12, Team $39. Pro is featured.
Capstone 7: Pricing page (Stripe-style)
250 XP16 min
Theory
A pricing page that converts
3 tiers side-by-side. The middle tier is highlighted as "Most Popular." Each card lists features. The whole thing reflows to single-column on mobile.
π
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.