cffy.in/index.html

<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>cffyin | cffy.in</title><script src="https://cdn.tailwindcss.com"></script><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><style>.font-impact{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}.font-comic{font-family:"Comic Sans MS","Comic Sans",cursive}@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}</style><body class="antialiased"><nav class="bg-white/70 backdrop-blur-sm border-b-2 border-amber-800 p-3 sticky top-0 z-20"><div class="max-w-6xl mx-auto flex justify-between items-center font-impact text-amber-900"><a href="index.html"class="text-2xl font-black hover:text-amber-700 transition-colors">cffyin</a><div class="flex gap-6 text-lg items-center"><a href="index.html"class="hover:underline">Home</a> <a href="german.html"class="hover:underline">German Trainer</a> <a href="game.html"class="hover:underline">Hex-a-Row</a></div></div></nav><div class="min-h-screen bg-amber-50 relative overflow-hidden"><div style="background-image:radial-gradient(circle,#000 1px,transparent 1px);background-size:20px 20px"class="absolute inset-0 opacity-10"></div><div class="absolute top-20 left-10 text-6xl opacity-20 animate-bounce">☕</div><div class="absolute top-40 right-20 text-4xl opacity-20 animate-pulse">✨</div><div class="absolute bottom-40 left-20 text-5xl opacity-20 animate-bounce">🎨</div><div class="relative z-10"><section class="max-w-6xl mx-auto px-4 py-16"><div class="text-center space-y-8"><div class="space-y-4"><div class="inline-block"><h2 style="text-shadow:4px 4px 0 rgba(251,191,36,.5)"class="font-impact text-7xl md:text-8xl font-black text-amber-900 transform -rotate-2">CFFYIN</h2></div><div class="flex justify-center gap-3 text-5xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">✨</span> <span class="animate-bounce">🎨</span></div></div><div class="max-w-2xl mx-auto space-y-6"><p class="font-comic text-3xl font-bold text-amber-900">Welcome to the Playground<p class="text-xl text-gray-700 leading-relaxed font-medium">A collection of small, delightful web experiments where education meets fun meets art.<br><span class="text-amber-900 font-bold">No ads. No tracking. Just vibes.</span></div></div></section><div class="max-w-6xl mx-auto px-4 py-8"><div class="border-t-4 border-dashed border-amber-900 relative"><div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 bg-amber-50 px-4"><span class="text-3xl">☕</span></div></div></div><section class="max-w-6xl mx-auto px-4 py-12"><div class="text-center mb-12"><h3 class="font-impact text-5xl font-black text-amber-900 mb-4 inline-block">→ THE SITES ←</h3><p class="font-comic text-xl text-gray-700 font-bold">Pick your adventure!</div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="group"><a href="german.html"class="block bg-cyan-400 border-4 border-cyan-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform -rotate-1 group-hover:rotate-0 group-hover:scale-105"><div class="text-center"><div class="text-6xl mb-3">🇩🇪</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">Lern mit mir!</h4><p class="text-gray-800 font-bold text-lg">A simple, focused tool for drilling German vocabulary and grammar.</div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div></div></a></div><div class="group"><a href="game.html"class="block bg-lime-400 border-4 border-lime-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform rotate-1 group-hover:rotate-0 group-hover:scale-105"><div class="text-center"><div class="text-6xl mb-3">🎮</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">6-in-a-Line</h4><p class="text-gray-800 font-bold text-lg">A classic board game to play against a surprisingly clever AI. Good luck.</div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div></div></a></div><div class="group"><div class="bg-pink-400 border-4 border-pink-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform -rotate-1 opacity-70"><div class="text-center"><div class="text-6xl mb-3">🎨</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">Project C</h4><p class="text-gray-800 font-bold text-lg">Something new is brewing... Coming soon.</div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-yellow-300 border-yellow-700 text-yellow-900">COMING SOON</div></div></div></div></div></section><footer class="bg-gradient-to-r from-amber-900 to-orange-900 border-t-4 border-amber-950 mt-20"><div class="max-w-6xl mx-auto px-4 py-12"><div class="text-center space-y-8"><div class="flex justify-center gap-6 flex-wrap text-6xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">❤️</span> <span class="animate-bounce">✨</span></div><div class="space-y-4"><p class="text-lg text-amber-200 font-bold max-w-2xl mx-auto">Remember when the internet was fun? We do.<br>No tracking, no ads, no BS. Just pure, caffeinated creativity.</div><div class="pt-6 mt-4 border-t-2 border-amber-800"><p class="text-amber-200 text-sm font-mono">© 2025 cffy.in • Best viewed with coffee in hand ☕</div></div></div></footer></div></div>