22 examples Responsive Uses JS beginner

22 CSS Split Screen Layouts

css split screen split screen layout two column hero diagonal split css before after slider hover reveal css landing page css-only

A CSS split-screen layout divides the page into two (or more) full-bleed regions — a hero image beside copy, a sign-in form beside a brand visual, a before/after compare, a diagonal cut between two stories. These 22 hand-coded splits cover the patterns you actually ship — classic 50/50, diagonal cut, asymmetric 70/30, hover-reveal, before/after slider, parallax scenes, 3D perspective. Built with semantic <section> + <article>, real <form> with proper labels, native <input type="range"> for sliders, and a fully responsive 1-column fallback under 720px.

22 unique splits 21 Pure CSS 1 CSS + JS WCAG-friendly Mobile-first MIT licensed Updated May 5, 2026

01 / 22

Editorial Restaurant

Pure CSS

Editorial restaurant menu — cream paper, olive-green typography, burgundy accents. Classic 50/50 split with food photography on the left (CSS-painted plate) and the menu on the right. Serif headlines, dotted-leader pricing, the printed-menu aesthetic.

Try it

.ss-edt {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #2a3325;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a3325;
}
.ss-edt-visual {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 40%, #efe4cf 0%, #d8c8a8 100%);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #2a3325;
}
.ss-edt-plate {
  position: relative;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f0e8d4 100%);
  box-shadow:
    inset 0 0 0 14px rgba(0,0,0,0.04),
    inset 0 0 0 16px rgba(122,86,40,0.18),
    0 18px 40px rgba(60,40,20,0.18);
}
.ss-edt-food {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%, #6d8c3c 0%, #4a6b25 60%, transparent 75%),
    radial-gradient(circle at 70% 60%, #c43a2c 0%, #8a1f1c 30%, transparent 50%),
    radial-gradient(circle at 50% 75%, #e8b04a 0%, #b8924a 40%, transparent 60%);
}
.ss-edt-fork, .ss-edt-knife {
  position: absolute;
  width: 4px; height: 80px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ss-edt-fork  { top: 50%; left: 8%; transform: translateY(-50%) rotate(8deg); }
.ss-edt-knife { top: 50%; right: 8%; transform: translateY(-50%) rotate(-8deg); }
.ss-edt-fork::before {
  content: ''; position: absolute; top: -10px; left: -6px;
  width: 16px; height: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, #c0bcb0 3px 4px);
}
.ss-edt-knife::before {
  content: ''; position: absolute; top: -10px; left: -3px;
  width: 10px; height: 30px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px 4px 0 0;
  transform: skewX(-8deg);
}
.ss-edt-stamp {
  position: absolute; top: 24px; left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #5a3825;
  border: 1.5px solid #5a3825;
  padding: 6px 12px;
  transform: rotate(-4deg);
  background: rgba(244,237,224,0.4);
}
.ss-edt-menu {
  padding: 40px 44px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(60% 60% at 100% 0%, #fdf8eb 0%, transparent 60%),
    #f9f1de;
}
.ss-edt-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #6e1f1c;
}
.ss-edt-menu h2 {
  margin: 6px 0 0;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 500;
  line-height: 0.95;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-edt-menu h2 em {
  font-style: italic;
  color: #6e1f1c;
}
.ss-edt-menu header p {
  margin: 4px 0 0;
  font-size: 16px;
  color: #5a4a35;
  line-height: 1.55;
  max-width: 440px;
}
.ss-edt-courses { margin: 0; padding: 18px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: flex; flex-direction: column; gap: 14px; }
.ss-edt-courses div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 18px;
}
.ss-edt-courses dt {
  color: #2a3325;
  font-style: italic;
  flex-shrink: 0;
}
.ss-edt-courses dt::after {
  content: '';
  display: inline-block;
  width: 100%;
  margin: 0 8px 4px;
  border-bottom: 1.5px dotted #b89668;
  vertical-align: bottom;
}
.ss-edt-courses dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #6e1f1c;
}
.ss-edt-menu footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-edt-menu footer span {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: #5a4a35;
}
.ss-edt-cta {
  padding: 12px 22px;
  background: #2a3325;
  color: #f4ede0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-edt-cta:hover { background: #6e1f1c; }
.ss-edt-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-edt { grid-template-columns: 1fr; }
  .ss-edt-visual { min-height: 280px; border-right: 0; border-bottom: 1px solid #2a3325; }
}

<section class="ss-edt" aria-label="Restaurant menu">
  <aside class="ss-edt-visual" aria-hidden="true">
    <div class="ss-edt-plate">
      <div class="ss-edt-food"></div>
      <span class="ss-edt-fork"></span>
      <span class="ss-edt-knife"></span>
    </div>
    <span class="ss-edt-stamp">No. 47 · Spring</span>
  </aside>
  <article class="ss-edt-menu">
    <header>
      <span class="ss-edt-eye">— La Maison Verte</span>
      <h2>The Spring<br/><em>tasting menu.</em></h2>
      <p>Five courses, paired with natural wines, served family-style. Reservations required.</p>
    </header>
    <dl class="ss-edt-courses">
      <div>
        <dt>Asparagus &amp; truffle</dt>
        <dd>18</dd>
      </div>
      <div>
        <dt>Pea soup, mint oil</dt>
        <dd>14</dd>
      </div>
      <div>
        <dt>Hand-rolled cavatelli</dt>
        <dd>26</dd>
      </div>
      <div>
        <dt>Lamb shoulder, jus</dt>
        <dd>34</dd>
      </div>
      <div>
        <dt>Olive oil cake</dt>
        <dd>12</dd>
      </div>
    </dl>
    <footer>
      <span>5-course · 104 per guest</span>
      <button type="button" class="ss-edt-cta">Reserve a table →</button>
    </footer>
  </article>
</section>

02 / 22

Diagonal Split

Pure CSS

ISSUE 47 · MAY

FASTER
than
YESTERDAY.

Inside: how four runners broke their personal records by changing one thing.

01 The 6am rule
02 Negative splits
03 Track over road

Sport magazine — pitch black with electric-orange diagonal cut and concrete-grey supporting tones. Headline punches through the diagonal seam. Pure CSS via clip-path: polygon() for the angled wedge; oversized condensed display type sells the impact.

Try it

.ss-dia {
  position: relative;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0e10;
  color: #fff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-dia-orange {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5e1a 0%, #ff8a00 60%, #ffaa44 100%);
  clip-path: polygon(0 0, 56% 0, 32% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center;
}
.ss-dia-orange::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(0,0,0,0.04) 30px 31px);
}
.ss-dia-num {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  color: #0e0e10;
  letter-spacing: -0.05em;
  transform: translateX(-22%) translateY(-4%);
  text-shadow: 0 6px 0 rgba(0,0,0,0.06);
  font-style: italic;
}
.ss-dia-black {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 56%;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 2;
}
.ss-dia-issue {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em;
  color: #ff8a00;
}
.ss-dia-black h2 {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ss-dia-italic {
  font-style: italic;
  font-weight: 300;
  color: #ff8a00;
  text-transform: lowercase;
  font-family: 'Cormorant Garamond', serif;
}
.ss-dia-black p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b8b6b0;
  max-width: 380px;
}
.ss-dia-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-dia-list li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #fff;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ss-dia-list span {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff8a00;
}
.ss-dia-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff5e1a;
  color: #0e0e10;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-dia-cta:hover { background: #ff8a00; }
.ss-dia-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-dia { min-height: 580px; }
  .ss-dia-orange { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%); }
  .ss-dia-num { transform: translateX(0) translateY(-10%); font-size: 120px; }
  .ss-dia-black { width: 100%; top: 50%; padding-top: 36px; }
}

<section class="ss-dia" aria-label="Sport magazine cover">
  <div class="ss-dia-orange" aria-hidden="true">
    <span class="ss-dia-num">47</span>
  </div>
  <div class="ss-dia-black">
    <span class="ss-dia-issue">ISSUE 47 · MAY</span>
    <h2>FASTER<br/><span class="ss-dia-italic">than</span><br/>YESTERDAY.</h2>
    <p>Inside: how four runners broke their personal records by changing one thing.</p>
    <ul class="ss-dia-list">
      <li><span>01</span> The 6am rule</li>
      <li><span>02</span> Negative splits</li>
      <li><span>03</span> Track over road</li>
    </ul>
    <button type="button" class="ss-dia-cta">Read inside →</button>
  </div>
</section>

03 / 22

Wine Cellar

Pure CSS

VINTAGE 1987

Château
Verdun

A single-vineyard cuvée from the Médoc. Aged 24 months in French oak. Limited release of 1,200 bottles.

Region: Bordeaux, France
Varietal: Cabernet Sauvignon (78%)
Aging: 24 months · French oak
Tasting: Black cherry, leather, tobacco
Pairing: Dry-aged ribeye, hard cheese

Wine cellar boutique — deep burgundy with gold-leaf accents and cream label typography. Asymmetric 60/40 split: a single CSS-painted bottle on the left, vintage tasting notes on the right. Real <dl> for the vintage details.

Try it

