FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<header class="hero"> <h1>Fluid Headline</h1> <p>Scales smoothly between small and large screens.</p> </header>
# CSS
/* Base page styles */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; line-height: 1.6; background: #fafafa; color: #111; } /* Visual container */ .hero { background: #222; color: #fff; /* TODO: Use clamp() to make horizontal padding scale with viewport width */ padding-block: 2rem; border-bottom: 1px solid #444; } .hero h1 { margin: 0 0 0.5rem; /* TODO: Use clamp() to make font-size scale smoothly */ } .hero p { margin: 0; opacity: 0.9; }
Preview
Live preview updates as you type
Building preview…
Show preview