Elite Real Estate: Apartamentos, Vilas, Casas para Venda e Aluguel

224 Metehan

Abrir no Editor Publique Seu Código

Elite Real Estate: Apartamentos, Vilas, Casas para Venda e Aluguel

Recomendado

25 November 2024

Site responsivo de dados de alunos

17 July 2025

Formulário de inscrição de login rotativo 3D HTML CSS

14 January 2025

Exemplo de página da Web do portfólio

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elite Emlak | Profesyonel Emlak Danışmanlığı</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-blue: #1a365d;
            --secondary-gold: #d4af37;
            --light-blue: #2c5282;
            --dark-gold: #b8860b;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero-section {
            background: linear-gradient(rgba(26, 54, 93, 0.8), rgba(26, 54, 93, 0.8)), 
                        url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80');
            background-size: cover;
            background-position: center;
            min-height: 80vh;
        }
        
        .property-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            color: var(--secondary-gold);
            font-size: 2.5rem;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.9);
            border-left: 4px solid var(--secondary-gold);
        }
        
        .nav-link:hover {
            color: var(--secondary-gold) !important;
        }
        
        .btn-primary {
            background-color: var(--secondary-gold);
            color: var(--primary-blue);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background-color: var(--dark-gold);
            color: white;
        }
        
        .btn-outline {
            border: 2px solid var(--secondary-gold);
            color: var(--secondary-gold);
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background-color: var(--secondary-gold);
            color: white;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: var(--secondary-gold);
            bottom: -10px;
            left: 0;
        }
        
        .blog-card:hover .blog-title {
            color: var(--secondary-gold);
        }
        
        .team-member:hover .team-img {
            transform: scale(1.05);
        }
        
        .team-img {
            transition: transform 0.3s ease;
        }
        
        .contact-icon {
            color: var(--secondary-gold);
            font-size: 1.5rem;
        }
        
        .social-icon {
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            color: var(--secondary-gold);
            transform: scale(1.2);
        }
        
        .search-box {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stat-card {
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
            color: var(--secondary-gold);
            font-size: 2rem;
        }
        
        .service-card:hover {
            background-color: var(--primary-blue);
            color: white;
        }
        
        .service-card:hover .service-icon {
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50">
    
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fas fa-building text-3xl mr-2" style="color: #d4af37;"></i>
                    <span class="text-2xl font-bold" style="color: #1a365d;">ELITE EMLAK</span>
                </a>
            </div>
            
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">Ana Sayfa</a>
                <a href="#properties" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">İlanlar</a>
                <a href="#services" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">Hizmetler</a>
                <a href="#about" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">Hakkımızda</a>
                <a href="#blog" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">Blog</a>
                <a href="#contact" class="nav-link text-gray-700 font-medium hover:text-blue-800 transition">İletişim</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <a href="tel:+905555555555" class="hidden md:flex items-center text-gray-700 hover:text-blue-800 transition">
                    <i class="fas fa-phone-alt mr-2"></i>
                    <span>0555 555 55 55</span>
                </a>
                <button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
        
        
        <div class="md:hidden hidden bg-white py-4 px-4 shadow-lg" id="mobile-menu">
            <a href="#" class="block py-2 text-gray-700 hover:text-blue-800">Ana Sayfa</a>
            <a href="#properties" class="block py-2 text-gray-700 hover:text-blue-800">İlanlar</a>
            <a href="#services" class="block py-2 text-gray-700 hover:text-blue-800">Hizmetler</a>
            <a href="#about" class="block py-2 text-gray-700 hover:text-blue-800">Hakkımızda</a>
            <a href="#blog" class="block py-2 text-gray-700 hover:text-blue-800">Blog</a>
            <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-800">İletişim</a>
            <a href="tel:+905555555555" class="block py-2 text-gray-700 hover:text-blue-800">
                <i class="fas fa-phone-alt mr-2"></i> 0555 555 55 55
            </a>
        </div>
    </header>

<section class="hero-section flex items-center justify-center text-white">
        <div class="container mx-auto px-4 py-20">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">Hayalinizdeki Ev Bir Tık Uzağınızda</h1>
                <p class="text-xl mb-8">Profesyonel emlak danışmanlığı ile güvenli yatırımlar yapın, hayalinizdeki eve kolayca ulaşın.</p>
                
                <div class="search-box bg-white rounded-lg p-6 max-w-4xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2 text-left">Konum</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-700">
                                <option>İl Seçiniz</option>
                                <option>İstanbul</option>
                                <option>Ankara</option>
                                <option>İzmir</option>
                                <option>Bursa</option>
                                <option>Antalya</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2 text-left">Fiyat Aralığı</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-700">
                                <option>Fiyat Aralığı</option>
                                <option>0 - 1.000.000 TL</option>
                                <option>1.000.000 - 2.500.000 TL</option>
                                <option>2.500.000 - 5.000.000 TL</option>
                                <option>5.000.000 TL ve üzeri</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 text-sm font-bold mb-2 text-left">Oda Sayısı</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-700">
                                <option>Oda Sayısı</option>
                                <option>1+1</option>
                                <option>2+1</option>
                                <option>3+1</option>
                                <option>4+1 ve üzeri</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button class="btn-primary w-full py-3 px-4 rounded-md font-bold">
                                <i class="fas fa-search mr-2"></i> Ara
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 flex justify-center space-x-4">
                    <button class="btn-primary py-3 px-6 rounded-md font-bold">
                        <i class="fas fa-home mr-2"></i> İlanları Keşfet
                    </button>
                    <button class="btn-outline py-3 px-6 rounded-md font-bold">
                        <i class="fas fa-chart-line mr-2"></i> Ücretsiz Değerlendirme
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="stat-card bg-white p-6 rounded-lg shadow-md text-center">
                    <div class="stat-icon mb-4">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="text-3xl font-bold mb-2" style="color: #1a365d;">1,250+</h3>
                    <p class="text-gray-600">Satılan Konut</p>
                </div>
                <div class="stat-card bg-white p-6 rounded-lg shadow-md text-center">
                    <div class="stat-icon mb-4">
                        <i class="fas fa-smile"></i>
                    </div>
                    <h3 class="text-3xl font-bold mb-2" style="color: #1a365d;">98%</h3>
                    <p class="text-gray-600">Müşteri Memnuniyeti</p>
                </div>
                <div class="stat-card bg-white p-6 rounded-lg shadow-md text-center">
                    <div class="stat-icon mb-4">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3 class="text-3xl font-bold mb-2" style="color: #1a365d;">15+</h3>
                    <p class="text-gray-600">Yıllık Deneyim</p>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="section-title text-3xl font-bold inline-block" style="color: #1a365d;">Hizmetlerimiz</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Profesyonel ekibimizle sunduğumuz kapsamlı emlak hizmetleri</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition cursor-pointer">
                    <div class="service-icon text-4xl mb-4" style="color: #d4af37;">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Konut Satışı</h3>
                    <p class="text-gray-600">Hayalinizdeki evi bulmanız için uzman danışmanlık hizmeti</p>
                </div>
                <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition cursor-pointer">
                    <div class="service-icon text-4xl mb-4" style="color: #d4af37;">
                        <i class="fas fa-key"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Kiralama</h3>
                    <p class="text-gray-600">İhtiyacınıza uygun kiralık konut seçenekleri</p>
                </div>
                <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition cursor-pointer">
                    <div class="service-icon text-4xl mb-4" style="color: #d4af37;">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Yatırım Danışmanlığı</h3>
                    <p class="text-gray-600">Güvenilir emlak yatırımları için uzman görüşü</p>
                </div>
                <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition cursor-pointer">
                    <div class="service-icon text-4xl mb-4" style="color: #d4af37;">
                        <i class="fas fa-file-signature"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Ekspertiz</h3>
                    <p class="text-gray-600">Profesyonel değerleme ve ekspertiz hizmetleri</p>
                </div>
            </div>
        </div>
    </section>

<section id="properties" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-12">
                <div>
                    <h2 class="section-title text-3xl font-bold inline-block" style="color: #1a365d;">Öne Çıkan İlanlar</h2>
                    <p class="mt-2 text-gray-600">Son eklenen premium emlak seçenekleri</p>
                </div>
                <a href="#" class="btn-outline py-2 px-6 rounded-md font-bold hidden md:inline-block">
                    Tüm İlanları 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="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Modern Daire" class="w-full h-64 object-cover">
                        <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">Satılık</span>
                        </div>
                        <div class="absolute bottom-4 left-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">3.250.000 TL</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Modern Şehir Dairesi</h3>
                        <p class="text-gray-600 mb-4 flex items-center">
                            <i class="fas fa-map-marker-alt mr-2" style="color: #d4af37;"></i>
                            Beşiktaş, İstanbul
                        </p>
                        <div class="flex justify-between border-t border-gray-200 pt-4">
                            <div class="flex items-center">
                                <i class="fas fa-bed mr-2" style="color: #d4af37;"></i>
                                <span>3 Yatak</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-bath mr-2" style="color: #d4af37;"></i>
                                <span>2 Banyo</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-ruler-combined mr-2" style="color: #d4af37;"></i>
                                <span>145 m²</span>
                            </div>
                        </div>
                        <button class="btn-primary w-full mt-4 py-2 rounded-md font-bold">
                            Detayları Gör <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                
                <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Lüks Villa" class="w-full h-64 object-cover">
                        <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">Satılık</span>
                        </div>
                        <div class="absolute bottom-4 left-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">8.750.000 TL</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Lüks Bahçeli Villa</h3>
                        <p class="text-gray-600 mb-4 flex items-center">
                            <i class="fas fa-map-marker-alt mr-2" style="color: #d4af37;"></i>
                            Bodrum, Muğla
                        </p>
                        <div class="flex justify-between border-t border-gray-200 pt-4">
                            <div class="flex items-center">
                                <i class="fas fa-bed mr-2" style="color: #d4af37;"></i>
                                <span>5 Yatak</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-bath mr-2" style="color: #d4af37;"></i>
                                <span>4 Banyo</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-ruler-combined mr-2" style="color: #d4af37;"></i>
                                <span>320 m²</span>
                            </div>
                        </div>
                        <button class="btn-primary w-full mt-4 py-2 rounded-md font-bold">
                            Detayları Gör <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
                
                
                <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                             alt="Modern Ev" class="w-full h-64 object-cover">
                        <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">Kiralık</span>
                        </div>
                        <div class="absolute bottom-4 left-4 bg-white px-3 py-1 rounded-full shadow-md">
                            <span class="font-bold" style="color: #1a365d;">15.000 TL/Ay</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2" style="color: #1a365d;">Modern Aile Evi</h3>
                        <p class="text-gray-600 mb-4 flex items-center">
                            <i class="fas fa-map-marker-alt mr-2" style="color: #d4af37;"></i>
                            Çankaya, Ankara
                        </p>
                        <div class="flex justify-between border-t border-gray-200 pt-4">
                            <div class="flex items-center">
                                <i class="fas fa-bed mr-2" style="color: #d4af37;"></i>
                                <span>4 Yatak</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-bath mr-2" style="color: #d4af37;"></i>
                                <span>2 Banyo</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-ruler-combined mr-2" style="color: #d4af37;"></i>
                                <span>180 m²</span>
                            </div>
                        </div>
                        <button class="btn-primary w-full mt-4 py-2 rounded-md font-bold">
                            Detayları Gör <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-8 md:hidden">
                <a href="#" class="btn-outline py-2 px-6 rounded-md font-bold inline-block">
                    Tüm İlanları Gör <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="section-title text-3xl font-bold inline-block" style="color: #1a365d;">Neden Bizi Seçmelisiniz?</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Emlak sektöründeki 15 yıllık deneyimimizle sizlere en iyi hizmeti sunuyoruz</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center p-6">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-users
</html>

Recomendado

Site responsivo de dados de alunos

Formulário de inscrição de login rotativo 3D HTML CSS

Exemplo de página da Web do portfólio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS