Hugging Face's logo

Spaces:
hmalikdemirbacak
/
molecule-mingle-madness
Running

App Files Community
molecule-mingle-madness / index.html
hmalikdemirbacak's picture
hmalikdemirbacak
departmanlarımz kısımında departmanların altında personel sayısı ve departman başkanları yazsın çerçeveli modern şekilde
1bcf82b verified
raw
history blame
18.4 kB
 <!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">
<!-- Navbar -->
<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>
<!-- Hero Section -->
<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-left">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">
<span class="block">Molekül Buluşması</span>
<span class="block text-blue-400">Kimya Kulübü</span>
</h1>
<p class="mt-6 max-w-lg text-xl text-gray-300">
"Maddenin sırlarını birlikte çözüyoruz"
</p>
<div class="mt-10">
<div class="rounded-md shadow inline-block">
<a href="#" class="w-full 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">
Deneylerimize Katıl
</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>
<!-- Departments -->
<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">
<!-- IT Department -->
<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>
<p class="text-gray-300 text-center mb-4">Teknoloji ve yazılım altyapımızı yöneten departman</p>
<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">
<span class="text-gray-400">Başkan:</span>
<span class="text-blue-300">Ahmet Yılmaz</span>
</div>
</div>
</div>
<!-- Academy & Finance -->
<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>
<p class="text-gray-300 text-center mb-4">Akademik çalışmalar ve finansal yönetim</p>
<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">
<span class="text-gray-400">Başkan:</span>
<span class="text-blue-300">Elif Demir</span>
</div>
</div>
</div>
<!-- Public Relations -->
<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>
<p class="text-gray-300 text-center mb-4">İletişim ve organizasyon yönetimi</p>
<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">
<span class="text-gray-400">Başkan:</span>
<span class="text-blue-300">Mehmet Kaya</span>
</div>
</div>
</div>
<!-- Media & Design -->
<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>
<p class="text-gray-300 text-center mb-4">Görsel ve dijital içerik üretimi</p>
<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">
<span class="text-gray-400">Başkan:</span>
<span class="text-blue-300">Zeynep Aydın</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<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">
<!-- Event 1 -->
<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="http://static.photos/science/640x360/1" 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">Renkli Reaksiyonlar</div>
<p class="mt-2 text-gray-300 text-sm">
Canlı renk değişimleri üreten kimyasal reaksiyonların büyüleyici dünyasını keşfedin.
</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>
<!-- Event 2 -->
<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="http://static.photos/science/640x360/2" 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">Kristal Büyütme</div>
<p class="mt-2 text-gray-300 text-sm">
Güzel kristaller yetiştirmeyi ve moleküler yapılarını anlamayı öğrenin.
</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>
<!-- Event 3 -->
<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="http://static.photos/science/640x360/3" 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">pH Göstergeleri</div>
<p class="mt-2 text-gray-300 text-sm">
Günlük maddelerden doğal pH göstergelerini keşfedin ve özelliklerini test edin.
</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 -->
<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">Molekül Buluşması</h3>
<p class="text-gray-400">
Kimyanın harikalarını deneyler, araştırmalar ve işbirliği ile keşfediyoruz.
</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="#" class="text-gray-400 hover:text-blue-400">
<i data-feather="instagram" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400">
<i data-feather="facebook" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400">
<i data-feather="mail" class="w-5 h-5"></i>
</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">
&copy; 2023 Molekül Buluşması Kimya Kulübü. Tüm hakları saklıdır.
</p>
</div>
</div>
</footer>
<script>
feather.replace();
// Theme toggle
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>