Section
Split Hero
Two-pane split hero comparing value vs. included features.
- 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-split Vanilla/Sections/Hero/hero-split <!-- Snippet Name: Split Hero | Family: Hero | Description: Two-pane split hero comparing value vs. included features. | 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>Split Hero | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: hero-split. 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}
}
.hsp .grid{grid-template-columns:1fr;gap:30px;align-items:stretch}
.hsp .pane{border:3px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.hsp .left{background:var(--primary);color:#fff}.hsp .left h1{color:#fff}
.hsp .left .lead{color:rgba(255,255,255,.85)}
.hsp .right{background:var(--surface)}.hsp .right .stack{display:grid;gap:12px}
.hsp .row{display:flex;align-items:center;gap:12px;border:2px solid var(--border);padding:12px 14px;border-radius:8px;font-weight:700}
.hsp .row .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--border);flex:none}
.hsp .cta{display:flex;gap:12px;flex-wrap:wrap}
@media(min-width:900px){.hsp .grid{grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-lg)}.hsp .pane{border:0;border-radius:0}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="hsp" aria-labelledby="hsp-title">
<div class="container">
<div class="grid">
<div class="pane left">
<span class="eyebrow" style="background:rgba(255,255,255,.15);color:#fff;border-color:#fff;box-shadow:none"><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"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg> Secure</span>
<h1 id="hsp-title">Two sides.<br>One decision.</h1>
<p class="lead">Compare value head-to-head. See exactly what you get before you commit.</p>
<div class="cta"><a class="btn accent" href="#">Choose plan</a><a class="btn outline" href="#" style="background:transparent;color:#fff;border-color:#fff">Talk to sales</a></div>
</div>
<div class="pane right">
<div class="stack">
<div class="row"><span class="dot"></span> Unlimited projects</div>
<div class="row"><span class="dot"></span> Priority support</div>
<div class="row"><span class="dot"></span> SSO + audit logs</div>
<div class="row"><span class="dot"></span> 99.99% SLA</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html># Split Hero
Two-pane split hero comparing value vs. included features.
**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, split, comparison
**Features:** light/dark, responsive, join-on-desktop
## 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. 110 lines UTF-8 · LF · Spaces: 2
Continue browsing