Centered Classic — Playground

{CF} CodeFronts Back to CSS Hero Sections Centered Classic Pure CSS

Edit any tab — preview updates live

.hs-c {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background: radial-gradient(80% 60% at 50% 0%, rgba(124,108,255,0.18), transparent 70%), #0e0e16;
  display: flex; align-items: center; justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  color: #f0eeff; text-align: center;
}
.hs-c-inner { max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hs-c-eye {
  font-family: monospace; font-size: clamp(9px, 1.4vw, 11px);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #a78bfa;
  padding: 4px 10px; border-radius: 12px;
  background: rgba(124,108,255,0.12); border: 1px solid rgba(124,108,255,0.3);
}
.hs-c-h {
  margin: 0; font-size: clamp(20px, 4.5vw, 56px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-c-p { margin: 0; font-size: clamp(11px, 1.6vw, 17px); color: #b8b6d4; max-width: 480px; line-height: 1.5; }
.hs-c-cta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.hs-c-btn {
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 600;
  padding: 8px 16px; border-radius: 7px;
  text-decoration: none; transition: filter 0.15s, background 0.15s;
}
.hs-c-pri { background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; }
.hs-c-pri:hover { filter: brightness(1.12); }
.hs-c-sec { background: rgba(255,255,255,0.06); color: #f0eeff; border: 1px solid rgba(255,255,255,0.12); }
.hs-c-sec:hover { background: rgba(255,255,255,0.12); }

Live preview Ready