{
CF
}
Code
Fronts
Back to CSS Hero Sections
Magazine Cover
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-mag { position: relative; width: 100%; min-height: clamp(220px, 28vh, 100vh); padding: clamp(20px, 4vh, 80px) clamp(24px, 5vw, 60px); background: #f5f1ea; display: flex; align-items: center; font-family: 'Times New Roman', Times, Georgia, serif; color: #1a1a1a; overflow: hidden; } .hs-mag-spine { position: absolute; top: 50%; left: 12px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; font-family: monospace; font-size: clamp(8px, 1vw, 10px); letter-spacing: 0.18em; text-transform: uppercase; color: #8a8275; white-space: nowrap; } .hs-mag-c { margin-left: clamp(20px, 4vw, 40px); max-width: 620px; display: flex; flex-direction: column; gap: 10px; } .hs-mag-vol { font-family: monospace; font-size: clamp(9px, 1.3vw, 12px); letter-spacing: 0.18em; color: #c54a3a; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 4px 0; width: fit-content; } .hs-mag h1 { margin: 4px 0; font-size: clamp(26px, 6vw, 70px); font-weight: 900; line-height: 0.98; letter-spacing: -0.02em; font-style: italic; } .hs-mag p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); font-style: italic; color: #4a443a; max-width: 440px; line-height: 1.5; } .hs-mag-cta { font-family: monospace; font-size: clamp(10px, 1.4vw, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c54a3a; text-decoration: none; border-bottom: 2px solid #c54a3a; padding-bottom: 2px; width: fit-content; margin-top: 4px; } .hs-mag-stamp { position: absolute; top: clamp(12px, 2vh, 20px); right: clamp(12px, 2vw, 20px); display: flex; flex-direction: column; align-items: center; width: 50px; height: 50px; border: 1.5px solid #1a1a1a; border-radius: 50%; font-family: monospace; font-size: 8.5px; font-weight: 700; color: #1a1a1a; justify-content: center; gap: 1px; } .hs-mag-stamp span:first-child { font-size: 14px; line-height: 1; color: #c54a3a; }
<section class="hs-mag"> <span class="hs-mag-spine">Issue 042 · May 2026</span> <div class="hs-mag-c"> <span class="hs-mag-vol">VOL. IV</span> <h1>The future is hand-coded.</h1> <p>An exploration of craft in the age of generated interfaces.</p> <a class="hs-mag-cta" href="#">Read the issue →</a> </div> <div class="hs-mag-stamp"> <span>★</span><span>0042</span> </div> </section>
Live preview
Ready