{
CF
}
Code
Fronts
Back to CSS Hero Sections
Photo Card Hero
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-pc { position: relative; width: 100%; min-height: clamp(220px, 32vh, 100vh); display: flex; align-items: flex-end; overflow: hidden; font-family: Georgia, 'Times New Roman', serif; color: #fff; } .hs-pc-bg, .hs-pc-grad { position: absolute; inset: 0; } .hs-pc-bg svg { width: 100%; height: 100%; display: block; } .hs-pc-grad { background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); } .hs-pc-c { position: relative; z-index: 1; padding: clamp(20px, 4vh, 60px); max-width: 560px; display: flex; flex-direction: column; gap: 8px; } .hs-pc-eye { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(9px, 1.3vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .hs-pc h1 { margin: 4px 0; font-size: clamp(22px, 5vw, 56px); font-weight: 400; line-height: 1.05; font-style: italic; letter-spacing: -0.01em; } .hs-pc p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); font-family: 'Helvetica Neue', sans-serif; color: rgba(255,255,255,0.85); max-width: 420px; } .hs-pc-cta { margin-top: 10px; padding: 8px 18px; border-radius: 0; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); font-family: 'Helvetica Neue', sans-serif; font-size: clamp(10px, 1.3vw, 12px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; width: fit-content; transition: background 0.15s, color 0.15s; } .hs-pc-cta:hover { background: #fff; color: #0e0e16; }
<section class="hs-pc"> <div class="hs-pc-bg" aria-hidden="true"> <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice"> <defs> <linearGradient id="hs-pc-sky" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#ffd479"/> <stop offset="60%" stop-color="#ff8a6c"/> <stop offset="100%" stop-color="#7c4ab8"/> </linearGradient> </defs> <rect width="400" height="240" fill="url(#hs-pc-sky)"/> <circle cx="290" cy="80" r="36" fill="#fff5d4" opacity="0.85"/> <path d="M0,180 Q100,150 180,170 T400,160 L400,240 L0,240 Z" fill="#3a2a4f" opacity="0.7"/> <path d="M0,200 Q120,180 220,200 T400,190 L400,240 L0,240 Z" fill="#1a1430" opacity="0.85"/> </svg> </div> <div class="hs-pc-grad" aria-hidden="true"></div> <div class="hs-pc-c"> <span class="hs-pc-eye">Spring Collection</span> <h1>Light, weighed in seconds.</h1> <p>A new range, designed for the unpredictable mornings of May.</p> <a class="hs-pc-cta" href="#">Shop the collection</a> </div> </section>
Live preview
Ready