WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code de Metehan
49
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
16 May 2025
Un code de Maxi-Digital
26 December 2024
Un code par efficientcloud646
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) */
