Art Deco Steps
Gallery-wall layout with geometric ornamentation, italic serif eras, and curated work tags. Indigo on cream with diamond decorations and serif grandeur — for museums, heritage brands, artist retrospectives, and any institution whose history should feel like a permanent collection.
Art Deco Steps the 12th 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="tl12-wrap">
<div class="tl12-ornament" aria-hidden="true">
<div class="tl12-rule"></div>
<div class="tl12-diamond"></div>
<div class="tl12-label">A Retrospective</div>
<div class="tl12-diamond"></div>
<div class="tl12-rule"></div>
</div>
<div class="tl12-entry">
<div class="tl12-inner">
<div class="tl12-left">
<div class="tl12-era">Early</div>
<div class="tl12-span">1890 — 1910</div>
</div>
<div class="tl12-right">
<h3 class="tl12-title">The Impressionist Foundation</h3>
<p class="tl12-body">Rooted in the tradition of plein-air painting, the early works capture fleeting light and emotional atmosphere rather than documentary precision. Critics were hostile; collectors were entranced.</p>
<div class="tl12-works">
<span class="tl12-work">Haystacks at Dusk</span>
<span class="tl12-work">The Seine in November</span>
<span class="tl12-work">Portrait of Madeleine</span>
</div>
</div>
</div>
</div>
<div class="tl12-entry">
<div class="tl12-inner">
<div class="tl12-left">
<div class="tl12-era">Middle</div>
<div class="tl12-span">1911 — 1935</div>
</div>
<div class="tl12-right">
<h3 class="tl12-title">The Cubist Rupture</h3>
<p class="tl12-body">Exposure to Picasso and Braque in Paris fractured the picture plane. The artist began dissecting familiar forms — faces, furniture, cityscapes — into interlocking geometric shards of simultaneous viewpoints.</p>
<div class="tl12-works">
<span class="tl12-work">Decomposition No. 7</span>
<span class="tl12-work">Woman at the Table</span>
<span class="tl12-work">Three Guitars</span>
</div>
</div>
</div>
</div>
<div class="tl12-entry tl12-last">
<div class="tl12-inner">
<div class="tl12-left">
<div class="tl12-era">Late</div>
<div class="tl12-span">1936 — 1962</div>
</div>
<div class="tl12-right">
<h3 class="tl12-title">Abstraction & Silence</h3>
<p class="tl12-body">The war years stripped away decoration. Large canvases of near-monochromatic fields emerged — radical reductions that anticipated Abstract Expressionism. The late works are the quietest and the most demanding.</p>
<div class="tl12-works">
<span class="tl12-work">Blue Field Study I</span>
<span class="tl12-work">Nocturne for V.</span>
<span class="tl12-work">The Last Interior</span>
</div>
</div>
</div>
</div>
</div> .tl12-wrap {
--tl12-bg: #fff8f0;
--tl12-a: #2d3a8c;
--tl12-ink: #0d0d20;
background: var(--tl12-bg);
padding: 2.5rem 1.5rem;
max-width: 880px;
margin: 0 auto;
font-family: 'Inter', system-ui, sans-serif;
}
.tl12-ornament {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.tl12-rule {
flex: 1;
height: 1px;
background: rgba(45,58,140,0.22);
}
.tl12-diamond {
width: 8px;
height: 8px;
background: var(--tl12-a);
transform: rotate(45deg);
flex-shrink: 0;
}
.tl12-label {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 0.85rem;
color: rgba(45,58,140,0.5);
white-space: nowrap;
}
.tl12-entry {
margin-bottom: 3rem;
}
.tl12-last { margin-bottom: 0; }
.tl12-inner {
display: grid;
grid-template-columns: 150px 1fr;
border-left: 2px solid rgba(45,58,140,0.18);
}
.tl12-left {
padding: 0 1.75rem 0 0;
text-align: right;
position: relative;
}
.tl12-left::after {
content: '';
position: absolute;
right: -7px;
top: 1rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--tl12-bg);
border: 2px solid var(--tl12-a);
}
.tl12-era {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.6rem;
font-style: italic;
color: var(--tl12-a);
line-height: 1;
}
.tl12-span {
font-family: ui-monospace, monospace;
font-size: 10.5px;
color: rgba(13,13,32,0.35);
letter-spacing: 0.5px;
margin-top: 0.25rem;
}
.tl12-right {
padding: 0 0 0 1.75rem;
}
.tl12-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.4rem;
color: var(--tl12-ink);
margin: 0 0 0.5rem;
line-height: 1.2;
}
.tl12-body {
font-family: Georgia, 'Times New Roman', serif;
font-size: 14px;
color: rgba(13,13,32,0.6);
line-height: 1.75;
margin: 0 0 0.9rem;
}
.tl12-works {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tl12-work {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 12.5px;
padding: 0.3rem 0.7rem;
border: 1px solid rgba(45,58,140,0.22);
border-radius: 2px;
color: var(--tl12-a);
background: rgba(45,58,140,0.04);
transition: background 0.2s, color 0.2s;
cursor: default;
}
.tl12-work:hover {
background: var(--tl12-a);
color: var(--tl12-bg);
}
@media (max-width: 600px) {
.tl12-inner { grid-template-columns: 1fr; border-left: 0; }
.tl12-left {
padding: 0 0 1rem;
text-align: left;
border-left: 2px solid rgba(45,58,140,0.18);
padding-left: 1rem;
}
.tl12-left::after { left: -7px; right: auto; }
.tl12-right { padding-left: 1rem; border-left: 2px solid rgba(45,58,140,0.18); }
}