File size: 7,371 Bytes
cc01dd2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<!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">
<!-- Page border -->
<div class="fixed inset-0 border-8 border-white pointer-events-none z-50"></div>
<!-- Main poster -->
<div class="container mx-auto px-4 py-12 relative">
<!-- Background patterns -->
<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 -->
<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>
<!-- Main content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
<!-- Left column - The Lie -->
<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>
<!-- Right column - The Truth -->
<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>
<!-- Footer manifesto -->
<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>
<!-- Small print -->
<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> |