.ss-wne {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #1a0a0e;
  color: #f5e6d3;
  border-radius: 0; overflow: hidden;
}
.ss-wne-visual {
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(80,20,30,0.6) 0%, #0e0608 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-wne-shelf {
  position: absolute; bottom: 12%; left: 0; right: 0; height: 4px;
  background: linear-gradient(180deg, #5a3825 0%, #3a2415 100%);
  box-shadow: 0 -2px 0 #2a1810, 0 4px 18px rgba(0,0,0,0.6);
}
.ss-wne-bottle {
  position: relative;
  width: 88px; height: 280px;
  border-radius: 8px 8px 24px 24px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 30%, transparent 50%),
    linear-gradient(180deg, #2a0810 0%, #1a0a0e 100%);
  box-shadow:
    inset -8px 0 24px rgba(0,0,0,0.5),
    inset 8px 0 12px rgba(180,80,80,0.08),
    0 6px 18px rgba(0,0,0,0.5);
  z-index: 2;
}
.ss-wne-neck {
  position: absolute; left: 50%; top: -54px;
  transform: translateX(-50%);
  width: 28px; height: 60px;
  background: linear-gradient(180deg, #1a0608 0%, #2a0810 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.4);
}
.ss-wne-neck::after {
  content: ''; position: absolute; top: -8px; left: -2px; right: -2px; height: 14px;
  background: linear-gradient(180deg, #d4af37 0%, #8a6f1c 100%);
  border-radius: 3px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label {
  position: absolute; left: 6px; right: 6px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #f5e6d3 0%, #e8d4ba 100%);
  padding: 14px 6px;
  text-align: center;
  border-top: 1px solid #d4af37;
  border-bottom: 1px solid #d4af37;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px; font-style: italic;
  color: #6e1f1c;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.ss-wne-label strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 700;
  color: #1a0a0e;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ss-wne-label span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6e1f1c;
  margin-top: 4px;
}
.ss-wne-glow {
  position: absolute; bottom: 8%; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 30px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(212,175,55,0.18), transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.ss-wne-notes {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(110,30,30,0.18) 0%, transparent 70%),
    #1a0a0e;
}
.ss-wne-vintage {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3em;
  color: #d4af37;
}
.ss-wne-notes h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  color: #f5e6d3;
  letter-spacing: -0.02em;
}
.ss-wne-notes h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-wne-notes header p {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c4a888;
  max-width: 440px;
  font-style: italic;
}
.ss-wne-detail { margin: 0; padding: 18px 0; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 14.5px; }
.ss-wne-detail dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-wne-detail dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #f5e6d3;
}
.ss-wne-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-wne-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: #d4af37;
  letter-spacing: -0.01em;
}
.ss-wne-price small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #8a6f4a;
  margin-left: 4px;
}
.ss-wne-cta {
  padding: 14px 26px;
  background: transparent;
  color: #d4af37;
  border: 1.5px solid #d4af37;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.ss-wne-cta:hover { background: #d4af37; color: #1a0a0e; }
@media (max-width: 720px) {
  .ss-wne { grid-template-columns: 1fr; }
  .ss-wne-visual { min-height: 320px; }
}

<section class="ss-wne" aria-label="Wine bottle and tasting notes">
  <aside class="ss-wne-visual" aria-hidden="true">
    <div class="ss-wne-shelf"></div>
    <div class="ss-wne-bottle">
      <div class="ss-wne-neck"></div>
      <div class="ss-wne-label">
        <em>Château</em>
        <strong>Verdun</strong>
        <span>1987</span>
      </div>
    </div>
    <div class="ss-wne-glow"></div>
  </aside>
  <article class="ss-wne-notes">
    <header>
      <span class="ss-wne-vintage">VINTAGE 1987</span>
      <h2>Château<br/><em>Verdun</em></h2>
      <p>A single-vineyard cuvée from the Médoc. Aged 24 months in French oak. Limited release of 1,200 bottles.</p>
    </header>
    <dl class="ss-wne-detail">
      <dt>Region</dt><dd>Bordeaux, France</dd>
      <dt>Varietal</dt><dd>Cabernet Sauvignon (78%)</dd>
      <dt>Aging</dt><dd>24 months · French oak</dd>
      <dt>Tasting</dt><dd>Black cherry, leather, tobacco</dd>
      <dt>Pairing</dt><dd>Dry-aged ribeye, hard cheese</dd>
    </dl>
    <footer class="ss-wne-foot">
      <span class="ss-wne-price">€420 <small>per bottle</small></span>
      <button type="button" class="ss-wne-cta">Add to cellar</button>
    </footer>
  </article>
</section>

04 / 22

Hover Reveal Split

Pure CSS

SIDE A

NEONHEART

Vol. 03 · Out now

01 ⟡ Midnight Drive 02 ⟡ Lights Off 03 ⟡ Pink Static

SIDE B

CYBERBLOOM

Vol. 03 · Out now

04 ⟡ Glass Hearts 05 ⟡ Hologram 06 ⟡ Echo Park

K-pop concert poster — hot pink + electric cyan + chrome. Two halves; hover/tap each to grow it from 50% to 70%, the other shrinks. Pure CSS via flex-grow transition; massive condensed type and chromatic-aberration headlines complete the album-cover feel.

Try it

.ss-kpop {
  display: flex;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  background: #0a0014;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side {
  flex: 1 1 50%;
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: flex-grow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1.6; }
.ss-kpop-pink {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 30% 30%, #ff52aa 0%, #c41560 100%);
  color: #fff;
  border-right: 2px solid #fff;
}
.ss-kpop-cyan {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 70% 70%, #00e5ff 0%, #0080a8 100%);
  color: #0a0014;
}
.ss-kpop-pink::before, .ss-kpop-cyan::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.2) 50%, transparent 70%);
  z-index: -1;
}
.ss-kpop-pink::before { top: -60px; right: -60px; }
.ss-kpop-cyan::before { bottom: -60px; left: -60px; }
.ss-kpop-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em;
}
.ss-kpop-pink .ss-kpop-eye { color: #ffd400; text-shadow: 0 0 10px rgba(255,212,0,0.4); }
.ss-kpop-cyan .ss-kpop-eye { color: #ff00aa; }
.ss-kpop-side h2 {
  margin: 0;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: flex; flex-direction: column;
  font-style: italic;
}
.ss-kpop-side h2 span:nth-child(2) {
  align-self: flex-end;
}
.ss-kpop-pink h2 {
  color: #fff;
  text-shadow:
    -3px 0 0 #00e5ff,
    3px 0 0 #ffd400;
}
.ss-kpop-cyan h2 {
  color: #0a0014;
  text-shadow:
    -3px 0 0 #ff52aa,
    3px 0 0 #ffd400;
}
.ss-kpop-side p {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.ss-kpop-pink p { color: #ffd400; }
.ss-kpop-cyan p { color: #0a0014; }
.ss-kpop-track {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.ss-kpop-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 22px;
  background: #fff;
  color: #0a0014;
  border: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform 0.12s;
}
.ss-kpop-pink .ss-kpop-cta { background: #ffd400; color: #c41560; }
.ss-kpop-cyan .ss-kpop-cta { background: #ff52aa; color: #fff; }
.ss-kpop-cta:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-kpop { flex-direction: column; }
  .ss-kpop-side { flex: 1 1 auto; }
  .ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1; }
  .ss-kpop-pink { border-right: 0; border-bottom: 2px solid #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-kpop-side { transition: none; }
}

<section class="ss-kpop" aria-label="Album release split">
  <article class="ss-kpop-side ss-kpop-pink">
    <span class="ss-kpop-eye">SIDE A</span>
    <h2><span>NEON</span><span>HEART</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>01 ⟡ Midnight Drive</span>
      <span>02 ⟡ Lights Off</span>
      <span>03 ⟡ Pink Static</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
  <article class="ss-kpop-side ss-kpop-cyan">
    <span class="ss-kpop-eye">SIDE B</span>
    <h2><span>CYBER</span><span>BLOOM</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>04 ⟡ Glass Hearts</span>
      <span>05 ⟡ Hologram</span>
      <span>06 ⟡ Echo Park</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
</section>

05 / 22

Coffee Triptych

Pure CSS

Misty
Morning

LIGHT ROAST

Bright, floral, lemon zest. Single origin Ethiopia.

Honey
House

MEDIUM

Caramel, almond, ripe stone fruit. Costa Rica blend.

Midnight
Hour

DARK ROAST

Dark chocolate, smoke, lingering espresso finish.

Three coffee blends side-by-side — espresso brown, cream, copper. Three vertical panels in a single row, each with its own roast story. Hover any panel to reveal the tasting notes. CSS grid with 1fr 1fr 1fr and a shared expand-on-hover behavior.

Try it

.ss-trip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-trip-card {
  position: relative;
  padding: 40px 28px;
  display: flex; flex-direction: column; gap: 18px;
  cursor: pointer;
  transition: padding 0.32s ease;
  border-right: 1px solid rgba(0,0,0,0.2);
  isolation: isolate;
}
.ss-trip-card:last-child { border-right: 0; }
.ss-trip-light  { background: linear-gradient(180deg, #f4ebd6 0%, #e8d4ba 100%); color: #5a3825; }
.ss-trip-medium { background: linear-gradient(180deg, #b8924a 0%, #8a6420 100%); color: #f4ebd6; }
.ss-trip-dark   { background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%); color: #f4ebd6; }
.ss-trip-card header { display: flex; flex-direction: column; gap: 14px; }
.ss-trip-bean {
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.ss-trip-bean::before {
  content: '';
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 4px; height: 76%;
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
}
.ss-trip-light  .ss-trip-bean { background: linear-gradient(135deg, #c89868 0%, #8a5825 100%); }
.ss-trip-medium .ss-trip-bean { background: linear-gradient(135deg, #6a3818 0%, #3a1808 100%); }
.ss-trip-dark   .ss-trip-bean { background: linear-gradient(135deg, #2a0806 0%, #050000 100%); }
.ss-trip-card h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 0.95;
  font-style: italic;
  letter-spacing: -0.01em;
}
.ss-trip-roast {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.ss-trip-notes {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.85;
  font-style: italic;
  max-width: 200px;
}
.ss-trip-card footer {
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 16px;
  border-top: 1px dashed currentColor;
  opacity: 0.85;
}
.ss-trip-card:hover {
  padding: 36px 28px 36px 36px;
}
.ss-trip-card::after {
  content: '→';
  position: absolute; top: 28px; right: 28px;
  font-size: 22px;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.24s, transform 0.24s;
}
.ss-trip-card:hover::after { opacity: 1; transform: translateX(4px); }
@media (max-width: 720px) {
  .ss-trip { grid-template-columns: 1fr; }
  .ss-trip-card { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.2); }
  .ss-trip-card:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trip-card { transition: none; }
}

<section class="ss-trip" aria-label="Coffee blend triptych">
  <article class="ss-trip-card ss-trip-light">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Misty<br/>Morning</h2>
      <span class="ss-trip-roast">LIGHT ROAST</span>
    </header>
    <p class="ss-trip-notes">Bright, floral, lemon zest. Single origin Ethiopia.</p>
    <footer>€18 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-medium">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Honey<br/>House</h2>
      <span class="ss-trip-roast">MEDIUM</span>
    </header>
    <p class="ss-trip-notes">Caramel, almond, ripe stone fruit. Costa Rica blend.</p>
    <footer>€20 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-dark">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Midnight<br/>Hour</h2>
      <span class="ss-trip-roast">DARK ROAST</span>
    </header>
    <p class="ss-trip-notes">Dark chocolate, smoke, lingering espresso finish.</p>
    <footer>€22 · 250g</footer>
  </article>
</section>

06 / 22

Curved Split

Pure CSS

▴ Drift Surf Co.

Hand-shaped
by the tide.

Custom polyurethane boards, glassed in our Ericeira workshop. 6-week lead time, lifetime workmanship guarantee.

14Shapers

2,400Boards / yr

1972Founded

Surf brand — ocean teal meets sand beige with a wave-curved seam, sunset-coral CTA. Pure CSS curve via border-radius and a generous clip-path. The two halves never share a straight line — feels organic, beach-y, hand-shaped.

Try it

.ss-srf {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecd9;
  color: #1a3a3f;
  border-radius: 0; overflow: hidden;
  position: relative;
}
.ss-srf-ocean {
  position: relative;
  background: linear-gradient(180deg, #2c8a8e 0%, #1a3a3f 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-srf-ocean::after {
  content: '';
  position: absolute; right: -120px; top: 0; bottom: 0; width: 240px;
  background: #f5ecd9;
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
  z-index: 2;
}
.ss-srf-sun {
  position: absolute; top: 14%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe899 0%, #ff8a40 60%, #c45a1c 100%);
  box-shadow: 0 0 60px rgba(255,170,68,0.5);
}
.ss-srf-wave {
  position: absolute; bottom: 18%; left: -10%; right: -20%;
  height: 80px;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(255,255,255,0.35), transparent 60%);
  border-radius: 50%;
  filter: blur(2px);
}
.ss-srf-wave::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  filter: blur(6px);
}
.ss-srf-board {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(28deg);
  width: 56px; height: 240px;
  border-radius: 28px / 90px;
  background: linear-gradient(180deg, #fff 0%, #ffe9c4 50%, #ff8a40 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 3;
}
.ss-srf-board::before {
  content: ''; position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  width: 2px; height: 76%;
  background: rgba(0,0,0,0.18);
}
.ss-srf-content {
  padding: 44px 48px 44px 36px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative;
  z-index: 1;
}
.ss-srf-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-srf-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.95;
  color: #1a3a3f;
  letter-spacing: -0.02em;
}
.ss-srf-content h2 em {
  font-style: italic;
  color: #c45a1c;
}
.ss-srf-content p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3a5a5f;
  max-width: 460px;
}
.ss-srf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 420px; padding: 14px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; }
.ss-srf-stat { display: flex; flex-direction: column; gap: 4px; }
.ss-srf-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 500;
  color: #2c8a8e;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-srf-stats span {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #6a4a35;
  text-transform: uppercase;
}
.ss-srf-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c45a1c;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,90,28,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-srf-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,90,28,0.45); }
@media (max-width: 720px) {
  .ss-srf { grid-template-columns: 1fr; }
  .ss-srf-ocean { min-height: 280px; }
  .ss-srf-ocean::after { display: none; }
  .ss-srf-stats { grid-template-columns: 1fr; }
}

<section class="ss-srf" aria-label="Surfboard hero">
  <aside class="ss-srf-ocean" aria-hidden="true">
    <span class="ss-srf-sun"></span>
    <span class="ss-srf-wave"></span>
    <span class="ss-srf-board"></span>
  </aside>
  <article class="ss-srf-content">
    <span class="ss-srf-eye">▴ Drift Surf Co.</span>
    <h2>Hand-shaped<br/>by the <em>tide.</em></h2>
    <p>Custom polyurethane boards, glassed in our Ericeira workshop. 6-week lead time, lifetime workmanship guarantee.</p>
    <div class="ss-srf-stats">
      <div class="ss-srf-stat"><strong>14</strong><span>Shapers</span></div>
      <div class="ss-srf-stat"><strong>2,400</strong><span>Boards / yr</span></div>
      <div class="ss-srf-stat"><strong>1972</strong><span>Founded</span></div>
    </div>
    <button type="button" class="ss-srf-cta">Shape your board →</button>
  </article>
</section>

07 / 22

Asymmetric 70/30

Pure CSS

PROJECT NO. 014 · 2026

Casa
Hormigón

A 220 m² family house in Valle de Bravo. Cast-in-place concrete walls, exposed timber roof, single oculus skylight above the central courtyard.

Architecture portfolio — warm grey concrete + ivory + black accents. Asymmetric 70/30 split: a single hero project on the left, oversized index numbers on the right. Print-magazine spread vibe; thin hairlines do all the structuring.

Try it

.ss-arc {
  display: grid; grid-template-columns: 70% 30%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f0ece4;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
}
.ss-arc-hero {
  padding: 44px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  position: relative;
}
.ss-arc-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
.ss-arc-hero header h2 {
  margin: 6px 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  line-height: 0.92;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  font-style: italic;
}
.ss-arc-hero header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
  max-width: 420px;
}
.ss-arc-photo {
  position: relative;
  background: linear-gradient(180deg, #d4cfc1 0%, #b8b3a4 100%);
  border: 1px solid #1a1a1a;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  min-height: 180px;
}
.ss-arc-bldg {
  width: 60%; height: 70%;
  background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
  position: relative;
}
.ss-arc-bldg::before {
  content: ''; position: absolute; top: 12%; left: 35%; right: 35%; height: 14%;
  background: #f5d68a;
  box-shadow:
    0 0 0 1px #1a1a1a,
    0 0 18px rgba(245,214,138,0.5);
}
.ss-arc-bldg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,0.08) 14% 16%);
}
.ss-arc-shadow {
  position: absolute; left: 5%; right: 5%; bottom: 0; height: 16px;
  background: rgba(0,0,0,0.4);
  filter: blur(8px);
}
.ss-arc-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #1a1a1a;
}
.ss-arc-meta span { display: flex; flex-direction: column; gap: 4px; }
.ss-arc-meta em {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6a6a6a;
  font-style: normal;
}
.ss-arc-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
  color: #1a1a1a;
  font-style: italic;
}
.ss-arc-index {
  background: #1a1a1a;
  color: #f0ece4;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 18px;
  font-family: 'Cormorant Garamond', serif;
}
.ss-arc-folio {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #6a6a6a;
}
.ss-arc-index ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ss-arc-index li {
  padding: 14px 0;
  font-size: 17px;
  font-style: italic;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: baseline;
  cursor: pointer;
  transition: color 0.16s;
}
.ss-arc-index li:hover { color: #f0ece4; }
.ss-arc-index li span {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-style: normal;
  color: #6a6a6a;
  letter-spacing: 0.16em;
}
.ss-arc-index li.active {
  color: #f0ece4;
  font-weight: 500;
}
.ss-arc-index li.active span { color: #f5d68a; }
.ss-arc-index footer {
  margin-top: auto;
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
@media (max-width: 720px) {
  .ss-arc { grid-template-columns: 1fr; }
  .ss-arc-meta { grid-template-columns: 1fr 1fr; }
}

<section class="ss-arc" aria-label="Architecture project showcase">
  <article class="ss-arc-hero">
    <header>
      <span class="ss-arc-eye">PROJECT NO. 014 · 2026</span>
      <h2>Casa<br/>Hormigón</h2>
      <p>A 220 m² family house in Valle de Bravo. Cast-in-place concrete walls, exposed timber roof, single oculus skylight above the central courtyard.</p>
    </header>
    <div class="ss-arc-photo" aria-hidden="true">
      <span class="ss-arc-bldg"></span>
      <span class="ss-arc-shadow"></span>
    </div>
    <footer class="ss-arc-meta">
      <span><em>Location</em><b>Valle de Bravo, MX</b></span>
      <span><em>Year</em><b>2026</b></span>
      <span><em>Area</em><b>220 m²</b></span>
      <span><em>Status</em><b>Completed</b></span>
    </footer>
  </article>
  <aside class="ss-arc-index">
    <span class="ss-arc-folio">FOLIO</span>
    <ol>
      <li class="active"><span>014</span>Casa Hormigón</li>
      <li><span>013</span>Library Pavilion</li>
      <li><span>012</span>Bridge House</li>
      <li><span>011</span>Sea Cabin</li>
      <li><span>010</span>Garden Atelier</li>
    </ol>
    <footer>est. 2008</footer>
  </aside>
</section>

08 / 22

Stepped Diagonal

Pure CSS

FRIDAY
3PM

03 Tees
02 Hoodies
01 Pair of kicks

// LIMITED RUN

200 pieces. Numbered. No restock. Sign up below to get the link 5 minutes early.

⏱ 04 : 12 : 47 : 03

Streetwear brand drop — mustard yellow + asphalt black + neon pink. Stepped diagonal cut between two halves, sticker-graphic typography, drop-countdown badge. The kind of split a sneaker brand uses to announce a Friday release.

Try it

.ss-str {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-str-yellow {
  background: #ffd400;
  color: #0a0a0a;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  z-index: 2;
}
.ss-str-yellow::before {
  content: '';
  position: absolute; right: 60px; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, #0a0a0a 0 12px, transparent 12px 24px);
}
.ss-str-stamp {
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a0a;
  color: #ffd400;
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  transform: rotate(-2deg);
}
.ss-str-yellow h2 {
  margin: 0;
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-style: italic;
}
.ss-str-pink { color: #ff0090; -webkit-text-stroke: 2px #0a0a0a; }
.ss-str-info { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-str-info li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px; font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px dashed #0a0a0a;
  font-family: 'Courier New', monospace;
}
.ss-str-info b {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: 24px;
  background: #ff0090;
  color: #ffd400;
  padding: 0 6px;
  font-style: italic;
}
.ss-str-black {
  background: #0a0a0a;
  color: #f0ece4;
  padding: 48px 44px 48px 80px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  margin-left: -60px;
  z-index: 1;
}
.ss-str-tag {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #ff0090;
}
.ss-str-black p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #f0ece4;
  max-width: 360px;
  font-weight: 500;
}
.ss-str-form {
  display: flex; gap: 0;
  margin-top: auto;
  border: 2px solid #ffd400;
  background: #1a1a1a;
}
.ss-str-form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  color: #f0ece4;
  border: 0; outline: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
.ss-str-form input::placeholder { color: #6a6a6a; }
.ss-str-form button {
  padding: 0 22px;
  background: #ffd400;
  color: #0a0a0a;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-str-form button:hover { background: #ff0090; color: #ffd400; }
.ss-str-counter {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd400;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px dashed #ff0090;
  align-self: flex-start;
}
.ss-str-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .ss-str { grid-template-columns: 1fr; }
  .ss-str-yellow { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: 60px; }
  .ss-str-black { margin-left: 0; margin-top: -30px; padding-left: 44px; padding-top: 60px; }
}

<section class="ss-str" aria-label="Streetwear drop announcement">
  <div class="ss-str-yellow">
    <span class="ss-str-stamp" aria-hidden="true">DROP 047</span>
    <h2>FRIDAY<br/><span class="ss-str-pink">3PM</span></h2>
    <ul class="ss-str-info">
      <li><b>03</b> Tees</li>
      <li><b>02</b> Hoodies</li>
      <li><b>01</b> Pair of kicks</li>
    </ul>
  </div>
  <div class="ss-str-black">
    <span class="ss-str-tag">// LIMITED RUN</span>
    <p>200 pieces. Numbered. No restock. Sign up below to get the link 5 minutes early.</p>
    <form class="ss-str-form" role="search">
      <label class="ss-str-sr" for="ss-str-em">Email for early access</label>
      <input id="ss-str-em" type="email" name="email" placeholder="[email protected]" autocomplete="email" required />
      <button type="submit">GET LINK →</button>
    </form>
    <span class="ss-str-counter">⏱ 04 : 12 : 47 : 03</span>
  </div>
</section>

09 / 22

Jewelry Sign-in

Pure CSS

— Members only

Sign in to your account.

Jewelry boutique sign-in — champagne cream + obsidian black + rose gold. Brand on one side, sign-in form on the other. The kind of split-screen Tiffany would commission. Real <form> with proper labels and autocomplete tokens.

Try it

.ss-jew {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf6e8;
  color: #1a1612;
  border-radius: 0; overflow: hidden;
}
.ss-jew-brand {
  background:
    radial-gradient(60% 80% at 50% 30%, #1a1612 0%, #0a0806 100%);
  color: #f5e6c8;
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.ss-jew-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c0a4 0%, #b88a6a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 0 6px rgba(243,192,164,0.12);
  position: relative;
}
.ss-jew-mark::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid #1a1612;
  border-radius: 50%;
}
.ss-jew-since {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #b88a6a;
}
.ss-jew-brand h2 {
  margin: 4px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f5e6c8;
}
.ss-jew-brand h2 em {
  font-style: italic;
  color: #f3c0a4;
}
.ss-jew-brand p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #c8b896;
  max-width: 380px;
  font-style: italic;
}
.ss-jew-divider {
  display: block;
  width: 60px; height: 1px;
  background: #b88a6a;
  margin-top: 16px;
}
.ss-jew-quote {
  margin-top: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: #b88a6a;
  letter-spacing: 0.04em;
}
.ss-jew-form-wrap {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf6e8 100%);
}
.ss-jew-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  color: #b88a6a;
}
.ss-jew-form-wrap h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1.05;
  font-style: italic;
}
.ss-jew-form { display: flex; flex-direction: column; gap: 14px; max-width: 400px; }
.ss-jew-form label { display: flex; flex-direction: column; gap: 6px; }
.ss-jew-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a4a35;
}
.ss-jew-form input[type="email"],
.ss-jew-form input[type="password"] {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8b896;
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #1a1612;
  font-style: italic;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ss-jew-form input:focus { outline: 0; border-color: #b88a6a; box-shadow: 0 0 0 3px rgba(184,138,106,0.15); }
.ss-jew-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: #4a3a2a;
}
.ss-jew-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ss-jew-check input { accent-color: #b88a6a; }
.ss-jew-row a { color: #b88a6a; text-decoration: none; }
.ss-jew-row a:hover { text-decoration: underline; }
.ss-jew-cta {
  padding: 14px 22px;
  background: #1a1612;
  color: #f5e6c8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-jew-cta:hover { background: #b88a6a; color: #1a1612; }
.ss-jew-meta {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #6a4a35;
  text-align: center;
}
.ss-jew-meta a { color: #b88a6a; text-decoration: none; }
.ss-jew-meta a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .ss-jew { grid-template-columns: 1fr; }
  .ss-jew-brand { padding: 36px 28px; }
}

<section class="ss-jew" aria-label="Jewelry account sign-in">
  <aside class="ss-jew-brand">
    <span class="ss-jew-mark" aria-hidden="true"></span>
    <span class="ss-jew-since">EST. 1924</span>
    <h2><em>Maison</em><br/>Aurelia.</h2>
    <p>Welcome back. Your private viewing room and saved pieces are one sign-in away.</p>
    <span class="ss-jew-divider" aria-hidden="true"></span>
    <span class="ss-jew-quote"><em>"Adorned with intent."</em></span>
  </aside>
  <article class="ss-jew-form-wrap">
    <header>
      <span class="ss-jew-eye">— Members only</span>
      <h3>Sign in to your account.</h3>
    </header>
    <form class="ss-jew-form">
      <label>
        <span class="ss-jew-lbl">Email</span>
        <input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
      </label>
      <label>
        <span class="ss-jew-lbl">Password</span>
        <input type="password" name="password" autocomplete="current-password" placeholder="••••••••••" required />
      </label>
      <div class="ss-jew-row">
        <label class="ss-jew-check"><input type="checkbox" /> <span>Remember this device</span></label>
        <a href="#!">Forgot password</a>
      </div>
      <button type="submit" class="ss-jew-cta">Enter the salon</button>
      <p class="ss-jew-meta">Not a member? <a href="#!">Request an invitation</a></p>
    </form>
  </article>
</section>

10 / 22

Before/After Slider

Light JS

— Real client · 12 weeks

Quiet skin,
loud confidence.

Drag the slider to see the result of our 12-week ritual: gentle exfoliation, daily SPF, and the Oat Renewal serum.

Reveal

92% reduced redness
87% smoother texture
4.9★ average rating

Skincare brand before/after — clinical white + millennial pink + sage green. Drag the native <input type="range"> to wipe between two states. Pure CSS via :has() on the input value (modern browsers); falls back to a clean static split otherwise.

Try it

.ss-bef {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: #2a2a2a;
  border-radius: 0; overflow: hidden;
}
.ss-bef-stage {
  position: relative;
  background: #f7f3ee;
  overflow: hidden;
  isolation: isolate;
  --reveal: 50%;
}
.ss-bef-stage:has(#ss-bef-r) {
  --reveal: calc(var(--ss-bef-pct, 50) * 1%);
}
.ss-bef-after, .ss-bef-before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.ss-bef-after {
  background: linear-gradient(135deg, #ffe0e6 0%, #ffd0db 100%);
}
.ss-bef-before {
  background: linear-gradient(135deg, #efe2d4 0%, #d4c4ae 100%);
  clip-path: inset(0 0 0 var(--reveal));
}
.ss-bef-label {
  position: absolute; top: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3em;
  padding: 5px 12px;
  background: rgba(255,255,255,0.92);
  color: #2a2a2a;
}
.ss-bef-after .ss-bef-label { right: 18px; color: #c41560; }
.ss-bef-before .ss-bef-label { left: 18px; color: #5a3825; }
.ss-bef-face {
  width: 200px; height: 240px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}
.ss-bef-face-after {
  background: linear-gradient(180deg, #f8d4c8 0%, #e8b4a8 100%);
  box-shadow: 0 14px 40px rgba(196,21,96,0.18), inset -10px -20px 40px rgba(196,21,96,0.08);
}
.ss-bef-face-before {
  background: linear-gradient(180deg, #d8a888 0%, #c08868 100%);
  box-shadow: inset -10px -20px 40px rgba(0,0,0,0.18);
}
.ss-bef-face-before::before, .ss-bef-face-before::after {
  content: ''; position: absolute;
  background: rgba(196,90,28,0.4);
  border-radius: 50%;
}
.ss-bef-face-before::before { top: 30%; left: 25%; width: 12px; height: 12px; box-shadow: 14px 6px 0 -2px rgba(196,90,28,0.3), -8px 18px 0 -3px rgba(196,90,28,0.35), 26px 22px 0 -4px rgba(196,90,28,0.3); }
.ss-bef-face-before::after { top: 50%; right: 22%; width: 10px; height: 10px; box-shadow: -8px 6px 0 -2px rgba(196,90,28,0.3), 4px 14px 0 -3px rgba(196,90,28,0.4); }
.ss-bef-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--reveal);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 18px rgba(196,21,96,0.45);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 5;
}
.ss-bef-handle span:nth-child(1), .ss-bef-handle span:nth-child(2) {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-bef-handle span:nth-child(1) { right: 18px; }
.ss-bef-handle span:nth-child(2) { left: 18px; }
.ss-bef-handle span:nth-child(1)::before, .ss-bef-handle span:nth-child(2)::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: solid #c41560; border-width: 2px 2px 0 0;
  width: 8px; height: 8px;
}
.ss-bef-handle span:nth-child(1)::before { transform: translate(-25%, -50%) rotate(45deg); }
.ss-bef-handle span:nth-child(2)::before { transform: translate(-75%, -50%) rotate(-135deg); }
.ss-bef-content {
  padding: 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
}
.ss-bef-eye {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #2a2a2a;
}
.ss-bef-content h2 em {
  font-style: italic;
  color: #c41560;
}
.ss-bef-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5a5a5a;
  max-width: 420px;
}
.ss-bef-control {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.ss-bef-control span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-control input[type="range"] {
  width: 100%;
  accent-color: #c41560;
}
.ss-bef-stats { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; gap: 22px; font-size: 13px; flex-wrap: wrap; }
.ss-bef-stats li { display: flex; flex-direction: column; gap: 2px; }
.ss-bef-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 500;
  color: #c41560;
  font-style: italic;
}
.ss-bef-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c41560;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,21,96,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-bef-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,21,96,0.45); }
@media (max-width: 720px) {
  .ss-bef { grid-template-columns: 1fr; }
  .ss-bef-stage { min-height: 320px; }
}

<section class="ss-bef" aria-label="Before and after skincare result">
  <div class="ss-bef-stage" style="--reveal:50%;">
    <div class="ss-bef-after" aria-hidden="true">
      <span class="ss-bef-label">AFTER</span>
      <span class="ss-bef-face ss-bef-face-after"></span>
    </div>
    <div class="ss-bef-before" aria-hidden="true">
      <span class="ss-bef-label">BEFORE</span>
      <span class="ss-bef-face ss-bef-face-before"></span>
    </div>
    <span class="ss-bef-handle" aria-hidden="true">
      <span></span><span></span>
    </span>
  </div>
  <article class="ss-bef-content">
    <span class="ss-bef-eye">— Real client · 12 weeks</span>
    <h2>Quiet skin,<br/><em>loud confidence.</em></h2>
    <p>Drag the slider to see the result of our 12-week ritual: gentle exfoliation, daily SPF, and the Oat Renewal serum.</p>
    <label class="ss-bef-control">
      <span>Reveal</span>
      <input type="range" min="0" max="100" value="50" id="ss-bef-r" aria-label="Reveal amount" />
    </label>
    <ul class="ss-bef-stats">
      <li><strong>92%</strong> reduced redness</li>
      <li><strong>87%</strong> smoother texture</li>
      <li><strong>4.9★</strong> average rating</li>
    </ul>
    <button type="button" class="ss-bef-cta">Start the ritual →</button>
  </article>
</section>

/* Wire the range input to the CSS custom property so the slider drives
   the clip-path reveal. Pure CSS would be possible via :has() but value-
   reading from CSS isn't supported widely yet; this 5-line script is the
   reliable cross-browser path. */
(function () {
  var slider = document.getElementById('ss-bef-r');
  var stage  = slider && slider.closest('.ss-bef').querySelector('.ss-bef-stage');
  if (!slider || !stage) return;
  function sync() { stage.style.setProperty('--ss-bef-pct', slider.value); }
  slider.addEventListener('input', sync);
  sync();
})();

11 / 22

Two Seasons

Pure CSS

FW · Autumn

Burnt &
Bronzed.

Wool tweeds, raw selvedge denim, oxblood leather. The fall capsule, hand-finished in our atelier.

01 Camel coat
02 Rust knit
03 Olive trouser

View Winter capsule →

SS · Winter

Cold &
Quiet.

Cashmere knits, double-faced wool coats, alpine boots. The winter capsule, made for stillness.

01 Storm coat
02 Steel knit
03 Snow boot

← Back to Autumn

Two seasons of fashion — autumn (rust + ochre + olive) on one side, winter (steel + cobalt + ash) on the other. Click either label to slide the other half open. Pure CSS via radio inputs + sibling selectors; no JS.

Try it

.ss-szn {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
  transition: grid-template-columns 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-szn:has(#ss-szn-a:checked) { grid-template-columns: 65% 35%; }
.ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 35% 65%; }
.ss-szn input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-szn-fall, .ss-szn-winter {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.4s ease;
}
.ss-szn-fall {
  background:
    radial-gradient(60% 80% at 30% 30%, #d97a3c 0%, transparent 60%),
    linear-gradient(180deg, #6e3825 0%, #2a1810 100%);
  color: #f5e6c8;
}
.ss-szn-fall::before {
  content: ''; position: absolute; top: -10%; right: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(255,180,80,0.4), transparent 70%);
  filter: blur(40px);
}
.ss-szn-winter {
  background:
    radial-gradient(60% 80% at 70% 70%, #4a6a8a 0%, transparent 60%),
    linear-gradient(180deg, #1a2838 0%, #0e1620 100%);
  color: #d4dce4;
}
.ss-szn-winter::before {
  content: ''; position: absolute; bottom: -10%; left: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(180,200,240,0.3), transparent 70%);
  filter: blur(40px);
}
.ss-szn-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid currentColor;
}
.ss-szn-fall   .ss-szn-tag { color: #ffd400; }
.ss-szn-winter .ss-szn-tag { color: #8ac4ff; }
.ss-szn-fall h2, .ss-szn-winter h2 {
  margin: 6px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-szn-fall p, .ss-szn-winter p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 360px;
  opacity: 0.85;
}
.ss-szn-pieces { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; display: flex; flex-direction: column; gap: 6px; }
.ss-szn-pieces li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
}
.ss-szn-pieces b {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  font-style: normal;
}
.ss-szn-fall .ss-szn-pieces b   { color: #ffd400; }
.ss-szn-winter .ss-szn-pieces b { color: #8ac4ff; }
.ss-szn-switch {
  align-self: flex-start;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 0.16s, color 0.16s;
}
.ss-szn-fall   .ss-szn-switch:hover { background: #ffd400; color: #2a1810; border-color: #ffd400; }
.ss-szn-winter .ss-szn-switch:hover { background: #8ac4ff; color: #0e1620; border-color: #8ac4ff; }
.ss-szn:has(#ss-szn-w:checked) .ss-szn-fall   { opacity: 0.6; }
.ss-szn:has(#ss-szn-a:checked) .ss-szn-winter { opacity: 0.6; }
@media (max-width: 720px) {
  .ss-szn, .ss-szn:has(#ss-szn-a:checked), .ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ss-szn { transition: none; } }

<section class="ss-szn" aria-label="Seasonal lookbook split">
  <input id="ss-szn-a" type="radio" name="ss-szn" checked />
  <input id="ss-szn-w" type="radio" name="ss-szn" />
  <article class="ss-szn-fall">
    <span class="ss-szn-tag">FW · Autumn</span>
    <h2>Burnt &amp;<br/>Bronzed.</h2>
    <p>Wool tweeds, raw selvedge denim, oxblood leather. The fall capsule, hand-finished in our atelier.</p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Camel coat</li>
      <li><b>02</b> Rust knit</li>
      <li><b>03</b> Olive trouser</li>
    </ul>
    <label for="ss-szn-w" class="ss-szn-switch">View Winter capsule →</label>
  </article>
  <article class="ss-szn-winter">
    <span class="ss-szn-tag">SS · Winter</span>
    <h2>Cold &amp;<br/>Quiet.</h2>
    <p>Cashmere knits, double-faced wool coats, alpine boots. The winter capsule, made for stillness.</p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Storm coat</li>
      <li><b>02</b> Steel knit</li>
      <li><b>03</b> Snow boot</li>
    </ul>
    <label for="ss-szn-a" class="ss-szn-switch">← Back to Autumn</label>
  </article>
</section>

12 / 22

Music App Toggle

Pure CSS

Library

⇋ Focus

Midnight DriveAurelia · Side A
3:42
Glass HeartsAurelia · Side B
4:18
Cherry StaticVarious
2:54
Forest FloorAurelia
5:02

▸ NOW PLAYING

Midnight
Drive.

Aurelia · Side A · Track 03

1:333:42

Music app — deep purple + neon mint + black vinyl. Toggle between equal-split (album list) and focus-mode (now playing dominates). Hidden checkbox + :has(:checked) on the grid template; everything else is CSS.

Try it

.ss-mus {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0a1f;
  color: #e6e0ff;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-mus:has(input:checked) { grid-template-columns: 30% 70%; }
.ss-mus input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-mus-list {
  background: #15102a;
  padding: 30px 24px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid rgba(74,222,128,0.25);
  overflow-y: auto;
}
.ss-mus-list header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-mus-list h3 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4ade80;
}
.ss-mus-toggle {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-toggle:hover { background: rgba(74,222,128,0.24); }
.ss-mus-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-mus-list li {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-list li:hover { background: rgba(255,255,255,0.04); }
.ss-mus-list li.active { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); padding: 9px; }
.ss-mus-cover {
  width: 38px; height: 38px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ss-mus-list strong { display: block; font-size: 13.5px; font-weight: 700; color: #f0eaff; }
.ss-mus-list em { display: block; font-size: 11px; font-style: normal; color: #8a7fb0; margin-top: 2px; }
.ss-mus-time { font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-now {
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(124,58,237,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 30% 70%, rgba(74,222,128,0.18) 0%, transparent 60%),
    #0e0a1f;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}
.ss-mus-vinyl {
  position: relative;
  width: 200px; height: 200px;
  flex-shrink: 0;
}
.ss-mus-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px),
    radial-gradient(circle at 50% 50%, #ec4899 0%, #ec4899 14%, #0a0a0a 14%, #0a0a0a 100%);
  box-shadow:
    inset 0 0 0 14px #1a1a1a,
    0 14px 40px rgba(0,0,0,0.6);
  animation: ss-mus-spin 8s linear infinite;
}
.ss-mus-hole {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #0e0a1f;
  box-shadow: 0 0 0 3px #4ade80;
}
@keyframes ss-mus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-mus-disc { animation: none; } }
.ss-mus-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ss-mus-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74,222,128,0.4);
}
.ss-mus-meta h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f0eaff;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-mus-sub { margin: 0; font-size: 13px; color: #a89cc8; letter-spacing: 0.04em; }
.ss-mus-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.ss-mus-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, #ec4899 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(74,222,128,0.5);
}
.ss-mus-times { display: flex; justify-content: space-between; font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-ctrl { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.ss-mus-ctrl button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #f0eaff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.ss-mus-ctrl button:hover { background: rgba(255,255,255,0.06); border-color: #4ade80; color: #4ade80; }
.ss-mus-play {
  width: 52px !important; height: 52px !important;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
  color: #0e0a1f !important;
  border: 0 !important;
  font-size: 16px !important;
  box-shadow: 0 8px 22px rgba(74,222,128,0.45) !important;
}
.ss-mus-play:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-mus, .ss-mus:has(input:checked) { grid-template-columns: 1fr; }
  .ss-mus-now { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

<section class="ss-mus" aria-label="Music player split">
  <input id="ss-mus-t" type="checkbox" />
  <article class="ss-mus-list" aria-label="Album list">
    <header>
      <h3>Library</h3>
      <label for="ss-mus-t" class="ss-mus-toggle" aria-controls="ss-mus-now">⇋ Focus</label>
    </header>
    <ul>
      <li class="active">
        <span class="ss-mus-cover" style="background:linear-gradient(135deg,#7c3aed,#ec4899);"></span>
        <div><strong>Midnight Drive</strong><em>Aurelia · Side A</em></div>
        <span class="ss-mus-time">3:42</span>
      </li>
      <li>
        <span class="ss-mus-cover" style="background:linear-gradient(135deg,#0ea5e9,#22d3ee);"></span>
        <div><strong>Glass Hearts</strong><em>Aurelia · Side B</em></div>
        <span class="ss-mus-time">4:18</span>
      </li>
      <li>
        <span class="ss-mus-cover" style="background:linear-gradient(135deg,#f59e0b,#ef4444);"></span>
        <div><strong>Cherry Static</strong><em>Various</em></div>
        <span class="ss-mus-time">2:54</span>
      </li>
      <li>
        <span class="ss-mus-cover" style="background:linear-gradient(135deg,#10b981,#84cc16);"></span>
        <div><strong>Forest Floor</strong><em>Aurelia</em></div>
        <span class="ss-mus-time">5:02</span>
      </li>
    </ul>
  </article>
  <article class="ss-mus-now" id="ss-mus-now" aria-label="Now playing">
    <div class="ss-mus-vinyl" aria-hidden="true">
      <span class="ss-mus-disc"></span>
      <span class="ss-mus-hole"></span>
    </div>
    <div class="ss-mus-meta">
      <span class="ss-mus-eye">▸ NOW PLAYING</span>
      <h2>Midnight<br/>Drive.</h2>
      <p class="ss-mus-sub">Aurelia · Side A · Track 03</p>
      <div class="ss-mus-bar" aria-label="Track progress" role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"><span style="width:42%"></span></div>
      <div class="ss-mus-times">
        <span>1:33</span><span>3:42</span>
      </div>
      <div class="ss-mus-ctrl">
        <button type="button" aria-label="Previous">⏮</button>
        <button type="button" aria-label="Play" class="ss-mus-play">▶</button>
        <button type="button" aria-label="Next">⏭</button>
      </div>
    </div>
  </article>
</section>

13 / 22

Real-estate Compare

Pure CSS

FOR SALE · Verified

Casa Sol

Mid-century courtyard home, walking distance to the village.

Beds: 4
Baths: 3
Sq m: 240
Built: 1958

FOR SALE · New listing

Casa Verde

Modern earth-tone build with garden views and original olive trees.

Beds: 3
Baths: 2
Sq m: 185
Built: 2022

Compare two properties — terracotta + olive + warm beige. Two cards side by side, each with hero number, key stats, and price. Hover any side to scale up; the other dims subtly. CSS transform + opacity transitions.

Try it

.ss-est {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  gap: 0;
  background: #efe7d4;
  border-radius: 0; overflow: hidden;
}
.ss-est-card {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform 0.32s ease, opacity 0.32s ease;
  isolation: isolate;
}
.ss-est-warm { background: linear-gradient(180deg, #d97a3c 0%, #b85a2c 100%); color: #fff8e8; border-right: 1px solid rgba(0,0,0,0.18); }
.ss-est-cool { background: linear-gradient(180deg, #6e7a3c 0%, #4a5a25 100%); color: #f4ecd0; }
.ss-est:has(.ss-est-warm:hover) .ss-est-cool,
.ss-est:has(.ss-est-cool:hover) .ss-est-warm { opacity: 0.6; }
.ss-est-card:hover { transform: scale(1.02); z-index: 2; }
.ss-est-tag {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,0,0,0.18);
}
.ss-est-card h3 {
  margin: 6px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-est-card header p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 280px;
}
.ss-est-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.ss-est-house {
  position: absolute; bottom: 12%; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 50%;
  background: linear-gradient(180deg, #f5e6c8 0%, #d4c598 100%);
  border-bottom: 4px solid rgba(0,0,0,0.3);
}
.ss-est-house::before {
  content: ''; position: absolute; left: -8%; right: -8%; top: -22%;
  height: 28%;
  background: #6e1f1c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ss-est-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 18%; height: 50%;
  background: #2a1810;
}
.ss-est-house-2 {
  background: linear-gradient(180deg, #d8d0b8 0%, #a8a088 100%);
}
.ss-est-house-2::before {
  background: #2a3325;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  height: 14%;
  top: -14%;
}
.ss-est-tree, .ss-est-tree2 {
  position: absolute; bottom: 12%;
  width: 40px; height: 60px;
  background: radial-gradient(circle at 50% 30%, #4a6a25 0%, #2a3a18 100%);
  border-radius: 50%;
}
.ss-est-tree { left: 8%; }
.ss-est-tree2 { right: 8%; bottom: 14%; width: 50px; height: 50px; }
.ss-est-stats {
  margin: 0; padding: 14px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ss-est-stats dt {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.6;
}
.ss-est-stats dd {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
}
.ss-est-card footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.ss-est-card footer strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.01em;
}
.ss-est-card footer button {
  padding: 11px 18px;
  background: rgba(0,0,0,0.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-est-card footer button:hover { background: rgba(0,0,0,0.45); }
@media (max-width: 720px) {
  .ss-est { grid-template-columns: 1fr; }
  .ss-est-warm { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.18); }
  .ss-est-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-est-card { transition: none; }
}

<section class="ss-est" aria-label="Property comparison">
  <article class="ss-est-card ss-est-warm">
    <header>
      <span class="ss-est-tag">FOR SALE · Verified</span>
      <h3>Casa Sol</h3>
      <p>Mid-century courtyard home, walking distance to the village.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt><dd>4</dd>
      <dt>Baths</dt><dd>3</dd>
      <dt>Sq m</dt><dd>240</dd>
      <dt>Built</dt><dd>1958</dd>
    </dl>
    <footer>
      <strong>€840,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
  <article class="ss-est-card ss-est-cool">
    <header>
      <span class="ss-est-tag">FOR SALE · New listing</span>
      <h3>Casa Verde</h3>
      <p>Modern earth-tone build with garden views and original olive trees.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house ss-est-house-2"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt><dd>3</dd>
      <dt>Baths</dt><dd>2</dd>
      <dt>Sq m</dt><dd>185</dd>
      <dt>Built</dt><dd>2022</dd>
    </dl>
    <footer>
      <strong>€720,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
</section>

14 / 22

Detective Novel

Pure CSS

A NEW DETECTIVE NOVEL

The
Last
Train.

by Iris Hawthorne

PAGE I · CHAPTER ONE

"It rained the night Dr. Morrow disappeared, and the only witness was a stationmaster who hadn't slept in three days."

A woman searches for her vanished mentor through the rain-soaked streets of a coastal town that doesn't want her there.

★★★★★ The Times
★★★★★ Le Monde
★★★★☆ Hawthorne Review

Detective novel cover — burnt orange + ink black + parchment cream. A diagonal mask wipes between the cover image and a synopsis on hover. Mystery noir aesthetic with serif type, thin gold rules, and a deliberately distressed paper texture.

Try it

.ss-det {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f0e6d0;
  color: #1a0e08;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a0e08;
}
.ss-det-cover {
  position: relative;
  background:
    radial-gradient(80% 80% at 50% 30%, #c45a1c 0%, #6e1f0c 60%, #1a0a06 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid #1a0e08;
}
.ss-det-image { position: absolute; inset: 0; pointer-events: none; }
.ss-det-silhouette {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 240px;
  background:
    radial-gradient(ellipse at 50% 14%, #1a0a06 0%, #1a0a06 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a0a06 8%, #1a0a06 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-det-light {
  position: absolute; top: 0; right: 12%;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.32), transparent 70%);
  filter: blur(8px);
}
.ss-det-rain {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(78deg, transparent 0 22px, rgba(255,255,255,0.12) 22px 23px);
  animation: ss-det-rain 0.6s linear infinite;
}
@keyframes ss-det-rain {
  from { background-position: 0 0; }
  to   { background-position: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .ss-det-rain { animation: none; } }
.ss-det-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.ss-det-genre {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.32em;
  color: #f5d68a;
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid #f5d68a;
  background: rgba(0,0,0,0.4);
}
.ss-det-cover h2 {
  margin: auto 0;
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 500;
  line-height: 0.86;
  color: #f0e6d0;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.ss-det-cover h2 em {
  font-style: italic;
  color: #f5d68a;
  font-family: 'Cormorant Garamond', serif;
  display: inline-block;
}
.ss-det-author {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
  color: #f0e6d0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-top: auto;
}
.ss-det-blurb {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.04) 32px 33px),
    #f0e6d0;
}
.ss-det-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e1f0c;
}
.ss-det-quote {
  margin: 6px 0 0;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.4;
  color: #1a0e08;
  font-style: italic;
  border-left: 3px solid #c45a1c;
  padding-left: 16px;
}
.ss-det-body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a3825;
  max-width: 440px;
}
.ss-det-list { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1.5px solid #c45a1c; border-bottom: 1.5px solid #c45a1c; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #1a0e08; font-family: 'Inter', sans-serif; }
.ss-det-list li { display: flex; align-items: baseline; justify-content: space-between; }
.ss-det-list em { font-style: italic; color: #6e1f0c; font-family: 'Cormorant Garamond', serif; font-size: 16px; }
.ss-det-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #1a0e08;
  color: #f5d68a;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-det-cta:hover { background: #6e1f0c; }
@media (max-width: 720px) {
  .ss-det { grid-template-columns: 1fr; }
  .ss-det-cover { border-right: 0; border-bottom: 1px solid #1a0e08; min-height: 360px; }
}

<section class="ss-det" aria-label="Detective novel feature">
  <article class="ss-det-cover">
    <div class="ss-det-image" aria-hidden="true">
      <span class="ss-det-silhouette"></span>
      <span class="ss-det-light"></span>
      <span class="ss-det-rain"></span>
    </div>
    <div class="ss-det-overlay">
      <span class="ss-det-genre">A NEW DETECTIVE NOVEL</span>
      <h2>The<br/><em>Last</em><br/>Train.</h2>
      <span class="ss-det-author">by Iris Hawthorne</span>
    </div>
  </article>
  <article class="ss-det-blurb">
    <span class="ss-det-folio">PAGE I · CHAPTER ONE</span>
    <p class="ss-det-quote">"It rained the night Dr. Morrow disappeared, and the only witness was a stationmaster who hadn't slept in three days."</p>
    <p class="ss-det-body">A woman searches for her vanished mentor through the rain-soaked streets of a coastal town that doesn't want her there.</p>
    <ul class="ss-det-list">
      <li>★★★★★ <em>The Times</em></li>
      <li>★★★★★ <em>Le Monde</em></li>
      <li>★★★★☆ <em>Hawthorne Review</em></li>
    </ul>
    <button type="button" class="ss-det-cta">Read first chapter →</button>
  </article>
</section>

15 / 22

Mediterranean Travel

Pure CSS

Greece · Cyclades

Folegandros
in May.

Five days. One villa. Local meals at the kafenio. White-washed walls and a sea you'll never quite forget. Limited to 8 guests per departure.

Departure: 14 — 19 May
Group size: 8 guests
Includes: Villa, breakfasts, ferry
From: €2,400 / guest

Travel agency hero — Mediterranean blue + ochre + white limewash. Parallax-feel split with layered cliff/sea/sun shapes on one side and a destination card on the other. Pure CSS animations drift the sun and sea slowly.

Try it

.ss-trv {
  display: grid; grid-template-columns: 55% 45%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f4ede0;
  color: #1a3a4a;
  border-radius: 0; overflow: hidden;
}
.ss-trv-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ss-trv-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #c4e4f0 0%, #a4d4e8 50%, #5a8fa8 100%);
}
.ss-trv-sun {
  position: absolute; top: 18%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d8 0%, #ffd479 50%, #f5a623 100%);
  box-shadow: 0 0 80px rgba(255,212,121,0.6);
  animation: ss-trv-sun 22s ease-in-out infinite alternate;
}
@keyframes ss-trv-sun {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.ss-trv-sea {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  height: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,0.18) 4px 5px),
    linear-gradient(180deg, #2c8cc4 0%, #1a5a8c 100%);
  border-top-left-radius: 50% 22%;
  border-top-right-radius: 50% 22%;
  animation: ss-trv-sea 18s ease-in-out infinite alternate;
}
@keyframes ss-trv-sea {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trv-sun, .ss-trv-sea { animation: none; }
}
.ss-trv-cliff {
  position: absolute; left: 0; right: 0; bottom: 38%;
  height: 28%;
  background: linear-gradient(180deg, #f0e0c8 0%, #c8a878 100%);
  clip-path: polygon(0 60%, 28% 28%, 50% 50%, 78% 22%, 100% 50%, 100% 100%, 0 100%);
}
.ss-trv-house {
  position: absolute; bottom: 50%;
  width: 50px; height: 60px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.ss-trv-house::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -10px;
  height: 14px;
  background: #2c8cc4;
  border-radius: 50% 50% 0 0;
}
.ss-trv-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 30%; height: 50%;
  background: #2c8cc4;
}
.ss-trv-house    { left: 38%; }
.ss-trv-house-2  { left: 56%; bottom: 56%; width: 38px; height: 48px; }
.ss-trv-card {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 100% 100%, rgba(245,166,35,0.1) 0%, transparent 70%),
    #fdf8eb;
  border-left: 1px solid rgba(0,0,0,0.06);
}
.ss-trv-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-trv-card h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.96;
  color: #1a3a4a;
  letter-spacing: -0.02em;
}
.ss-trv-card h2 em {
  font-style: italic;
  color: #2c8cc4;
}
.ss-trv-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a6a;
  max-width: 380px;
}
.ss-trv-info { margin: 0; padding: 16px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; }
.ss-trv-info dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-trv-info dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: #1a3a4a;
}
.ss-trv-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #2c8cc4;
  color: #fff;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,196,0.35);
  transition: background 0.16s;
}
.ss-trv-cta:hover { background: #1a5a8c; }
@media (max-width: 720px) {
  .ss-trv { grid-template-columns: 1fr; }
  .ss-trv-scene { min-height: 280px; }
}

<section class="ss-trv" aria-label="Mediterranean travel destination">
  <aside class="ss-trv-scene" aria-hidden="true">
    <span class="ss-trv-sky"></span>
    <span class="ss-trv-sun"></span>
    <span class="ss-trv-sea"></span>
    <span class="ss-trv-cliff"></span>
    <span class="ss-trv-house"></span>
    <span class="ss-trv-house ss-trv-house-2"></span>
  </aside>
  <article class="ss-trv-card">
    <span class="ss-trv-tag">Greece · Cyclades</span>
    <h2>Folegandros<br/><em>in May.</em></h2>
    <p>Five days. One villa. Local meals at the kafenio. White-washed walls and a sea you'll never quite forget. Limited to 8 guests per departure.</p>
    <dl class="ss-trv-info">
      <dt>Departure</dt><dd>14 — 19 May</dd>
      <dt>Group size</dt><dd>8 guests</dd>
      <dt>Includes</dt><dd>Villa, breakfasts, ferry</dd>
      <dt>From</dt><dd>€2,400 / guest</dd>
    </dl>
    <button type="button" class="ss-trv-cta">Reserve a spot</button>
  </article>
</section>

16 / 22

Glitch Arcade

Pure CSS

// LOAD >>

GHOST
PROTOCOL

Free-to-play. Pay-to-survive.

SYSTEM_INTEGRITY

73%

01RAVEN_Z9128
02v0id_X8044
03YOU7621
04n3on_Q6890

⚠ HIGH RISK SECTOR

Cyber-arcade split — deep purple base with neon-green and magenta. Continuous glitch overlay shifts the colored layers in/out across the seam. Different from Tokyo Neon (sidebars): this is dystopian-arcade not tokyo-pop, dark green vs hot magenta.

Try it

.ss-cyb {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Courier New', 'Helvetica Neue', sans-serif;
  background: #0a0014;
  color: #e8e0ff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-cyb::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}
.ss-cyb-left, .ss-cyb-right {
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  isolation: isolate;
}
.ss-cyb-left {
  background:
    radial-gradient(70% 80% at 30% 30%, rgba(0,255,140,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a0040 0%, #0a0014 100%);
  border-right: 2px solid #00ff8c;
  box-shadow: 12px 0 30px rgba(0,255,140,0.15);
}
.ss-cyb-right {
  background:
    radial-gradient(70% 80% at 70% 70%, rgba(255,0,170,0.18) 0%, transparent 60%),
    linear-gradient(200deg, #2a0044 0%, #0a0014 100%);
}
.ss-cyb-glitch {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,255,140,0.06) 8px 9px);
  animation: ss-cyb-jitter 2.4s steps(8) infinite;
  z-index: -1;
}
.ss-cyb-glitch-r {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,0,170,0.07) 8px 9px);
  animation-duration: 1.8s;
  animation-direction: reverse;
}
@keyframes ss-cyb-jitter {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) { .ss-cyb-glitch { animation: none; } }
.ss-cyb-coin {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: #00ff8c;
  text-shadow: 0 0 12px rgba(0,255,140,0.6);
}
.ss-cyb-left h2 {
  margin: 4px 0 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
  font-style: italic;
  position: relative;
  text-shadow:
    -2px 0 0 #00ff8c,
    2px 0 0 #ff00aa,
    0 0 30px rgba(255,255,255,0.3);
}
.ss-cyb-left p {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff00aa;
  text-transform: uppercase;
}
.ss-cyb-meter {
  margin-top: auto;
  padding: 14px;
  background: rgba(0,255,140,0.06);
  border: 1px solid rgba(0,255,140,0.4);
  display: flex; flex-direction: column; gap: 6px;
}
.ss-cyb-meter span {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #00ff8c;
}
.ss-cyb-bar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,255,140,0.3);
}
.ss-cyb-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #00ff8c 0%, #ff00aa 100%);
  box-shadow: 0 0 12px #00ff8c;
}
.ss-cyb-meter em {
  align-self: flex-end;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 22px; font-weight: 900;
  font-style: italic;
  color: #00ff8c;
  text-shadow: 0 0 10px rgba(0,255,140,0.6);
}
.ss-cyb-leader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-cyb-leader li {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid rgba(255,0,170,0.2);
  background: rgba(0,0,0,0.3);
}
.ss-cyb-leader li.me { background: rgba(255,0,170,0.16); border-color: #ff00aa; box-shadow: 0 0 12px rgba(255,0,170,0.3); }
.ss-cyb-leader li span { font-size: 11px; font-weight: 800; color: #ff00aa; letter-spacing: 0.16em; }
.ss-cyb-leader li strong { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.08em; }
.ss-cyb-leader li b { font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 800; color: #00ff8c; text-shadow: 0 0 8px rgba(0,255,140,0.5); }
.ss-cyb-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff00aa;
  color: #0a0014;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,0,170,0.5);
  transition: background 0.14s, transform 0.12s;
  font-style: italic;
}
.ss-cyb-cta:hover { background: #00ff8c; box-shadow: 0 0 24px rgba(0,255,140,0.5); }
.ss-cyb-cta:active { transform: scale(0.97); }
.ss-cyb-warn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  color: #ffd400;
  background: rgba(255,212,0,0.1);
  border: 1px dashed #ffd400;
  margin-top: auto;
}
@media (max-width: 720px) {
  .ss-cyb { grid-template-columns: 1fr; }
  .ss-cyb-left { border-right: 0; border-bottom: 2px solid #00ff8c; box-shadow: 0 12px 30px rgba(0,255,140,0.15); }
}

<section class="ss-cyb" aria-label="Cyberpunk arcade split">
  <article class="ss-cyb-left">
    <span class="ss-cyb-glitch ss-cyb-glitch-l" aria-hidden="true"></span>
    <header>
      <span class="ss-cyb-coin">// LOAD &gt;&gt;</span>
      <h2 data-text="GHOST PROTOCOL">GHOST<br/>PROTOCOL</h2>
    </header>
    <p>Free-to-play. Pay-to-survive.</p>
    <div class="ss-cyb-meter">
      <span>SYSTEM_INTEGRITY</span>
      <div class="ss-cyb-bar"><span class="ss-cyb-fill" style="width:73%"></span></div>
      <em>73%</em>
    </div>
  </article>
  <article class="ss-cyb-right">
    <span class="ss-cyb-glitch ss-cyb-glitch-r" aria-hidden="true"></span>
    <ul class="ss-cyb-leader">
      <li><span>01</span><strong>RAVEN_Z</strong><b>9128</b></li>
      <li><span>02</span><strong>v0id_X</strong><b>8044</b></li>
      <li class="me"><span>03</span><strong>YOU</strong><b>7621</b></li>
      <li><span>04</span><strong>n3on_Q</strong><b>6890</b></li>
    </ul>
    <button type="button" class="ss-cyb-cta">/ ENTER /</button>
    <span class="ss-cyb-warn">⚠ HIGH RISK SECTOR</span>
  </article>
</section>

17 / 22

Coffee Origin Story

Pure CSS

— Five steps to your cup

Hand-picked at sunrise

Only the cherries that turn deep red on the tree. Picked between 5am and 9am, before the heat sets in.
Washed & sun-dried

72 hours on raised beds. Daily turning by the same family of farmers since 1962.
Shipped in jute

Single-origin lots, no blending. From Pereira to our roastery in 18 days.
Slow-roasted weekly

Light medium, 14 minutes. We rest the beans 48 hours before grinding.
In your cup, today

Bright, clean, with notes of brown sugar and ripe peach.

Coffee origin story — kraft brown + cream + gold leaf. Two-column editorial: hero image map on the left, a numbered story of the bean's journey on the right. Real <ol> with custom counter styling.

Try it

.ss-cof {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecdc;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-cof-map {
  background: linear-gradient(180deg, #6e3818 0%, #3a1808 100%);
  color: #f5ecdc;
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  border-right: 1px solid #2a1810;
}
.ss-cof-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #d4af37;
}
.ss-cof-map h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f5ecdc;
  letter-spacing: -0.02em;
}
.ss-cof-map h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-cof-map-svg {
  position: relative;
  flex: 1;
  min-height: 200px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(245,236,220,0.08) 0%, transparent 70%);
  border: 1px dashed rgba(212,175,55,0.4);
  margin-top: 12px;
}
.ss-cof-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.25), 0 0 18px rgba(212,175,55,0.4);
}
.ss-cof-pin    { top: 22%; left: 32%; }
.ss-cof-pin-2  { top: 52%; left: 58%; width: 10px; height: 10px; }
.ss-cof-pin-3  { top: 78%; left: 24%; width: 12px; height: 12px; }
.ss-cof-route {
  position: absolute; top: 22%; left: 32%;
  width: 140px; height: 60%;
  border: 1.5px dashed #d4af37;
  border-color: transparent #d4af37 #d4af37 transparent;
  border-radius: 0 50% 50% 0 / 0 28% 28% 0;
  pointer-events: none;
}
.ss-cof-meta { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid rgba(212,175,55,0.3); display: flex; flex-direction: column; gap: 8px; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: #f5ecdc; }
.ss-cof-meta strong {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  font-style: normal;
  color: #d4af37;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.ss-cof-story {
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.03) 32px 33px),
    #faf3e2;
  overflow-y: auto;
}
.ss-cof-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e3818;
  text-transform: uppercase;
}
.ss-cof-story ol { list-style: none; counter-reset: cof; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ss-cof-story li {
  counter-increment: cof;
  padding-left: 60px;
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px dotted #c8b896;
}
.ss-cof-story li:last-child { border-bottom: 0; }
.ss-cof-story li::before {
  content: counter(cof, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 500;
  font-style: italic;
  color: #d4af37;
  line-height: 1;
}
.ss-cof-story h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
  letter-spacing: -0.01em;
}
.ss-cof-story p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a3825;
}
@media (max-width: 720px) {
  .ss-cof { grid-template-columns: 1fr; }
  .ss-cof-map { border-right: 0; border-bottom: 1px solid #2a1810; }
}

<section class="ss-cof" aria-label="Coffee origin story">
  <aside class="ss-cof-map">
    <span class="ss-cof-eye">ORIGIN · COLOMBIA</span>
    <h2>From bean<br/>to <em>brew.</em></h2>
    <div class="ss-cof-map-svg" aria-hidden="true">
      <span class="ss-cof-pin"></span>
      <span class="ss-cof-pin ss-cof-pin-2"></span>
      <span class="ss-cof-pin ss-cof-pin-3"></span>
      <span class="ss-cof-route"></span>
    </div>
    <ul class="ss-cof-meta">
      <li><strong>1,840m</strong> Altitude</li>
      <li><strong>Q-cup 88+</strong> Score</li>
      <li><strong>Caturra</strong> Varietal</li>
    </ul>
  </aside>
  <article class="ss-cof-story">
    <span class="ss-cof-folio">— Five steps to your cup</span>
    <ol>
      <li>
        <h3>Hand-picked at sunrise</h3>
        <p>Only the cherries that turn deep red on the tree. Picked between 5am and 9am, before the heat sets in.</p>
      </li>
      <li>
        <h3>Washed &amp; sun-dried</h3>
        <p>72 hours on raised beds. Daily turning by the same family of farmers since 1962.</p>
      </li>
      <li>
        <h3>Shipped in jute</h3>
        <p>Single-origin lots, no blending. From Pereira to our roastery in 18 days.</p>
      </li>
      <li>
        <h3>Slow-roasted weekly</h3>
        <p>Light medium, 14 minutes. We rest the beans 48 hours before grinding.</p>
      </li>
      <li>
        <h3>In your cup, today</h3>
        <p>Bright, clean, with notes of brown sugar and ripe peach.</p>
      </li>
    </ol>
  </article>
</section>

18 / 22

Quad Photo Split

Pure CSS

Field Notes

Coastal Oregon, autumn 2025

Clay Walls

Marrakech rooftops at noon

Yellow Hour

Tuscan vineyards in late September

Bone & Stone

Atacama mineral landscapes

Photography portfolio quad split — charcoal frame with four photo accents (sage / clay / mustard / bone). Hover any tile to expand it; the others contract. CSS grid with :has() on the wrapper to drive the proportions.

Try it

.ss-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #1a1a1a;
  gap: 2px;
  border-radius: 0; overflow: hidden;
  border: 2px solid #1a1a1a;
}
.ss-quad-tile {
  position: relative;
  background: var(--bg);
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  isolation: isolate;
  overflow: hidden;
}
.ss-quad-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: -1;
}
.ss-quad-tile:hover, .ss-quad-tile:focus-visible {
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  outline: none;
}
.ss-quad:has(.ss-quad-tile:hover) .ss-quad-tile:not(:hover),
.ss-quad:has(.ss-quad-tile:focus-visible) .ss-quad-tile:not(:focus-visible) {
  filter: grayscale(0.7) brightness(0.7);
}
.ss-quad-num {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.6);
}
.ss-quad-tile h3 {
  margin: auto 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-quad-tile p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .ss-quad { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-quad-tile { transition: none; }
}

<section class="ss-quad" aria-label="Photography portfolio quad">
  <article class="ss-quad-tile" tabindex="0" data-tile="1" style="--bg:linear-gradient(135deg,#7a8a6a 0%,#4a5a3a 100%);">
    <span class="ss-quad-num">01</span>
    <h3>Field Notes</h3>
    <p>Coastal Oregon, autumn 2025</p>
  </article>
  <article class="ss-quad-tile" tabindex="0" data-tile="2" style="--bg:linear-gradient(135deg,#c45a3c 0%,#8a3818 100%);">
    <span class="ss-quad-num">02</span>
    <h3>Clay Walls</h3>
    <p>Marrakech rooftops at noon</p>
  </article>
  <article class="ss-quad-tile" tabindex="0" data-tile="3" style="--bg:linear-gradient(135deg,#e8b04a 0%,#b8842a 100%);">
    <span class="ss-quad-num">03</span>
    <h3>Yellow Hour</h3>
    <p>Tuscan vineyards in late September</p>
  </article>
  <article class="ss-quad-tile" tabindex="0" data-tile="4" style="--bg:linear-gradient(135deg,#e0d4c0 0%,#a89880 100%);">
    <span class="ss-quad-num">04</span>
    <h3>Bone &amp; Stone</h3>
    <p>Atacama mineral landscapes</p>
  </article>
</section>

19 / 22

Recipe Reveal

Pure CSS

— Sunday Lunch · Serves 4

Slow-roasted
tomato orzo.

One pan, four ingredients, ninety minutes. The kind of recipe that smells like home.

1h 30mTotal time EasySkill 4 servingsYield

Recipe book — terracotta + sage + butter yellow. Two halves: a recipe header on top, ingredients/method below. On smaller viewports the layout stacks; the right half "reveals" the method. Real <ul> + <ol> for ingredients and steps.

Try it

.ss-rec {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fff8e8;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a1810;
}
.ss-rec-hero {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 30% 30%, #ffe2c8 0%, transparent 60%),
    #fff1d4;
  border-right: 1px dashed #c45a3c;
  position: relative;
}
.ss-rec-hero::before {
  content: '';
  position: absolute; top: 24px; right: 24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffaa44 0%, #c45a3c 70%, #8a3818 100%);
  box-shadow: 0 6px 18px rgba(196,90,60,0.4);
}
.ss-rec-cat {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-rec-hero h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a1810;
  letter-spacing: -0.02em;
}
.ss-rec-hero h2 em {
  font-style: italic;
  color: #c45a3c;
}
.ss-rec-hero p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5a4a35;
  max-width: 380px;
}
.ss-rec-pill { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878; flex-wrap: wrap; }
.ss-rec-pill span { display: flex; flex-direction: column; }
.ss-rec-pill b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-pill em {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-style: normal;
  color: #6a8a5a;
}
.ss-rec-cta {
  align-self: flex-start;
  padding: 13px 22px;
  background: #6a8a5a;
  color: #fff8e8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-rec-cta:hover { background: #4a6a3a; }
.ss-rec-method {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(196,90,60,0.04) 30px 31px),
    #fff8e8;
  overflow-y: auto;
}
.ss-rec-method h3 {
  margin: 0 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #c45a3c;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px dashed #c8a878;
}
.ss-rec-ing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; }
.ss-rec-ing li {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-ing b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #6a8a5a;
  letter-spacing: 0.04em;
  align-self: center;
}
.ss-rec-steps ol { list-style: none; counter-reset: rec; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-rec-steps li {
  counter-increment: rec;
  padding-left: 38px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a3825;
}
.ss-rec-steps li::before {
  content: counter(rec);
  position: absolute; left: 0; top: -2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #c45a3c;
  width: 28px; text-align: center;
  border-bottom: 1px solid #c45a3c;
}
@media (max-width: 720px) {
  .ss-rec { grid-template-columns: 1fr; }
  .ss-rec-hero { border-right: 0; border-bottom: 1px dashed #c45a3c; }
}

<section class="ss-rec" aria-label="Recipe split">
  <article class="ss-rec-hero">
    <span class="ss-rec-cat">— Sunday Lunch · Serves 4</span>
    <h2>Slow-roasted<br/><em>tomato</em> orzo.</h2>
    <p>One pan, four ingredients, ninety minutes. The kind of recipe that smells like home.</p>
    <div class="ss-rec-pill">
      <span><b>1h 30m</b><em>Total time</em></span>
      <span><b>Easy</b><em>Skill</em></span>
      <span><b>4 servings</b><em>Yield</em></span>
    </div>
    <button type="button" class="ss-rec-cta">Add to my book</button>
  </article>
  <aside class="ss-rec-method">
    <section class="ss-rec-ing">
      <h3>Ingredients</h3>
      <ul>
        <li><b>500g</b> Cherry tomatoes, on the vine</li>
        <li><b>250g</b> Orzo</li>
        <li><b>2 tbsp</b> Olive oil, plus more to finish</li>
        <li><b>1 tsp</b> Sea salt</li>
        <li><b>4</b> Garlic cloves, smashed</li>
      </ul>
    </section>
    <section class="ss-rec-steps">
      <h3>Method</h3>
      <ol>
        <li>Heat oven to 200°C. Spread tomatoes in a baking dish.</li>
        <li>Add olive oil, salt, garlic. Roast 60 minutes until burst.</li>
        <li>Cook orzo in salted water 8 min. Drain.</li>
        <li>Toss orzo through tomatoes. Finish with olive oil and basil.</li>
      </ol>
    </section>
  </aside>
</section>

20 / 22

Pet Adoption Z

Pure CSS

FRIDAY ADOPTIONS

A good home
is one nap
away.

22 cats and 14 dogs are waiting at Bramble Lane this weekend. Walk-ins welcome, no appointment needed.

How it works

Visit our shelter Sat / Sun, 10am — 4pm
Spend an hour with a friend
Take them home the same day

Pet adoption — grass green + sky blue + sun yellow. Z-pattern: image left → text right → image right → text left, but expressed as a 2×2 grid that creates an interlocking flow. Friendly, optimistic, full of CSS-painted dog and cat illustrations.

Try it

.ss-pet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fef7d4;
  border-radius: 0; overflow: hidden;
  gap: 0;
}
.ss-pet-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-pet-cat {
  background:
    radial-gradient(80% 80% at 30% 70%, #94c4ec 0%, #2a8cc4 100%);
}
.ss-pet-dog {
  background:
    radial-gradient(80% 80% at 70% 30%, #84d488 0%, #2c8c34 100%);
}
.ss-pet-creature {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.ss-pet-cat .ss-pet-creature::before, .ss-pet-cat .ss-pet-creature::after {
  content: ''; position: absolute; top: -22px; width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 36px solid #fff;
}
.ss-pet-cat .ss-pet-creature::before { left: 4px; transform: rotate(-12deg); }
.ss-pet-cat .ss-pet-creature::after  { right: 4px; transform: rotate(12deg); }
.ss-pet-dog .ss-pet-creature {
  background: linear-gradient(180deg, #d4a878 0%, #a87838 100%);
}
.ss-pet-dog .ss-pet-creature::before, .ss-pet-dog .ss-pet-creature::after {
  content: ''; position: absolute; top: 22px;
  width: 38px; height: 56px;
  background: linear-gradient(180deg, #b8884c 0%, #6e4818 100%);
  border-radius: 50%;
}
.ss-pet-dog .ss-pet-creature::before { left: -22px; transform: rotate(-22deg); }
.ss-pet-dog .ss-pet-creature::after  { right: -22px; transform: rotate(22deg); }
.ss-pet-eye, .ss-pet-eye2 {
  position: absolute; top: 36%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2a2a2a;
}
.ss-pet-eye  { left: 28%; }
.ss-pet-eye2 { right: 28%; }
.ss-pet-nose {
  position: absolute; top: 52%; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 12px;
  border-radius: 50%;
  background: #c45a3c;
}
.ss-pet-cat .ss-pet-nose { background: #ec5a82; width: 12px; height: 8px; }
.ss-pet-tongue {
  position: absolute; top: 64%; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 14px;
  border-radius: 0 0 12px 12px;
  background: #ec5a82;
}
.ss-pet-tag {
  position: absolute; bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  padding: 5px 11px;
  background: #fff;
  color: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-pet-text {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 16px;
  background: #fef7d4;
  position: relative;
}
.ss-pet-text-2 { background: #fff8e8; }
.ss-pet-eye-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a3c;
  align-self: flex-start;
}
.ss-pet-text h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-pet-text h2 em {
  font-style: italic;
  color: #2c8c34;
}
.ss-pet-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4030;
  max-width: 360px;
}
.ss-pet-text h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a3325;
  letter-spacing: -0.01em;
}
.ss-pet-text ol { list-style: none; counter-reset: pet; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-pet-text li {
  counter-increment: pet;
  padding-left: 36px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4030;
}
.ss-pet-text li::before {
  content: counter(pet);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #ffe89a;
  color: #c45a3c;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #c45a3c;
}
.ss-pet-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 22px;
  background: #2c8c34;
  color: #fef7d4;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,52,0.35);
  transition: transform 0.12s, background 0.16s;
}
.ss-pet-cta:hover { background: #1a6a22; transform: translateY(-1px); }
@media (max-width: 720px) {
  .ss-pet { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .ss-pet-img { min-height: 240px; }
}

<section class="ss-pet" aria-label="Pet adoption page">
  <article class="ss-pet-img ss-pet-cat" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
    </span>
    <span class="ss-pet-tag">MEET LUNA · 2 yrs</span>
  </article>
  <article class="ss-pet-text">
    <span class="ss-pet-eye-tag">FRIDAY ADOPTIONS</span>
    <h2>A good home<br/>is one <em>nap</em><br/>away.</h2>
    <p>22 cats and 14 dogs are waiting at Bramble Lane this weekend. Walk-ins welcome, no appointment needed.</p>
  </article>
  <article class="ss-pet-text ss-pet-text-2">
    <h3>How it works</h3>
    <ol>
      <li>Visit our shelter Sat / Sun, 10am — 4pm</li>
      <li>Spend an hour with a friend</li>
      <li>Take them home the same day</li>
    </ol>
    <button type="button" class="ss-pet-cta">Plan your visit →</button>
  </article>
  <article class="ss-pet-img ss-pet-dog" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
      <span class="ss-pet-tongue"></span>
    </span>
    <span class="ss-pet-tag">MEET KOJI · 3 yrs</span>
  </article>
</section>

21 / 22

Magazine Crossover

Pure CSS

Photo · Iris Hawthorne for The Quarterly

SECTION 04 / ESSAY

The quiet art of
doing one thing
at a time.

By Iris Hawthorne · Spring 2026

After a decade of optimizing every minute, the loneliest realization wasn't that I had no time. It was that I'd forgotten how to spend it. Three years ago I made a small commitment, and it changed everything I thought I knew about productivity.

"The thing about doing one thing at a time is that the thing finally gets your attention."

What I learned was simpler than I expected — and harder to keep.

12 min read
2,840 words
Apr 14 issue

Editorial magazine spread — newspaper black on cream with a single spot color (cobalt blue). Oversized italic headline crosses the seam between two halves; pull-quote on the right intrudes into the left photo zone. The kind of layout you see on a New York Times Magazine longread.

Try it

.ss-mag {
  display: grid; grid-template-columns: 42% 58%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.ss-mag-photo {
  position: relative;
  background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid #1a1a1a;
}
.ss-mag-image {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-mag-figure {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80%;
  background:
    radial-gradient(ellipse at 50% 12%, #c8a878 0%, #c8a878 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a3658 8%, #1a3658 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-mag-light {
  position: absolute; top: -10%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.35), transparent 70%);
  filter: blur(8px);
}
.ss-mag-caption {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px; font-style: italic;
  color: #c8a878;
}
.ss-mag-text {
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(0,0,0,0.018) 32px 33px),
    #f9f3e6;
  position: relative;
}
.ss-mag-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #1a3658;
}
.ss-mag-head {
  margin: 4px 0 0;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.ss-mag-head em {
  font-style: italic;
  color: #1a3658;
}
.ss-mag-byline {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4a4a4a;
}
.ss-mag-byline b { color: #1a3658; font-weight: 700; }
.ss-mag-lede {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.55;
  color: #1a1a1a;
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid #c8a878;
}
.ss-mag-drop {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 500;
  font-style: italic;
  line-height: 0.85;
  float: left;
  padding: 4px 8px 0 0;
  color: #1a3658;
}
.ss-mag-pull {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: #1a3658;
  font-style: italic;
  border-left: 4px solid #1a3658;
  padding: 0 0 0 18px;
  font-weight: 500;
}
.ss-mag-out {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
}
.ss-mag-meta {
  list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878;
  display: flex; gap: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a4a4a;
}
.ss-mag-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  margin-right: 4px;
}
@media (max-width: 720px) {
  .ss-mag { grid-template-columns: 1fr; }
  .ss-mag-photo { border-right: 0; border-bottom: 1px solid #1a1a1a; min-height: 280px; }
  /* .ss-mag-head no longer needs a mobile reset (no desktop overflow). */
  .ss-mag-lede { column-count: 1; }
}

<section class="ss-mag" aria-label="Editorial magazine spread">
  <article class="ss-mag-photo">
    <div class="ss-mag-image" aria-hidden="true">
      <span class="ss-mag-figure"></span>
      <span class="ss-mag-light"></span>
    </div>
    <span class="ss-mag-caption">Photo · Iris Hawthorne for The Quarterly</span>
  </article>
  <article class="ss-mag-text">
    <span class="ss-mag-section">SECTION 04 / ESSAY</span>
    <h2 class="ss-mag-head">The <em>quiet</em> art of<br/>doing one thing<br/>at a <em>time.</em></h2>
    <span class="ss-mag-byline">By <b>Iris Hawthorne</b> · Spring 2026</span>
    <p class="ss-mag-lede"><span class="ss-mag-drop">A</span>fter a decade of optimizing every minute, the loneliest realization wasn't that I had no time. It was that I'd forgotten how to spend it. Three years ago I made a small commitment, and it changed everything I thought I knew about productivity.</p>
    <blockquote class="ss-mag-pull">
      "The thing about doing one thing at a time is that the thing finally gets your attention."
    </blockquote>
    <p class="ss-mag-out">What I learned was simpler than I expected — and harder to keep.</p>
    <ul class="ss-mag-meta">
      <li><b>12 min</b> read</li>
      <li><b>2,840</b> words</li>
      <li><b>Apr 14</b> issue</li>
    </ul>
  </article>
</section>

22 / 22

3D Perspective Keynote

Pure CSS

v3 · MAY 2026

Aurora.

The smallest, fastest, quietest dev environment we've ever shipped. Built for the way you actually code.

◉0.3s cold start
◉Type-safe everywhere
◉One-click deploy

~/aurora

// 0.3s cold start
import { app } from 'aurora';
const server = app();
server.listen(3000);

Tech keynote — deep navy + holographic gradient + chrome. Two halves tilted in 3D space via perspective + rotateY; left panel angles toward viewer, right panel angles away. The "Apple event slide" feel — premium, sleek, almost cinematic.

Try it

.ss-key {
  position: relative;
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(80,40,180,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 80%, rgba(0,180,200,0.3) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a2a 0%, #050518 100%);
  color: #fff;
  border-radius: 0; overflow: hidden;
  perspective: 1400px;
  isolation: isolate;
}
.ss-key-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 78%, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
  z-index: 0;
}
.ss-key-left {
  padding: 44px 36px 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transform: rotateY(8deg) translateZ(20px);
  transform-origin: right center;
  z-index: 2;
}
.ss-key-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #00d4ff;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 12px;
}
.ss-key-left h2 {
  margin: 4px 0 0;
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
  font-style: italic;
}
.ss-key-shine {
  background: linear-gradient(90deg, #fff 0%, #c4b5fd 30%, #00d4ff 60%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ss-key-sweep 4s linear infinite;
}
@keyframes ss-key-sweep {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .ss-key-shine { animation: none; } }
.ss-key-left p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #c8c4e0;
  max-width: 380px;
}
.ss-key-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-key-feat li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px;
  color: #fff;
}
.ss-key-feat span { color: #00d4ff; font-size: 13px; text-shadow: 0 0 12px rgba(0,212,255,0.6); }
.ss-key-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: linear-gradient(135deg, #c4b5fd 0%, #00d4ff 100%);
  color: #050518;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,212,255,0.4);
  transition: transform 0.16s, box-shadow 0.16s;
}
.ss-key-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,212,255,0.55); }
.ss-key-right {
  position: relative;
  padding: 44px 32px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  z-index: 1;
}
.ss-key-card {
  position: relative;
  width: 100%; max-width: 420px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    #14143a;
  border: 1px solid rgba(196,181,253,0.3);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,212,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: rotateY(-12deg) rotateX(4deg) translateZ(-20px);
  z-index: 2;
}
.ss-key-card header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ss-key-dots { display: inline-flex; gap: 6px; }
.ss-key-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ss-key-dots i:nth-child(1) { background: #ff5f57; }
.ss-key-dots i:nth-child(2) { background: #febc2e; }
.ss-key-dots i:nth-child(3) { background: #28c840; }
.ss-key-card header strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8ab8;
  font-weight: 500;
}
.ss-key-card pre {
  margin: 0;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #fff;
}
.ss-key-c  { color: #6a6e96; font-style: italic; }
.ss-key-k  { color: #c4b5fd; font-weight: 600; }
.ss-key-s  { color: #fcd34d; }
.ss-key-o  { color: #ff52aa; }
.ss-key-fn { color: #00d4ff; }
.ss-key-n  { color: #a3e635; }
.ss-key-card footer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ss-key-stat {
  padding: 14px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 2px;
}
.ss-key-stat:last-child { border-right: 0; }
.ss-key-stat b {
  font-size: 18px; font-weight: 700;
  color: #00d4ff;
  letter-spacing: -0.02em;
}
.ss-key-stat em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a6e96;
}
.ss-key-glow {
  position: absolute;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0,212,255,0.4), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
@media (max-width: 720px) {
  .ss-key { grid-template-columns: 1fr; perspective: none; }
  .ss-key-left, .ss-key-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-key-left, .ss-key-card { transform: none; }
}

<section class="ss-key" aria-label="Tech keynote split">
  <span class="ss-key-stars" aria-hidden="true"></span>
  <article class="ss-key-left">
    <span class="ss-key-tag">v3 · MAY 2026</span>
    <h2><span class="ss-key-shine">Aurora.</span></h2>
    <p>The smallest, fastest, quietest dev environment we've ever shipped. Built for the way you actually code.</p>
    <ul class="ss-key-feat">
      <li><span>◉</span>0.3s cold start</li>
      <li><span>◉</span>Type-safe everywhere</li>
      <li><span>◉</span>One-click deploy</li>
    </ul>
    <button type="button" class="ss-key-cta">Watch the keynote →</button>
  </article>
  <article class="ss-key-right" aria-hidden="true">
    <div class="ss-key-card">
      <header>
        <span class="ss-key-dots">
          <i></i><i></i><i></i>
        </span>
        <strong>~/aurora</strong>
      </header>
      <pre><code><span class="ss-key-c">// 0.3s cold start</span>
<span class="ss-key-k">import</span> { app } <span class="ss-key-k">from</span> <span class="ss-key-s">'aurora'</span>;
<span class="ss-key-k">const</span> server <span class="ss-key-o">=</span> <span class="ss-key-fn">app</span>();
<span class="ss-key-fn">server.listen</span>(<span class="ss-key-n">3000</span>);</code></pre>
      <footer>
        <span class="ss-key-stat"><b>0.3s</b><em>start</em></span>
        <span class="ss-key-stat"><b>4.2 MB</b><em>bundle</em></span>
        <span class="ss-key-stat"><b>99 ms</b><em>p99</em></span>
      </footer>
    </div>
    <span class="ss-key-glow"></span>
  </article>
</section>

FAQ

Frequently asked questions

What is a CSS split-screen layout?

A split-screen layout divides the page into two (or more) full-bleed regions side by side. Common uses: hero + visual, image + text storytelling, sign-in + brand, before/after compare, two-product reveal. Unlike sidebar layouts (which are persistent page chrome), split-screens are usually a single full-height section that drives one moment of the page.

Should the split be exactly 50/50?

Not always. 50/50 is the default for compare layouts (before/after, two-product reveal). 60/40 emphasizes one side as the hero and the other as supporting content. 70/30 works well when one side is a featured project and the other is metadata or an index. Pick based on which side is the subject and which is the support.

How do I make a split-screen layout responsive?

Every demo here uses CSS grid (e.g. <code>grid-template-columns: 50% 50%</code>) and switches to a single column under 720px via <code>@media (max-width: 720px)</code>. The layout stacks vertically on mobile with the visual side first, then the text side. Watch out for fixed widths or absolute-positioned overlays — those break the stack; relative + flex/grid is more forgiving.

Can I animate the split ratio?

Yes. Use CSS transitions on <code>grid-template-columns</code> with named percentages (<code>30% 70%</code> ↔ <code>50% 50%</code>) — that's how the Music App Toggle and Two Seasons demos shift live. Pure CSS via <code>:has(:checked)</code> on a hidden checkbox or radio input. No JavaScript needed.

What's the difference between a split-screen and a sidebar layout?

A sidebar is persistent page chrome — it stays visible across all pages of the app, contains navigation, and the main content scrolls beside it. A split-screen is a single full-height section that's typically used once per page (hero, sign-in, comparison) and doesn't persist as the user navigates. They use similar CSS techniques (grid, flex, clip-path) but serve completely different jobs.

Related collections

24 CSS Grid Layouts

24 hand-coded CSS grid layouts — holy grail, 12-column, bento, magazine, RAM auto-fit, :has() quantity query, masonry, hexagonal honeycomb, subgrid, dashboard, pricing table, kanban, aspect-ratio tiles, container queries, skew grid, splash, mosaic, dense packing, step track, mac sidebar, scroll-snap, aurora map, logo wall, periodic table. Pure CSS, copy-paste ready.

css grid grid layout css layout Responsive

30 CSS Hero Sections

30 hand-coded CSS hero sections — SaaS classics, editorial / agency, product / e-commerce. Gradient mesh, glassmorphism, terminal, magazine, brutalist, bento, kinetic type, product shot, app store, neon CTA, parallax, isometric, 3D card stack, particle starfield, glitch text, conic orbit. No images, copy-paste ready.

hero section landing page saas hero Responsive

23 CSS Sidebar Layouts

23 hand-coded CSS sidebar layouts — fixed, collapsible, off-canvas, dual sidebar, mini icon rail, sticky filter, two-pane mail, three-pane workspace, persistent collapse, container-query adaptive, glass floating. Semantic <aside> + <nav>, ARIA-correct, copy-paste ready.

css sidebar layouts sidebar menu css collapsible sidebar Responsive

22 CSS Split Screen Layouts

FASTERthanYESTERDAY.

NEONHEART

CYBERBLOOM

Hand-shapedby the tide.

FRIDAY3PM

Quiet skin,loud confidence.

Burnt &Bronzed.

Cold &Quiet.

MidnightDrive.

TheLastTrain.

Folegandrosin May.

Hand-picked at sunrise

Washed & sun-dried

Shipped in jute

Slow-roasted weekly

In your cup, today

Field Notes

Clay Walls

Yellow Hour

Bone & Stone

Slow-roastedtomato orzo.

A good homeis one napaway.

How it works

The quiet art ofdoing one thingat a time.

Aurora.

Frequently asked questions

Related collections

24 CSS Grid Layouts

30 CSS Hero Sections

23 CSS Sidebar Layouts

FASTER
than
YESTERDAY.

Hand-shaped
by the tide.

FRIDAY
3PM

Quiet skin,
loud confidence.

Burnt &
Bronzed.

Cold &
Quiet.

Midnight
Drive.

The
Last
Train.

Folegandros
in May.

Slow-roasted
tomato orzo.

A good home
is one nap
away.

The quiet art of
doing one thing
at a time.