Split Screen Timeline
Dark alternating left/right layout with a faded center spine and ringed dot markers. Each entry carries a date, two-line heading, body copy, and a discipline pill. Built for career histories, CVs, and project milestone retrospectives.
Split Screen Timeline the 21st of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl21-wrap">
<div class="tl21-spine"></div>
<div class="tl21-entry">
<div class="tl21-content">
<div class="tl21-date">Jan 2022</div>
<div class="tl21-heading">Lead Product Designer<br>Vercel</div>
<div class="tl21-body">Oversaw the redesign of the dashboard, reducing time-to-deploy by 30% through progressive disclosure patterns.</div>
<span class="tl21-pill">Product · Systems</span>
</div>
<div class="tl21-spacer"></div>
<div class="tl21-dot"></div>
</div>
<div class="tl21-entry">
<div class="tl21-spacer"></div>
<div class="tl21-content">
<div class="tl21-date">Mar 2020</div>
<div class="tl21-heading">Senior UX Engineer<br>Linear</div>
<div class="tl21-body">Built the keyboard-first interaction model that became Linear's defining differentiator in the project management space.</div>
<span class="tl21-pill">Interaction · Eng</span>
</div>
<div class="tl21-dot"></div>
</div>
<div class="tl21-entry">
<div class="tl21-content">
<div class="tl21-date">Jun 2018</div>
<div class="tl21-heading">Design Systems Lead<br>Stripe</div>
<div class="tl21-body">Created and maintained Stripe's internal component library across 12 product teams and three platform surfaces.</div>
<span class="tl21-pill">Tokens · Figma</span>
</div>
<div class="tl21-spacer"></div>
<div class="tl21-dot"></div>
</div>
<div class="tl21-entry">
<div class="tl21-spacer"></div>
<div class="tl21-content">
<div class="tl21-date">Sep 2016</div>
<div class="tl21-heading">UI Designer<br>Intercom</div>
<div class="tl21-body">Early product hire. Shaped the visual language for the Messenger product from v1 through to its first major rebrand.</div>
<span class="tl21-pill">Visual · Branding</span>
</div>
<div class="tl21-dot"></div>
</div>
</div> .tl21-wrap {
position: relative;
max-width: 760px;
margin: 0 auto;
padding: 1.5rem 0;
background: #0c0c0c;
color: #f0ede8;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl21-spine {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, #333 5%, #333 95%, transparent);
transform: translateX(-50%);
}
.tl21-entry {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 120px;
position: relative;
}
.tl21-entry:nth-child(odd) .tl21-content {
grid-column: 1;
text-align: right;
padding: 1.5rem 2.5rem 1.5rem 0;
}
.tl21-entry:nth-child(even) .tl21-content {
grid-column: 2;
text-align: left;
padding: 1.5rem 0 1.5rem 2.5rem;
}
.tl21-entry:nth-child(odd) .tl21-spacer { grid-column: 2; }
.tl21-entry:nth-child(even) .tl21-spacer { grid-column: 1; }
.tl21-dot {
position: absolute;
left: 50%;
top: 1.6rem;
width: 10px;
height: 10px;
background: #f0ede8;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 3px #0c0c0c, 0 0 0 4px #444;
}
.tl21-date {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.6rem;
color: #555;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.tl21-heading {
font-family: 'Syne', 'Inter Tight', sans-serif;
font-size: 1rem;
font-weight: 700;
color: #e8e5e0;
margin-bottom: 0.4rem;
line-height: 1.25;
}
.tl21-body {
font-size: 0.8rem;
color: #666;
line-height: 1.5;
}
.tl21-pill {
display: inline-block;
padding: 0.15rem 0.6rem;
border: 1px solid #333;
border-radius: 99px;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
color: #555;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.5rem;
}
@media (max-width: 600px) {
.tl21-entry { grid-template-columns: 1fr; }
.tl21-entry:nth-child(odd) .tl21-content,
.tl21-entry:nth-child(even) .tl21-content {
grid-column: 1;
text-align: left;
padding: 1.5rem 0 1.5rem 2rem;
}
.tl21-spine { left: 0.5rem; transform: none; }
.tl21-dot { left: 0.5rem; transform: translateX(-50%); }
}