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>Project workspace 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:#eef3fb;color:#14233f}
.sb{position:absolute;left:0;top:0;bottom:0;width:230px;background:#14233f;color:#c9d6f2;padding:26px 20px}
.sb h2{font-size:18px;color:#fff;margin-bottom:22px;letter-spacing:-.02em}.sb div{padding:11px 12px;border-radius:12px;font-size:14px;margin-bottom:4px}.sb .on{background:#243a68;color:#fff}
.mn{position:absolute;left:262px;right:36px;top:30px}
.hd{display:flex;align-items:center}.hd h1{font-size:28px;letter-spacing:-.03em}.hd span{margin-left:14px;font-size:13px;padding:5px 11px;border-radius:99px;background:#dce8ff;color:#2457d6;font-weight:700}
.st{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.sc{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 14px 30px -24px #1d3d8a;animation:rs 8s infinite both}.sc:nth-child(2){animation-delay:.1s}.sc:nth-child(3){animation-delay:.2s}
@keyframes rs{0%,3%{opacity:0;transform:translateY(14px)}10%,100%{opacity:1;transform:none}}
.sc small{font-size:12px;color:#6a7da3;text-transform:uppercase;letter-spacing:.08em}.sc b{display:block;font-size:32px;letter-spacing:-.03em;margin-top:4px}
.a1{animation:a1 8s infinite both}.a2{animation:a2 8s infinite both}.a3{animation:a3 8s infinite both}
@keyframes a1{0%,8%{--n:0}34%,100%{--n:68}}@keyframes a2{0%,8%{--n:0}34%,100%{--n:14}}@keyframes a3{0%,8%{--n:0}34%,100%{--n:5}}
.pj{background:#fff;border-radius:18px;padding:6px 22px;box-shadow:0 14px 30px -24px #1d3d8a}
.pr{display:grid;grid-template-columns:230px 1fr 90px 60px;align-items:center;gap:18px;height:84px;border-bottom:1px solid #edf1f8;opacity:0;animation:pi 8s infinite both}
.pr:last-child{border:0}
.pr:nth-child(2){animation-delay:.14s}.pr:nth-child(3){animation-delay:.28s}.pr:nth-child(4){animation-delay:.42s}
@keyframes pi{0%,14%{opacity:0;transform:translateX(18px)}22%,100%{opacity:1;transform:none}}
.pr h3{font-size:16px}.pr p{font-size:12px;color:#6a7da3;margin-top:3px}
.bar{height:10px;border-radius:9px;background:#e8eef9;overflow:hidden}.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#3b82f6,#6366f1);width:var(--w);animation:gb 8s infinite both}
@keyframes gb{0%,22%{width:0}52%,100%{width:var(--w)}}
.pr em{font-style:normal;font-weight:800;font-size:15px}.pr .av{display:flex}.pr .av i{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:#6366f1}.pr .av i:nth-child(2){background:#f59e0b}.pr .av i:nth-child(3){background:#10b981}
.tag{font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;text-align:center}.ok{background:#d8f5e4;color:#127a45}.wa{background:#fff1d0;color:#8a5a00}.bl{background:#dce8ff;color:#2457d6}
</style></head><body><div class="stage"><div class="sb"><h2>Northstar</h2><div class="on">Projects</div><div>My tasks</div><div>Inbox</div><div>Team</div><div>Reports</div><div>Settings</div></div>
<div class="mn"><div class="hd"><h1>Project workspace</h1><span>Q4 planning</span></div>
<div class="st"><div class="sc"><small>Avg progress</small><b><span class="cnt a1"></span>%</b></div><div class="sc"><small>Open tasks</small><b><span class="cnt a2"></span></b></div><div class="sc"><small>Due this week</small><b><span class="cnt a3"></span></b></div></div>
<div class="pj"><div class="pr"><div><h3>Website redesign</h3><p>Due Dec 12</p></div><div class="bar"><i style="--w:82%"></i></div><div class="av"><i></i><i></i><i></i></div><div class="tag ok">On track</div></div><div class="pr"><div><h3>Mobile app v2</h3><p>Due Jan 20</p></div><div class="bar"><i style="--w:54%"></i></div><div class="av"><i></i><i></i></div><div class="tag wa">At risk</div></div><div class="pr"><div><h3>Billing migration</h3><p>Due Nov 30</p></div><div class="bar"><i style="--w:91%"></i></div><div class="av"><i></i></div><div class="tag ok">On track</div></div><div class="pr"><div><h3>Partner portal</h3><p>Due Feb 8</p></div><div class="bar"><i style="--w:23%"></i></div><div class="av"><i></i><i></i><i></i></div><div class="tag bl">Planning</div></div></div></div></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```