45 lines
2.3 KiB
HTML
45 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vinyl Colony Biometrics • Tammera Storey</title>
|
||
<style>
|
||
body { background: #0a0f1e; color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||
.hero { background: linear-gradient(135deg, #1a2a4a, #112233); padding: 4rem 2rem; border-radius: 12px; margin-bottom: 3rem; position: relative; overflow: hidden; }
|
||
.hero::after { content: ''; position: absolute; inset: 0; background: url('https://images.pexels.com/photos/7605374/pexels-photo-7605374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') center/cover; opacity: 0.15; mix-blend-mode: luminosity; }
|
||
h1 { font-size: 3rem; margin: 0 0 1rem; }
|
||
.viz { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2rem; }
|
||
.card { background: #112233; padding: 1.5rem; border-radius: 12px; border: 1px solid #445577; }
|
||
.teal-pulse { height: 120px; background: linear-gradient(#00ccaa, #112233); border-radius: 8px; animation: pulse 4s infinite ease-in-out; }
|
||
@keyframes pulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
|
||
a { color: #88ddff; }
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<p><a href="index.html">← back to Tammera’s orbit</a></p>
|
||
<div class="hero">
|
||
<h1>vinyl colony biometrics</h1>
|
||
<p>indie riffs meet dome telemetry · teal gradients over red dust</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="viz">
|
||
<div class="card">
|
||
<h2>track 01 — heart rate grooves</h2>
|
||
<div class="teal-pulse"></div>
|
||
<p>Spirited Away vinyl spinning above biometric logs. Catan-style loops for 14-week crew harmony.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>track 02 — o2 vinyl flow</h2>
|
||
<div class="teal-pulse" style="background:linear-gradient(#4488ff,#112233);"></div>
|
||
<p>Blue-record texture maps oxygen pulses. Great Lakes calm in every scratched groove.</p>
|
||
</div>
|
||
</div>
|
||
<p style="margin-top:3rem;opacity:0.7;">Planted with Procreate sketches & royalty-free vinyl visuals. Ready for the next colony beat.</p>
|
||
</main>
|
||
</body>
|
||
</html> |