<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>matthew909 — header</title>
<style>
/* 90s-ish reset */
html, body { margin:0; padding:0; background:#000; color:#fff; }
a { color:#00ffff; text-decoration: underline; }
a:visited { color:#ff66ff; }
img { image-rendering: pixelated; }
/* “Geocities space” tile background (no external assets) */
body{
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px) 0 0 / 120px 120px,
radial-gradient(circle at 70% 60%, rgba(255,255,255,.75) 0 1px, transparent 2px) 0 0 / 160px 160px,
radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 0 1px, transparent 2px) 0 0 / 220px 220px,
repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 2px 4px),
#000;
font-family: "Verdana", "Arial", sans-serif;
}
/* Header block sized like a typical banner */
.wrap { width: 100%; display:flex; justify-content:center; }
.header {
width: 980px;
max-width: 100%;
box-sizing: border-box;
margin: 16px auto 0;
border: 2px solid #2b2b2b;
background: rgba(0,0,0,.78);
box-shadow: 0 0 0 2px rgba(255,255,255,.07) inset, 0 0 28px rgba(255,0,255,.18);
position: relative;
overflow: hidden;
}
/* Fake CRT scanlines on top */
.header::before{
content:"";
position:absolute; inset:0;
background: repeating-linear-gradient(
180deg,
rgba(255,255,255,.05) 0px,
rgba(255,255,255,.05) 1px,
rgba(0,0,0,0) 3px,
rgba(0,0,0,0) 5px
);
mix-blend-mode: overlay;
pointer-events:none;
opacity:.35;
}
/* 90s title treatment: neon + bevel + shadow */
.title {
font-family: "Impact", "Arial Black", "Verdana", sans-serif;
letter-spacing: 2px;
font-size: 64px;
line-height: 1;
margin: 0;
padding: 18px 18px 6px;
text-transform: lowercase;
background: linear-gradient(90deg, #ff00ff, #ffe600, #00ff66, #00aaff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* bevel-ish edge */
text-shadow:
0 2px 0 rgba(0,0,0,.85),
0 0 10px rgba(255,0,255,.45),
0 0 18px rgba(255,230,0,.22),
0 0 24px rgba(0,255,102,.18);
}
/* little “cult / conspiracy” subtitle */
.subtitle {
margin: 0;
padding: 0 18px 14px;
font-family: "Courier New", monospace;
font-size: 13px;
letter-spacing: 1px;
color: #c9ffd9;
text-shadow: 0 0 6px rgba(0,255,102,.25);
}
/* Layout uses an old-school table for authenticity */
table.layout {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td { vertical-align: top; }
.left, .right { width: 210px; padding: 12px 12px 16px; }
.mid { padding: 10px 0 16px; }
/* “Heaven’s Gate-ish” badge */
.badge {
border: 1px solid rgba(255,255,255,.25);
background: rgba(10,10,10,.65);
padding: 8px;
font-family: "Courier New", monospace;
font-size: 11px;
color: #ffe600;
box-shadow: 0 0 0 1px rgba(0,170,255,.25) inset;
}
.badge b { color:#ff00ff; }
/* 88x31-ish buttons */
.btn {
display: inline-block;
width: 88px;
height: 31px;
margin: 6px 6px 0 0;
border: 2px outset #c0c0c0;
background:
linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.2)),
linear-gradient(90deg, rgba(255,0,255,.18), rgba(0,170,255,.18));
color: #fff;
font: 11px/27px "Tahoma", "Verdana", sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.8);
box-sizing: border-box;
}
.btn:active { border-style: inset; }
/* “Marquee” without deprecated tag */
.marquee {
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
background: rgba(0,0,0,.55);
height: 26px;
overflow: hidden;
position: relative;
margin-top: 8px;
}
.marquee span{
position:absolute;
white-space: nowrap;
will-change: transform;
font: 12px/26px "Courier New", monospace;
color: #00ffff;
text-shadow: 0 0 6px rgba(0,170,255,.35);
animation: scroll 14s linear infinite;
}
@keyframes scroll{
0% { transform: translateX(100%); }
100% { transform: translateX(-110%); }
}
/* “Under construction” + “NEW” */
.stamps {
font-family: "Courier New", monospace;
font-size: 11px;
margin-top: 10px;
color: #ffffff;
}
.blink {
animation: blink 1s steps(1,end) infinite;
color: #ffe600;
text-shadow: 0 0 8px rgba(255,230,0,.35);
}
@keyframes blink { 50% { opacity: 0; } }
/* Faux visitor counter */
.counter {
display: inline-block;
font: 12px/1 "Courier New", monospace;
letter-spacing: 2px;
padding: 6px 8px;
background: #111;
border: 1px solid rgba(255,255,255,.25);
color: #00ff66;
box-shadow: 0 0 10px rgba(0,255,102,.12);
}
/* Subtle “UFO beam” gradient bar */
.beam {
height: 6px;
margin: 10px 18px 0;
background: linear-gradient(90deg, rgba(255,0,255,0), rgba(255,0,255,.6), rgba(255,230,0,.7), rgba(0,255,102,.6), rgba(0,170,255,.6), rgba(0,170,255,0));
filter: blur(.2px);
opacity:.9;
}
/* page body demo (optional) */
.page {
width: 980px;
max-width: 100%;
margin: 14px auto 40px;
padding: 12px 16px;
border: 1px solid rgba(255,255,255,.15);
background: rgba(0,0,0,.65);
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
box-sizing: border-box;
}
.page h2 {
margin: 0 0 8px;
font: 14px "Verdana", sans-serif;
color: #ff66ff;
text-transform: uppercase;
letter-spacing: 2px;
}
.page p { margin: 0; font-size: 13px; line-height: 1.45; color: #d8d8d8; }
/* Make it feel 90s on mobile too */
@media (max-width: 720px){
.title { font-size: 44px; }
.left, .right { width: 160px; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="header" role="banner" aria-label="matthew909 header">
<table class="layout" aria-hidden="true">
<tr>
<td class="left">
<div class="badge">
<div><b>TRANSMISSION:</b> ACTIVE</div>
<div>CHANNEL: 909</div>
<div>ORIGIN: “HEAVEN’S GATE”</div>
<div>STATUS: <span class="blink">NEW</span></div>
</div>
<div class="stamps">
<div>⚠ UNDER CONSTRUCTION</div>
<div>🛸 TRUST NO ONE</div>
<div>📡 SIGNALS ONLY</div>
</div>
</td>
<td class="mid">
<h1 class="title">matthew909</h1>
<div class="beam"></div>
<p class="subtitle">
[ conspiracy broadcast // blackbox hymns // do not look away ]
</p>
<div class="marquee">
<span>
::: WELCOME TO THE matthew909 NODE ::: DOWNLOADS ::: RELEASES ::: LINKS ::: JOIN THE LIST ::: YOU ARE BEING RECEIVED :::
</span>
</div>
<div style="padding: 12px 18px 0;">
<a class="btn" href="#releases">RELEASES</a>
<a class="btn" href="#downloads">DL</a>
<a class="btn" href="#links">LINKS</a>
<a class="btn" href="#mail">MAIL</a>
</div>
</td>
<td class="right">
<div style="text-align:right; padding-top:2px;">
<div style="font: 11px 'Courier New', monospace; color:#00aaff; text-shadow:0 0 6px rgba(0,170,255,.25);">
VISITORS:
</div>
<div class="counter">000042909</div>
<div style="margin-top:10px; font: 11px 'Courier New', monospace; color:#ffe600;">
SYSTEM TIME:
</div>
<div style="font: 12px 'Courier New', monospace; color:#ffffff;">
<span id="clock">--:--:--</span>
</div>
<div style="margin-top:12px; font: 11px 'Courier New', monospace; color:#00ff66;">
“EXIT LEVEL ABOVE HUMAN”
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Optional demo content -->
<div class="wrap">
<div class="page">
<h2 id="releases">Releases</h2>
<p>Replace this section with your Bandcamp embeds, images, and link buttons.</p>
</div>
</div>
<script>
// Tiny “90s personal site” clock
function pad(n){ return (n < 10) ? "0"+n : ""+n; }
function tick(){
const d = new Date();
document.getElementById("clock").textContent =
pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
}
tick(); setInterval(tick, 1000);
</script>
</body>
</html>