{
CF
}
Code
Fronts
Back to CSS Hero Sections
Split with Mockup
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-sp { width: 100%; min-height: clamp(220px, 28vh, 100vh); padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px); background: linear-gradient(135deg, #0e0e16 0%, #1a1438 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 40px); align-items: center; font-family: system-ui, sans-serif; color: #f0eeff; } @media (max-width: 720px) { .hs-sp { grid-template-columns: 1fr; } } .hs-sp-l h1 { margin: 0 0 8px; font-size: clamp(18px, 4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .hs-sp-l p { margin: 0 0 12px; font-size: clamp(11px, 1.5vw, 16px); color: #b8b6d4; line-height: 1.5; } .hs-sp-cta { display: inline-block; padding: 7px 16px; border-radius: 7px; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-size: clamp(11px, 1.5vw, 14px); font-weight: 600; text-decoration: none; transition: filter 0.15s; } .hs-sp-cta:hover { filter: brightness(1.12); } .hs-sp-win { background: #18181f; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .hs-sp-bar { background: rgba(0,0,0,0.4); padding: 6px 8px; display: flex; gap: 5px; } .hs-sp-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); } .hs-sp-bar span:first-child { background: #ff6c8a; } .hs-sp-bar span:nth-child(2) { background: #f5a84a; } .hs-sp-bar span:nth-child(3) { background: #2eb88a; } .hs-sp-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; } .hs-sp-row { height: 6px; background: rgba(167,139,250,0.25); border-radius: 3px; width: 80%; } .hs-sp-row-w { width: 50%; background: rgba(167,139,250,0.18); } .hs-sp-card { height: 50px; border-radius: 5px; background: linear-gradient(135deg, rgba(124,108,255,0.4), rgba(255,108,138,0.3)); margin-top: 4px; }
<section class="hs-sp"> <div class="hs-sp-l"> <h1>Ship UIs in hours, not weeks.</h1> <p>Pre-built components and patterns that adapt to your design system.</p> <a class="hs-sp-cta" href="#">Try it free →</a> </div> <div class="hs-sp-r"> <div class="hs-sp-win"> <div class="hs-sp-bar"><span></span><span></span><span></span></div> <div class="hs-sp-body"> <div class="hs-sp-row"></div> <div class="hs-sp-row hs-sp-row-w"></div> <div class="hs-sp-card"></div> </div> </div> </div> </section>
Live preview
Ready