index.html.md

# index.html

The finished result as one file. Save it as index.html and open it.

```html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Kanban board dashboard</title><style>*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1280px;height:720px;overflow:hidden}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.stage{position:absolute;inset:0;animation:cyc 8s linear infinite both}
@keyframes cyc{0%{opacity:0}4%{opacity:1}94%{opacity:1}100%{opacity:0}}
body:not(.go) *,body:not(.go) *::before,body:not(.go) *::after{animation-play-state:paused!important}
.cnt::after{content:counter(n)}.cnt{counter-reset:n var(--n)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}


body{background:#f7f3ec;color:#1e1a14}
.hd{position:absolute;left:48px;top:30px;right:48px;display:flex;align-items:center;gap:16px}
.hd h1{font-size:26px;letter-spacing:-.03em}.hd span{color:#8a7f6e;font-size:14px}
.prog{margin-left:auto;width:300px}.prog small{display:flex;justify-content:space-between;font-size:12px;color:#8a7f6e;margin-bottom:6px}
.pb{height:8px;border-radius:9px;background:#e6ddcd;overflow:hidden}.pb i{display:block;height:100%;background:#e0561b;border-radius:9px;animation:pg 8s infinite both}
@keyframes pg{0%,8%{width:40%}60%,100%{width:73%}}
.pc{animation:pc 8s infinite both}@keyframes pc{0%,8%{--n:40}60%,100%{--n:73}}
.col{position:absolute;top:100px;width:350px;height:560px;background:#efe8da;border-radius:20px;padding:16px}
.col h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7b705f;margin-bottom:14px;display:flex;justify-content:space-between}
.c1{left:48px}.c2{left:430px}.c3{left:812px}
.card{position:absolute;width:318px;height:96px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 1px 0 #e0d6c4,0 8px 18px -12px #0003}
.card b{font-size:15px;display:block;margin-bottom:6px}.card span{font-size:12px;padding:3px 9px;border-radius:99px;background:#ffe3d6;color:#b43e0b;margin-right:6px}.card span.g{background:#dff3e6;color:#17713a}.card span.b{background:#e0e8ff;color:#2a4dc4}
.card u{position:absolute;right:14px;bottom:12px;width:24px;height:24px;border-radius:50%;background:#e0561b}
.p1{left:64px;top:156px}.p2{left:64px;top:266px}.p3{left:64px;top:376px}
.q1{left:446px;top:156px}.q2{left:446px;top:266px}
.r1{left:828px;top:156px}.r2{left:828px;top:266px}
.a{animation:a 8s infinite both;z-index:5}
@keyframes a{0%,16%{transform:translate(0,0);box-shadow:0 1px 0 #e0d6c4,0 8px 18px -12px #0003}22%{transform:translate(0,-6px) rotate(-2.5deg) scale(1.04);box-shadow:0 24px 40px -14px #0006}42%{transform:translate(382px,0) rotate(2deg) scale(1.04)}48%,100%{transform:translate(382px,110px) rotate(0) scale(1);box-shadow:0 1px 0 #e0d6c4,0 8px 18px -12px #0003}}
.b{animation:b 8s infinite both;z-index:4}
@keyframes b{0%,50%{transform:translate(0,0)}56%{transform:translate(0,-6px) rotate(2deg) scale(1.04);box-shadow:0 24px 40px -14px #0006}76%{transform:translate(382px,-110px) rotate(-1.5deg) scale(1.04)}82%,100%{transform:translate(382px,-110px) rotate(0) scale(1)}}
.tick{position:absolute;right:16px;top:14px;width:24px;height:24px;border-radius:50%;background:#17a34a;color:#fff;font-size:14px;text-align:center;line-height:24px;opacity:0;animation:tk 8s infinite both}
@keyframes tk{0%,80%{opacity:0;transform:scale(.3)}86%,100%{opacity:1;transform:scale(1)}}
.cur{position:absolute;left:0;top:0;width:26px;z-index:9;animation:cur 8s infinite both;filter:drop-shadow(0 3px 4px #0005)}
@keyframes cur{0%{transform:translate(240px,520px)}12%{transform:translate(300px,206px)}22%{transform:translate(300px,200px)}42%{transform:translate(690px,200px)}48%{transform:translate(690px,200px)}56%{transform:translate(690px,316px)}76%{transform:translate(1072px,206px)}84%,100%{transform:translate(1130px,330px)}}
</style></head><body><div class="stage">
<div class="hd"><h1>Launch week board</h1><span>12 tasks · 4 teammates</span><div class="prog"><small><span>Sprint progress</span><b><span class="cnt pc"></span>%</b></small><div class="pb"><i></i></div></div></div>
<div class="col c1"><h3>To do <span>3</span></h3></div><div class="col c2"><h3>In progress <span>2</span></h3></div><div class="col c3"><h3>Done <span>2</span></h3></div>
<div class="card p2"><b>Write release notes</b><span>Content</span><u style="background:#2a4dc4"></u></div>
<div class="card p3"><b>QA signup flow</b><span class="b">QA</span><u style="background:#17a34a"></u></div>
<div class="card q1"><b>Design pricing page</b><span>Design</span><span class="b">Urgent</span><u></u></div>
<div class="card a p1"><b>Connect payment webhook</b><span class="b">Backend</span><u style="background:#7c3aed"></u></div>
<div class="card b q2"><b>Set up analytics events</b><span class="g">Growth</span><u style="background:#2a4dc4"></u><i class="tick">✓</i></div>
<div class="card r1"><b>Brand colour tokens</b><span class="g">Design</span><u></u></div>
<div class="card r2" style="top:156px;left:828px;display:none"></div>
<svg class="cur" viewBox="0 0 24 24"><path d="M3 2l7 19 2.6-7.6L20 11z" fill="#1e1a14" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/></svg></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```