Social Proof Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Social Proof Hero Pure CSS

Edit any tab — preview updates live

.hs-sp2 {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(124,108,255,0.16), transparent 70%),
    #0e0e16;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-family: system-ui, sans-serif; color: #f0eeff; text-align: center;
}
.hs-sp2-stars {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(10px, 1.4vw, 12px);
  padding: 4px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.hs-sp2-stars > span:first-child { color: #f5a84a; letter-spacing: 1px; }
.hs-sp2-rating { color: #fff; font-weight: 700; }
.hs-sp2-count  { color: #b8b6d4; }
.hs-sp2 h1 {
  margin: 4px 0; font-size: clamp(18px, 4.5vw, 48px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; max-width: 700px;
}
.hs-sp2 p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); color: #b8b6d4; max-width: 520px; }
.hs-sp2-cta {
  padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; margin-top: 4px;
  transition: filter 0.15s;
}
.hs-sp2-cta:hover { filter: brightness(1.12); }
.hs-sp2-logos {
  display: flex; flex-wrap: wrap; gap: clamp(12px, 3vw, 32px); justify-content: center;
  margin-top: clamp(8px, 2vh, 24px);
  padding-top: clamp(8px, 2vh, 24px);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: Georgia, serif; font-style: italic; font-weight: 700;
  font-size: clamp(11px, 1.5vw, 15px);
  color: #6a6a85;
}

Live preview Ready