Spaces:
Running
Running
Dr. Murat ALTUN adında yapay zeka eğitimleri veren kitapları olan bir uzman hakkında kişisel web sayfası oluştur - Initial Deployment
ba8d4bf
verified
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dr. Murat ALTUN | Yapay Zeka Uzmanı ve Eğitmen</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 animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .delay-100 { animation-delay: 0.1s; } | |
| .delay-200 { animation-delay: 0.2s; } | |
| .delay-300 { animation-delay: 0.3s; } | |
| .delay-400 { animation-delay: 0.4s; } | |
| /* Custom gradient */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); | |
| } | |
| /* Book card hover effect */ | |
| .book-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); | |
| } | |
| /* Smooth scroll */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xl font-bold text-indigo-600">Dr. Murat ALTUN</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600 transition">Hakkımda</a> | |
| <a href="#books" class="text-gray-700 hover:text-indigo-600 transition">Kitaplar</a> | |
| <a href="#courses" class="text-gray-700 hover:text-indigo-600 transition">Eğitimler</a> | |
| <a href="#contact" class="text-gray-700 hover:text-indigo-600 transition">İletişim</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> | |
| <a href="#about" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Hakkımda</a> | |
| <a href="#books" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Kitaplar</a> | |
| <a href="#courses" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Eğitimler</a> | |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-indigo-600 transition">İletişim</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white pt-32 pb-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex items-center justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Dr. Murat ALTUN</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6">Yapay Zeka Uzmanı ve Eğitmen</h2> | |
| <p class="text-lg mb-8 opacity-90">Yapay zeka alanında uzmanlaşmış akademisyen, eğitmen ve yazar. Makine öğrenmesi, derin öğrenme ve yapay zeka uygulamaları konularında kitaplar ve eğitim programları sunuyorum.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">İletişime Geç</a> | |
| <a href="#courses" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">Eğitimler</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center animate-fade-in delay-200"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl"> | |
| <!-- Placeholder for profile image --> | |
| <div class="w-full h-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-6xl text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Hakkımda</h2> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center animate-fade-in delay-100"> | |
| <div class="w-64 h-64 rounded-lg overflow-hidden shadow-lg"> | |
| <!-- Placeholder for about image --> | |
| <div class="w-full h-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-laptop-code text-6xl text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12 animate-fade-in delay-200"> | |
| <p class="text-lg mb-6">Yapay zeka alanında 15 yılı aşkın deneyime sahip bir akademisyen ve uygulayıcıyım. Hem akademik çalışmalar hem de endüstriyel projelerde yer alarak bu alanda kapsamlı bir bilgi birikimi edindim.</p> | |
| <p class="text-lg mb-6">Yapay zeka teknolojilerinin daha geniş kitleler tarafından anlaşılması ve uygulanabilmesi için çeşitli eğitim programları düzenliyor ve kitaplar yazıyorum. Özellikle makine öğrenmesi, derin öğrenme ve doğal dil işleme konularında uzmanlaştım.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-graduation-cap text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Akademik Kariyer</h4> | |
| <p class="text-gray-600">Üniversitelerde dersler ve araştırmalar</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-book text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Yayınlanmış Kitaplar</h4> | |
| <p class="text-gray-600">10+ yapay zeka konulu kitap</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chalkboard-teacher text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Eğitimler</h4> | |
| <p class="text-gray-600">5000+ öğrenciye eğitim verdim</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-project-diagram text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Endüstriyel Projeler</h4> | |
| <p class="text-gray-600">20+ başarılı proje yönettim</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Books Section --> | |
| <section id="books" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-4 animate-fade-in">Kitaplarım</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12 animate-fade-in delay-100">Yapay zeka ve makine öğrenmesi konularında yayınlanmış kitaplarım</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Book 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden book-card transition duration-300 animate-fade-in delay-200"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-book-open text-6xl text-blue-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Makine Öğrenmesi Temelleri</h3> | |
| <p class="text-gray-600 mb-4">Yapay zekanın temel taşı olan makine öğrenmesi algoritmalarını detaylı şekilde ele alan kapsamlı bir kaynak.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">Bestseller</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden book-card transition duration-300 animate-fade-in delay-300"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-brain text-6xl text-purple-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Derin Öğrenme Uygulamaları</h3> | |
| <p class="text-gray-600 mb-4">Derin öğrenme modellerinin gerçek dünya problemlerine nasıl uygulanacağını adım adım anlatan pratik bir rehber.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Yeni</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden book-card transition duration-300 animate-fade-in delay-400"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-6xl text-green-500"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Yapay Zeka ile İş Dünyası</h3> | |
| <p class="text-gray-600 mb-4">İşletmelerin yapay zeka teknolojilerinden nasıl faydalanabileceğini gösteren vaka çalışmaları içeren kitap.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm font-medium">Popüler</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12 animate-fade-in delay-300"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> | |
| Tüm Kitapları Gör | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-4 animate-fade-in">Eğitim Programları</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12 animate-fade-in delay-100">Yapay zeka alanında sunduğum eğitim programları</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Course 1 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden border border-gray-200 animate-fade-in delay-200"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Temel Makine Öğrenmesi</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Yapay zekanın temellerini öğrenmek isteyenler için başlangıç seviyesinde bir eğitim programı.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>12 saatlik eğitim</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Uygulamalı projeler</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Sertifika</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">₺1,200</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden border-2 border-indigo-500 relative animate-fade-in delay-300"> | |
| <div class="absolute top-0 right-0 bg-indigo-500 text-white px-3 py-1 text-sm font-bold rounded-bl-lg"> | |
| Popüler | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-network-wired text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Derin Öğrenme Uzmanlığı</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Derin öğrenme modellerini uygulamalı olarak öğrenmek isteyenler için kapsamlı bir program.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>30 saatlik eğitim</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Gerçek dünya projeleri</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Uzmanlık sertifikası</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">₺2,500</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden border border-gray-200 animate-fade-in delay-400"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-language text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Doğal Dil İşleme</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Metin analizi ve dil modelleri üzerine uzmanlaşmak isteyenler için özel bir program.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>20 saatlik eğitim</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Transformer modelleri</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Sertifika</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">₺1,800</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Detaylar →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12 animate-fade-in delay-300"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> | |
| Tüm Eğitimleri Gör | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-indigo-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12 animate-fade-in">Öğrenci Yorumları</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md animate-fade-in delay-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <i class="fas fa-user text-3xl text-gray-500 w-full h-full flex items-center justify-center"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ahmet Yılmaz</h4> | |
| <p class="text-gray-600 text-sm">Yazılım Mühendisi</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Dr. Murat ALTUN'un makine öğrenmesi eğitimi sayesinde işimde yapay zeka projeleri geliştirmeye başladım. Anlatımı çok net ve uygulamaya yönelik."</p> | |
| <div class="flex 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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md animate-fade-in delay-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <i class="fas fa-user text-3xl text-gray-500 w-full h-full flex items-center justify-center"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ayşe Demir</h4> | |
| <p class="text-gray-600 text-sm">Veri Bilimci</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Derin öğrenme kursu gerçekten ufuk açıcıydı. Hem teorik hem de pratik bilgileri mükemmel dengeleyen bir eğitimdi. Kesinlikle tavsiye ederim."</p> | |
| <div class="flex 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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md animate-fade-in delay-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> | |
| <i class="fas fa-user text-3xl text-gray-500 w-full h-full flex items-center justify-center"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Mehmet Kaya</h4> | |
| <p class="text-gray-600 text-sm">AI Araştırmacısı</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Kitapları ve eğitimleri sayesinde yapay zeka alanında kariyer yapmaya karar verdim. Bilgi birikimi ve öğretme yeteneği gerçekten etkileyici."</p> | |
| <div class="flex 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> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-4 animate-fade-in">İletişim</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12 animate-fade-in delay-100">Eğitimler, kitaplar veya danışmanlık hakkında bilgi almak için bana ulaşın</p> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in delay-200"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-bold mb-6">İletişim Bilgileri</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">E-posta</h4> | |
| <p class="text-gray-600">info@murataltun.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Telefon</h4> | |
| <p class="text-gray-600">+90 555 123 45 67</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Adres</h4> | |
| <p class="text-gray-600">Yapay Zeka Merkezi, Teknopark İstanbul</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Sosyal Medya</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-indigo-100 transition"> | |
| <i class="fab fa-twitter text-gray-700"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-indigo-100 transition"> | |
| <i class="fab fa-linkedin-in text-gray-700"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-indigo-100 transition"> | |
| <i class="fab fa-youtube text-gray-700"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-indigo-100 transition"> | |
| <i class="fab fa-github text-gray-700"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 animate-fade-in delay-300"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Adınız</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Adınız ve soyadınız"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">E-posta</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="E-posta adresiniz"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Konu</label> | |
| <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <option value="">Konu seçiniz</option> | |
| <option value="course">Eğitimler hakkında</option> | |
| <option value="book">Kitaplar hakkında</option> | |
| <option value="consulting">Danışmanlık</option> | |
| <option value="other">Diğer</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mesajınız</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Mesajınız..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-indigo-700 transition duration-300"> | |
| Mesaj Gönder | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4 animate-fade-in">Yapay Zeka Güncellemeleri</h2> | |
| <p class="mb-8 max-w-2xl mx-auto animate-fade-in delay-100">Yeni kitaplar, eğitimler ve yapay zeka alanındaki gelişmeler hakkında bilgi almak için e-posta listesine katılın.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto animate-fade-in delay-200"> | |
| <input type="email" placeholder="E-posta adresiniz" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white text-gray-900"> | |
| <button type="submit" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 whitespace-nowrap"> | |
| Abone Ol | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <a href="#" class="text-xl font-bold text-white">Dr. Murat ALTUN</a> | |
| <p class="mt-2 text-gray-400 max-w-xs">Yapay zeka alanında uzmanlaşmış akademisyen, eğitmen ve yazar.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Bağlantılar</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Hakkımda</a></li> | |
| <li><a href="#books" class="text-gray-400 hover:text-white transition">Kitaplar</a></li> | |
| <li><a href="#courses" class="text-gray-400 hover:text-white transition">Eğitimler</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">İletişim</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Kaynaklar</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Araştırmalar</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Makaleler</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">SSS</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Yasal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Gizlilik Politikası</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Kullanım Şartları</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Çerez Politikası</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Dr. Murat ALTUN. Tüm hakları saklıdır.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to top button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', function() { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| // Scroll to target | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.animate-fade-in'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| } | |
| // Run once on page load | |
| animateOnScroll(); | |
| // Run on scroll | |
| window.addEventListener('scroll', animateOnScroll); | |
| </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/websayfam" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |