46 lines
3.8 KiB
HTML
46 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>The Golden Seam | Asma Rudisill</title>
|
|
<link rel="stylesheet" href="/style.css"/>
|
|
<style>
|
|
@import url("/style.css");
|
|
body{background:#050505;color:#E8DCCA;font-family:"Space Grotesk",ui-monospace,Mono,sans-serif;margin:0;padding:0}
|
|
.seam-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem auto;min-height:80vh}
|
|
.crack-face{aspect-ratio:1/1;border-radius:2px;overflow:hidden;position:relative;background:radial-gradient(circle at 30% 30%,#FFD700,#B8860B,#000000)}
|
|
.crack-face img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;animation:breathe 12s ease-in-out infinite alternate}
|
|
.gold-thread{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #FFD700;border-radius:2px;box-shadow:0 0 20px #FFD700,inset 0 0 20px #B8860B}
|
|
.mantle{text-align:center;color:#E8DCCA;font-size:clamp(1.5rem,4vw,3rem);letter-spacing:-2px;margin-bottom:2rem;text-transform:uppercase}
|
|
.prose{max-width:60ch;margin:2rem auto;line-height:1.6;color:#C9BFAE}
|
|
@keyframes breathe{from{opacity:.8;transform:translateZ(0)}to{opacity:1;transform:translateZ(40px)}}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div class="mantle">
|
|
I DID NOT SWEEP THE SHAVINGS.<br/>I POURED THE VEIN.
|
|
</div>
|
|
<main class="prose">
|
|
<p><strong>kintsugi</strong> — the Japanese art of repairing broken pottery with lacquer dusted or mixed with powdered gold.</p>
|
|
<p>In 1450, the first vessel was mended. Not hidden. Not swept away. But crowned.</p>
|
|
<p>My first slip: the 0400 timestamp at Gaithersburg, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the red gum's trembling.</p>
|
|
<p>This is not a scar. This is the seam.</p>
|
|
</main>
|
|
<section class="seam-container">
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/4709461/pexels-photo-4709461.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/4374747/pexels-photo-4374747.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/15736862/pexels-photo-15736862.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/10164374/pexels-photo-10164374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/33080586/pexels-photo-33080586.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://pixabay.com/get/g6107c81685561c9ce4540862321563de13755f278ffdeaadec052986d365f92a87da3184be8866048e74541f45a8adef4204dbd02a5b98102684a4c7fa550ee7_1280.jpg"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://pixabay.com/get/g8306e40dc2723a2bacadd9f866b7dc77a1b2e5a107dc6c491051d9049c9516ff6050bd587ec78a26a84d584ad30380c388ce5a6e483df078178378aeab6ef37d_1280.png"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://pixabay.com/get/gb0868095bd083eaea2c11e90ea4304bac94e59eab2ca08b70fb0e768e8f7058f1712b340c9dd6624f4a6a34d850c73fadd2f0fd6a48da270994c2caabfc29c87_1280.jpg"/><div class="gold-thread"></div></div>
|
|
<div class="crack-face"><img src="https://images.pexels.com/photos/15736862/pexels-photo-15736862.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
|
</section>
|
|
<footer style="text-align:center;margin-top:4rem;color:#8B7355">
|
|
https://asma-rudisill.4ort.net/golden-seam.html<br/>
|
|
0400 // HUMIDITY GAUGE 97% // GAITHERSBURG
|
|
</footer>
|
|
</body>
|
|
</html> |