|
|
<!DOCTYPE html> |
|
|
<html lang="tr" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Etkinlikler - Molekül Buluşması</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
.molecule-bg { |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233B82F6' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
|
|
} |
|
|
</style> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3B82F6', |
|
|
secondary: '#1D4ED8', |
|
|
darkbg: '#0f172a', |
|
|
}, |
|
|
fontFamily: { |
|
|
poppins: ['Poppins', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-darkbg text-gray-100 font-poppins min-h-screen"> |
|
|
|
|
|
<nav class="bg-slate-900 border-b border-blue-900/50 sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full border-4 border-slate-900 -mt-2" src="https://i.hizliresim.com/i0b4yd7.png" alt="Kimya Kulübü Logo"> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="index.html" class="text-gray-300 hover:bg-blue-900 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Ana Sayfa</a> |
|
|
<a href="blog.html" class="text-gray-300 hover:bg-blue-900 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Blog</a> |
|
|
<a href="activities.html" class="bg-blue-900 text-white px-3 py-2 rounded-md text-sm font-medium">Etkinlikler</a> |
|
|
<a href="magazine.html" class="text-gray-300 hover:bg-blue-900 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dergi</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-blue-900"> |
|
|
<i data-feather="moon" class="w-5 h-5 text-blue-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="molecule-bg py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white">Etkinlikler ve Deneyler</h1> |
|
|
<p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Pellentesque vulputate libero libero, et dignissim erat tempor sed. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-slate-800/50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 gap-8"> |
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center text-xs text-blue-300"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>15 Mayıs 2023, 14:00</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Pellentesque vulputate libero</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Pellentesque vulputate libero libero, et dignissim erat tempor sed. |
|
|
</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-400"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i> |
|
|
<span>Kimya Laboratuvarı</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 md:ml-4"> |
|
|
<button class="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium"> |
|
|
Katıl |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center text-xs text-blue-300"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>22 Mayıs 2023, 15:30</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Pellentesque vulputate libero</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Pellentesque vulputate libero libero, et dignissim erat tempor sed. |
|
|
</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-400"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i> |
|
|
<span>Kimya Laboratuvarı</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 md:ml-4"> |
|
|
<button class="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium"> |
|
|
Katıl |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center text-xs text-blue-300"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>5 Haziran 2023, 13:00</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Pellentesque vulputate libero</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Pellentesque vulputate libero libero, et dignissim erat tempor sed. |
|
|
</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-400"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i> |
|
|
<span>Konferans Salonu</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 md:ml-4"> |
|
|
<button class="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium"> |
|
|
Katıl |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-slate-900 border-t border-blue-900/50"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Validebağ Fen Lisesi Kimya Kulübü</h3> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Hızlı Linkler</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="index.html" class="text-gray-400 hover:text-blue-400">Ana Sayfa</a></li> |
|
|
<li><a href="blog.html" class="text-gray-400 hover:text-blue-400">Blog</a></li> |
|
|
<li><a href="activities.html" class="text-gray-400 hover:text-blue-400">Etkinlikler</a></li> |
|
|
<li><a href="magazine.html" class="text-gray-400 hover:text-blue-400">Dergi</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Bağlantı</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://www.instagram.com/vflkimya/" class="text-gray-400 hover:text-blue-400"> |
|
|
<i data-feather="instagram" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 pt-8 border-t border-blue-900/20 text-center"> |
|
|
<p class="text-xs text-gray-500"> |
|
|
© 2025 Valideğ Fen Lisesi Kimya Klübü |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
const icon = themeToggle.querySelector('i'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
icon.setAttribute('data-feather', 'moon'); |
|
|
} else { |
|
|
icon.setAttribute('data-feather', 'sun'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
