Template
Slide deck template
An HTML slide deck – scroll-snap slides, stat cards, and a one-point-per-slide structure in a single file with no dependencies. Publish it to a URL in one click, no account.
- free – no account
- a URL in seconds
- yours if you claim it
Publishing this from your own stack? See display.dev for HTML presentations.
Preview
What it looks like published
Source – slide-deck.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Q3 platform review – slides</title>
<style>
:root {
color-scheme: light dark;
--bg: oklch(0.99 0.004 85);
--card: oklch(1 0 0);
--fg: oklch(0.16 0.006 85);
--muted: oklch(0.5 0.008 85);
--line: oklch(0.92 0.006 85);
--accent: oklch(0.48 0.18 145);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: oklch(0.15 0.005 85);
--card: oklch(0.19 0.006 85);
--fg: oklch(0.97 0.004 85);
--muted: oklch(0.65 0.008 85);
--line: oklch(0.3 0.006 85);
--accent: oklch(0.68 0.18 145);
}
}
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; }
body {
margin: 0; background: var(--bg); color: var(--fg);
font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5;
}
.slide {
min-height: 100vh;
scroll-snap-align: start;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(2rem, 6vw, 5rem);
border-bottom: 1px solid var(--line);
max-width: 100%;
}
.slide-inner { max-width: 880px; margin: 0 auto; width: 100%; }
.kicker { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 0.75rem; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 1rem; }
p.lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--muted); max-width: 56ch; margin: 0; }
ul.points { font-size: clamp(1rem, 1.8vw, 1.1875rem); padding-left: 1.25rem; margin: 0; }
ul.points li { margin-bottom: 0.625rem; }
ul.points li strong { font-weight: 650; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; }
.stat .n { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.stat .l { font-size: 0.8125rem; color: var(--muted); }
.foot { position: fixed; bottom: 0.75rem; right: 1rem; font-size: 0.75rem; color: var(--muted); }
</style>
</head>
<body>
<section class="slide">
<div class="slide-inner">
<p class="kicker">Platform team · Q3 2026</p>
<h1>Q3 platform review</h1>
<p class="lead">What we changed, what it cost, what it bought us.
Scroll or press space – each slide is one point.</p>
</div>
</section>
<section class="slide">
<div class="slide-inner">
<h2>The quarter in three numbers</h2>
<div class="stat-row">
<div class="stat"><div class="n">−38%</div><div class="l">p99 API latency (410 → 254 ms)</div></div>
<div class="stat"><div class="n">−€8.4k</div><div class="l">monthly infra spend</div></div>
<div class="stat"><div class="n">2</div><div class="l">SEV-1 incidents (was 6 in Q2)</div></div>
</div>
</div>
</section>
<section class="slide">
<div class="slide-inner">
<h2>What we shipped</h2>
<ul class="points">
<li><strong>Read-path caching</strong> in front of the three hottest queries – the p99 win.</li>
<li><strong>Queue consolidation</strong> from four brokers to one – the spend win.</li>
<li><strong>Migration lint + staging at scale</strong> – no lock-taking migration has reached production since.</li>
</ul>
</div>
</section>
<section class="slide">
<div class="slide-inner">
<h2>What we deliberately did not do</h2>
<ul class="points">
<li>The multi-region read replica – demand didn't materialize; re-evaluate on the first EU-latency escalation.</li>
<li>Service extraction of the billing module – the monolith's boundary held; the extraction stays parked.</li>
</ul>
</div>
</section>
<section class="slide">
<div class="slide-inner">
<h2>Q4 plan</h2>
<ul class="points">
<li><strong>October:</strong> retire the legacy search index (last consumer migrates 3 Oct).</li>
<li><strong>November:</strong> load-test the write path at 3× peak before the seasonal spike.</li>
<li><strong>December:</strong> freeze except fixes; on-call hardening week.</li>
</ul>
</div>
</section>
<section class="slide">
<div class="slide-inner">
<p class="kicker">Questions</p>
<h2>Comments welcome on any slide</h2>
<p class="lead">Numbers are sample data – replace with your own.</p>
</div>
</section>
<div class="foot">Q3 platform review · 6 slides</div>
</body>
</html>
What this template is for
A deck that's a URL, not an attachment. Scroll-snap gives you real slides – one screen, one point – with no framework, no build step, and no script tag: it's CSS only, so it renders anywhere HTML renders.
The structure encodes the discipline that makes decks readable: a three-number summary up front, a "what we deliberately did not do" slide (the one people remember), and stat cards instead of chart screenshots.
How teams use it
- Quarterly reviews and readouts. The agent drafts the deck from the quarter's shipped work and metrics; you cut it down to one point per slide.
- Sent before the meeting. Because it's a page, people actually read it in advance – and leave inline comments on the slide they disagree with.
- Presented as-is. Full-screen the browser tab; scroll advances the slides.
Publish your first artifact in 15 seconds.
Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).