24 CSS Timeline Layouts 16 / 24

Editorial

Magazine-style two-column alternating layout with large gradient visuals, italic serif headings, and pull quotes.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="tl16-scene">
  <div class="tl16-wrap">
    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">01</p>
        <p class="tl16-decade">1940 — 1960</p>
        <h3 class="tl16-heading">The Atomic Age</h3>
        <p class="tl16-body">Nuclear fission unlocked both promise and peril. Nations raced to harness what was once thought to be nature's most fundamental secret.</p>
        <blockquote class="tl16-pullquote">"We have unleashed a force that will reshape civilization itself."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v1" data-label="1940 — 1960">40s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">02</p>
        <p class="tl16-decade">1960 — 1980</p>
        <h3 class="tl16-heading">The Space Race</h3>
        <p class="tl16-body">Earthbound dreams took flight. Rockets carried humans beyond the atmosphere, reframing humanity's sense of its own place in the cosmos.</p>
        <blockquote class="tl16-pullquote">"The Moon is not so far when you decide you must go there."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v2" data-label="1960 — 1980">60s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">03</p>
        <p class="tl16-decade">1980 — 2000</p>
        <h3 class="tl16-heading">The Digital Revolution</h3>
        <p class="tl16-body">Personal computers arrived in homes. Software became the new architecture, and those who wrote it found themselves as the architects of the century ahead.</p>
        <blockquote class="tl16-pullquote">"Software is eating the world — and it's hungry."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v3" data-label="1980 — 2000">80s</div>
      </div>
    </div>

    <div class="tl16-entry tl16-last">
      <div class="tl16-text">
        <p class="tl16-number">04</p>
        <p class="tl16-decade">2000 — Present</p>
        <h3 class="tl16-heading">The Intelligence Age</h3>
        <p class="tl16-body">Data became the substrate of decision. Machines learned from patterns invisible to human eyes, and the boundary between tool and collaborator began to blur.</p>
        <blockquote class="tl16-pullquote">"We are no longer just using intelligence; we are growing it."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v4" data-label="2000 — Now">2K</div>
      </div>
    </div>
  </div>
</div>
.tl16-scene {
  --tl16-paper: #f0ece4;
  --tl16-ink:   #0d0d0d;
  background: var(--tl16-paper);
  padding: 3rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl16-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.tl16-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  align-items: center;
  border-bottom: 1px solid rgba(13,13,13,0.1);
}
.tl16-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tl16-entry:nth-child(even) .tl16-text   { order: 2; }
.tl16-entry:nth-child(even) .tl16-visual { order: 1; }
.tl16-visual {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.tl16-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.9);
  position: relative;
}
.tl16-visual-inner::after {
  content: attr(data-label);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  font-weight: 400;
}
.tl16-v1 { background: linear-gradient(135deg, #1a1a2e, #c8423a); }
.tl16-v2 { background: linear-gradient(135deg, #0a3d62, #2980b9); }
.tl16-v3 { background: linear-gradient(135deg, #1a3a1a, #2ecc71); }
.tl16-v4 { background: linear-gradient(135deg, #3d2000, #d4a017); }
.tl16-number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(13,13,13,0.1);
  line-height: 1;
  margin: 0 0 -0.5rem;
}
.tl16-decade {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(13,13,13,0.4);
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.tl16-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tl16-ink);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}
.tl16-body {
  font-size: 13.5px;
  color: rgba(13,13,13,0.6);
  line-height: 1.75;
  margin: 0;
}
.tl16-pullquote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--tl16-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(13,13,13,0.65);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .tl16-entry,
  .tl16-entry:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl16-entry:nth-child(even) .tl16-text,
  .tl16-entry:nth-child(even) .tl16-visual { order: unset; }
}

More from 24 CSS Timeline Layouts

Brutalist GridTicker Tape ChangelogEditorial SpineSplit Screen TimelineRailroad StationsFilm Strip PortfolioLedger Audit LogAccordion TimelineCinematic FilmstripHorizontal ScrollStratigraphy TimelineTour Stub Timeline
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →