A Code by Metehan

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BİSTAKX | Premium Otomobil Galerisi</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: '#FFD700',
                        darkgold: '#B8860B',
                        matteblack: '#2C2C2C',
                        deepblack: '#1A1A1A',
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f8f8f8;
            color: #333;
        }
        
        .hero-section {
            background: linear-gradient(rgba(44, 44, 44, 0.7), rgba(44, 44, 44, 0.7)), 
                        url('https://images.unsplash.com/photo-1494972308805-46370cd0efbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            min-height: 90vh;
        }
        
        .brand-logo {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }
        
        .car-card:hover .car-overlay {
            opacity: 1;
            transform: translateY(0);
        }
        
        .car-overlay {
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .testimonial-card {
            transition: all 0.3s ease;
        }
        
        .testimonial-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);
        }
        
        .service-icon {
            transition: all 0.3s ease;
        }
        
        .service-card:hover .service-icon {
            transform: scale(1.1);
            color: #FFD700;
        }
        
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        
        .mobile-menu {
            transition: all 0.3s ease;
        }
        
        .contact-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px #FFD700;
        }
        
        .scroll-top {
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-20px);}
            60% {transform: translateY(-10px);}
        }
    </style>
</head>
<body class="relative">
    
    <header class="bg-matteblack text-white sticky top-0 z-50 shadow-lg">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="#" class="brand-logo text-3xl font-bold text-gold">BİSTAKX</a>
                <span class="ml-2 text-sm hidden md:block">Premium Otomobil Galerisi</span>
            </div>
            
            
            <nav class="hidden md:flex space-x-8">
                <a href="#home" class="hover:text-gold transition">Ana Sayfa</a>
                <div class="dropdown relative">
                    <button class="hover:text-gold transition flex items-center">
                        Galeri <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </button>
                    <div class="dropdown-menu absolute hidden bg-deepblack mt-2 py-2 w-48 rounded shadow-lg">
                        <a href="#gallery" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Tüm Araçlar</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Mercedes-Benz</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">BMW</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Audi</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Porsche</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Range Rover</a>
                        <a href="#" class="block px-4 py-2 hover:bg-gold hover:text-black transition">Lexus</a>
                    </div>
                </div>
                <a href="#services" class="hover:text-gold transition">Hizmetler</a>
                <a href="#about" class="hover:text-gold transition">Kurumsal</a>
                <a href="#contact" class="hover:text-gold transition">İletişim</a>
            </nav>
            
            
            <button id="mobile-menu-button" class="md:hidden text-gold focus:outline-none">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </div>
        
        
        <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-deepblack absolute w-full left-0 px-4 pb-4">
            <a href="#home" class="block py-2 hover:text-gold transition">Ana Sayfa</a>
            <div class="py-2">
                <button class="flex items-center justify-between w-full hover:text-gold transition" onclick="toggleMobileDropdown('gallery-dropdown')">
                    Galeri <i class="fas fa-chevron-down text-xs"></i>
                </button>
                <div id="gallery-dropdown" class="hidden pl-4 mt-1">
                    <a href="#gallery" class="block py-1 hover:text-gold transition">Tüm Araçlar</a>
                    <a href="#" class="block py-1 hover:text-gold transition">Mercedes-Benz</a>
                    <a href="#" class="block py-1 hover:text-gold transition">BMW</a>
                    <a href="#" class="block py-1 hover:text-gold transition">Audi</a>
                    <a href="#" class="block py-1 hover:text-gold transition">Porsche</a>
                    <a href="#" class="block py-1 hover:text-gold transition">Range Rover</a>
                    <a href="#" class="block py-1 hover:text-gold transition">Lexus</a>
                </div>
            </div>
            <a href="#services" class="block py-2 hover:text-gold transition">Hizmetler</a>
            <a href="#about" class="block py-2 hover:text-gold transition">Kurumsal</a>
            <a href="#contact" class="block py-2 hover:text-gold transition">İletişim</a>
        </div>
    </header>

