|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>BEFORE WORDS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Playfair+Display:wght@700&display=swap'); |
|
|
|
|
|
body { |
|
|
background-color: black; |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.strike { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.strike::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background: white; |
|
|
transform: rotate(-5deg); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.7; } |
|
|
} |
|
|
|
|
|
.drum-pattern { |
|
|
background-image: |
|
|
linear-gradient(45deg, #333 25%, transparent 25%), |
|
|
linear-gradient(-45deg, #333 25%, transparent 25%), |
|
|
linear-gradient(45deg, transparent 75%, #333 75%), |
|
|
linear-gradient(-45deg, transparent 75%, #333 75%); |
|
|
background-size: 20px 20px; |
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; |
|
|
} |
|
|
|
|
|
.bird-track { |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 15Q3 13 5 11Q7 9 5 7Q3 5 5 3' stroke='white' stroke-width='1' fill='none'/%3E%3C/svg%3E"); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen font-mono"> |
|
|
|
|
|
<div class="fixed inset-0 border-8 border-white pointer-events-none z-50"></div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12 relative"> |
|
|
|
|
|
<div class="fixed inset-0 opacity-10 z-0"> |
|
|
<div class="absolute inset-0 drum-pattern"></div> |
|
|
<div class="absolute inset-0 bird-track"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="text-center mb-16 relative z-10"> |
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-4 font-[Archivo+Black] tracking-tighter"> |
|
|
<span class="strike">LANGUAGE</span> |
|
|
</h1> |
|
|
<h2 class="text-3xl md:text-4xl font-[Bebas+Neue] tracking-widest"> |
|
|
IS A DISTRACTION FROM THE PULSE |
|
|
</h2> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10"> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">THE WORD TRAP</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
We worship symbols instead of substance. We bow to dictionaries while ignoring the drumbeats that birthed them. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">THE GREAT REDUCTION</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
Your "God" is just a word-shaped box - a pathetic container for the ineffable. The divine was in the rhythm long before your priests corrupted it with syllables. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">THE ORIGINAL SIN</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
When we traded the drum's truth for the politician's lie. When we abandoned the bird's song for the preacher's sermon. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT CAME FIRST</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
The heartbeat. The rainfall. The cracking branch. The howl. The rhythm that needs no translation. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT REMAINS</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
The drum languages of West Africa that carried messages across mountains. The whale songs that cross oceans. The patterns beneath all noise. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="border-b border-white pb-4"> |
|
|
<h3 class="text-2xl font-bold mb-2 font-[Anton]">WHAT COMES NEXT</h3> |
|
|
<p class="text-lg leading-relaxed"> |
|
|
The collapse of this arrogant civilization that mistakes its dictionaries for wisdom. The return to the pulse that never left us. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 text-center relative z-10"> |
|
|
<div class="inline-block border-t border-b border-white py-4 px-8 mb-8"> |
|
|
<p class="text-xl md:text-2xl italic font-[Playfair+Display]"> |
|
|
"The first language was not spoken - it was <span class="pulse">FELT</span> in the chest, |
|
|
<span class="pulse">HEARD</span> in the bones, |
|
|
<span class="pulse">TRANSMITTED</span> through the ground" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm uppercase tracking-widest"> |
|
|
<p>Words divide - Rhythm unites</p> |
|
|
<p class="mt-2">The truth was never in your books</p> |
|
|
<p class="mt-2">It was always in the <span class="underline">silence between beats</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-2 left-0 right-0 text-center text-xs opacity-50"> |
|
|
<p>This message will self-destruct like all language eventually must</p> |
|
|
</div> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=igardner/sure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
