App Store Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections App Store Hero Pure CSS

Edit any tab — preview updates live

.hs-app {
  width: 100%;
  min-height: clamp(240px, 32vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(50% 50% at 70% 30%, rgba(124,108,255,0.18), transparent 70%),
    #0a0a14;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 32px); align-items: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
}
@media (max-width: 720px) { .hs-app { grid-template-columns: 1fr; } }
.hs-app-tag {
  display: inline-block; font-size: clamp(10px, 1.4vw, 12px);
  color: #f5a84a; padding: 3px 10px; border-radius: 12px;
  background: rgba(245,168,74,0.12); border: 1px solid rgba(245,168,74,0.3);
}
.hs-app-l h1 {
  margin: 10px 0; font-size: clamp(22px, 5vw, 50px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
}
.hs-app-l p { margin: 0 0 14px; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; }
.hs-app-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-app-btn {
  display: flex; flex-direction: column;
  padding: 7px 14px; border-radius: 7px;
  background: #1a1a2e; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.15s;
}
.hs-app-btn:hover { background: #25253a; }
.hs-app-btn span { font-size: 8.5px; color: #b8b6d4; letter-spacing: 0.05em; }
.hs-app-btn strong { font-size: clamp(11px, 1.4vw, 13px); }
.hs-app-fan {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.hs-app-phone {
  width: clamp(60px, 14vw, 90px);
  aspect-ratio: 9 / 18;
  background: #0a0a14;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  position: absolute;
  transition: transform 0.3s;
}
.hs-app-screen { width: 100%; height: 100%; border-radius: 8px; }
.hs-app-p1 { transform: translateX(-32%) rotate(-8deg); z-index: 1; }
.hs-app-p2 { transform: translateY(-6%) rotate(0deg); z-index: 3; }
.hs-app-p3 { transform: translateX(32%) rotate(8deg); z-index: 1; }
.hs-app-fan:hover .hs-app-p1 { transform: translateX(-44%) rotate(-12deg); }
.hs-app-fan:hover .hs-app-p3 { transform: translateX(44%) rotate(12deg); }
@media (prefers-reduced-motion: reduce) { .hs-app-phone { transition: none; } }

Live preview Ready