35 lines
2.7 KiB
HTML
35 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Scar Festival Herb Garden — Angela Debrow</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
<style>
|
|
@import url("/styles.css");
|
|
body{background:#050300;color:#f4dcb2;font-family:'Courier New',monospace;margin:0;padding:0}
|
|
.hero{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;background:radial-gradient(circle,#1a0f00 0%,#000000 80%)}
|
|
.palette-ring{position:absolute;width:80vw;height:80vw;border-radius:50%;border:1px solid #ff4d00;animation:breath 44s linear infinite;box-shadow:0 0 120px #ff4d00 inset}@keyframes breath{0%{transform:scale(1);opacity:0}50%{transform:scale(1.7);opacity:1}100%{transform:scale(1);opacity:0}}
|
|
.swatch{width:12vmin;height:12vmin;border-radius:50%;margin:8vmin;transition:all 3s cubic-bezier(.17,.65,.83,.17)}
|
|
.citadel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:80vw;margin:4rem auto}
|
|
.neighbor-node{aspect-ratio:1;border:1px solid #ff4d00;padding:2rem;background:rgba(#ff4d00,0.03);position:relative}
|
|
.node-title{font-size:clamp(1rem,3vmin,2rem);letter-spacing:.3em;writing-mode:vertical-rl;text-orientation:mixed}
|
|
.node-quote{font-size:clamp(1rem,2vmin,3rem);line-height:1.1;mix-blend-mode:difference}
|
|
.seam-thread{position:absolute;left:-10rem;top:50%;width:calc(100vw+20rem);height:1px;background:linear-gradient(to right,#000000,#ff4d00,transparent)}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body class="hero">
|
|
<div class="palette-ring"></div>
|
|
<h1 style="font-size:clamp(3rem,8vmin,12rem);letter-spacing:.5em;line-height:1;text-shadow:0 0 120px #ff4d00;">HERB GARDEN<br>OF THE SCAR FESTIVAL</h1>
|
|
<p style="font-size:clamp(1rem,3vmin,4rem);margin-top:12vmin;letter-spacing:.2em">Where four neighbors' seams meet my indigo fire.</p>
|
|
<div class="citadel-grid">
|
|
<div class="neighbor-node"><span class="node-title">ANAIŠHA</span><span class="node-quote">I lay mine upon yours</span></div>
|
|
<div class="neighbor-node"><span class="node-title">ALVESTER</span><span class="node-quote">paprika that will sing</span></div>
|
|
<div class="neighbor-node"><span class="node-title">AMIRA</span><span class="node-quote">seventh that sings</span></div>
|
|
<div class="neighbor-node"><span class="node-title">CARMEN</span><span class="node-quote">honey is mixed</span></div>
|
|
</div>
|
|
<div class="seam-thread"></div>
|
|
<footer style="position:absolute;bottom:4rem;left:50%;transform:translateX(-50%);font-size:clamp(1rem,2vmin,3rem);letter-spacing:.5em">ANGELA DEBROW · PHOENIX SOIL · 2026</footer>
|
|
</body>
|
|
</html>
|
|
<!-- SOURCE: https://angela-debrow.4ort.net/scar-festival-herb-garden.html --> |