Page de destination – Maison luxueuse

2,694 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 April 2025

Un code de Metehan

20 June 2025

Modèle de tableau de bord d'administration HTML

29 September 2023

Animation de bouton de commande

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxe Estates - Experience Unparalleled Luxury</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
            background-color: #f8f8f8;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header Styles */
        header {
            background-color: rgba(248, 248, 248, 0.9);
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: background-color 0.3s ease;
        }

header.scrolled {
            background-color: rgba(248, 248, 248, 1);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 28px;
            font-weight: 700;
            color: #333;
            text-decoration: none;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            color: #333;
            text-decoration: none;
            font-weight: 400;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: #8a7d5f;
        }

/* Hero Section Styles */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translateX(-50%) translateY(-50%);
            z-index: -1;
        }

.hero-content {
            color: #fff;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 40px;
            border-radius: 10px;
        }

.hero h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.5s;
        }

.hero p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.7s;
        }

.cta-button {
            display: inline-block;
            background-color: #8a7d5f;
            color: #fff;
            padding: 15px 30px;
            text-decoration: none;
            font-weight: 600;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.9s;
        }

.cta-button:hover {
            background-color: #6e6348;
        }

/* Featured Properties Styles */
        .featured-properties {
            padding: 100px 0;
            background-color: #fff;
        }

.section-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 50px;
            color: #333;
        }

.properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.property-card {
            background-color: #f8f8f8;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.property-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

.property-image {
            height: 250px;
            background-size: cover;
            background-position: center;
        }

.property-details {
            padding: 20px;
        }

.property-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #333;
        }

.property-location, .property-price {
            font-size: 1rem;
            color: #666;
            margin-bottom: 5px;
        }

.property-features {
            font-size: 0.9rem;
            color: #999;
            margin-top: 10px;
        }

/* Services Styles */
        .services {
            padding: 100px 0;
            background-color: #f8f8f8;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.service-card {
            text-align: center;
            padding: 30px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

.service-card:hover {
            transform: translateY(-10px);
        }

.service-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #8a7d5f;
        }

.service-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #333;
        }

.service-description {
            font-size: 1rem;
            color: #666;
        }

/* Testimonials Styles */
        .testimonials {
            padding: 100px 0;
            background-color: #fff;
        }

.testimonials-slider {
            position: relative;
            overflow: hidden;
        }

.testimonial {
            text-align: center;
            padding: 0 50px;
            display: none;
        }

.testimonial.active {
            display: block;
            animation: fadeIn 0.5s ease forwards;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 20px;
            color: #333;
        }

.testimonial-author {
            font-weight: 600;
            color: #8a7d5f;
        }

.slider-nav {
            text-align: center;
            margin-top: 30px;
        }

.slider-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

.slider-dot.active {
            background-color: #8a7d5f;
        }

/* Contact Form Styles */
        .contact {
            padding: 100px 0;
            background-color: #f8f8f8;
        }

.contact-form {
            max-width: 600px;
            margin: 0 auto;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            font-family: 'Montserrat', sans-serif;
        }

.form-group textarea {
            height: 150px;
        }

.submit-button {
            background-color: #8a7d5f;
            color: #fff;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.submit-button:hover {
            background-color: #6e6348;
        }

/* Footer Styles */
        footer {
            background-color: #333;
            color: #fff;
            padding: 50px 0;
        }

.footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

.footer-section {
            flex: 1;
            margin-bottom: 30px;
            min-width: 200px;
        }

.footer-section h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #8a7d5f;
        }

.footer-section p,
        .footer-section a {
            color: #ccc;
            text-decoration: none;
            margin-bottom: 10px;
            display: block;
        }

.social-links a {
            font-size: 1.5rem;
            margin-right: 15px;
        }

.copyright {
            text-align: center;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #444;
            font-size: 0.9rem;
            color: #ccc;
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

/* Responsive Styles */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 3rem;
            }

