Section
Startup Hero
Split startup hero with inline stats and a product preview pane.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Hero/hero-startup Vanilla/Sections/Hero/hero-startup <!-- Snippet Name: Startup Hero | Family: Hero | Description: Split startup hero with inline stats and a product preview pane. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startup Hero | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: hero-startup. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.hs-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hs .copy h1{margin-block:18px}.hs .copy .lead{margin-bottom:26px;max-width:48ch}
.hs .cta{display:flex;gap:14px;flex-wrap:wrap}
.hs .stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px}
.hs .stats div b{display:block;font-size:1.7rem}.hs .stats div span{font-size:.85rem;color:var(--muted)}
.hs .visual{border:3px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
box-shadow:var(--shadow-lg);padding:18px;aspect-ratio:4/3;display:grid;grid-template-rows:auto 1fr;gap:12px}
.hs .visual .bar{display:flex;gap:6px;align-items:center}.hs .visual .bar i{width:10px;height:10px;border-radius:50%;background:var(--border);display:block}
.hs .visual .bar i:nth-child(1){background:#ff5f57}.hs .visual .bar i:nth-child(2){background:#febc2e}.hs .visual .bar i:nth-child(3){background:#28c840}
.hs .visual .screen{background:linear-gradient(135deg,var(--primary),var(--pink));border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:800}
@media(min-width:900px){.hs-grid{grid-template-columns:1.05fr .95fr;gap:60px}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="hs" aria-labelledby="hs-title">
<div class="container hs-grid">
<div class="copy">
<span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M13 2L4 14h7v8l9-12h-7z'/></svg> Startup plan</span>
<h1 id="hs-title">Launch your startup in a weekend, not a quarter.</h1>
<p class="lead">Everything founders need to go from idea to revenue: landing page, onboarding, billing, and analytics — wired together.</p>
<div class="cta">
<a class="btn accent" href="#">Start building</a>
<a class="btn outline" href="#">Read the playbook</a>
</div>
<div class="stats">
<div><b>12k+</b><span>founders</span></div>
<div><b>$40M</b><span>raised by users</span></div>
<div><b>4.9/5</b><span>founder rating</span></div>
</div>
</div>
<div class="visual" role="img" aria-label="Product dashboard preview">
<div class="bar"><i></i><i></i><i></i></div>
<div class="screen">dashboard.tsx</div>
</div>
</div>
</section>
</body>
</html># Startup Hero
Split startup hero with inline stats and a product preview pane.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / hero
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** hero, startup, split, stats
**Features:** light/dark, responsive, preview pane
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 112 lines UTF-8 · LF · Spaces: 2
Continue browsing