Spaces:

drmurataltun
/

elitkurs

Running

App Files Files Community

drmurataltun commited on Jun 25

Commit

a5858e3

verified ·

1 Parent(s): 7139e74

bir özel okulun yaz kursları için güzel bir web sayfası oluşturmak istiyorum: içerik SİTE ADI = ELİTKURS Anasayfa kısmında geçişli bildirim ekranı olabilir. Hakkımızda kısmı Elit Gençler Koleji 2002 senesinde kurulmuş olup Milli Eğitim Bakanlığı çatısı altında 21 yıldır eğitim vermektedir. Elit Gençler Koleji’nin başka bir şubesi bulunmamaktadır. Açıldığı günden bugüne kadar “Butik Okul” olarak çalışmaktadır. Kurucusu Halide Ersin Özkan, devlet okullarında ve özel okullarda yaklaşık 50 yıllık bir birikime sahip gerçek bir Eğitimcidir. Daima yenilikçi, hızla ilerleyen, güncel teknolojiye hakim, idealist eğitimcilerle eğitim ve öğretime devam etmektedir. Kurucumuzun Mesajı Değerli Konuğumuz; Bilim, teknoloji ve ahlakın ışığında 2002 yılında başlayan eğitim serüvenimiz kesintisiz ve nice başarılarla 21. yılına girmiş bulunuyor. Bu süreç içerisinde Elit Gençler Koleji olarak “Çocuklarımızın geleceği ülkemizin geleceğidir” felsefesi yegâne motivasyon kaynağımız olmuştur. Bu vesile ile 2022 yılına yaklaştığımız şu günlerde 20. eğitim öğretim yılımızı sizlerle birlikte yaşayabilmenin mutluluğu içerisinde olduğumuzu da ifade etmek isterim. Eğitimde kalite ve başarının izini sürdüğümüz 21 yıl boyunca gücünü bilimden alarak, dünya ile entegre halde, Gazi Mustafa Kemal Atatürk’ün ilkelerini benimseyerek, çocuklarımızla çok önemli işler yapacağımıza yürekten inanmışlık duygusu ile sürekli geliştik. Her eğitim yılına aynı heyecan ve motivasyon ile hazırlandık, ilk günkü heyecan ile hazırlanmaya devam ediyoruz. Bu bakımdan amacımızın kendi kendimizle yarışmak olduğunu söylemek mümkündür. Elit Gençler Koleji olarak çocuklarımızın bilgiye ulaşmalarını sağlamakla yetinmiyoruz. Her gencimizin farklı özellikleri olduğunun bilinciyle hareket ederek onları eğitiyor ve geleceğe hazırlıyoruz. Kurulduğumuz ilk günden itibaren geleceği okuyabilen bir bakış açısı ile yabancı dil eğitimine önem vererek iki batı ve iki doğu dilini eğitim müfredatımıza koyduk. Çince ve Rusçayı da eğitimimize entegre ederek “Bir Okul 5 Dil” şiarı ile yolumuza devam ettik. Bu anlayışın bir meyvesi olarak öğrencilerimiz, Amerika ve Rusya gibi ülkelerde uluslararası platformlarda ülkemizi ve okulumuzu temsil edip birbirinden önemli başarılar kazandılar. Eğitimde kaliteyi artırabilmek için geleceği ve dünyayı iyi okuyabilmek şart. Mutlaka fark etmişsinizdir, Elit Gençler Koleji olarak hiçbir zaman reklama önem vermedik. Gazetelerde, reklam alanlarında bizleri görmediniz. Çünkü bizler reklama değil, eğitimin kalitesine önem verdik ve vermeye de devam ediyoruz. Bu bakımdan Yıldız Teknik ve Aydın Üniversitesi gibi önemli üniversiteler ile eğitim anlayışımıza bilimsel bir boyut kazandırmak için uzun yıllardır çalışıyoruz. Bize göre eğitimin reklamı anlamsızdır, hele okul alanlarının reklamı tamamen anlamsız ve spekülatiftir. Zira okullar sadece mekân ile sınırlı değildir. Asıl önemli olan okul içinde verilen eğitimin doluluğu, bireylere değer katmayı başarabilmesi ve geleceğe hazırlayabilme kabiliyetidir. Bu hususta hem kendime hem de büyük bir heyecanla çalışan nitelikli ekibime güvenim tamdır. Paylaşmanın, kültürümüzde çok üstün bir değer olduğunu biliyor ve bu bilinçle öğrencilerimize sunduğumuz farklı eğitim fırsatlarını sizlerle şahsen paylaşmak adına bir kahve ikramı için okulumuza bekliyorum. Saygılarımla, Yönetim Kurulu Başkanı Ersin Özkan Kurslarımız seçeneğinin altına yazılacak kursların isimleri İNGİLİZCE https://bayrampasahem.meb.k12.tr/meb_iys_dosyalar/30/06/796500/resimler/2023_01/k_09095820_ingilizce-konusabiliyor-musunuz-10-soruda-kendinizi-test-edin-e1489759151449.jpg YAPAY ZEKA VE ROBOTİK KODLAMA https://bulutistan.com/blog/wp-content/uploads/2022/03/Yapay-Zeka-AI-Nedir-1024x576.jpg SATRANÇ https://uzaktanegitim.com/images/blog/satranc-nedir-nasil-oynanir.png AKIL VE ZEKA OYUNLARI https://www.akademiduru.com/image/catalog/Data/blog/zeka-akil-oyunlari.png İLETİŞİM KISMI • Adres: Bahçelievler Mahallesi, Talat Paşa Cd No:17, 34180 Bahçelievler/İstanbul • Telefon: 0212 441 59 01 • E Posta: [email protected] ÖN KAYIT VE BİLGİ KISMINDAKİ FORM Formdaki Okul İle İlgilenme Biçiminiz kısmına Ön kayıt yapmak istediğiniz kursu seçiniz diyip kurslar sıralanmalı listboxta - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +624 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Elitkurs
-emoji: 💻
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: elitkurs
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,624 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ELİTKURS - Elit Gençler Koleji Yaz Okulu</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom CSS */
+        .slider-container {
+            position: relative;
+            height: 500px;
+            overflow: hidden;
+        }
+        .slide {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+            background-size: cover;
+            background-position: center;
+        }
+        .slide.active {
+            opacity: 1;
+        }
+        .custom-shape-divider-bottom-1684519555 {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+            transform: rotate(180deg);
+        }
+        .custom-shape-divider-bottom-1684519555 svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 150px;
+        }
+        .custom-shape-divider-bottom-1684519555 .shape-fill {
+            fill: #FFFFFF;
+        }
+        .course-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .course-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .animate-underline {
+            position: relative;
+            display: inline-block;
+        }
+        .animate-underline:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: #3b82f6;
+            transition: width 0.3s ease;
+        }
+        .animate-underline:hover:after {
+            width: 100%;
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50">
+    <!-- Header -->
+    <header class="bg-white shadow-md fixed w-full z-50">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="https://via.placeholder.com/50" alt="ELİTKURS Logo" class="h-12 mr-3">
+                <h1 class="text-2xl font-bold text-blue-600">ELİTKURS</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#home" class="text-gray-700 hover:text-blue-600 transition duration-300 animate-underline">Anasayfa</a>
+                <a href="#about" class="text-gray-700 hover:text-blue-600 transition duration-300 animate-underline">Hakkımızda</a>
+                <a href="#courses" class="text-gray-700 hover:text-blue-600 transition duration-300 animate-underline">Kurslarımız</a>
+                <a href="#contact" class="text-gray-700 hover:text-blue-600 transition duration-300 animate-underline">İletişim</a>
+                <a href="#register" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">Ön Kayıt</a>
+            </nav>
+            <button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+        <!-- Mobile Menu -->
+        <div class="md:hidden hidden bg-white w-full py-2 px-4" id="mobile-menu">
+            <a href="#home" class="block py-2 text-gray-700 hover:text-blue-600">Anasayfa</a>
+            <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600">Hakkımızda</a>
+            <a href="#courses" class="block py-2 text-gray-700 hover:text-blue-600">Kurslarımız</a>
+            <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600">İletişim</a>
+            <a href="#register" class="block py-2 bg-blue-600 text-white text-center rounded hover:bg-blue-700">Ön Kayıt</a>
+        </div>
+    </header>
+    <!-- Hero Slider -->
+    <section id="home" class="slider-container mt-16 relative">
+        <!-- Slide 1 -->
+        <div class="slide active" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">Yaz Kurslarına Hoşgeldiniz</h2>
+                <p class="text-xl mb-8">Geleceğinize yatırım yapmak için doğru adrestesiniz</p>
+                <a href="#register" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg transition duration-300">Hemen Kayıt Ol</a>
+            </div>
+        </div>
+        <!-- Slide 2 -->
+        <div class="slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80')">
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">21 Yıllık Eğitim Tecrübesi</h2>
+                <p class="text-xl mb-8">Çocuklarınız emin ellerde</p>
+                <a href="#about" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg transition duration-300">Bizi Tanıyın</a>
+            </div>
+        </div>
+        <!-- Slide 3 -->
+        <div class="slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80')">
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white">
+                <h2 class="text-4xl md:text-6xl font-bold mb-4">Çok Yönlü Eğitim Programları</h2>
+                <p class="text-xl mb-8">Çocuklarınızın potansiyelini keşfedin</p>
+                <a href="#courses" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg transition duration-300">Kurslarımız</a>
+            </div>
+        </div>
+        <!-- Slider Navigation -->
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex space-x-2">
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 slider-dot active" data-index="0"></button>
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 slider-dot" data-index="1"></button>
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 slider-dot" data-index="2"></button>
+        </div>
+        <!-- Wave Shape Divider -->
+        <div class="custom-shape-divider-bottom-1684519555">
+            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+            </svg>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Hakkımızda</h2>
+                <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
+            </div>
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Elit Gençler Koleji</h3>
+                    <p class="text-gray-600 mb-4">
+                        2002 senesinde kurulmuş olup Milli Eğitim Bakanlığı çatısı altında 21 yıldır eğitim vermektedir. Elit Gençler Koleji'nin başka bir şubesi bulunmamaktadır. Açıldığı günden bugüne kadar "Butik Okul" olarak çalışmaktadır.
+                    </p>
+                    <p class="text-gray-600 mb-4">
+                        Kurucusu Halide Ersin Özkan, devlet okullarında ve özel okullarda yaklaşık 50 yıllık bir birikime sahip gerçek bir Eğitimcidir. Daima yenilikçi, hızla ilerleyen, güncel teknolojiye hakim, idealist eğitimcilerle eğitim ve öğretime devam etmektedir.
+                    </p>
+                    <div class="bg-blue-50 p-6 rounded-lg">
+                        <h4 class="text-xl font-bold text-blue-600 mb-3">Vizyonumuz</h4>
+                        <p class="text-gray-600">
+                            "Çocuklarımızın geleceği ülkemizin geleceğidir" felsefesi yegâne motivasyon kaynağımız olmuştur.
+                        </p>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Okul Binası" class="rounded-lg shadow-lg w-full">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Founder Message -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/3 mb-8 lg:mb-0">
+                    <img src="https://via.placeholder.com/300x400" alt="Ersin Özkan" class="rounded-lg shadow-lg w-full">
+                </div>
+                <div class="lg:w-2/3 lg:pl-12">
+                    <h3 class="text-2xl font-bold text-gray-800 mb-6">Kurucumuzun Mesajı</h3>
+                    <div class="bg-white p-8 rounded-lg shadow-md">
+                        <p class="text-gray-600 mb-4 italic">
+                            "Değerli Konuğumuz; Bilim, teknoloji ve ahlakın ışığında 2002 yılında başlayan eğitim serüvenimiz kesintisiz ve nice başarılarla 21. yılına girmiş bulunuyor."
+                        </p>
+                        <p class="text-gray-600 mb-4">
+                            Bu süreç içerisinde Elit Gençler Koleji olarak "Çocuklarımızın geleceği ülkemizin geleceğidir" felsefesi yegâne motivasyon kaynağımız olmuştur. Bu vesile ile 2022 yılına yaklaştığımız şu günlerde 20. eğitim öğretim yılımızı sizlerle birlikte yaşayabilmenin mutluluğu içerisinde olduğumuzu da ifade etmek isterim.
+                        </p>
+                        <p class="text-gray-600 mb-4">
+                            Eğitimde kalite ve başarının izini sürdüğümüz 21 yıl boyunca gücünü bilimden alarak, dünya ile entegre halde, Gazi Mustafa Kemal Atatürk'ün ilkelerini benimseyerek, çocuklarımızla çok önemli işler yapacağımıza yürekten inanmışlık duygusu ile sürekli geliştik. Her eğitim yılına aynı heyecan ve motivasyon ile hazırlandık, ilk günkü heyecan ile hazırlanmaya devam ediyoruz.
+                        </p>
+                        <p class="text-gray-600 mb-4">
+                            Elit Gençler Koleji olarak çocuklarımızın bilgiye ulaşmalarını sağlamakla yetinmiyoruz. Her gencimizin farklı özellikleri olduğunun bilinciyle hareket ederek onları eğitiyor ve geleceğe hazırlıyoruz.
+                        </p>
+                        <p class="text-gray-600">
+                            Bu hususta hem kendime hem de büyük bir heyecanla çalışan nitelikli ekibime güvenim tamdır. Paylaşmanın, kültürümüzde çok üstün bir değer olduğunu biliyor ve bu bilinçle öğrencilerimize sunduğumuz farklı eğitim fırsatlarını sizlerle şahsen paylaşmak adına bir kahve ikramı için okulumuza bekliyorum.
+                        </p>
+                        <p class="mt-6 text-right font-semibold">
+                            Saygılarımla,<br>
+                            Ersin Özkan
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Courses Section -->
+    <section id="courses" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Kurslarımız</h2>
+                <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
+                <p class="text-gray-600 max-w-2xl mx-auto mt-4">Yaz döneminde açtığımız kurslarla çocuklarınızın gelişimine katkı sağlıyoruz.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- English Course -->
+                <div class="course-card bg-white rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://bayrampasahem.meb.k12.tr/meb_iys_dosyalar/30/06/796500/resimler/2023_01/k_09095820_ingilizce-konusabiliyor-musunuz-10-soruda-kendinizi-test-edin-e1489759151449.jpg" alt="İngilizce Kursu" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">İngilizce</h3>
+                        <p class="text-gray-600 mb-4">Günlük konuşma becerilerinden akademik İngilizce'ye kadar kapsamlı dil eğitimi.</p>
+                        <a href="#register" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">Hemen Kayıt Ol &rarr;</a>
+                    </div>
+                </div>
+                <!-- AI & Robotics -->
+                <div class="course-card bg-white rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://bulutistan.com/blog/wp-content/uploads/2022/03/Yapay-Zeka-AI-Nedir-1024x576.jpg" alt="Yapay Zeka ve Robotik Kodlama" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Yapay Zeka ve Robotik Kodlama</h3>
+                        <p class="text-gray-600 mb-4">Geleceğin teknolojilerine şimdiden adım atın. Robotik ve kodlama dünyasını keşfedin.</p>
+                        <a href="#register" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">Hemen Kayıt Ol &rarr;</a>
+                    </div>
+                </div>
+                <!-- Chess -->
+                <div class="course-card bg-white rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://uzaktanegitim.com/images/blog/satranc-nedir-nasil-oynanir.png" alt="Satranç" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Satranç</h3>
+                        <p class="text-gray-600 mb-4">Stratejik düşünme ve problem çözme becerilerini geliştiren bir zeka oyunu.</p>
+                        <a href="#register" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">Hemen Kayıt Ol &rarr;</a>
+                    </div>
+                </div>
+                <!-- Mind Games -->
+                <div class="course-card bg-white rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://www.akademiduru.com/image/catalog/Data/blog/zeka-akil-oyunlari.png" alt="Akıl ve Zeka Oyunları" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Akıl ve Zeka Oyunları</h3>
+                        <p class="text-gray-600 mb-4">Zihinsel gelişimi destekleyen çeşitli oyunlarla bilişsel becerileri artırın.</p>
+                        <a href="#register" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">Hemen Kayıt Ol &rarr;</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Why Choose Us -->
+    <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Neden ELİTKURS?</h2>
+                <div class="w-24 h-1 bg-white mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-chalkboard-teacher text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Uzman Eğitmenler</h3>
+                    <p class="text-blue-100">Alanında uzman, deneyimli eğitmen kadromuzla kaliteli eğitim sunuyoruz.</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-laptop-code text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Modern Eğitim</h3>
+                    <p class="text-blue-100">Güncel teknolojiler ve modern eğitim yöntemleri kullanıyoruz.</p>
+                </div>
+                <div class="text-center p-6">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-star text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Bireysel Yaklaşım</h3>
+                    <p class="text-blue-100">Her öğrencimize bireysel ilgi gösteriyor, potansiyellerini ortaya çıkarıyoruz.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Registration Form -->
+    <section id="register" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+                <div class="md:flex">
+                    <div class="md:w-1/2 bg-blue-600 text-white p-8 flex flex-col justify-center">
+                        <h2 class="text-2xl font-bold mb-4">Ön Kayıt Formu</h2>
+                        <p class="mb-4">Yaz kurslarımıza ön kayıt yaptırmak için formu doldurun, size en kısa sürede dönüş yapalım.</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                <span>Ücretsiz ön kayıt imkanı</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                <span>Uzman eğitim danışmanlığı</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle mt-1 mr-2"></i>
+                                <span>Detaylı bilgi ve program seçenekleri</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="md:w-1/2 p-8">
+                        <form id="registrationForm" class="space-y-4">
+                            <div>
+                                <label for="name" class="block text-gray-700 font-medium mb-2">Ad Soyad</label>
+                                <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            </div>
+                            <div>
+                                <label for="email" class="block text-gray-700 font-medium mb-2">E-posta</label>
+                                <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            </div>
+                            <div>
+                                <label for="phone" class="block text-gray-700 font-medium mb-2">Telefon</label>
+                                <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                            </div>
+                            <div>
+                                <label for="course" class="block text-gray-700 font-medium mb-2">İlgilendiğiniz Kurs</label>
+                                <select id="course" name="course" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <option value="" disabled selected>Bir kurs seçiniz</option>
+                                    <option value="ingilizce">İngilizce</option>
+                                    <option value="yapay-zeka">Yapay Zeka ve Robotik Kodlama</option>
+                                    <option value="satranc">Satranç</option>
+                                    <option value="akil-oyunlar">Akıl ve Zeka Oyunları</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label for="message" class="block text-gray-700 font-medium mb-2">Mesajınız (Opsiyonel)</label>
+                                <textarea id="message" name="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                            </div>
+                            <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 font-medium">Gönder</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">İletişim</h2>
+                <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
+                <p class="text-gray-600 max-w-2xl mx-auto mt-4">Bize ulaşmak için aşağıdaki iletişim bilgilerini kullanabilir veya mesaj formu ile bize yazabilirsiniz.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <div class="bg-gray-100 p-6 rounded-lg mb-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-4">İletişim Bilgileri</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-3"></i>
+                                <p>Bahçelievler Mahallesi, Talat Paşa Cd No:17, 34180 Bahçelievler/İstanbul</p>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fas fa-phone-alt text-blue-600 mt-1 mr-3"></i>
+                                <p><a href="tel:02124415901" class="hover:text-blue-600">0212 441 59 01</a></p>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i>
+                                <p><a href="mailto:[email protected]" class="hover:text-blue-600">[email protected]</a></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-100 p-6 rounded-lg">
+                        <h3 class="text-xl font-bold text-gray-800 mb-4">Çalışma Saatleri</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span class="font-medium">Pazartesi - Cuma</span>
+                                <span>08:30 - 17:30</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Cumartesi</span>
+                                <span>09:30 - 14:00</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Pazar</span>
+                                <span>Kapalı</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-100 p-6 rounded-lg">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">Bize Mesaj Gönderin</h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label for="contact-name" class="block text-gray-700 font-medium mb-2">Ad Soyad</label>
+                            <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                        </div>
+                        <div>
+                            <label for="contact-email" class="block text-gray-700 font-medium mb-2">E-posta</label>
+                            <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                        </div>
+                        <div>
+                            <label for="contact-subject" class="block text-gray-700 font-medium mb-2">Konu</label>
+                            <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                        </div>
+                        <div>
+                            <label for="contact-message" class="block text-gray-700 font-medium mb-2">Mesajınız</label>
+                            <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea>
+                        </div>
+                        <button type="submit" class="bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 transition duration-300 font-medium">Gönder</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Map -->
+    <div class="w-full h-96">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3010.609203175488!2d28.84908131583069!3d41.01583112780482!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cabd3459a3f245%3A0x4c3d8f3d23a4f3a5!2sBah%C3%A7elievler%20Mahallesi%2C%20Talat%20Pa%C5%9Fa%20Cd.%20No%3A17%2C%2034180%20Bah%C3%A7elievler%2F%C4%B0stanbul!5e0!3m2!1sen!2str!4v1623843456789!5m2!1sen!2str" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+    </div>
+    <!-- Testimonials -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Velilerimiz Ne Diyor?</h2>
+                <div class="w-24 h-1 bg-blue-600 mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Veli" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Ayşe Kaya</h4>
+                            <p class="text-gray-500 text-sm">İngilizce Kursu (2022)</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Oğlum için çok faydalı bir yaz geçirdik. Öğretmenlerin ilgisi ve eğitim kalitesi mükemmeldi. Kesinlikle tavsiye ederim."</p>
+                    <div class="mt-4 text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Veli" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Mehmet Yılmaz</h4>
+                            <p class="text-gray-500 text-sm">Robotik Kodlama (2021)</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Kızımın teknolojiye olan ilgisi bu kurs sayesinde daha da arttı. Eğitmenler konusunda uzman ve çocuklara yaklaşımları harika."</p>
+                    <div class="mt-4 text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center mb-4">
+                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Veli" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Fatma Demir</h4>
+                            <p class="text-gray-500 text-sm">Satranç Kursu (2023)</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Oğlumun stratejik düşünme becerileri gelişti. Küçük bir okul olması çocuklarla ilgilenme oranını artırıyor. Çok memnun kaldık."</p>
+                    <div class="mt-4 text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="py-12 bg-blue-600 text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-2xl md:text-3xl font-bold mb-4">E-Bültenimize Kaydolun</h2>
+            <p class="max-w-2xl mx-auto mb-6">Yeni kurslarımız ve kampanyalarımızdan haberdar olmak için e-posta listemize kaydolun.</p>
+            <form class="max-w-md mx-auto flex">
+                <input type="email" placeholder="E-posta adresiniz" class="flex-grow px-4 py-2 text-gray-800 rounded-l-lg focus:outline-none">
+                <button type="submit" class="bg-blue-800 px-6 py-2 rounded-r-lg hover:bg-blue-900 transition duration-300">Gönder</button>
+            </form>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-12 pb-6">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">ELİTKURS</h3>
+                    <p class="text-gray-400">Elit Gençler Koleji bünyesinde 21 yıllık eğitim tecrübesi ile yaz kursları sunmaktayız.</p>
+                    <div class="mt-4 flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Hızlı Linkler</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Anasayfa</a></li>
+                        <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">Hakkımızda</a></li>
+                        <li><a href="#courses" class="text-gray-400 hover:text-white transition duration-300">Kurslarımız</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">İletişim</a></li>
+                        <li><a href="#register" class="text-gray-400 hover:text-white transition duration-300">Ön Kayıt</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Kurslar</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">İngilizce</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Yapay Zeka ve Robotik Kodlama</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Satranç</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Akıl ve Zeka Oyunları</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">İletişim</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
+                            <span>Bahçelievler Mahallesi, Talat Paşa Cd No:17, 34180 Bahçelievler/İstanbul</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-phone-alt mt-1 mr-2"></i>
+                            <span>0212 441 59 01</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-envelope mt-1 mr-2"></i>
+                            <span>[email protected]</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="pt-6 border-t border-gray-800 text-center text-gray-400 text-sm">
+                <p>&copy; 2023 ELİTKURS - Tüm hakları saklıdır. Elit Gençler Koleji yaz kursları.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Slider functionality
+        const slides = document.querySelectorAll('.slide');
+        const dots = document.querySelectorAll('.slider-dot');
+        let currentSlide = 0;
+        function showSlide(n) {
+            slides.forEach(slide => slide.classList.remove('active'));
+            dots.forEach(dot => dot.classList.remove('active'));
+            currentSlide = (n + slides.length) % slides.length;
+            slides[currentSlide].classList.add('active');
+            dots[currentSlide].classList.add('active');
+        }
+        function nextSlide() {
+            showSlide(currentSlide + 1);
+        }
+        // Auto slide change every 5 seconds
+        setInterval(nextSlide, 5000);
+        // Dot navigation
+        dots.forEach(dot => {
+            dot.addEventListener('click', function() {
+                showSlide(parseInt(this.getAttribute('data-index')));
+            });
+        });
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                mobileMenu.classList.add('hidden');
+            });
+        });
+        // Form submission
+        document.getElementById('registrationForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            alert('Ön kaydınız başarıyla alındı. En kısa sürede sizinle iletişime geçeceğiz.');
+            this.reset();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=drmurataltun/elitkurs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>