Feat: Redesign immersive homepage

2026-01-13 16:18:03 +00:00 · 2025-09-30 09:29:29 -07:00
parent c3aa539cc7
commit bbf0ca56b1
1 changed files with 294 additions and 19 deletions
--- a/index.html
+++ b/index.html
@@ -3,32 +3,307 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>planetrenox</title>
+<title>Planet Renox — Neon Momentum</title>
+<meta name="description" content="Planet Renox crafts kinetic experiences and a hyperflow runner game that pushes your reflexes beyond the ordinary.">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap" rel="stylesheet">
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-body{background:#fff;color:#000;font-family:Arial,sans-serif;line-height:1.6;padding:2rem}
-.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;max-width:1400px;margin:0 auto;min-height:calc(100vh - 4rem)}
-.logo{grid-column:1/7;font-size:clamp(2rem,5vw,4rem);font-weight:900;letter-spacing:-.05em;line-height:.9;padding:2rem 0;border-bottom:8px solid #000;align-self:start}
-.game{grid-column:1/13;background:#000;padding:3rem;display:flex;align-items:center;justify-content:center;position:relative}
-.game::before{content:'001';position:absolute;top:1rem;left:1rem;color:#fff;font-size:5rem;font-weight:900;opacity:.1}
-iframe{border:4px solid #fff;box-shadow:20px 20px 0 rgba(255,255,255,.2)}
-.github-link{grid-column:1/13;align-self:end;text-align:right}
-.github-link a{display:inline-block;background:#000;color:#fff;padding:1.5rem 3rem;text-decoration:none;font-weight:900;font-size:1.5rem;letter-spacing:-.02em;transition:all .2s;border:4px solid #000}
-.github-link a:hover{background:#fff;color:#000;transform:translate(-8px,-8px);box-shadow:8px 8px 0 #000}
-.status{grid-column:7/13;align-self:start;text-align:right;padding:2rem 0;border-bottom:8px solid #000;font-weight:900;font-size:1.2rem;letter-spacing:.1em}
-@media(max-width:768px){.grid{grid-template-columns:1fr;gap:1rem}.logo,.status,.game,.github-link{grid-column:1}.status{text-align:left;border-bottom:none;padding:1rem 0}.game{padding:1rem}iframe{width:100%;height:190px;border-width:2px}.github-link{text-align:left}.github-link a{font-size:1.2rem;padding:1rem 2rem}}
+:root{--bg:#050311;--bg2:#08041f;--text:#f8f9ff;--muted:#a3a7d7;--accent:#ff5cf4;--accent2:#4df3ff;--accent3:#ffe66d;--max:1080px;--glass:linear-gradient(135deg,rgba(24,18,54,.9),rgba(12,9,28,.9));--shadow:0 30px 80px -40px rgba(0,0,0,.8)}
+html,body{scroll-behavior:smooth}
+body{font-family:'Space Grotesk',system-ui,sans-serif;background:radial-gradient(circle at 15% 20%,rgba(108,19,255,.35),transparent 45%),radial-gradient(circle at 80% 10%,rgba(0,183,255,.25),transparent 40%),radial-gradient(circle at 50% 75%,rgba(255,63,137,.2),transparent 55%),var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
+body::before{content:"";position:fixed;inset:-40vh;pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.15),transparent 60%),radial-gradient(1px 1px at 90px 80px,rgba(255,255,255,.2),transparent 50%),radial-gradient(1px 1px at 140px 120px,rgba(255,255,255,.08),transparent 45%);background-size:200px 200px,160px 160px,140px 140px;opacity:.5;filter:blur(.2px);z-index:-1;animation:twinkle 28s linear infinite}
+@keyframes twinkle{50%{opacity:.3}100%{transform:translate3d(48px,-32px,0);opacity:.55}}
+a{color:inherit;text-decoration:none}
+header{position:sticky;top:0;z-index:9;background:rgba(5,3,17,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(92,86,146,.25)}
+nav{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:max(5vw,2rem);padding:1.25rem 5vw}
+.logo{font-family:'Archivo Black',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:1.05rem;display:inline-flex;align-items:center;gap:.35rem;color:var(--accent2)}
+.logo span{display:inline-block;width:.6rem;height:.6rem;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
+.nav-links{display:flex;gap:1.75rem;font-weight:500;color:var(--muted)}
+.nav-links a{position:relative;font-size:.95rem}
+.nav-links a::after{content:"";position:absolute;left:0;bottom:-.45rem;width:0;height:2px;border-radius:2px;background:var(--accent2);transition:.3s}
+.nav-links a:focus-visible,.nav-links a:hover{color:var(--text)}
+.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
+.cta-github{margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;border:1px solid rgba(77,243,255,.35);border-radius:999px;background:rgba(16,24,46,.2);color:var(--accent2);font-weight:600;box-shadow:0 12px 30px -22px rgba(77,243,255,.8);transition:.25s}
+.cta-github:hover{transform:translateY(-2px);border-color:rgba(255,92,244,.45);color:var(--accent)}
+main{flex:1}
+section{padding:clamp(4rem,4vw+2rem,6.5rem) 5vw}
+.container{max-width:var(--max);margin:auto}
+.hero{padding-top:5rem;padding-bottom:6rem}
+.hero-grid{display:grid;gap:4rem;align-items:center;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
+.badge{display:inline-flex;align-items:center;gap:.65rem;padding:.45rem .95rem;border-radius:999px;background:rgba(16,24,46,.55);border:1px solid rgba(77,243,255,.45);text-transform:uppercase;font-size:.72rem;letter-spacing:.2em;color:var(--accent2)}
+.badge span{display:inline-flex;width:.6rem;height:.6rem;border-radius:50%;background:var(--accent3);box-shadow:0 0 6px rgba(255,230,109,.7)}
+.hero h1{font-family:'Archivo Black',system-ui,sans-serif;font-size:clamp(2.8rem,5vw,4.3rem);line-height:1.05;letter-spacing:.04em;text-transform:uppercase}
+.hero h1 strong{display:block;color:var(--accent);text-shadow:0 0 28px rgba(255,92,244,.6)}
+.hero p{max-width:32rem;color:var(--muted);font-size:1.05rem;margin:1.6rem 0 2.6rem}
+.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
+.btn{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;letter-spacing:.045em;background:var(--accent);color:#0b0212;border:none;box-shadow:0 18px 40px -26px rgba(255,92,244,.9);transition:.25s}
+.btn svg{width:1.1rem}
+.btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
+.btn-alt{background:transparent;color:var(--accent2);border:1px solid rgba(77,243,255,.45);box-shadow:0 18px 40px -28px rgba(77,243,255,.7)}
+.hero-card{position:relative;padding:2.1rem;border-radius:1.8rem;background:var(--glass);box-shadow:var(--shadow);overflow:hidden}
+.hero-card::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(77,243,255,.25),transparent 50%);opacity:.9;animation:pulse 12s ease infinite}
+@keyframes pulse{0%,100%{transform:scale(1)}55%{transform:scale(1.15);opacity:.8}}
+.hero-card h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.28em;color:var(--accent2);margin-bottom:1.4rem}
+.mission{display:grid;gap:1.5rem}
+.mission p{color:var(--muted)}
+.mission ul{list-style:none;display:grid;gap:.8rem}
+.mission li{display:grid;gap:.25rem;padding:1rem;border-radius:1.1rem;background:rgba(11,7,26,.7);border:1px solid rgba(92,86,146,.25)}
+.mission li strong{font-size:.95rem;color:var(--text);letter-spacing:.04em}
+.mission li span{font-size:.85rem;color:var(--muted)}
+.product{background:linear-gradient(140deg,rgba(21,14,48,.95),rgba(7,9,35,.85))}
+.section-heading{display:flex;flex-direction:column;gap:.55rem;margin-bottom:2.5rem}
+.section-heading span{font-size:.72rem;text-transform:uppercase;letter-spacing:.3em;color:var(--accent3)}
+.section-heading h2{font-size:clamp(2.1rem,3vw,2.8rem);font-family:'Archivo Black',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
+.section-heading p{max-width:34rem;color:var(--muted)}
+.product-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
+.steam{padding:1.8rem;border-radius:1.6rem;background:rgba(8,5,26,.9);border:1px solid rgba(77,243,255,.2);box-shadow:var(--shadow);display:grid;gap:1.4rem}
+.steam iframe{width:100%;max-width:646px;height:190px;border:0;border-radius:1rem;filter:drop-shadow(0 20px 35px rgba(0,0,0,.55))}
+.product-points{display:grid;gap:1.4rem}
+.feature-card{padding:1.4rem 1.6rem;border-radius:1.4rem;background:rgba(12,9,32,.9);border:1px solid rgba(255,92,244,.22);position:relative;overflow:hidden}
+.feature-card::after{content:"";position:absolute;top:-40px;right:-50px;width:160px;height:160px;background:radial-gradient(circle,rgba(255,92,244,.28),transparent 60%)}
+.feature-card h3{font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;color:var(--accent)}
+.feature-card p{color:var(--muted);font-size:.95rem}
+.ethos{background:linear-gradient(160deg,rgba(10,6,28,.95),rgba(26,12,45,.7))}
+.ethos-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
+.ethos-card{padding:1.8rem;border-radius:1.6rem;background:rgba(11,6,30,.85);border:1px solid rgba(118,87,255,.28);box-shadow:var(--shadow);display:grid;gap:.9rem}
+.ethos-card h3{font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)}
+.ethos-card p{font-size:.92rem;color:var(--muted)}
+.ethos-card ul{list-style:none;display:grid;gap:.5rem}
+.ethos-card li{display:flex;align-items:center;gap:.65rem;font-size:.9rem;color:var(--text)}
+.ethos-card li::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(255,92,244,.6)}
+.mechanics{position:relative}
+.mechanics::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,92,244,.12),transparent 55%);pointer-events:none}
+.mechanics-grid{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
+.mechanics-card{padding:1.6rem;border-radius:1.5rem;background:rgba(8,8,36,.82);border:1px solid rgba(77,243,255,.26);display:grid;gap:.8rem}
+.mechanics-card h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent2)}
+.mechanics-card p{color:var(--muted);font-size:.95rem}
+.mechanics-card .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border-radius:999px;background:rgba(255,92,244,.18);color:var(--accent);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
+.roadmap{background:linear-gradient(150deg,rgba(12,7,26,.95),rgba(8,15,42,.85))}
+.timeline{position:relative;padding-left:1.4rem;display:grid;gap:1.8rem}
+.timeline::before{content:"";position:absolute;left:.55rem;top:.3rem;bottom:.3rem;width:2px;background:linear-gradient(180deg,var(--accent2),rgba(255,92,244,.3))}
+.timeline-item{position:relative;padding:1.6rem;border-radius:1.5rem;background:rgba(11,8,32,.8);border:1px solid rgba(77,243,255,.2);box-shadow:var(--shadow)}
+.timeline-item::before{content:"";position:absolute;left:-1.4rem;top:1.8rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 6px rgba(77,243,255,.18)}
+.timeline-item h3{font-size:1rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.6rem;color:var(--accent2)}
+.timeline-item p{color:var(--muted);font-size:.95rem}
+.community{position:relative;overflow:hidden}
+.community::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(77,243,255,.18),transparent 55%),radial-gradient(circle at 20% 80%,rgba(255,92,244,.15),transparent 50%);pointer-events:none}
+.community-card{max-width:780px;margin:auto;padding:3rem;border-radius:2rem;background:rgba(6,4,23,.75);border:1px solid rgba(255,92,244,.25);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);text-align:center;display:grid;gap:1.4rem}
+.community-card h2{font-family:'Archivo Black',system-ui,sans-serif;font-size:clamp(2.2rem,4vw,2.9rem);letter-spacing:.12em;text-transform:uppercase}
+.community-card p{color:var(--muted);max-width:34rem;margin:auto}
+.community-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
+footer{border-top:1px solid rgba(92,86,146,.25);background:rgba(5,3,17,.92);padding:2.6rem 5vw}
+.footer-inner{max-width:var(--max);margin:auto;display:flex;flex-direction:column;gap:.9rem;color:var(--muted);font-size:.9rem}
+.footer-links{display:flex;flex-wrap:wrap;gap:1.4rem}
+.footer-links a{color:var(--accent2);font-weight:500}
+.footer-note{font-size:.8rem;color:rgba(163,167,215,.7)}
+@media (max-width:820px){
+nav{gap:1.5rem}
+.nav-links{gap:1rem;font-size:.9rem}
+.cta-github{display:none}
+.hero-grid{gap:3rem}
+.hero-card{order:-1}
+section{padding:3.8rem 7vw}
+}
+@media (max-width:540px){
+nav{flex-direction:column;align-items:flex-start;padding:1.1rem 6vw}
+.nav-links{width:100%;justify-content:space-between}
+.hero p{font-size:.98rem}
+.hero-cta{flex-direction:column;align-items:flex-start}
+.community-card{padding:2.4rem}
+}
 </style>
 </head>
 <body>
