Luxury Premium Real Estate Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Premium Real Estate - Luxury Properties in India</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> </head> <body class="font-inter scroll-smooth"> <!-- Navigation --> <nav class="fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 shadow-lg"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <div class="text-2xl font-playfair font-bold text-gradient"> Royal Estates</div> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#home" class="nav-link text-gray-700 hover:text-orange-500 px-3 py-2 text-sm font-medium">Home</a> <a href="#properties" class="nav-link text-gray-700 hover:text-orange-500 px-3 py-2 text-sm font-medium">Properties</a> <a href="#locations" class="nav-link text-gray-700 hover:text-orange-500 px-3 py-2 text-sm font-medium">Locations</a> <a href="#gallery" class="nav-link text-gray-700 hover:text-orange-500 px-3 py-2 text-sm font-medium">Gallery</a> <a href="#contact" class="nav-link text-gray-700 hover:text-orange-500 px-3 py-2 text-sm font-medium">Contact</a> </div> </div> <div class="md:hidden"> <button id="mobile-menu-btn" class="text-gray-700 hover:text-orange-500"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </div> <div id="mobile-menu" class="md:hidden hidden bg-white border-t"> <div class="px-2 pt-2 pb-3 space-y-1"> <a href="#home" class="block px-3 py-2 text-gray-700 hover:text-orange-500">Home</a> <a href="#properties" class="block px-3 py-2 text-gray-700 hover:text-orange-500">Properties</a> <a href="#locations" class="block px-3 py-2 text-gray-700 hover:text-orange-500">Locations</a> <a href="#gallery" class="block px-3 py-2 text-gray-700 hover:text-orange-500">Gallery</a> <a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-orange-500">Contact</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="min-h-screen indian-pattern flex items-center pt-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h1 class="text-4xl md:text-5xl font-playfair font-bold text-white mb-5">Discover Your Dream Home in <span class="text-yellow-300">India</span> </h1> <p class="text-xl text-gray-200 mb-8 leading-relaxed"> Premium properties across India's most prestigious locations. From Mumbai's skyline to Delhi's heritage, find your perfect sanctuary. </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="premium-gradient text-white px-8 py-4 rounded-full font-semibold hover:shadow-2xl transform hover:scale-105 transition-all duration-300"> Explore Properties </button> <button class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition-all duration-300"> Schedule Visit </button> </div> </div> <div class="slide-in-right relative"> <div class="flex justify-center items-center space-x-4"> <div class="float-animation"> <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-yellow-300 shadow-2xl"> <img src="https://images.unsplash.com/photo-1565402170291-8491f14678db?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt=""> </div> </div> <div class="float-delayed"> <div class="w-36 h-36 md:w-44 md:h-44 rounded-full overflow-hidden border-4 border-orange-300 shadow-2xl"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt=""> </div> </div> <div class="float-delayed-2"> <div class="w-28 h-28 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-pink-300 shadow-2xl"> <img src="https://images.unsplash.com/photo-1494526585095-c41746248156?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHJlYWwlMjBlc3RhdGV8ZW58MHx8MHx8fDA%3D" alt=""> </div> </div> </div> </div> </div> </div> </section> <!-- Premium Properties Section --> <section id="properties" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-4xl md:text-5xl font-playfair font-bold text-gray-800 mb-4"> Premium <span class="text-gradient">Properties</span> </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Handpicked luxury properties that define elegance and comfort in India's prime locations </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="property-card bg-white rounded-2xl overflow-hidden shadow-lg"> <div class="h-64 bg-gradient-to-br from-orange-400 to-red-500 relative"> <img src="https://images.unsplash.com/photo-1689338039987-8a2539194e27?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8R3VyZ2FvbnxlbnwwfHwwfHx8MA%3D%3D" alt=""> <div class="absolute top-4 right-4 bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-semibold"> ₹2.5 Cr </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-2">Royal Villa, Gurgaon</h3> <p class="text-gray-600 mb-4">4 BHK • 3500 sq ft • Premium Location</p> <div class="flex items-center justify-between"> <span class="text-orange-500 font-semibold">Ready to Move</span> <button class="text-orange-500 hover:text-orange-600 font-semibold">View Details →</button> </div> </div> </div> <div class="property-card bg-white rounded-2xl overflow-hidden shadow-lg"> <div class="h-64 bg-gradient-to-br from-blue-400 to-purple-500 relative"> <img src="https://images.unsplash.com/photo-1567157577867-05ccb1388e66?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8TXVtYmFpfGVufDB8fDB8fHww" alt=""> <div class="absolute top-4 right-4 bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-semibold"> ₹1.8 Cr </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-2">Luxury Apartment, Mumbai</h3> <p class="text-gray-600 mb-4">3 BHK • 2200 sq ft • Sea View</p> <div class="flex items-center justify-between"> <span class="text-green-500 font-semibold">Under Construction</span> <button class="text-orange-500 hover:text-orange-600 font-semibold">View Details →</button> </div> </div> </div> <div class="property-card bg-white rounded-2xl overflow-hidden shadow-lg"> <div class="h-64 bg-gradient-to-br from-green-400 to-teal-500 relative"> <img src="https://plus.unsplash.com/premium_photo-1661919589683-f11880119fb7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGVsaGl8ZW58MHx8MHx8fDA%3D" alt=""> <div class="absolute top-4 right-4 bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-semibold"> ₹3.2 Cr </div> </div> <div class="p-6"> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-2">Heritage Mansion, Delhi</h3> <p class="text-gray-600 mb-4">5 BHK • 4500 sq ft • Heritage Property</p> <div class="flex items-center justify-between"> <span class="text-orange-500 font-semibold">Exclusive</span> <button class="text-orange-500 hover:text-orange-600 font-semibold">View Details →</button> </div> </div> </div> </div> </div> </section> <!-- Travel Places Slider Section --> <section id="locations" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-playfair font-bold text-gray-800 mb-4"> Prime <span class="text-gradient">Locations</span> </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Explore properties in India's most sought-after destinations </p> </div> <div class="slider-container"> <div class="slider-track"> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-pink-400 to-red-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1562979314-bee7453e911c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8TXVtYmFpfGVufDB8fDB8fHww" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Mumbai</h3> <p class="text-pink-100 mb-4">Financial Capital • Sea Views • Premium Lifestyle</p> <div class="text-3xl font-bold">150+ Properties</div> </div> </div> </div> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-blue-400 to-indigo-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1592639296346-560c37a0f711?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8RGVsaGl8ZW58MHx8MHx8fDA%3D" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Delhi NCR</h3> <p class="text-blue-100 mb-4">Capital Region • Heritage • Modern Infrastructure</p> <div class="text-3xl font-bold">200+ Properties</div> </div> </div> </div> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1596176530529-78163a4f7af2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8QmFuZ2Fsb3JlfGVufDB8fDB8fHww" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Bangalore</h3> <p class="text-green-100 mb-4">IT Hub • Garden City • Pleasant Climate</p> <div class="text-3xl font-bold">120+ Properties</div> </div> </div> </div> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1618805714320-f8825019c1be?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8UHVuZXxlbnwwfHwwfHx8MA%3D%3D" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Pune</h3> <p class="text-purple-100 mb-4">Cultural Hub • Educational Center • Growing Market</p> <div class="text-3xl font-bold">80+ Properties</div> </div> </div> </div> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1582510003544-4d00b7f74220?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q2hlbm5haXxlbnwwfHwwfHx8MA%3D%3D" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Chennai</h3> <p class="text-yellow-100 mb-4">Detroit of India • Coastal Beauty • Industrial Hub</p> <div class="text-3xl font-bold">90+ Properties</div> </div> </div> </div> <!-- Duplicate for seamless loop --> <div class="flex-shrink-0 w-80 mx-4"> <div class="bg-gradient-to-br from-pink-400 to-red-500 rounded-2xl p-8 text-white h-64 relative overflow-hidden"> <img class="absolute inset-0 w-full h-full opacity-20" src="https://images.unsplash.com/photo-1573132223210-d65883b944aa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fE11bWJhaXxlbnwwfHwwfHx8MA%3D%3D" alt=""> <div class="relative z-10"> <h3 class="text-2xl font-playfair font-bold mb-2">Mumbai</h3> <p class="text-pink-100 mb-4">Financial Capital • Sea Views • Premium Lifestyle</p> <div class="text-3xl font-bold">150+ Properties</div> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-playfair font-bold text-gray-800 mb-4"> Premium <span class="text-gradient">Services</span> </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Comprehensive real estate solutions tailored for discerning clients </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> <div class="w-16 h-16 premium-gradient rounded-full flex items-center justify-center mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"> </path> </svg> </div> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-4">Property Consultation</h3> <p class="text-gray-600 mb-6">Expert guidance for buying, selling, and investing in premium properties across India.</p> <button class="text-orange-500 font-semibold hover:text-orange-600">Learn More →</button> </div> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> <div class="w-16 h-16 premium-gradient rounded-full flex items-center justify-center mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-4">Legal Assistance</h3> <p class="text-gray-600 mb-6">Complete legal support for property documentation, verification, and registration.</p> <button class="text-orange-500 font-semibold hover:text-orange-600">Learn More →</button> </div> <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"> <div class="w-16 h-16 premium-gradient rounded-full flex items-center justify-center mb-6"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"> </path> </svg> </div> <h3 class="text-xl font-playfair font-bold text-gray-800 mb-4">Investment Advisory</h3> <p class="text-gray-600 mb-6">Strategic investment planning and portfolio management for real estate assets.</p> <button class="text-orange-500 font-semibold hover:text-orange-600">Learn More →</button> </div> </div> </div> </section> <!-- Gallery Scroller Section --> <section id="gallery" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-playfair font-bold text-gray-800 mb-4"> Property <span class="text-gradient">Gallery</span> </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> A visual journey through our most exquisite properties </p> </div> <div class="gallery-scroll flex space-x-6 overflow-x-auto pb-4"> <div class="flex-shrink-0 w-80 h-64 rounded-2xl overflow-hidden shadow-lg"> <img class="w-full h-full" src="https://images.unsplash.com/photo-1569758267239-d08deb78bb1a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fE11bWJhaXxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="flex-shrink-0 w-80 h-64 rounded-2xl overflow-hidden shadow-lg"> <img class="w-full h-full" src="https://plus.unsplash.com/premium_photo-1681550093390-14477e7b196a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fE11bWJhaXxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="flex-shrink-0 w-80 h-64 rounded-2xl overflow-hidden shadow-lg"> <img class="w-full h-full" src="https://plus.unsplash.com/premium_photo-1697730489433-4a5fe8a77f96?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fE11bWJhaXxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="flex-shrink-0 w-80 h-64 rounded-2xl overflow-hidden shadow-lg"> <img class="w-full h-full" src="https://plus.unsplash.com/premium_photo-1673240845240-2fce9077a6e9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGRlbGhpfGVufDB8fDB8fHww" alt=""> </div> <div class="flex-shrink-0 w-80 h-64 rounded-2xl overflow-hidden shadow-lg"> <img class="w-full h-full" src="https://images.unsplash.com/photo-1513014576558-921f00d80b77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGRlbGhpfGVufDB8fDB8fHww" alt=""> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 gradient-bg indian-pattern"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-playfair font-bold text-white mb-4"> Get In <span class="text-yellow-300">Touch</span> </h2> <p class="text-xl text-gray-200 max-w-3xl mx-auto"> Ready to find your dream property? Our experts are here to help you every step of the way. </p> </div> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="bg-white/10 backdrop-blur-md rounded-2xl p-8"> <form class="space-y-6" onsubmit="handleSubmit(event)"> <div class="grid md:grid-cols-2 gap-6"> <div> <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-300"> </div> <div> <input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-300"> </div> </div> <div> <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-300"> </div> <div> <select class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-yellow-300"> <option value="">Property Type</option> <option value="apartment">Luxury Apartment</option> <option value="villa">Premium Villa</option> <option value="mansion">Heritage Mansion</option> <option value="penthouse">Penthouse</option> </select> </div> <div> <textarea rows="4" placeholder="Your Message" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-300 resize-none"></textarea> </div> <button type="submit" class="w-full premium-gradient text-white py-4 rounded-lg font-semibold hover:shadow-2xl transform hover:scale-105 transition-all duration-300"> Send Message </button> </form> </div> <div class="text-white space-y-8"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 premium-gradient rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"> </path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </div> <div> <h3 class="text-xl font-semibold">Visit Our Office</h3> <p class="text-gray-200">123 Business District, Mumbai, Maharashtra 400001</p> </div> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 premium-gradient rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"> </path> </svg> </div> <div> <h3 class="text-xl font-semibold">Call Us</h3> <p class="text-gray-200">+91 98765 43210</p> </div> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 premium-gradient rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"> </path> </svg> </div> <div> <h3 class="text-xl font-semibold">Email Us</h3> <p class="text-gray-200">info@royalestates.com</p> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="text-2xl font-playfair font-bold text-gradient mb-4">?️ Royal Estates</div> <p class="text-gray-400 mb-4">Premium real estate solutions across India's most prestigious locations.</p> </div> <div> <h3 class="text-lg font-semibold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-orange-500 transition-colors">Home</a></li> <li><a href="#properties" class="text-gray-400 hover:text-orange-500 transition-colors">Properties</a></li> <li><a href="#locations" class="text-gray-400 hover:text-orange-500 transition-colors">Locations</a></li> <li><a href="#services" class="text-gray-400 hover:text-orange-500 transition-colors">Services</a></li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Property Types</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-orange-500 transition-colors">Luxury Apartments</a></li> <li><a href="#" class="text-gray-400 hover:text-orange-500 transition-colors">Premium Villas</a> </li> <li><a href="#" class="text-gray-400 hover:text-orange-500 transition-colors">Heritage Mansions</a></li> <li><a href="#" class="text-gray-400 hover:text-orange-500 transition-colors">Penthouses</a> </li> </ul> </div> <div> <h3 class="text-lg font-semibold mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400"> <li> Mumbai, Maharashtra</li> <li> +91 98765 43210</li> <li> info@royalestates.com</li> <li> Mon - Sat: 9AM - 7PM</li> </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>© 2024 Royal Estates. All rights reserved. | Premium Real Estate Solutions</p> </div> </div> </footer> </body> </html>
CSS
body { box-sizing: border-box; } .font-playfair { font-family: 'Playfair Display', serif; } .font-inter { font-family: 'Inter', sans-serif; } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .indian-pattern { background-color: #705cbb; } .float-animation { animation: float 6s ease-in-out infinite; } .float-delayed { animation: float 6s ease-in-out infinite 2s; } .float-delayed-2 { animation: float 6s ease-in-out infinite 4s; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .slide-in-left { animation: slideInLeft 1s ease-out; } .slide-in-right { animation: slideInRight 1s ease-out; } .fade-in-up { animation: fadeInUp 1s ease-out; } @keyframes slideInLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .scroll-smooth { scroll-behavior: smooth; } .property-card { transition: all 0.3s ease; } .property-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .slider-container { overflow: hidden; } .slider-track { display: flex; animation: slide 20s linear infinite; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .gallery-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .gallery-scroll::-webkit-scrollbar { display: none; } .nav-link { position: relative; transition: all 0.3s ease; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: linear-gradient(90deg, #ff6b35, #f7931e); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .premium-gradient { background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff6b35 100%); } .text-gradient { background: linear-gradient(135deg, #ff6b35, #f7931e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
JavaScript
// Mobile menu toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Close mobile menu if open mobileMenu.classList.add('hidden'); }); }); // Form submission handler function handleSubmit(event) { event.preventDefault(); // Get form data const formData = new FormData(event.target); const name = event.target.querySelector('input[type="text"]').value; const email = event.target.querySelector('input[type="email"]').value; const phone = event.target.querySelector('input[type="tel"]').value; const propertyType = event.target.querySelector('select').value; const message = event.target.querySelector('textarea').value; // Simple validation if (!name || !email || !phone) { alert('कृपया सभी आवश्यक फील्ड भरें। (Please fill all required fields.)'); return; } // Simulate form submission const submitBtn = event.target.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.textContent = 'भेजा जा रहा है... (Sending...)'; submitBtn.disabled = true; setTimeout(() => { alert('धन्यवाद! आपका संदेश भेज दिया गया है। हम जल्द ही आपसे संपर्क करेंगे। (Thank you! Your message has been sent. We will contact you soon.)'); event.target.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); } // Add scroll effect to navbar window.addEventListener('scroll', () => { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-white/98'); navbar.classList.remove('bg-white/95'); } else { navbar.classList.add('bg-white/95'); navbar.classList.remove('bg-white/98'); } }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.querySelectorAll('.property-card, .fade-in-up').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'all 0.6s ease-out'; observer.observe(el); }); // Gallery scroll functionality const gallery = document.querySelector('.gallery-scroll'); let isScrolling = false; gallery.addEventListener('wheel', (e) => { if (!isScrolling) { isScrolling = true; e.preventDefault(); gallery.scrollLeft += e.deltaY; setTimeout(() => { isScrolling = false; }, 50); } }); // Auto-scroll gallery on mobile if (window.innerWidth <= 768) { let galleryScrollPosition = 0; setInterval(() => { galleryScrollPosition += 1; if (galleryScrollPosition >= gallery.scrollWidth - gallery.clientWidth) { galleryScrollPosition = 0; } gallery.scrollLeft = galleryScrollPosition; }, 50); } // Property card hover effects document.querySelectorAll('.property-card').forEach(card => { card.addEventListener('mouseenter', () => { card.style.transform = 'translateY(-10px) scale(1.02)'; }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateY(0) scale(1)'; }); }); // Add loading animation window.addEventListener('load', () => { document.body.style.opacity = '1'; document.body.style.transition = 'opacity 0.5s ease-in'; }); // Initialize page document.body.style.opacity = '0';
Output Preview
Desktop
Mobile
Fullscreen