Real Estate Features Section
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>Real Estate Features</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body class="bg-gray-100"> <!-- Feature Section --> <section class="relative bg-gradient-to-r from-blue-900 via-blue-800 to-indigo-900 py-20"> <div class="absolute inset-0 bg-black/50"></div> <div class="relative z-10 max-w-7xl mx-auto px-6"> <div class="text-center mb-14"> <h2 class="text-4xl md:text-5xl font-bold text-white">Why Choose Our Real Estate</h2> <p class="text-gray-200 mt-4 text-lg">Premium properties, unmatched service, and trust built over years</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10"> <!-- Feature 1 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-building"></i></div> <h3 class="text-2xl font-bold text-white">Premium Properties</h3> <p class="text-gray-200 mt-3">We provide handpicked luxury properties in prime locations ensuring value & comfort.</p> </div> <!-- Feature 2 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-user-tie"></i></div> <h3 class="text-2xl font-bold text-white">Expert Agents</h3> <p class="text-gray-200 mt-3">Our team of professional agents ensures smooth property buying & selling experience.</p> </div> <!-- Feature 3 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-handshake"></i></div> <h3 class="text-2xl font-bold text-white">Trusted Deals</h3> <p class="text-gray-200 mt-3">Transparent and secure deals that build long-term trust with our clients.</p> </div> <!-- Feature 4 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-city"></i></div> <h3 class="text-2xl font-bold text-white">Modern Projects</h3> <p class="text-gray-200 mt-3">We are involved in high-quality residential & commercial real estate projects.</p> </div> <!-- Feature 5 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-calendar-check"></i></div> <h3 class="text-2xl font-bold text-white">Years of Experience</h3> <p class="text-gray-200 mt-3">Serving clients for decades with a strong reputation in the real estate industry.</p> </div> <!-- Feature 6 --> <div class="feature-card rounded-2xl shadow-xl p-8 text-center"> <div class="icon-circle"><i class="fa-solid fa-smile"></i></div> <h3 class="text-2xl font-bold text-white">Happy Clients</h3> <p class="text-gray-200 mt-3">Thousands of satisfied families and investors who trust us for their dream homes.</p> </div> </div> </div> </section> </body> </html>
CSS
.feature-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease; opacity: 0; transform: translateY(30px); } .feature-card.show { opacity: 1; transform: translateY(0); } .feature-card:hover { transform: translateY(-10px) scale(1.05); background: rgba(255, 255, 255, 0.2); } .icon-circle { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #1e3a8a, #f59e0b); color: white; font-size: 2rem; margin: 0 auto 1rem; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
JavaScript
// Scroll animation for feature cards const featureCards = document.querySelectorAll(".feature-card"); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("show"); } }); }, { threshold: 0.3 }); featureCards.forEach(card => observer.observe(card));
Output Preview
Desktop
Mobile
Fullscreen