|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Molekül Buluşması - Kimya Kulübü</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3B82F6', |
|
|
secondary: '#1D4ED8', |
|
|
darkbg: '#0f172a', |
|
|
}, |
|
|
fontFamily: { |
|
|
poppins: ['Poppins', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<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"); |
|
|
} |
|
|
.floating { |
|
|
animation: floating 6s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</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="Chemistry Club Logo"> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="index.html" class="bg-blue-900 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="text-gray-300 hover:bg-blue-900 hover: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 relative overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white"> |
|
|
<span class="block">Validebağ Fen Lisesi</span> |
|
|
<span class="block text-blue-400">Kimya Kulübü</span> |
|
|
</h1> |
|
|
<p class="mt-6 mx-auto text-xl text-gray-300"> |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"> |
|
|
Curabitur faucibus |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center mt-10 md:mt-0"> |
|
|
<div class="rounded-full border-8 border-blue-900/30 p-2 bg-slate-800/50"> |
|
|
<img src="https://i.hizliresim.com/i0b4yd7.png" |
|
|
class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover" |
|
|
alt="Kimya Kulübü Logo"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-400 font-semibold tracking-wide uppercase">Departmanlarımız</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Uzmanlık Alanlarımız |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-blue-900/30 hover:border-blue-500 transition-colors"> |
|
|
<div class="mx-auto h-32 w-32 rounded-full bg-blue-900 flex items-center justify-center mb-4 overflow-hidden"> |
|
|
<img src="https://i.hizliresim.com/nq0lykd.png" class="h-full w-full object-cover" alt="IT"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 text-center">IT</h3> |
|
|
<div class="bg-slate-700/50 p-3 rounded-lg border border-slate-600"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-400">Personel:</span> |
|
|
<span class="text-blue-300">8</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mt-1"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-blue-900/30 hover:border-blue-500 transition-colors"> |
|
|
<div class="mx-auto h-32 w-32 rounded-full bg-blue-900 flex items-center justify-center mb-4 overflow-hidden"> |
|
|
<img src="https://i.hizliresim.com/7ypipbo.png" class="h-full w-full object-cover" alt="Finance"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 text-center">AKADEMİ VE FİNANS</h3> |
|
|
<div class="bg-slate-700/50 p-3 rounded-lg border border-slate-600"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-400">Personel:</span> |
|
|
<span class="text-blue-300">6</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mt-1"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-blue-900/30 hover:border-blue-500 transition-colors"> |
|
|
<div class="mx-auto h-32 w-32 rounded-full bg-blue-900 flex items-center justify-center mb-4 overflow-hidden"> |
|
|
<img src="https://i.hizliresim.com/qtjpsgi.png" class="h-full w-full object-cover" alt="PR"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 text-center">HALKLA İLİŞKİLER</h3> |
|
|
|
|
|
<div class="bg-slate-700/50 p-3 rounded-lg border border-slate-600"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-400">Personel:</span> |
|
|
<span class="text-blue-300">5</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mt-1"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-blue-900/30 hover:border-blue-500 transition-colors"> |
|
|
<div class="mx-auto h-32 w-32 rounded-full bg-blue-900 flex items-center justify-center mb-4 overflow-hidden"> |
|
|
<img src="https://i.hizliresim.com/dd1g9hz.png" class="h-full w-full object-cover" alt="Design"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 text-center">MEDYA VE TASARIM</h3> |
|
|
|
|
|
<div class="bg-slate-700/50 p-3 rounded-lg border border-slate-600"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-400">Personel:</span> |
|
|
<span class="text-blue-300">7</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mt-1"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-slate-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-base text-blue-400 font-semibold tracking-wide uppercase">Katılın</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Yaklaşan Deneyler |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-slate-800 rounded-2xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="https://www.astasorman.com/wp-content/uploads/2023/11/urun-gorseli-hazirlaniyor.jpeg" alt="Chemical reaction"> |
|
|
<div class="p-6"> |
|
|
<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</span> |
|
|
</div> |
|
|
<div class="mt-2 font-bold text-xl text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus odio tincidunt, tempus enim a, sagittis est. Quisque pulvinar lectus mi, vitae laoreet ex suscipit nec |
|
|
</p> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="px-3 py-1 bg-blue-900 text-blue-100 text-xs font-medium rounded-full">Başlangıç</span> |
|
|
<button class="text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Katıl <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-2xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="https://www.astasorman.com/wp-content/uploads/2023/11/urun-gorseli-hazirlaniyor.jpeg" alt="Microscope"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-xs text-blue-300"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>2 Haziran 2023</span> |
|
|
</div> |
|
|
<div class="mt-2 font-bold text-xl text-white">consectetur nulla orci, </div> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Pellentesque vulputate libero libero, et dignissim erat tempor sed. |
|
|
</p> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="px-3 py-1 bg-blue-900 text-blue-100 text-xs font-medium rounded-full">Orta Seviye</span> |
|
|
<button class="text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Sign up <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-2xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="https://www.astasorman.com/wp-content/uploads/2023/11/urun-gorseli-hazirlaniyor.jpeg" alt="Chemistry lab"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-xs text-blue-300"> |
|
|
<i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
|
|
<span>18 Haziran 2023</span> |
|
|
</div> |
|
|
<div class="mt-2 font-bold text-xl text-white">Suspendisse sodales est risus</div> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Nullam a lacus nisi. Nulla facilisi. Suspendisse sodales est risus, et finibus est dictum quis. |
|
|
</p> |
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<span class="px-3 py-1 bg-blue-900 text-blue-100 text-xs font-medium rounded-full">Tüm Seviyeler</span> |
|
|
<button class="text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Sign up <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</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 Klübü</h3> |
|
|
<p class="text-gray-400"> |
|
|
|
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-white mb-4">Hızlı Linkler</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400">Activities</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-blue-400">Magazine</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 Validebağ 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> |
