WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de Metehan
1122
Metehan
Abrir en el editor
Video
Publica tu código
1
Recomendado
9 September 2024
Reloj de píxeles
19 December 2025
Insertar juego de Unity: Ragdoll Soccer
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demir & Partners | Osmaniye Hukuk Bürosu</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"> <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', sans-serif; scroll-behavior: smooth; } .gradient-bg { background: linear-gradient(135deg, #FFE066 0%, #FFF176 50%, #FFEB3B 100%); } .nav-scrolled { background-color: rgba(26, 35, 126, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .service-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); } .stat-item:hover .stat-number { transform: scale(1.1); } .profile-card:hover img { transform: scale(1.05); } .whatsapp-btn { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .fade-in { animation: fadeIn 1s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body class="text-gray-800"> <!-- WhatsApp Button --> <a href="https://wa.me/905555555555" target="_blank" class="whatsapp-btn fixed bottom-8 right-8 bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl z-50"> <i class="fab fa-whatsapp"></i> </a> <!-- Navigation --> <header id="header" class="fixed w-full z-40 transition-all duration-300"> <nav class="container mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center"> <a href="#" class="text-white text-2xl font-bold"> <span class="bg-yellow-400 text-blue-900 px-3 py-1 rounded-lg">DEMİR</span> & PARTNERS </a> </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="text-white hover:text-yellow-300 transition">Anasayfa</a> <a href="#services" class="text-white hover:text-yellow-300 transition">Hizmetler</a> <a href="#about" class="text-white hover:text-yellow-300 transition">Hakkımızda</a> <a href="#team" class="text-white hover:text-yellow-300 transition">Ekibimiz</a> <a href="#contact" class="text-white hover:text-yellow-300 transition">İletişim</a> </div> <div class="md:hidden"> <button id="menu-btn" class="text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden mt-4"> <div class="flex flex-col space-y-3"> <a href="#home" class="text-white hover:text-yellow-300 transition">Anasayfa</a> <a href="#services" class="text-white hover:text-yellow-300 transition">Hizmetler</a> <a href="#about" class="text-white hover:text-yellow-300 transition">Hakkımızda</a> <a href="#team" class="text-white hover:text-yellow-300 transition">Ekibimiz</a> <a href="#contact" class="text-white hover:text-yellow-300 transition">İletişim</a> </div> </div> </nav> </header> <!-- Hero Section --> <section id="home" class="gradient-bg pt-32 pb-20 md:pt-40 md:pb-28"> <div class="container mx-auto px-6"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-12 md:mb-0 fade-in"> <h1 class="text-4xl md:text-5xl font-bold text-blue-900 mb-6">Hukuki Sorunlarınızda Güvenilir Çözüm Ortağınız</h1> <p class="text-lg text-blue-900 mb-8">15 yıllık deneyimimizle, Osmaniye ve çevresinde bireysel ve kurumsal müvekkillerimize en kaliteli hukuki hizmeti sunuyoruz.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <a href="#contact" class="bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded-lg text-center font-medium transition">Ücretsiz Danışmanlık</a> <a href="tel:+905555555555" class="bg-white hover:bg-gray-100 text-blue-900 px-8 py-3 rounded-lg text-center font-medium transition"> <i class="fas fa-phone mr-2"></i> Hemen Ara </a> </div> </div> <div class="md:w-1/2 flex justify-center fade-in"> <div class="profile-card bg-white rounded-2xl overflow-hidden shadow-xl max-w-md w-full transition duration-300"> <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Av. Mehmet Demir" class="w-full h-64 object-cover transition duration-500"> <div class="p-6"> <h3 class="text-2xl font-bold text-blue-900 mb-2">Av. Mehmet Demir</h3> <p class="text-yellow-600 font-medium mb-4">Kurucu Ortak</p> <p class="text-gray-600 mb-4">İstanbul Üniversitesi Hukuk Fakültesi mezunu olan Demir, özellikle ticaret hukuku ve gayrimenkul hukuku alanlarında uzmanlaşmıştır.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fab fa-linkedin text-xl"></i></a> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fas fa-envelope text-xl"></i></a> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Uzmanlık Alanlarımız</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto mb-6"></div> <p class="text-gray-600 max-w-2xl mx-auto">Bireysel ve kurumsal müvekkillerimize çeşitli hukuk alanlarında kapsamlı danışmanlık ve dava takip hizmetleri sunuyoruz.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service 1 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-briefcase"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">İş Hukuku</h3> <p class="text-gray-600">İş sözleşmeleri, işten çıkarma süreçleri, mobbing davaları ve işçi-işveren uyuşmazlıklarında uzman hukuki destek.</p> </div> <!-- Service 2 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-home"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">Gayrimenkul Hukuku</h3> <p class="text-gray-600">Tapu işlemleri, kat mülkiyeti, kira uyuşmazlıkları, imar hukuku ve kamulaştırma davalarında profesyonel destek.</p> </div> <!-- Service 3 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-users"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">Aile Hukuku</h3> <p class="text-gray-600">Boşanma davaları, velayet, nafaka, mal paylaşımı ve aile içi şiddet vakalarında hassas hukuki yaklaşım.</p> </div> <!-- Service 4 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-gavel"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">Ceza Hukuku</h3> <p class="text-gray-600">Savunma hizmetleri, tutuklama ve gözaltı süreçleri, kovuşturma aşamasında etkin hukuki destek ve takip.</p> </div> <!-- Service 5 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-building"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">Şirketler Hukuku</h3> <p class="text-gray-600">Şirket kuruluşu, ortaklık anlaşmazlıkları, şirket birleşme ve devirleri, ticari sözleşmeler ve uyuşmazlık çözümü.</p> </div> <!-- Service 6 --> <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300 hover:border-yellow-400 border border-transparent"> <div class="text-yellow-500 mb-6 text-4xl"> <i class="fas fa-file-invoice-dollar"></i> </div> <h3 class="text-xl font-bold text-blue-900 mb-3">İcra-İflas Hukuku</h3> <p class="text-gray-600">Alacak takibi, haciz işlemleri, iflas süreçleri ve icra davalarında etkin hukuki destek ve takip hizmetleri.</p> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-blue-900 text-white"> <div class="container mx-auto px-6"> <div class="flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-6">Hakkımızda</h2> <div class="w-20 h-1 bg-yellow-400 mb-6"></div> <p class="text-lg mb-6">2008 yılında Osmaniye'de kurulan Demir & Partners Hukuk Bürosu, bölgenin önde gelen hukuk firmalarından biridir. Müvekkil memnuniyetini ön planda tutan, etik değerlere bağlı ve yenilikçi hukuki çözümler sunan bir anlayışla hizmet vermekteyiz.</p> <p class="mb-8">Uzman avukat kadromuz, her biri kendi alanında derinlemesine bilgi birikimine sahip olup, müvekkillerimize en doğru hukuki rehberliği sunmaktadır. Hukukun üstünlüğüne olan inancımız ve adalet arayışındaki kararlılığımız, çalışma prensiplerimizin temelini oluşturmaktadır.</p> <div class="grid grid-cols-2 md:grid-cols-3 gap-6"> <div class="stat-item text-center"> <div class="text-4xl font-bold text-yellow-400 mb-2 transition duration-300 stat-number">500+</div> <p class="text-sm">Tamamlanan Dava</p> </div> <div class="stat-item text-center"> <div class="text-4xl font-bold text-yellow-400 mb-2 transition duration-300 stat-number">15</div> <p class="text-sm">Yıllık Deneyim</p> </div> <div class="stat-item text-center"> <div class="text-4xl font-bold text-yellow-400 mb-2 transition duration-300 stat-number">95%</div> <p class="text-sm">Başarı Oranı</p> </div> </div> </div> <div class="lg:w-1/2 fade-in"> <div class="bg-white bg-opacity-10 rounded-xl p-8 border border-white border-opacity-20"> <h3 class="text-2xl font-bold mb-6">Neden Bizi Tercih Etmelisiniz?</h3> <div class="space-y-6"> <div class="flex"> <div class="text-yellow-400 mr-4 mt-1"> <i class="fas fa-check-circle text-xl"></i> </div> <div> <h4 class="font-bold mb-2">Uzman Kadro</h4> <p class="text-gray-200">Her biri alanında uzmanlaşmış deneyimli avukatlar.</p> </div> </div> <div class="flex"> <div class="text-yellow-400 mr-4 mt-1"> <i class="fas fa-check-circle text-xl"></i> </div> <div> <h4 class="font-bold mb-2">Şeffaf İletişim</h4> <p class="text-gray-200">Dava süreçlerinde düzenli bilgilendirme ve açık iletişim.</p> </div> </div> <div class="flex"> <div class="text-yellow-400 mr-4 mt-1"> <i class="fas fa-check-circle text-xl"></i> </div> <div> <h4 class="font-bold mb-2">Bütüncül Yaklaşım</h4> <p class="text-gray-200">Hukuki sorunlara çok yönlü ve bütüncül çözümler.</p> </div> </div> <div class="flex"> <div class="text-yellow-400 mr-4 mt-1"> <i class="fas fa-check-circle text-xl"></i> </div> <div> <h4 class="font-bold mb-2">Teknoloji Entegrasyonu</h4> <p class="text-gray-200">Dijital araçlarla hızlı ve etkin hizmet sunumu.</p> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Team Section --> <section id="team" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Ekibimiz</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto mb-6"></div> <p class="text-gray-600 max-w-2xl mx-auto">Alanında uzmanlaşmış deneyimli avukat kadromuz, müvekkillerimize en iyi hizmeti sunmak için sürekli olarak kendini geliştirmektedir.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Team Member 1 --> <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Av. Ayşe Kaya" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold text-blue-900 mb-1">Av. Ayşe Kaya</h3> <p class="text-yellow-600 font-medium mb-4">Aile Hukuku Uzmanı</p> <p class="text-gray-600 mb-4">Ankara Üniversitesi Hukuk Fakültesi mezunu olan Kaya, 10 yıldır aile hukuku alanında uzmanlaşmıştır.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fab fa-linkedin text-xl"></i></a> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fas fa-envelope text-xl"></i></a> </div> </div> </div> <!-- Team Member 2 --> <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Av. Emre Yılmaz" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold text-blue-900 mb-1">Av. Emre Yılmaz</h3> <p class="text-yellow-600 font-medium mb-4">Ceza Hukuku Uzmanı</p> <p class="text-gray-600 mb-4">İstanbul Bilgi Üniversitesi Hukuk Fakültesi mezunu olan Yılmaz, ceza hukuku alanında 8 yıllık deneyime sahiptir.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fab fa-linkedin text-xl"></i></a> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fas fa-envelope text-xl"></i></a> </div> </div> </div> <!-- Team Member 3 --> <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Av. Zeynep Arslan" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold text-blue-900 mb-1">Av. Zeynep Arslan</h3> <p class="text-yellow-600 font-medium mb-4">Şirketler Hukuku Uzmanı</p> <p class="text-gray-600 mb-4">Koç Üniversitesi Hukuk Fakültesi mezunu olan Arslan, şirketler hukuku ve ticaret hukuku alanlarında 7 yıllık deneyime sahiptir.</p> <div class="flex space-x-4"> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fab fa-linkedin text-xl"></i></a> <a href="#" class="text-blue-900 hover:text-blue-700"><i class="fas fa-envelope text-xl"></i></a> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gradient-to-r from-blue-900 to-blue-700 text-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Müvekkillerimiz Ne Diyor?</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto mb-6"></div> <p class="max-w-2xl mx-auto">Hukuki süreçlerinde yanlarında olduğumuz müvekkillerimizin deneyimlerini paylaşıyoruz.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="bg-white bg-opacity-10 rounded-xl p-8 border border-white border-opacity-20"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-3"> <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> <p class="text-gray-200 mb-6">"Boşanma sürecimde Ayşe Hanım'ın desteği paha biçilemezdi. Sürecin her aşamasında ne yapmam gerektiğini açıkça anlattı ve beni doğru yönlendirdi. Çok profesyonel bir ekip."</p> <div class="flex items-center"> <div class="mr-4"> <div class="w-12 h-12 rounded-full bg-gray-300"></div> </div> <div> <h4 class="font-bold">Ahmet S.</h4> <p class="text-sm text-gray-300">Boşanma Davası</p> </div> </div> </div> <!-- Testimonial 2 --> <div class="bg-white bg-opacity-10 rounded-xl p-8 border border-white border-opacity-20"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-3"> <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> <p class="text-gray-200 mb-6">"Şirketimizin marka tescil işlemleri için Demir & Partners ile çalıştık. Sürecin hızlı ve sorunsuz ilerlemesi için ellerinden geleni yaptılar. Kesinlikle tavsiye ederim."</p> <div class="flex items-center"> <div class="mr-4"> <div class="w-12 h-12 rounded-full bg-gray-300"></div> </div> <div> <h4 class="font-bold">Mehmet T.</h4> <p class="text-sm text-gray-300">Fikri Mülkiyet Hukuku</p> </div> </div> </div> <!-- Testimonial 3 --> <div class="bg-white bg-opacity-10 rounded-xl p-8 border border-white border-opacity-20"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-3"> <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> <p class="text-gray-200 mb-6">"İcra takibim için Emre Bey'in desteğini aldım. Sürecin her aşamasında bilgilendirildim ve alacağımı tahsil edebildim. Çok memnun kaldım, teşekkür ederim."</p> <div class="flex items-center"> <div class="mr-4"> <div class="w-12 h-12 rounded-full bg-gray-300"></div> </div> <div> <h4 class="font-bold">Fatma K.</h4> <p class="text-sm text-gray-300">İcra Takibi</p> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in"> <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">İletişim</h2> <div class="w-20 h-1 bg-yellow-400 mx-auto mb-6"></div> <p class="text-gray-600 max-w-2xl mx-auto">Hukuki sorunlarınız için bizimle iletişime geçebilir, ücretsiz ön değerlendirme randevusu alabilirsiniz.</p> </div> <div class="flex flex-col lg:flex-row"> <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 fade-in"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-gray-50 p-6 rounded-xl"> <div class="text-blue-900 mb-4"> <i class="fas fa-map-marker-alt text-2xl"></i> </div> <h3 class="text-lg font-bold text-blue-900 mb-2">Adres</h3> <p class="text-gray-600">Atatürk Caddesi No:123<br>Merkez/Osmaniye</p> </div> <div class="bg-gray-50 p-6 rounded-xl"> <div class="text-blue-900 mb-4"> <i class="fas fa-phone-alt text-2xl"></i> </div> <h3 class="text-lg font-bold text-blue-900 mb-2">Telefon</h3> <p class="text-gray-600 mb-1"><a href="tel:+903288881234">0328 888 12 34</a></p> <p class="text-gray-600"><a href="tel:+905555555555">0555 555 55 55</a></p> </div> <div class="bg-gray-50 p-6 rounded-xl"> <div class="text-blue-900 mb-4"> <i class="fas fa-envelope text-2xl"></i> </div> <h3 class="text-lg font-bold text-blue-900 mb-2">E-posta</h3> <p class="text-gray-600"><a href="mailto:info@demirpartners.com">info@demirpartners.com</a></p> </div> <div class="bg-gray-50 p-6 rounded-xl"> <div class="text-blue-900 mb-4"> <i class="fas fa-clock text-2xl"></i> </div> <h3 class="text-lg font-bold text-blue-900 mb-2">Çalışma Saatleri</h3> <p class="text-gray-600">Pzt-Cuma: 09:00 - 18:00<br>Cmt: 10:00 - 15:00<br>Pazar: Kapalı</p> </div> </div> <div class="mt-8"> <h3 class="text-xl font-bold text-blue-900 mb-4">Sosyal Medya</h3> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 rounded-full bg-blue-900 text-white flex items-center justify-center hover:bg-blue-800 transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-blue-900 text-white flex items-center justify-center hover:bg-blue-800 transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-blue-900 text-white flex items-center justify-center hover:bg-blue-800 transition"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" class="w-10 h-10 rounded-full bg-blue-900 text-white flex items-center justify-center hover:bg-blue-800 transition"> <i class="fab fa-instagram"></i> </a> </div> </div> </div> <div class="lg:w-1/2 fade-in"> <div class="bg-gray-50 rounded-xl p-8"> <h3 class="text-2xl font-bold text-blue-900 mb-6">Randevu Formu</h3> <form> <div class="mb-6"> <label for="name" class="block text-gray-700 font-medium mb-2">Adınız Soyadınız</label> <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div class="mb-6"> <label for="email" class="block text-gray-700 font-medium mb-2">E-posta Adresiniz</label> <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div class="mb-6"> <label for="phone" class="block text-gray-700 font-medium mb-2">Telefon Numaranız</label> <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div class="mb-6"> <label for="service" class="block text-gray-700 font-medium mb-2">İlgilendiğiniz Hizmet</label> <select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"> <option value="">Seçiniz</option> <option value="is-hukuku">İş Hukuku</option> <option value="aile-hukuku">Aile Hukuku</option> <option value="gayrimenkul">Gayrimenkul Hukuku</option> <option value="ceza">Ceza Hukuku</option> <option value="sirket">Şirketler Hukuku</option> <option value="icra">İcra-İflas Hukuku</option> </select> </div> <div class="mb-6"> <label for="message" class="block text-gray-700 font-medium mb-2">Mesajınız</label> <input id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"/> </div> <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold py-3 px-6 rounded-lg transition duration-300"> Randevu Talep Et </button> </form> </div> </div> </div> </div> </section> <!-- Map Section --> <div class="h-96 bg-gray-200"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12767.123456789012!2d36.2463523!3d37.0741871!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDA0JzI3LjEiTiAzNsKwMTQnNDYuOSJF!5e0!3m2!1str!2str!4v1234567890123!5m2!1str!2str" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <!-- Footer --> <footer class="bg-blue-900 text-white py-12"> <div class="container mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between"> <div class="mb-8 md:mb-0"> <a href="#" class="text-white text-2xl font-bold"> <span class="bg-yellow-400 text-blue-900 px-3 py-1 rounded-lg">DEMİR</span> & PARTNERS </a> <p class="mt-4 text-gray-300 max-w-xs">Osmaniye'nin önde gelen hukuk bürosu olarak, bireysel ve kurumsal müvekkillerimize en kaliteli hukuki hizmeti sunuyoruz.</p> </div> <div class="mb-8 md:mb-0"> <h3 class="text-lg font-bold mb-4">Hızlı Linkler</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-300 hover:text-yellow-400 transition">Anasayfa</a></li> <li><a href="#services" class="text-gray-300 hover:text-yellow-400 transition">Hizmetler</a></li> <li><a href="#about" class="text-gray-300 hover:text-yellow-400 transition">Hakkımızda</a></li> <li><a href="#team" class="text-gray-300 hover:text-yellow-400 transition">Ekibimiz</a></li> <li><a href="#contact" class="text-gray-300 hover:text-yellow-400 transition">İletişim</a></li> </ul> </div> <div class="mb-8 md:mb-0"> <h3 class="text-lg font-bold mb-4">Hizmetler</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">İş Hukuku</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">Aile Hukuku</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">Gayrimenkul Hukuku</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">Ceza Hukuku</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">Şirketler Hukuku</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">İletişim</h3> <ul class="space-y-2"> <li class="flex items-center"> <i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> <span class="text-gray-300">Atatürk Cd. No:123, Osmaniye</span> </li> <li class="flex items-center"> <i class="fas fa-phone-alt mr-2 text-yellow-400"></i> <span class="text-gray-300">0328 888 12 34</span> </li> <li class="flex items-center"> <i class="fas fa-envelope mr-2 text-yellow-400"></i> <span class="text-gray-300">info@demirpartners.com</span> </li> </ul> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 Demir & Partners Hukuk Bürosu. Tüm hakları saklıdır.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="text-gray-400 hover:text-yellow-400 transition"><i class="fab fa-instagram"></i></a> </div> </div> </div> </footer> <script> // Mobile menu toggle const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Header scroll effect const header = document.getElementById('header'); window.addEventListener('scroll', () => { if (window.scrollY > 100) { header.classList.add('nav-scrolled'); } else { header.classList.remove('nav-scrolled'); } }); // 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 if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } }); }); // Animation on scroll const fadeElements = document.querySelectorAll('.fade-in'); const fadeInOnScroll = () => { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.style.opacity = '1'; } }); }; // Set initial state fadeElements.forEach(element => { element.style.opacity = '0'; }); // Add scroll event listener window.addEventListener('scroll', fadeInOnScroll); // Trigger once on page load window.addEventListener('load', fadeInOnScroll); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
