Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <section class="hero"> <div> <h1>Build accessible interfaces faster</h1> <p>Create design systems that delight users and empower teams.</p> <a class="cta" href="#">Start prototyping</a> </div> <figure> <img src="images/dashboard.png" alt="Dashboard preview"> </figure> </section> </body> </html>
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; align-items: center; padding: clamp(40px, 8vw, 120px) clamp(24px, 6vw, 80px); background: radial-gradient(circle at top left, #2563eb, #0f172a); color: #fff; font-family: "Inter",sans-serif; } .hero h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); margin-bottom: 16px; } .hero figure { background: rgba(255,255,255,0.08); border-radius: 28px; padding: clamp(24px, 4vw, 48px); } .hero figure img { width: 100%; border-radius: 20px; } .hero a.cta { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #fff; color: #0f172a; font-weight: 600; text-decoration: none; }
