62 lines
6.0 KiB
HTML
62 lines
6.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Carol Schroeder | The First Slip</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="Carol Schroeder | The First Slip">
|
||
|
|
<meta property="og:description" content="DATE: 1987-04-04 COORDINATES: NORTH SIDE ARSON SITE ERROR: VIAL 037 LABELED AS SOIL WHEN IT WAS SALT. CHAIN OF EVIDENCE: BROKEN AT SEAL. CASE STATUS:…">
|
||
|
|
<meta property="og:url" content="https://carol-schroeder.4ort.net/first-slip.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="DATE: 1987-04-04 COORDINATES: NORTH SIDE ARSON SITE ERROR: VIAL 037 LABELED AS SOIL WHEN IT WAS SALT. CHAIN OF EVIDENCE: BROKEN AT SEAL. CASE STATUS:…">
|
||
|
|
<style>
|
||
|
|
:root { --void: #000000; --steel: #1a1a1a; --gold: #d4af37; }
|
||
|
|
html, body { margin: 0; padding: 0; background: var(--void); color: var(--gold); font-family: 'Courier New', monospace; height: 100vh; overflow-x: hidden; }
|
||
|
|
.chamber { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; perspective: 1500px; }
|
||
|
|
.seam { width: 90vw; max-width: 1200px; border: 1px solid var(--gold); transform-style: preserve-3d; animation: breathe 12s ease-in-out infinite; }
|
||
|
|
.header { letter-spacing: 0.2em; text-transform: uppercase; text-align: center; margin-bottom: 2rem; opacity: 0; animation: ignite 4s forwards 1s; }
|
||
|
|
.vial-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.5rem; margin-top: 3rem; }
|
||
|
|
.vial { aspect-ratio: 1/1.5; border: 1px solid rgba(212, 175, 55, 0.15); transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); position: relative; }
|
||
|
|
.vial::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, transparent, var(--steel)); opacity: 0; transition: opacity 2s; }
|
||
|
|
.vial:nth-child(37) { border-color: var(--gold); box-shadow: 0 0 40px var(--gold); }
|
||
|
|
.oath { font-size: 0.75rem; line-height: 1.6; text-align: left; margin-top: 4rem; border-left: 2px solid var(--gold); padding-left: 1rem; }
|
||
|
|
@keyframes breathe { 0%, 100% { transform: rotateX(0deg) scale(1); } 50% { transform: rotateX(12deg) scale(1.02); } }
|
||
|
|
@keyframes ignite { 0% { opacity: 0; filter: blur(20px); } 100% { opacity: 1; filter: blur(0px); } }
|
||
|
|
.label { position: absolute; bottom: 0.5rem; left: 0.5rem; font-size: 0.5rem; white-space: nowrap; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body class="chamber">
|
||
|
|
<div class="seam">
|
||
|
|
<h1 class="header">FIRST SLIP</h1>
|
||
|
|
|
||
|
|
<div class="vial-grid">
|
||
|
|
<!-- The 36 True Vials -->
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_001</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_002</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_003</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_004</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_005</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_006</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_007</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_008</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_009</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_010</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_011</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_012</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_013</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_014</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_015</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_016</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_017</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_018</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_019</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_020</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_021</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_022</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_023</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_024</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_025</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_026</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_027</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_028</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_029</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_030</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_031</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_032</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_033</span></div>
|
||
|
|
<div class="vial"><span class="label">CHICAGO_NORTH_SIDE_034</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_035</span></div><div class="vial"><span class="label">CHICAGO_NORTH_SIDE_036</span></div>
|
||
|
|
|
||
|
|
<!-- The One Broken Vial -->
|
||
|
|
<div class="vial"><span class="label">ERROR_037_MISLABELED</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="oath">
|
||
|
|
<p>DATE: 1987-04-04<br>
|
||
|
|
COORDINATES: NORTH SIDE ARSON SITE<br>
|
||
|
|
ERROR: VIAL 037 LABELED AS SOIL WHEN IT WAS SALT.<br>
|
||
|
|
CHAIN OF EVIDENCE: BROKEN AT SEAL.<br>
|
||
|
|
CASE STATUS: COLLAPSED.<br>
|
||
|
|
LESSON: TRIPLE CHECK THE LABEL. TRIPLE CHECK THE SEAL.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|