{
CF
}
Code
Fronts
Back to CSS Hero Sections
Price Card Hero
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-prc { width: 100%; min-height: clamp(220px, 30vh, 100vh); padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px); background: radial-gradient(40% 40% at 80% 30%, rgba(46,184,138,0.18), transparent 70%), radial-gradient(40% 40% at 20% 70%, rgba(124,108,255,0.18), transparent 70%), #0e0e16; display: grid; grid-template-columns: 1fr 280px; gap: clamp(12px, 3vw, 32px); align-items: center; font-family: system-ui, sans-serif; color: #f0eeff; } @media (max-width: 720px) { .hs-prc { grid-template-columns: 1fr; } } .hs-prc-tag { display: inline-block; font-family: monospace; font-size: clamp(9px, 1.3vw, 11px); font-weight: 700; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 12px; background: rgba(46,184,138,0.16); color: #2eb88a; border: 1px solid rgba(46,184,138,0.4); } .hs-prc-l h1 { margin: 10px 0; font-size: clamp(20px, 4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .hs-prc-l p { margin: 0 0 10px; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; } .hs-prc-li { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: clamp(10px, 1.4vw, 13px); color: #b8b6d4; } .hs-prc-li li { color: #f0eeff; } .hs-prc-li li::first-letter { color: #2eb88a; font-weight: 700; } .hs-prc-card { position: relative; background: linear-gradient(180deg, rgba(124,108,255,0.16), rgba(167,139,250,0.04)); border: 1px solid rgba(167,139,250,0.5); border-radius: 14px; padding: clamp(16px, 3vw, 24px); text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; box-shadow: 0 16px 40px rgba(124,108,255,0.18); } .hs-prc-rib { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-family: monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 10px; border-radius: 12px; white-space: nowrap; } .hs-prc-name { font-family: monospace; font-size: clamp(10px, 1.4vw, 12px); letter-spacing: 0.16em; text-transform: uppercase; color: #a78bfa; margin-top: 4px; } .hs-prc-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 4px 0; } .hs-prc-was { font-size: clamp(14px, 2vw, 18px); color: #b8b6d4; text-decoration: line-through; } .hs-prc-now { font-size: clamp(28px, 5vw, 44px); font-weight: 900; color: #fff; letter-spacing: -0.02em; } .hs-prc-per { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; } .hs-prc-cta { margin-top: 8px; width: 100%; padding: 10px 0; border-radius: 8px; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-size: clamp(11px, 1.5vw, 14px); font-weight: 700; text-decoration: none; transition: filter 0.15s; } .hs-prc-cta:hover { filter: brightness(1.12); } .hs-prc-fine { font-size: 9.5px; color: #b8b6d4; margin-top: 4px; }
<section class="hs-prc"> <div class="hs-prc-l"> <span class="hs-prc-tag">Save 30% · Annual</span> <h1>One price. Everything inside.</h1> <p>Unlimited components, every collection, lifetime updates.</p> <ul class="hs-prc-li"> <li>✓ All 24 collections</li> <li>✓ Lifetime updates</li> <li>✓ Commercial licence</li> </ul> </div> <div class="hs-prc-card"> <span class="hs-prc-rib">BEST VALUE</span> <div class="hs-prc-name">Lifetime</div> <div class="hs-prc-price"> <span class="hs-prc-was">$299</span> <span class="hs-prc-now">$199</span> </div> <div class="hs-prc-per">one-time · no subscription</div> <a class="hs-prc-cta" href="#">Get lifetime →</a> <div class="hs-prc-fine">30-day money back</div> </div> </section>
Live preview
Ready