Two-direction chooser

Split-screen landing that presents two visual direction choices. One shareable URL.

Layouts Built JS-free

Use when — you have two valid visual directions and want the prospect to self-select. Lets you send one URL instead of two. Don't use for choosing language (use a lang-switcher pill) or for funneling traffic — each direction needs to be a legitimate option.

Live demo

Direction A Clásica Enter → Direction B Dark editorial Enter →

The structure

<div class="chooser">
  <a class="option classical" href="/clasica">...</a>
  <a class="option dark"      href="/dark">...</a>
</div>

The CSS

.chooser { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.option { display: flex; flex-direction: column; padding: clamp(40px, 7vw, 80px); }
.option.classical { background: var(--classical-bg); color: var(--classical-text); }
.option.dark      { background: var(--dark-bg);      color: var(--dark-text); }
@media (max-width: 760px) { .chooser { grid-template-columns: 1fr; } }

Pattern proven on the Peñaranda y Cobo site. Code playbook: webs agency/patterns.md § Pattern 21.