undefined / index.html
brtapardi's picture
Tasarım ve tema olarak Bilişim Teknolojileri / Yazılım Geliştirme - Ağ İşletmenliği - Elektrik-Elektronik Teknolojisi / Elektronik Haberleşme - Ulaştırma Hizmetleri / Sivil Havacılık Yer Hizmetleri bölümlerine uyumlu mesleki ve teknik Anadolu lisesine uyumlu bir tema olarak ayarla
d304c53 verified
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abdurrahman ve Nermin Bilimli Mesleki ve Teknik Anadolu Lisesi</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af',
secondary: '#f97316'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, rgba(18, 99, 185, 0.9) 0%, rgba(0, 30, 60, 0.9) 100%), url('http://static.photos/technology/1200x630/42');
background-size: cover;
background-position: center;
}
.section-bg {
background: rgba(255, 255, 255, 0.95);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.department-card {
transition: all 0.3s ease;
border-top: 4px solid;
}
.department-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.it-card { border-color: #3b82f6; }
.ee-card { border-color: #ef4444; }
.transport-card { border-color: #10b981; }
</style>
</head>
<body class="bg-gray-100 text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<img class="h-12 w-auto" src="https://anbilimli.meb.k12.tr/tema/tema/3/img/meb_logo.png" alt="MEB Logo">
<div class="ml-4 hidden md:block">
<div class="text-sm font-medium text-gray-900">T.C. MİLLÎ EĞİTİM BAKANLIĞI</div>
<div class="text-xs text-gray-500">İSTANBUL / BAĞCILAR</div>
</div>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-blue-700 hover:text-blue-500 font-medium">Okulumuz</a>
<a href="#" class="text-blue-700 hover:text-blue-500 font-medium">Bölümler</a>
<a href="#" class="text-blue-700 hover:text-blue-500 font-medium">Projeler</a>
<a href="#" class="text-blue-700 hover:text-blue-500 font-medium">Haberler</a>
<a href="#" class="text-blue-700 hover:text-blue-500 font-medium">İletişim</a>
</div>
<div class="flex items-center md:hidden">
<button id="mobile-menu-button" class="text-gray-500 hover:text-gray-700">
<i data-feather="menu" class="h-6 w-6"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 hover:bg-blue-50">Okulumuz</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 hover:bg-blue-50">Bölümler</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 hover:bg-blue-50">Projeler</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 hover:bg-blue-50">Haberler</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 hover:bg-blue-50">İletişim</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-bg relative overflow-hidden">
<div class="absolute inset-0 z-0" id="globe-background"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-36">
<div class="text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight">
Abdurrahman ve Nermin Bilimli<br>Mesleki ve Teknik Anadolu Lisesi
</h1>
<p class="mt-6 text-xl text-blue-100 max-w-3xl mx-auto">
Geleceğin teknoloji liderlerini yetiştiren öncü eğitim kurumumuz
</p>
<div class="mt-10 flex justify-center gap-4">
<a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-800 bg-white hover:bg-blue-50 md:py-4 md:text-lg md:px-10 transition duration-300">
Okulumuzu Tanı
</a>
<a href="#" class="px-8 py-3 border border-white text-base font-medium rounded-md text-white bg-transparent hover:bg-white hover:text-blue-800 md:py-4 md:text-lg md:px-10 transition duration-300">
Bölümlerimiz
</a>
</div>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="section-bg py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-primary">27</div>
<div class="mt-2 text-gray-600">Derslik</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-primary">69</div>
<div class="mt-2 text-gray-600">Öğretmen</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-primary">1045</div>
<div class="mt-2 text-gray-600">Öğrenci</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-primary">15+</div>
<div class="mt-2 text-gray-600">Proje</div>
</div>
</div>
</div>
</div>
<!-- Departments Section -->
<div class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Bölümlerimiz
</h2>
<p class="mt-4 text-xl text-gray-500">
Geleceğinizi şekillendirecek alanlar
</p>
</div>
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Department Card 1 -->
<div class="department-card it-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
<i data-feather="code" class="h-8 w-8 text-blue-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-900">Bilişim Teknolojileri</h3>
<p class="mt-1 text-sm text-gray-500">Yazılım & Ağ</p>
</div>
</div>
<p class="mt-4 text-base text-gray-600">
Yazılım geliştirme, ağ sistemleri ve dijital çözümler alanında uzmanlaşın.
</p>
<div class="mt-6">
<a href="#" class="text-blue-600 font-medium hover:text-blue-800">
Detaylar →
</a>
</div>
</div>
</div>
<!-- Department Card 2 -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-orange-100 rounded-lg p-3">
<i data-feather="cpu" class="h-8 w-8 text-secondary"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Elektrik-Elektronik</h3>
<p class="mt-1 text-sm text-gray-500">Haberleşme Teknolojileri</p>
</div>
</div>
<p class="mt-4 text-base text-gray-500">
Modern elektronik sistemler ve haberleşme teknolojilerinde uzmanlaşın.
</p>
<div class="mt-6">
<a href="#" class="text-primary font-medium hover:text-secondary">
Detaylar →
</a>
</div>
</div>
</div>
<!-- Department Card 3 -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
<i data-feather="navigation" class="h-8 w-8 text-green-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Ulaştırma Hizmetleri</h3>
<p class="mt-1 text-sm text-gray-500">Sivil Havacılık</p>
</div>
</div>
<p class="mt-4 text-base text-gray-500">
Havacılık sektöründe kariyer yapmak isteyenler için özel eğitim programları.
</p>
<div class="mt-6">
<a href="#" class="text-primary font-medium hover:text-secondary">
Detaylar →
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- News & Announcements -->
<div class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Son Haberler & Duyurular
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Okulumuzdan güncel bilgiler
</p>
</div>
<div class="mt-16 grid gap-8 md:grid-cols-2">
<!-- News Section -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">Haberler</h3>
<div class="mt-4 space-y-4">
<div class="flex items-start">
<img class="h-16 w-16 rounded-lg object-cover" src="https://anbilimli.meb.k12.tr/meb_iys_dosyalar/34/27/382077/resimler/2025_10/k_06212230_ekrangoruntusu20251006212209.jpg" alt="">
<div class="ml-4">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Gazze'de Çocuk Olmak</a>
<p class="mt-1 text-sm text-gray-500">Uluslararası farkındalık projesi başlatıldı</p>
</div>
</div>
<div class="flex items-start">
<img class="h-16 w-16 rounded-lg object-cover" src="https://anbilimli.meb.k12.tr/www/images/mansetresim.png" alt="">
<div class="ml-4">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Sorumluluk Sınav Programı</a>
<p class="mt-1 text-sm text-gray-500">Haziran dönemi sınav programı açıklandı</p>
</div>
</div>
<div class="flex items-start">
<img class="h-16 w-16 rounded-lg object-cover" src="https://anbilimli.meb.k12.tr/www/images/mansetresim.png" alt="">
<div class="ml-4">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Kıyafet Teslimatı</a>
<p class="mt-1 text-sm text-gray-500">9. sınıf öğrencileri için önemli duyuru</p>
</div>
</div>
</div>
<div class="mt-6">
<a href="#" class="text-primary font-medium hover:text-secondary">
Tüm haberler →
</a>
</div>
</div>
</div>
<!-- Announcements Section -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">Duyurular</h3>
<div class="mt-4 space-y-4">
<div class="border-l-4 border-primary pl-4 py-1">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Bina Güçlendirme Çalışması</a>
<p class="mt-1 text-sm text-gray-500">Deprem güvenliği için alınan önlemler</p>
</div>
<div class="border-l-4 border-secondary pl-4 py-1">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Mezun Öğrencilerimize Dikkat!</a>
<p class="mt-1 text-sm text-gray-500">Diploma teslim işlemleri hakkında bilgi</p>
</div>
<div class="border-l-4 border-green-500 pl-4 py-1">
<a href="#" class="font-medium text-gray-900 hover:text-primary">Online Randevu Sistemi</a>
<p class="mt-1 text-sm text-gray-500">Kayıt işlemleri için randevu almayı unutmayın</p>
</div>
</div>
<div class="mt-6">
<a href="#" class="text-primary font-medium hover:text-secondary">
Tüm duyurular →
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<div class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Projelerimiz
</h2>
<p class="mt-4 text-xl text-gray-500">
Öğrencilerimizin katıldığı ulusal ve uluslararası projeler
</p>
</div>
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Project 1 -->
<div class="card-hover bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 transition duration-300">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
<i data-feather="globe" class="h-6 w-6 text-primary"></i>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Hezarfen Projesi</h3>
</div>
<p class="mt-4 text-gray-600">
Uzay ve havacılık teknolojileri üzerine öğrencilerimizin geliştirdiği yenilikçi projeler.
</p>
</div>
<!-- Project 2 -->
<div class="card-hover bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-6 transition duration-300">
<div class="flex items-center">
<div class="flex-shrink-0 bg-orange-100 rounded-lg p-3">
<i data-feather="book-open" class="h-6 w-6 text-secondary"></i>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Yaşın Kadar Oku</h3>
</div>
<p class="mt-4 text-gray-600">
Okuma alışkanlıklarını teşvik eden sosyal sorumluluk projesi.
</p>
</div>
<!-- Project 3 -->
<div class="card-hover bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 transition duration-300">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-lg p-3">
<i data-feather="users" class="h-6 w-6 text-green-600"></i>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">ÇEDES Projesi</h3>
</div>
<p class="mt-4 text-gray-600">
Çocukların eğitsel destek sağlanması amacıyla yürütülen sosyal yardım projesi.
</p>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Bizimle İletişime Geçin
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Sorularınız için bizimle iletişime geçebilirsiniz
</p>
</div>
<div class="mt-16 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-900">İletişim Bilgileri</h3>
<div class="mt-6 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="map-pin" class="h-6 w-6 text-primary"></i>
</div>
<p class="ml-3 text-gray-600">
Barbaros Mahallesi 205. Sokak No 11<br>
Bağcılar / İSTANBUL
</p>
</div>
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="phone" class="h-6 w-6 text-primary"></i>
</div>
<p class="ml-3 text-gray-600">(0212) 655 88 40</p>
</div>
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="mail" class="h-6 w-6 text-primary"></i>
</div>
<p class="ml-3 text-gray-600">eposta@anbilimli.meb.k12.tr</p>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-medium text-gray-900">Hızlı Erişim</h4>
<div class="mt-4 grid grid-cols-2 gap-4">
<a href="#" class="flex items-center text-primary hover:text-secondary">
<i data-feather="external-link" class="h-4 w-4 mr-2"></i>
MEBBİS
</a>
<a href="#" class="flex items-center text-primary hover:text-secondary">
<i data-feather="external-link" class="h-4 w-4 mr-2"></i>
e-Okul
</a>
<a href="#" class="flex items-center text-primary hover:text-secondary">
<i data-feather="external-link" class="h-4 w-4 mr-2"></i>
Veli Bilgilendirme
</a>
<a href="#" class="flex items-center text-primary hover:text-secondary">
<i data-feather="external-link" class="h-4 w-4 mr-2"></i>
Okuldan Randevu
</a>
</div>
</div>
</div>
<div class="bg-gray-100 p-8">
<h3 class="text-2xl font-bold text-gray-900">Mesaj Gönderin</h3>
<form class="mt-6 space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Adınız</label>
<input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-primary focus:border-primary">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">E-posta</label>
<input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-primary focus:border-primary">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Mesajınız</label>
<textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-primary focus:border-primary"></textarea>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
Mesaj Gönder
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white">
<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-4 gap-8">
<div>
<h3 class="text-lg font-semibold">Okulumuz</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Müdürümüz</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Kadromuz</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Tarihçe</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Misyon-Vizyon</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold">Alanlarımız</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Bilişim Teknolojileri</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Elektrik-Elektronik</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Ulaştırma Hizmetleri</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Diğer Alanlar</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold">Projeler</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">Hezarfen Projesi</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">ÇEDES Projesi</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Yaşın Kadar Oku</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Tüm Projeler</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold">Bağlantılar</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white">MEB</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">e-Okul</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">MEBBİS</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Tüm Bağlantılar</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center">
<img class="h-10 w-auto" src="https://anbilimli.meb.k12.tr/tema/tema/3/img/meb_logo.png" alt="MEB Logo">
<div class="ml-4">
<p class="text-sm text-gray-300">T.C. MİLLÎ EĞİTİM BAKANLIĞI</p>
<p class="text-sm text-gray-300">İSTANBUL / BAĞCILAR</p>
</div>
</div>
<div class="mt-4 md:mt-0">
<p class="text-sm text-gray-300">© 2025 Abdurrahman ve Nermin Bilimli Mesleki ve Teknik Anadolu Lisesi. Tüm hakları saklıdır.</p>
</div>
</div>
</div>
</footer>
<script>
// Initialize Feather Icons
feather.replace();
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Initialize Vanta.js
VANTA.GLOBE({
el: "#globe-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x1e40af,
color2: 0xf97316,
backgroundColor: 0x0
});
</script>
</body>
</html>