A Code by Metehan

1,734 Metehan

<!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">

CSS

A Code by Metehan

Recommended