Nature Trail
Stepping stones along a dashed path. Each milestone is anchored by an icon gem, a year marker, and impact tags. Earthy greens, alternating left/right layout, and an organic visual rhythm — made for environmental reports, ESG storytelling, and brand sustainability journeys.
Nature Trail the 10th 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="tl10-wrap">
<div class="tl10-path" aria-hidden="true"></div>
<div class="tl10-stone">
<div class="tl10-text">
<p class="tl10-phase">Phase 01</p>
<h3 class="tl10-name">Baseline Assessment</h3>
<p class="tl10-desc">Comprehensive scope 1, 2, and 3 emissions audit completed across all 14 operational sites. The first honest look at our footprint — and it was confronting.</p>
<div class="tl10-tags">
<span class="tl10-tag">Carbon Audit</span>
<span class="tl10-tag">14 Sites</span>
</div>
</div>
<div class="tl10-center">
<div class="tl10-gem">◉</div>
<span class="tl10-year">2020</span>
</div>
<div class="tl10-img">🌍</div>
</div>
<div class="tl10-stone tl10-flip">
<div class="tl10-img">⚡</div>
<div class="tl10-center">
<div class="tl10-gem">⚡</div>
<span class="tl10-year">2021</span>
</div>
<div class="tl10-text">
<p class="tl10-phase">Phase 02</p>
<h3 class="tl10-name">Renewable Transition</h3>
<p class="tl10-desc">Switched 80% of grid electricity to wind and solar PPAs. On-site solar installed at 6 warehouses. Energy costs fell 22% in year one.</p>
<div class="tl10-tags">
<span class="tl10-tag">−42% Scope 2</span>
<span class="tl10-tag">PPA Contracts</span>
</div>
</div>
</div>
<div class="tl10-stone">
<div class="tl10-text">
<p class="tl10-phase">Phase 03</p>
<h3 class="tl10-name">Supply Chain Engagement</h3>
<p class="tl10-desc">Rolled out supplier sustainability scorecard to 340 vendors. 82% have committed to science-based targets. Phased out three high-impact suppliers.</p>
<div class="tl10-tags">
<span class="tl10-tag">340 Vendors</span>
<span class="tl10-tag">SBTi Aligned</span>
</div>
</div>
<div class="tl10-center">
<div class="tl10-gem">◈</div>
<span class="tl10-year">2023</span>
</div>
<div class="tl10-img">🌱</div>
</div>
<div class="tl10-stone tl10-flip tl10-last">
<div class="tl10-img">🎯</div>
<div class="tl10-center">
<div class="tl10-gem">★</div>
<span class="tl10-year">2025</span>
</div>
<div class="tl10-text">
<p class="tl10-phase">Phase 04</p>
<h3 class="tl10-name">Net Zero Certified</h3>
<p class="tl10-desc">Achieved verified net zero status across scopes 1 and 2. Scope 3 on target for 2028. B Corp certification under review. The hardest work is still ahead.</p>
<div class="tl10-tags">
<span class="tl10-tag">Net Zero S1+S2</span>
<span class="tl10-tag">B Corp Pending</span>
<span class="tl10-tag">2028 Target</span>
</div>
</div>
</div>
</div> .tl10-wrap {
--tl10-bg: #f2f4f0;
--tl10-a: #1b4332;
--tl10-ink: #0d1f16;
background: var(--tl10-bg);
padding: 2.5rem 1.5rem;
max-width: 860px;
margin: 0 auto;
position: relative;
font-family: 'Inter', system-ui, sans-serif;
}
.tl10-path {
position: absolute;
left: 50%;
top: 2.5rem;
bottom: 2.5rem;
width: 2px;
background: repeating-linear-gradient(
to bottom,
rgba(27,67,50,0.3) 0 8px,
transparent 8px 16px
);
transform: translateX(-50%);
}
.tl10-stone {
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
margin-bottom: 3rem;
position: relative;
}
.tl10-last { margin-bottom: 0; }
.tl10-flip .tl10-text { grid-column: 3; }
.tl10-flip .tl10-img { grid-column: 1; }
.tl10-text { padding: 0 1.5rem; }
.tl10-flip .tl10-text { text-align: left; }
.tl10-stone:not(.tl10-flip) .tl10-text { text-align: right; }
.tl10-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
z-index: 2;
grid-column: 2;
}
.tl10-gem {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
border: 2px solid rgba(27,67,50,0.25);
box-shadow: 0 4px 16px rgba(27,67,50,0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--tl10-a);
transition: transform 0.3s, box-shadow 0.3s;
}
.tl10-stone:hover .tl10-gem {
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(27,67,50,0.2);
}
.tl10-year {
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 1.5px;
color: var(--tl10-a);
}
.tl10-phase {
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(27,67,50,0.45);
margin-bottom: 0.35rem;
}
.tl10-name {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.25rem;
color: var(--tl10-ink);
margin: 0 0 0.4rem;
line-height: 1.25;
}
.tl10-desc {
font-size: 13.5px;
color: rgba(13,31,22,0.55);
line-height: 1.7;
margin: 0 0 0.7rem;
}
.tl10-tags {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-end; }
.tl10-tag {
font-family: ui-monospace, monospace;
font-size: 10.5px;
padding: 0.2rem 0.6rem;
background: rgba(27,67,50,0.08);
border-radius: 99px;
color: var(--tl10-a);
}
.tl10-img {
aspect-ratio: 5 / 4;
max-width: 220px;
border-radius: 12px;
background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8rem;
box-shadow: 0 4px 20px rgba(27,67,50,0.12);
}
@media (max-width: 720px) {
.tl10-path { left: 28px; }
.tl10-stone, .tl10-flip {
grid-template-columns: 56px 1fr;
gap: 0.75rem;
text-align: left;
}
.tl10-flip .tl10-text,
.tl10-stone:not(.tl10-flip) .tl10-text { text-align: left; grid-column: 2; padding: 0; }
.tl10-center { grid-column: 1; align-self: flex-start; }
.tl10-img { display: none; }
.tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-start; }
}