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>Feedback and voting board</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:#fbf7f0;color:#241d12}
.w{position:absolute;left:150px;right:150px;top:30px}
h1{font-size:30px;letter-spacing:-.03em}.sub{color:#8a7b61;font-size:14px;margin:6px 0 22px}
.l{position:relative;height:540px}
.i{position:absolute;left:0;right:0;height:96px;background:#fff;border-radius:20px;box-shadow:0 14px 30px -22px #7a5a1d;display:flex;align-items:center;gap:22px;padding:0 26px;opacity:0;animation:in 8s infinite both}
@keyframes in{0%,4%{opacity:0;transform:translateY(12px)}12%,100%{opacity:1;transform:none}}
.i:nth-child(1){top:0;animation:in 8s infinite both,d1 8s infinite both}
.i:nth-child(2){top:114px;animation:in 8s .08s infinite both,up 8s infinite both}
.i:nth-child(3){top:228px;animation:in 8s .16s infinite both}
.i:nth-child(4){top:342px;animation:in 8s .24s infinite both}
.i:nth-child(5){top:456px;animation:in 8s .32s infinite both}
@keyframes up{0%,48%{top:114px}60%,100%{top:0}}
@keyframes d1{0%,48%{top:0}60%,100%{top:114px}}
.v{width:66px;height:64px;border-radius:16px;background:#f3ecde;display:grid;place-items:center;text-align:center;line-height:1.1;font-size:12px;color:#8a7b61}
.v b{display:block;font-size:22px;color:#241d12}
.v::before{content:"▲";display:block;font-size:11px;color:#c58a1d}
.t b{font-size:17px;display:block}.t span{font-size:13px;color:#8a7b61}
.tg{margin-left:auto;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:#fdebc8;color:#8a5a00}.tg.g{background:#d9f3e4;color:#17794a}.tg.b{background:#dce8ff;color:#2457d6}
.v1{animation:vv1 8s infinite both}@keyframes vv1{0%,100%{--n:142}}
.v2{animation:vv2 8s infinite both}@keyframes vv2{0%,24%{--n:138}28%,36%{--n:139}40%,48%{--n:140}52%,100%{--n:145}}
.i:nth-child(2) .v{animation:hl 8s infinite both}@keyframes hl{0%,22%{background:#f3ecde}28%,70%{background:#fdebc8}}
.add{position:absolute;right:150px;top:36px;background:#241d12;color:#fff;border-radius:14px;padding:12px 20px;font-weight:700;font-size:14px}
.v b.cnt{counter-reset:n var(--n)}.v b.cnt::after{content:counter(n)}</style></head><body><div class="stage"><div class="w"><h1>Feedback board</h1><div class="sub">Vote for what we build next</div><div class="l"><div class="i"><div class="v"><b class="cnt v1" style=""></b>votes</div><div class="t"><b>Dark mode for the dashboard</b><span>Requested by 38 teams</span></div><div class="tg ">Planned</div></div><div class="i"><div class="v"><b class="cnt v2" style=""></b>votes</div><div class="t"><b>Export reports to CSV</b><span>Requested by 31 teams</span></div><div class="tg b">Open</div></div><div class="i"><div class="v"><b class="cnt " style="counter-reset:n 121"></b>votes</div><div class="t"><b>Slack notifications</b><span>Requested by 27 teams</span></div><div class="tg b">Open</div></div><div class="i"><div class="v"><b class="cnt " style="counter-reset:n 97"></b>votes</div><div class="t"><b>Two-factor sign in</b><span>Requested by 19 teams</span></div><div class="tg g">Shipped</div></div><div class="i"><div class="v"><b class="cnt " style="counter-reset:n 64"></b>votes</div><div class="t"><b>Custom domains</b><span>Requested by 12 teams</span></div><div class="tg b">Open</div></div></div></div><div class="add">+ New idea</div></div><script>window.start=function(){document.body.classList.add("go")};if(!/[?&]rec/.test(location.search))start();</script></body></html>
```