planetrenox/planetrenox.com
1
0
Fork 0
mirror of https://github.com/planetrenox/planetrenox.com.git synced 2026-01-13 16:18:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Brutalist minimalist homepage design

Browse Source
This commit is contained in:
multipleof4
2025-09-30 09:16:36 -07:00
parent e96f8e0039
commit c3aa539cc7
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@@ -6,36 +6,29 @@
<title>planetrenox</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e27;color:#00ff41;font-family:'Courier New',monospace;overflow-x:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
body::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,65,.03) 0px,transparent 1px,transparent 2px,rgba(0,255,65,.03) 3px);pointer-events:none;animation:scan 8s linear infinite}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(100vh)}}
.container{max-width:900px;padding:2rem;text-align:center}
.glitch{font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:.5rem;margin-bottom:1rem;position:relative;text-transform:uppercase;animation:flicker 3s infinite}
.glitch::before,.glitch::after{content:'PLANET_RENOX';position:absolute;left:0;width:100%;height:100%}
.glitch::before{color:#ff00de;animation:glitch1 2.5s infinite;clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}
.glitch::after{color:#00fff9;animation:glitch2 2s infinite;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
@keyframes glitch1{0%,100%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}}
@keyframes glitch2{0%,100%{transform:translate(0)}20%{transform:translate(3px,-3px)}40%{transform:translate(3px,3px)}60%{transform:translate(-3px,-3px)}80%{transform:translate(-3px,3px)}}
@keyframes flicker{0%,100%{opacity:1}93%{opacity:.8}94%{opacity:.2}95%{opacity:1}}
.tagline{font-size:1.2rem;color:#00ff41;opacity:.7;margin-bottom:3rem;letter-spacing:.3rem;text-transform:uppercase}
.game-frame{margin:3rem auto;border:2px solid #00ff41;box-shadow:0 0 30px rgba(0,255,65,.3),inset 0 0 30px rgba(0,255,65,.1);background:#0a0e27;padding:1rem;position:relative}
.game-frame::before{content:'> LOADING_GAME.EXE';position:absolute;top:-1.5rem;left:1rem;background:#0a0e27;padding:0 .5rem;font-size:.8rem;color:#00ff41}
iframe{display:block;max-width:100%;height:auto}
.github{display:inline-block;margin-top:3rem;padding:1rem 2rem;background:transparent;border:2px solid #00ff41;color:#00ff41;text-decoration:none;text-transform:uppercase;letter-spacing:.2rem;font-weight:700;position:relative;overflow:hidden;transition:all .3s}
.github::before{content:'';position:absolute;inset:0;background:#00ff41;transform:translateX(-100%);transition:transform .3s;z-index:-1}
.github:hover{color:#0a0e27;box-shadow:0 0 30px rgba(0,255,65,.6)}
.github:hover::before{transform:translateX(0)}
@media(max-width:700px){.game-frame{padding:.5rem}iframe{width:100%;height:190px}}
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}}
</style>
</head>
<body>
<div class="container">
<h1 class="glitch">PLANET_RENOX</h1>
<p class="tagline">// INITIALIZING SYSTEMS</p>
<div class="game-frame">
<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>
</div>
<a href="https://github.com/planetrenox" class="github" target="_blank">&gt; ACCESS_GITHUB</a>
<div class="github-link">
<a href="https://github.com/planetrenox" target="_blank">GITHUB →</a>
</div>
</div>
</body>
</html>