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>Neon grid</title>
<style>
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{overflow:hidden;background:linear-gradient(#0a0020 0%,#2a0a4a 55%,#ff3d81 100%);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff}
.sun{position:absolute;left:50%;top:47%;width:min(40vmin,330px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(#ffe45e,#ff3d81 70%);box-shadow:0 0 120px 20px rgba(255,61,129,.55);animation:pulse 4s ease-in-out infinite}
.sun::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 58%,#2a0a4a 58% 60%,transparent 60% 70%,#2a0a4a 70% 73%,transparent 73% 82%,#2a0a4a 82% 86%,transparent 86% 94%,#2a0a4a 94% 100%);border-radius:50%}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.05)}}
.hor{position:absolute;left:0;right:0;top:50%;height:2px;background:#ff3d81;box-shadow:0 0 22px 4px #ff3d81}
.floor{position:absolute;left:0;right:0;top:50%;bottom:0;perspective:360px;perspective-origin:50% 0;overflow:hidden;background:linear-gradient(#1a0536,#0a0020)}
.grid{position:absolute;left:-100%;right:-100%;top:0;height:300%;transform:rotateX(70deg);transform-origin:50% 0;background-image:linear-gradient(90deg,#00e5ff 2px,transparent 2px),linear-gradient(#00e5ff 2px,transparent 2px);background-size:80px 80px;filter:drop-shadow(0 0 6px #00e5ff);animation:go 1.4s linear infinite}
@keyframes go{to{background-position:0 80px}}
.mt{position:absolute;bottom:50%;left:0;width:100%;height:14vh;z-index:2}
.mt svg{width:100%;height:100%}
.ttl{position:absolute;left:0;right:0;top:9%;text-align:center;z-index:3}
.ttl small{letter-spacing:.5em;font-size:13px;color:#00e5ff;text-shadow:0 0 12px #00e5ff;animation:flick 6s infinite}
h1{font-size:clamp(46px,9vw,120px);letter-spacing:.04em;font-style:italic;margin-top:10px;text-shadow:0 0 12px #ff3d81,0 0 40px #ff3d81,0 0 90px #b100ff;animation:flick 6s 1s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.55}97%{opacity:1}}
.cta{position:absolute;bottom:7%;left:0;right:0;text-align:center;z-index:4}
.cta a{display:inline-block;padding:14px 34px;border:2px solid #00e5ff;color:#00e5ff;text-decoration:none;letter-spacing:.2em;font-size:14px;box-shadow:0 0 18px #00e5ff,inset 0 0 18px rgba(0,229,255,.35);text-shadow:0 0 8px #00e5ff;background:rgba(0,0,0,.35)}
.scan{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.18) 3px 4px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
</style></head><body>
<div class="sun"></div>
<div class="mt"><svg viewBox="0 0 1200 160" preserveAspectRatio="none"><path d="M0 160 L0 120 L120 60 L200 110 L330 30 L450 120 L560 80 L700 140 L820 50 L960 120 L1080 70 L1200 130 L1200 160Z" fill="#14022b" stroke="#ff3d81" stroke-width="2"/></svg></div>
<div class="hor"></div>
<div class="floor"><div class="grid"></div></div>
<div class="ttl"><small>SYNTHWAVE // 1984</small><h1>NIGHT DRIVE</h1></div>
<div class="cta"><a href="#">▶ PRESS START</a></div>
<div class="scan"></div>
</body></html>

```