-<div class="grid">
-<div class="logo">PLANET<br>RENOX</div>
-<div class="status">ACTIVE / BUILDING</div>
-<div class="game">
-<iframe src="https://store.steampowered.com/widget/1745790/?t=A%20movement%20focused%20endless%20anime%20runner.%20Jump%20till%20you're%20dead.%20It's%20basically%20a%20bhopping%20game.%20Developed%20by%20Planet%20Renox." frameborder="0" width="646" height="190"></iframe>
+<header>
+<nav>
+<a class="logo" href="#hero"><span></span>Planet Renox</a>
+<div class="nav-links">
+<a href="#manifesto">Manifesto</a>
+<a href="#game">Game</a>
+<a href="#mechanics">Systems</a>
+<a href="#roadmap">Roadmap</a>
+<a href="#community">Community</a>
 </div>
-<div class="github-link">
-<a href="https://github.com/planetrenox" target="_blank">GITHUB →</a>
+<a class="cta-github" href="https://github.com/planetrenox" target="_blank" rel="noopener">↗ GitHub</a>
+</nav>
+</header>
+<main>
+<section class="hero" id="hero">
+<div class="container hero-grid">
+<div>
+<div class="badge"><span></span>Hyperflow collective</div>
+<h1>Ride the Neon Momentum<strong>The next pulse of Planet Renox</strong></h1>
+<p>We sculpt kinetic worlds where reaction time is worshipped and flow state is mandatory. Planet Renox is a playground for players who thrive on impossible velocity and smooth execution.</p>
+<div class="hero-cta">
+<a class="btn" href="#game" title="Jump into the Steam experience">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 5l6 5-6 5V5z" fill="#0b0212"/><path d="M10 1a9 9 0 100 18 9 9 0 000-18zm0 1.5a7.5 7.5 0 110 15 7.5 7.5 0 010-15z" stroke="#0b0212" stroke-width="1.2"/></svg>Play the Widget
+</a>
+<a class="btn btn-alt" href="https://github.com/planetrenox" target="_blank" rel="noopener">View the source</a>
 </div>
 </div>
+<div class="hero-card">
+<h2>Our Mission</h2>
+<div class="mission">
+<p>Planet Renox exists to hybridize anime energy, movement mastery, and synthwave futurism into one addictive ecosystem.</p>
+<ul>
+<li><strong>Movement is the narrative</strong><span>Every gradient, obstacle, and track tells the story of speed.</span></li>
+<li><strong>Style earns respect</strong><span>Precision lines, saturated colors, kinetic UI, always on brand.</span></li>
+<li><strong>Community drives canon</strong><span>Feedback loops turn fans into collaborators and curators.</span></li>
+</ul>
+</div>
+</div>
+</div>
+</section>
+<section class="product" id="game">
+<div class="container">
+<div class="section-heading">
+<span>Game drop</span>
+<h2>Renox Hyperflow Runner</h2>
+<p>Our flagship Steam release turns endless running into an aerial ballet. Built for the bhop faithful, tuned for anyone chasing instant flow.</p>
+</div>
+<div class="product-grid">
+<div class="steam">
+<div>
+<h3 style="font-size:1.08rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem;color:var(--accent2);">Steam spotlight</h3>
+<p style="color:var(--muted);font-size:.92rem;margin-bottom:1.1rem;">Sit inside the neon pulse. Widget is live, leaderboard-ready, and constantly evolving with community challenges.</p>
+</div>
+<iframe src="https://store.steampowered.com/widget/1745790/?t=A%20movement%20focused%20endless%20anime%20runner.%20Jump%20till%20you're%20dead.%20It's%20basically%20a%20bhopping%20game.%20Developed%20by%20Planet%20Renox." title="Planet Renox Steam Widget" allowfullscreen></iframe>
+</div>
+<div class="product-points">
+<div class="feature-card">
+<h3>Velocity-first design</h3>
+<p>Low-latency inputs, clean silhouettes, and easing curves make every micro-adjustment feel intentional, not accidental.</p>
+</div>
+<div class="feature-card">
+<h3>Anime-fueled worldbuilding</h3>
+<p>Each background layer references synth cityscapes, chromatic suns, and velocity graffiti to paint the Renox atmosphere.</p>
+</div>
+<div class="feature-card">
+<h3>Endless roadmap</h3>
+<p>Seasonal drops add fresh biomes, mutation tracks, and experimental modifiers that reward risk and creativity.</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<section class="ethos" id="manifesto">
+<div class="container">
+<div class="section-heading">
+<span>Design stance</span>
+<h2>The Renox Manifesto</h2>
+<p>We cultivate experiences where art direction, mechanics, and sonic identity form an inseparable feedback loop.</p>
+</div>
+<div class="ethos-grid">
+<div class="ethos-card">
+<h3>Visual electricity</h3>
+<p>Tension between deep-space violets and vaporwave neons creates a pulse that guides the player’s eye.</p>
+<ul>
+<li>Spectral gradients with chromatic aberration trims</li>
+<li>UI glyphs inspired by sci-fi signage</li>
+<li>Adaptive glow levels respecting contrast</li>
+</ul>
+</div>
+<div class="ethos-card">
+<h3>Mechanic honesty</h3>
+<p>Every mechanic surfaces clearly; no hidden stats, no wasted frames. Momentum is earned, not granted.</p>
+<ul>
+<li>Frame-perfect hops &amp; buffered turns</li>
+<li>Readable hitboxes with telegraphed cues</li>
+<li>Skill ceilings tuned for esports spectatorship</li>
+</ul>
+</div>
+<div class="ethos-card">
+<h3>Sonic fusion</h3>
+<p>Bass-driven arcs and airy leads ebb with player velocity, syncing attention with muscle memory.</p>
+<ul>
+<li>Reactive soundtrack stems</li>
+<li>Impact SFX pitched by combo streak</li>
+<li>Soundstage calibrated for headphones</li>
+</ul>
+</div>
+<div class="ethos-card">
+<h3>Player-as-coauthor</h3>
+<p>Community mods, lore submissions, and speedrun labs inform core updates—built in public on GitHub.</p>
+<ul>
+<li>Transparent issue tracking</li>
+<li>Weekly build notes</li>
+<li>Contributor shout-outs in launcher</li>
+</ul>
+</div>
+</div>
+</div>
+</section>
+<section class="mechanics" id="mechanics">
+<div class="container">
+<div class="section-heading">
+<span>Systems</span>
+<h2>Movement engineering</h2>
+<p>We obsess over flow states, tuning micro-interactions to reduce friction and amplify adrenaline.</p>
+</div>
+<div class="mechanics-grid">
+<div class="mechanics-card">
+<div class="chip">Momentum</div>
+<h3>Hyperlane weaving</h3>
+<p>Procedural lane shifts ensure countless pathways without sacrificing route readability.</p>
+</div>
+<div class="mechanics-card">
+<div class="chip">Skill</div>
+<h3>Chroma boosts</h3>
+<p>Color-coded accelerators force commitment: miss one and you rewrite your entire line.</p>
+</div>
+<div class="mechanics-card">
+<div class="chip">Style</div>
+<h3>Aircut combos</h3>
+<p>String dives and vaults to unlock particle flourishes that stamp your run in neon.</p>
+</div>
+</div>
+</div>
+</section>
+<section class="roadmap" id="roadmap">
+<div class="container">
+<div class="section-heading">
+<span>Trajectory</span>
+<h2>Plotted course</h2>
+<p>Transparent milestones keep our community orbiting the same star map.</p>
+</div>
+<div class="timeline">
+<div class="timeline-item">
+<h3>Phase 01 · Foundations</h3>
+<p>Refined core physics, shader polish, and implemented the Steam build pipeline with automated QA hooks.</p>
+</div>
+<div class="timeline-item">
+<h3>Phase 02 · Community orbit</h3>
+<p>Launching weekly challenge playlists, leaderboard revamps, and tight GitHub issues for collaborative balancing.</p>
+</div>
+<div class="timeline-item">
+<h3>Phase 03 · Mixed reality</h3>
+<p>Experimenting with motion rigs, adaptive haptics, and partner showcases to bring Renox off the screen.</p>
+</div>
+</div>
+</div>
+</section>
+<section class="community" id="community">
+<div class="container community-card">
+<h2>Dock with the Renox Collective</h2>
+<p>Join the builders who are shaping every new patch. File issues, drop concept art, stream speedruns—Planet Renox is an open hangar.</p>
+<div class="community-ctas">
+<a class="btn" href="https://github.com/planetrenox" target="_blank" rel="noopener">Contribute on GitHub</a>
+<a class="btn btn-alt" href="mailto:hello@planetrenox.com">Contact the crew</a>
+</div>
+</div>
+</section>
+</main>
+<footer>
+<div class="footer-inner">
+<div class="footer-links">
+<a href="#hero">Back to top</a>
+<a href="#game">Steam widget</a>
+<a href="https://github.com/planetrenox" target="_blank" rel="noopener">GitHub</a>
+</div>
+<p class="footer-note">© Planet Renox. Crafted for players living on the edge of momentum.</p>
+</div>
+</footer>
 </body>
 </html>