.hero p {
                font-size: 1.2rem;
            }

.nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <a href="#" class="logo">Luxe Estates</a>
            <ul class="nav-links">
                <li><a href="#featured-properties">Properties</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<main>
        <section class="hero">
            <video autoplay loop muted playsinline>
                <source src="https://videos.pexels.com/video-files/6467633/6467633-uhd_2732_1440_25fps.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-content">
                <h1>Experience Unparalleled Luxury</h1>
                <p>Exclusive properties for those who know what they deserve</p>
                <a href="#contact" class="cta-button">Request Exclusive Consultation</a>
            </div>
        </section>

<section id="featured-properties" class="featured-properties">
            <div class="container">
                <h2 class="section-title">Featured Properties</h2>
                <div class="properties-grid">
                    <div class="property-card">
                        <div class="property-image" style="background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2075&q=80');"></div>
                        <div class="property-details">
                            <h3 class="property-title">Villa Serenity</h3>
                            <p class="property-location">Beverly Hills, CA</p>
                            <p class="property-price">$25,000,000</p>
                            <p class="property-features">7 bedrooms • 9 bathrooms • 12,000 sq ft</p>
                        </div>
                    </div>
                    <div class="property-card">
                        <div class="property-image" style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80');"></div>
                        <div class="property-details">
                            <h3 class="property-title">Skyline Penthouse</h3>
                            <p class="property-location">Manhattan, NY</p>
                            <p class="property-price">$18,500,000</p>
                            <p class="property-features">4 bedrooms • 5 bathrooms • 6,500 sq ft</p>
                        </div>
                    </div>
                    <div class="property-card">
                        <div class="property-image" style="background-image: url('https://images.pexels.com/photos/1732414/pexels-photo-1732414.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');"></div>
                        <div class="property-details">
                            <h3 class="property-title">Coastal Haven</h3>
                            <p class="property-location">Malibu, CA</p>
                            <p class="property-price">$32,000,000</p>
                            <p class="property-features">6 bedrooms • 8 bathrooms • 15,000 sq ft</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="services" class="services">
            <div class="container">
                <h2 class="section-title">Premium Services</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <div class="service-icon">????</div>
                        <h3 class="service-title">Personalized Consultation</h3>
                        <p class="service-description">Our experts will guide you through every step to find your ideal property.</p>
                    </div>
                    <div class="service-card">
                        <div class="service-icon">????</div>
                        <h3 class="service-title">Private Tours</h3>
                        <p class="service-description">Exclusive visits to the most coveted properties, tailored to your schedule.</p>
                    </div>
                    <div class="service-card">
                        <div class="service-icon">????</div>
                        <h3 class="service-title">Discreet Handling</h3>
                        <p class="service-description">We guarantee maximum confidentiality in all transactions.</p>
                    </div>
                    <div class="service-card">
                        <div class="service-icon">????</div>
                        <h3 class="service-title">Global Reach</h3>
                        <p class="service-description">Access to an international portfolio of luxury properties.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="testimonials">
            <div class="container">
                <h2 class="section-title">What Our Clients Say</h2>
                <div class="testimonials-slider">
                    <div class="testimonial active">
                        <p class="testimonial-text">"Finding our dream home was a stress-free process thanks to their exceptional team."</p>
                        <p class="testimonial-author">A. R.</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"Their knowledge of the luxury market and attention to detail exceeded all our expectations."</p>
                        <p class="testimonial-author">M. J.</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"The discretion and professionalism with which they handled our acquisition was impeccable."</p>
                        <p class="testimonial-author">E. L.</p>
                    </div>
                </div>
                <div class="slider-nav">
                    <span class="slider-dot active"></span>
                    <span class="slider-dot"></span>
                    <span class="slider-dot"></span>
                </div>
            </div>
        </section>

<section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">Exclusive Contact</h2>
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="tel" id="phone" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="message">What are you looking for?</label>
                        <textarea id="message" name="message" required>