|
|
<!DOCTYPE html> |
|
|
<html lang="tr" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Blog - 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> |
|
|
</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://img.icons8.com/ios/50/3B82F6/test-tube.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="bg-blue-900 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 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">Bilimsel Blog</h1> |
|
|
<p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Kimya dünyasındaki en son gelişmeler, deneyler ve keşifler hakkında yazılar |
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="http://static.photos/science/640x360/4" alt="Kimyasal reaksiyon"> |
|
|
<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>10 Mayıs 2023</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Sıvı Azot Deneyleri</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Sıvı azotla yapılan etkileyici deneyler ve dikkat edilmesi gereken güvenlik önlemleri. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-block text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Devamını Oku <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="http://static.photos/science/640x360/5" alt="Elektrokimya"> |
|
|
<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>22 Nisan 2023</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Elektrokimyasal Hücreler</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Elektrokimyasal hücrelerin temel prensipleri ve günlük hayattaki uygulamaları. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-block text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Devamını Oku <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800 rounded-xl overflow-hidden shadow-lg border border-blue-900/30"> |
|
|
<img class="w-full h-48 object-cover" src="http://static.photos/science/640x360/6" alt="Organik kimya"> |
|
|
<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>5 Nisan 2023</span> |
|
|
</div> |
|
|
<h2 class="mt-2 font-bold text-xl text-white">Organik Bileşiklerin Sentezi</h2> |
|
|
<p class="mt-2 text-gray-300 text-sm"> |
|
|
Temel organik bileşiklerin laboratuvar ortamında sentezlenme yöntemleri. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-block text-blue-400 hover:text-blue-300 text-sm font-medium"> |
|
|
Devamını Oku <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</a> |
|
|
</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">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="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="#" 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"> |
|
|
© 2023 Molekül Buluşması Kimya Kulübü. Tüm hakları saklıdır. |
|
|
</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> |
