File size: 8,064 Bytes
9e8c25d |
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 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etiquette | GroteskoGentleman</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap');
body {
font-family: 'Space Mono', monospace;
overflow-x: hidden;
}
.glitch-text {
font-family: 'Major Mono Display', monospace;
text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d;
animation: glitch 2s infinite alternate;
}
.neon-border {
border: 1px solid #00ff9d;
box-shadow: 0 0 10px #00ff9d, inset 0 0 10px #00ff9d;
}
.decay-card {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.decay-card:hover {
transform: translateY(-5px) rotate(1deg);
box-shadow: 0 10px 20px rgba(0, 255, 157, 0.2);
}
.glitch-effect {
position: relative;
}
.glitch-effect::before, .glitch-effect::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
.glitch-effect::before {
left: 2px;
text-shadow: -2px 0 #ff00c1;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch-effect::after {
left: -2px;
text-shadow: -2px 0 #00f9ff;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim2 5s infinite linear alternate-reverse;
}
</style>
</head>
<body class="bg-black text-gray-300 min-h-screen">
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
<header class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center">
<a href="/index.html" class="glitch-text text-4xl md:text-6xl" data-text="GROTESKOGENTLEMAN">GROTESKOGENTLEMAN</a>
<div class="flex gap-4">
<button id="theme-toggle" class="p-2 rounded-full neon-border">
<i data-feather="moon"></i>
</button>
<a href="/index.html" class="p-2 rounded-full neon-border hover:text-green-400 transition">
<i data-feather="home"></i>
</a>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<section class="mb-16">
<div class="neon-border rounded-lg p-8 backdrop-blur-sm bg-black bg-opacity-50">
<h2 class="glitch-effect text-3xl mb-6" data-text="The Decayed Code">The Decayed Code</h2>
<p class="mb-6">Modern etiquette for the digital gentleman in an age of corrosion</p>
</div>
</section>
<section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-green-400">01. The Rotting Handshake</h3>
<p class="text-sm">A gentleman's virtual greeting should glitch just enough to show character, but not so much as to cause discomfort.</p>
</div>
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-purple-400">02. Corrupted Correspondence</h3>
<p class="text-sm">Emails should degrade elegantly over time, with carefully curated typos and formatting errors.</p>
</div>
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-pink-400">03. Digital Decomposition</h3>
<p class="text-sm">One must allow their online presence to decay at a dignified pace, like fine wine turning to vinegar.</p>
</div>
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-blue-400">04. The Glitch Protocol</h3>
<p class="text-sm">When encountering system errors, a gentleman maintains composure and treats them as aesthetic features.</p>
</div>
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-yellow-400">05. Parasitic Politeness</h3>
<p class="text-sm">Hover states should ooze with charm, transforming in unexpected yet delightful ways.</p>
</div>
<div class="decay-card rounded-lg p-6 neon-border">
<h3 class="text-xl font-bold mb-4 text-red-400">06. Necro-Navigation</h3>
<p class="text-sm">Broken links should be treated as portals to serendipitous discovery rather than failures.</p>
</div>
</section>
<section class="neon-border rounded-lg p-8 mb-16 backdrop-blur-sm bg-black bg-opacity-50">
<h2 class="glitch-effect text-3xl mb-6" data-text="Submit Your Decay">Submit Your Decay</h2>
<p class="mb-6">Contribute to our growing archive of corrupted courtesy</p>
<form class="flex flex-col gap-6">
<input type="text" placeholder="Your name (optional)" class="bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400">
<textarea placeholder="Your etiquette suggestion..." rows="4" class="bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400"></textarea>
<button type="submit" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-lg hover:opacity-90 transition">Submit for Corruption</button>
</form>
</section>
</main>
<footer class="container mx-auto px-4 py-8 border-t border-gray-800">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-sm mb-4 md:mb-0">© 2023 GroteskoGentleman - Decay with dignity</p>
<div class="flex gap-4">
<a href="/index.html" class="text-gray-400 hover:text-green-400 transition"><i data-feather="home"></i></a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition"><i data-feather="github"></i></a>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x00ff9d,
backgroundColor: 0x0,
size: 0.8
});
// Theme toggle
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
themeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
const icon = themeToggle.querySelector('i');
if (html.classList.contains('dark')) {
feather.replace();
} else {
feather.replace();
}
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html> |