<section id="home" class="hero-section flex items-center justify-center text-white">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Premium Otomobil Deneyimi</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Lüks ve performansın mükemmel uyumu için seçkin koleksiyonumuzu keşfedin</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#gallery" class="bg-gold hover:bg-darkgold text-black font-bold py-3 px-6 rounded transition duration-300">Galeriyi Keşfet</a>
                <a href="#contact" class="border border-white hover:bg-white hover:text-black font-bold py-3 px-6 rounded transition duration-300">Bize Ulaşın</a>
            </div>
        </div>
    </section>

<section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">Seçkin Markalar</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Mercedes-Logo.svg/1200px-Mercedes-Logo.svg.png" alt="Mercedes-Benz" class="h-16 object-contain">
                    <span class="mt-2 font-medium">Mercedes-Benz</span>
                </div>
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/2048px-BMW.svg.png" alt="BMW" class="h-16 object-contain">
                    <span class="mt-2 font-medium">BMW</span>
                </div>
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Audi-Logo_2016.svg/1200px-Audi-Logo_2016.svg.png" alt="Audi" class="h-16 object-contain">
                    <span class="mt-2 font-medium">Audi</span>
                </div>
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Porsche_logo.png/1200px-Porsche_logo.png" alt="Porsche" class="h-16 object-contain">
                    <span class="mt-2 font-medium">Porsche</span>
                </div>
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Range_Rover_logo.png/1200px-Range_Rover_logo.png" alt="Range Rover" class="h-16 object-contain">
                    <span class="mt-2 font-medium">Range Rover</span>
                </div>
                <div class="brand-item flex flex-col items-center p-4 hover:bg-gray-100 rounded-lg transition">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Lexus_Logo_2018.png/1200px-Lexus_Logo_2018.png" alt="Lexus" class="h-16 object-contain">
                    <span class="mt-2 font-medium">Lexus</span>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-12">
                <h2 class="text-3xl font-bold font-serif">Öne Çıkan Araçlar</h2>
                <a href="#" class="text-gold hover:text-darkgold font-medium flex items-center">
                    Tümünü Gör <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="car-card bg-white rounded-lg overflow-hidden shadow-lg relative">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mercedes-Benz S-Class" class="w-full h-64 object-cover">
                        <div class="car-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-center items-center p-4">
                            <a href="#" class="bg-gold hover:bg-darkgold text-black font-bold py-2 px-4 rounded mb-2 transition">Detaylar</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-black text-white font-bold py-2 px-4 rounded transition">360° Görünüm</a>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-xl font-bold">Mercedes-Benz S-Class</h3>
                                <p class="text-gray-600">2023 Model</p>
                            </div>
                            <span class="bg-gold text-black text-sm font-bold px-3 py-1 rounded-full">Yeni</span>
                        </div>
                        <div class="mt-4 flex justify-between items-center">
                            <div>
                                <p class="text-gray-500 text-sm">Benzin • Otomatik</p>
                                <p class="text-gray-500 text-sm">5.000 km</p>
                            </div>
                            <p class="text-xl font-bold text-gold">₺3.250.000</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="car-card bg-white rounded-lg overflow-hidden shadow-lg relative">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1541899481282-d53b3e36e9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Porsche Cayenne" class="w-full h-64 object-cover">
                        <div class="car-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-center items-center p-4">
                            <a href="#" class="bg-gold hover:bg-darkgold text-black font-bold py-2 px-4 rounded mb-2 transition">Detaylar</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-black text-white font-bold py-2 px-4 rounded transition">360° Görünüm</a>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-xl font-bold">Porsche Cayenne</h3>
                                <p class="text-gray-600">2022 Model</p>
                            </div>
                            <span class="bg-blue-500 text-white text-sm font-bold px-3 py-1 rounded-full">Özel</span>
                        </div>
                        <div class="mt-4 flex justify-between items-center">
                            <div>
                                <p class="text-gray-500 text-sm">Benzin • Otomatik</p>
                                <p class="text-gray-500 text-sm">12.000 km</p>
                            </div>
                            <p class="text-xl font-bold text-gold">₺4.750.000</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="car-card bg-white rounded-lg overflow-hidden shadow-lg relative">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1580273916550-e4c6844189a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Range Rover Vogue" class="w-full h-64 object-cover">
                        <div class="car-overlay absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-center items-center p-4">
                            <a href="#" class="bg-gold hover:bg-darkgold text-black font-bold py-2 px-4 rounded mb-2 transition">Detaylar</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-black text-white font-bold py-2 px-4 rounded transition">360° Görünüm</a>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-xl font-bold">Range Rover Vogue</h3>
                                <p class="text-gray-600">2023 Model</p>
                            </div>
                            <span class="bg-green-500 text-white text-sm font-bold px-3 py-1 rounded-full">Sıfır</span>
                        </div>
                        <div class="mt-4 flex justify-between items-center">
                            <div>
                                <p class="text-gray-500 text-sm">Dizel • Otomatik</p>
                                <p class="text-gray-500 text-sm">0 km</p>
                            </div>
                            <p class="text-xl font-bold text-gold">₺6.200.000</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">Premium Hizmetlerimiz</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="service-card bg-gray-100 rounded-lg p-6 text-center hover:shadow-lg transition">
                    <div class="service-icon bg-matteblack text-gold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">
                        <i class="fas fa-car"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Satış Hizmetleri</h3>
                    <p class="text-gray-600">Yeni ve ikinci el premium araç satışı, özel sipariş ve ithalat hizmetleri</p>
                </div>
                
                
                <div class="service-card bg-gray-100 rounded-lg p-6 text-center hover:shadow-lg transition">
                    <div class="service-icon bg-matteblack text-gold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">
                        <i class="fas fa-coins"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Finansal Çözümler</h3>
                    <p class="text-gray-600">Kredi, leasing ve sigorta danışmanlığı ile özel finansman paketleri</p>
                </div>
                
                
                <div class="service-card bg-gray-100 rounded-lg p-6 text-center hover:shadow-lg transition">
                    <div class="service-icon bg-matteblack text-gold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Servis Hizmetleri</h3>
                    <p class="text-gray-600">Yetkili servis, periyodik bakım ve orijinal yedek parça temini</p>
                </div>
                
                
                <div class="service-card bg-gray-100 rounded-lg p-6 text-center hover:shadow-lg transition">
                    <div class="service-icon bg-matteblack text-gold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl">
                        <i class="fas fa-crown"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">VIP Hizmetler</h3>
                    <p class="text-gray-600">Özel müşterilerimiz için araç teslimi, fleet management ve corporate çözümler</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">Müşteri Yorumları</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-gray-300 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold text-matteblack">AŞ</div>
                        <div class="ml-4">
                            <h4 class="font-bold">Ahmet Şenol</h4>
                            <p class="text-sm text-gray-500">İş Adamı</p>
                        </div>
                    </div>
                    <div class="flex mb-2 text-gold">
                        <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>
                    <p class="text-gray-600">"BİSTAKX ile çalışmaktan son derece memnun kaldım. Profesyonel ekibi ve kaliteli hizmet anlayışı için teşekkür ederim. Mercedes S-Class'ımı buradan aldım ve her şey mükemmeldi."</p>
                </div>
                
                
                <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-gray-300 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold text-matteblack">ED</div>
                        <div class="ml-4">
                            <h4 class="font-bold">Elif Demir</h4>
                            <p class="text-sm text-gray-500">CEO</p>
                        </div>
                    </div>
                    <div class="flex mb-2 text-gold">
                        <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>
                    <p class="text-gray-600">"Şirketimiz için 5 adet araç filosu oluşturduk ve BİSTAKX'in sunduğu corporate çözümler sayesinde çok avantajlı şartlarda araçlarımıza kavuştuk. Kesinlikle tavsiye ederim."</p>
                </div>
                
                
                <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="bg-gray-300 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold text-matteblack">MK</div>
                        <div class="ml-4">
                            <h4 class="font-bold">Mehmet Kaya</h4>
                            <p class="text-sm text-gray-500">Doktor</p>
                        </div>
                    </div>
                    <div class="flex mb-2 text-gold">
                        <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>
                    <p class="text-gray-600">"Porsche Cayenne alırken gösterdikleri özen ve satış sonrası destek için teşekkürler. Araç teslimi ve tüm süreçler sorunsuz ilerledi. Servis hizmetleri de oldukça profesyonel."</p>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-16 bg-matteblack text-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
                    <h2 class="text-3xl font-bold mb-6 font-serif">BİSTAKX Hakkında</h2>
                    <p class="mb-4">BİSTAKX, 2010 yılından bu yana lüks otomobil sektöründe faaliyet gösteren, müşteri memnuniyetini her şeyin üzerinde tutan bir premium otomobil galerisidir.</p>
                    <p class="mb-4">Misyonumuz, müşterilerimize en kaliteli araçları, en uygun finansal çözümlerle sunarken, satış öncesi ve sonrasında üst düzey hizmet vermektir.</p>
                    <p class="mb-6">Vizyonumuz, Türkiye'nin önde gelen lüks otomobil galerisi olarak, sektördeki standartları yükseltmek ve müşterilerimize unutulmaz bir otomobil deneyimi yaşatmaktır.</p>
                    <a href="#" class="bg-gold hover:bg-darkgold text-black font-bold py-2 px-6 rounded inline-block transition">Daha Fazla Bilgi</a>
                </div>
                <div class="lg:w-1/2">
                    <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1631&q=80" alt="BİSTAKX Showroom" class="rounded-lg shadow-xl w-full">
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 font-serif">İletişim</h2>
            
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="lg:w-1/2">
                    <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-8">
                        <h3 class="text-xl font-bold mb-4 text-gold">İletişim Bilgileri</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <i class="fas fa-map-marker-alt text-gold mt-1 mr-3"></i>
                                <div>
                                    <p class="font-medium">Adres</p>
                                    <p class="text-gray-600">Levent Mahallesi, Büyükdere Caddesi No:123, 34330 Beşiktaş/İstanbul</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-phone-alt text-gold mr-3"></i>
                                <div>
                                    <p class="font-medium">Telefon</p>
                                    <p class="text-gray-600">0 (212) 123 45 67</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-gold mr-3"></i>
                                <div>
                                    <p class="font-medium">E-posta</p>
                                    <p class="text-gray-600">info@bistakx.com</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-clock text-gold mr-3"></i>
                                <div>
                                    <p class="font-medium">Çalışma Saatleri</p>
                                    <p class="text-gray-600">Pazartesi - Cumartesi: 09:00 - 19:00</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-100 p-6 rounded-lg shadow-md">
                        <h3 class="text-xl font-bold mb-4 text-gold">Sosyal Medya</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-matteblack hover:bg-deepblack text-white w-10 h-10 rounded-full flex items-center justify-center transition">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="bg-matteblack hover:bg-deepblack text-white w-10 h-10 rounded-full flex items-center justify-center transition">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="bg-matteblack hover:bg-deepblack text-white w-10 h-10 rounded-full flex items-center justify-center transition">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="bg-matteblack hover:bg-deepblack text-white w-10 h-10 rounded-full flex items-center justify-center transition">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="bg-matteblack hover:bg-deepblack text-white w-10 h-10 rounded-full flex items-center justify-center transition">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="lg:w-1/2">
                    <form class="bg-gray-100 p-6 rounded-lg shadow-md">
                        <h3 class="text-xl font-bold mb-6 text-gold">Bize Mesaj Gönderin</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="name" class="block text-sm font-medium mb-1">Adınız*</label>
                                <input type="text" id="name" class="contact-input w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-gold">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium mb-1">Telefon*</label>
                                <input type="tel" id="phone" class="contact-input w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-gold">
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="email" class="block text-sm font-medium mb-1">E-posta*</label>
                            <input type="email" id="email" class="contact-input w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-gold">
                        </div>
                        <div class="mb-4">
                            <label for="subject" class="block text-sm font-medium mb-1">Konu*</label>
                            <select id="subject" class="contact-input w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-gold">
                                <option value="">Seçiniz</option>
                                <option value="sales">Satış Bilgisi</option>
                                <option value="service">Servis Randevusu</option>
                                <option value="finance">Finansman Bilgisi</option>
                                <option value="other">Diğer</option>
                            </select>
                        </div>
                        <div class="mb-6">
                            <label for="message" class="block text-sm font-medium mb-1">Mesajınız*</label>
                            <textarea id="message" rows="4" class="contact-input w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-gold">

A Code by Metehan

Recommended

Quake III

HTML Animated Button with SVG and Text

HTML Staircase Structure with CSS Classes

HTML

CSS

JS

Recommended

Quake III

HTML Animated Button with SVG and Text

HTML Staircase Structure with CSS Classes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS