Real Estate Card Collection 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>Real Estate Card Collection</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="container"> <header> <h1>Premium Real Estate Properties</h1> <p class="subtitle">Explore our exclusive collection of homes, apartments, and commercial properties. Find your dream property today.</p> </header> <div class="cards-container"> <!-- Card 1 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bW9kZXJuJTIwaG91c2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=80" alt="Modern Villa"> <div class="property-badge">For Sale</div> </div> <div class="card-content"> <div class="property-price">$850,000</div> <div class="property-address">123 Oak Street, Beverly Hills</div> <h3 class="property-title">Modern Luxury Villa with Pool</h3> <p class="property-description">This stunning 5-bedroom villa features an open floor plan, gourmet kitchen, infinity pool, and panoramic city views. Recently renovated with smart home technology.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <div class="feature-value">5</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <i class="fas fa-bath"></i> <div class="feature-value">4</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <i class="fas fa-car"></i> <div class="feature-value">3</div> <div class="feature-label">Garage</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">3,500</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent"> </div> <div> <div class="agent-name">Michael Rodriguez</div> <div class="agent-phone">(555) 123-4567</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> <!-- Card 2 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1518780664697-55e3ad937233?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXBhcnRtZW50fGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=80" alt="Downtown Apartment"> <div class="property-badge">For Rent</div> </div> <div class="card-content"> <div class="property-price">$3,200/month</div> <div class="property-address">456 Downtown Ave, Manhattan</div> <h3 class="property-title">Luxury Downtown Apartment</h3> <p class="property-description">Beautiful 2-bedroom apartment in the heart of downtown. Features hardwood floors, floor-to-ceiling windows, modern appliances, and access to rooftop terrace.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <div class="feature-value">2</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <i class="fas fa-bath"></i> <div class="feature-value">2</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <i class="fas fa-dumbbell"></i> <div class="feature-value">Gym</div> <div class="feature-label">Amenities</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">1,200</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent"> </div> <div> <div class="agent-name">Sarah Johnson</div> <div class="agent-phone">(555) 987-6543</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> <!-- Card 3 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y28lMjB3b3JraW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=80" alt="Commercial Space"> <div class="property-badge">Commercial</div> </div> <div class="card-content"> <div class="property-price">$2.5M</div> <div class="property-address">789 Business Blvd, Financial District</div> <h3 class="property-title">Modern Commercial Office Space</h3> <p class="property-description">Prime commercial office space with high visibility location. Features open floor plan, conference rooms, fiber internet, and ample parking. Ideal for tech companies.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-building"></i> <div class="feature-value">12</div> <div class="feature-label">Offices</div> </div> <div class="feature"> <i class="fas fa-users"></i> <div class="feature-value">100+</div> <div class="feature-label">Capacity</div> </div> <div class="feature"> <i class="fas fa-car"></i> <div class="feature-value">50</div> <div class="feature-label">Parking</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">10,000</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Agent"> </div> <div> <div class="agent-name">Robert Chen</div> <div class="agent-phone">(555) 456-7890</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> <!-- Card 4 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c3ViYXJiYW4lMjBob3VzZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Suburban House"> <div class="property-badge">For Sale</div> </div> <div class="card-content"> <div class="property-price">$650,000</div> <div class="property-address">101 Maple Road, Suburbia</div> <h3 class="property-title">Family Home in Quiet Neighborhood</h3> <p class="property-description">Charming 4-bedroom family home with large backyard, updated kitchen, finished basement, and excellent school district. Perfect for growing families.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <div class="feature-value">4</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <i class="fas fa-bath"></i> <div class="feature-value">3</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <i class="fas fa-tree"></i> <div class="feature-value">0.5</div> <div class="feature-label">Acres</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">2,800</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Agent"> </div> <div> <div class="agent-name">Emily Watson</div> <div class="agent-phone">(555) 234-5678</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> <!-- Card 5 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dmlsbGF8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=80" alt="Luxury Villa"> <div class="property-badge">Luxury</div> </div> <div class="card-content"> <div class="property-price">$3.2M</div> <div class="property-address">555 Ocean Drive, Malibu</div> <h3 class="property-title">Beachfront Luxury Villa</h3> <p class="property-description">Exclusive beachfront property with private beach access, infinity pool, home theater, wine cellar, and smart home system. Unparalleled ocean views.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <div class="feature-value">6</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <i class="fas fa-bath"></i> <div class="feature-value">7</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <i class="fas fa-swimming-pool"></i> <div class="feature-value">Pool</div> <div class="feature-label">Amenities</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">8,500</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Agent"> </div> <div> <div class="agent-name">David Miller</div> <div class="agent-phone">(555) 876-5432</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> <!-- Card 6 --> <div class="card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y29uZG98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=80" alt="Modern Condo"> <div class="property-badge">For Sale</div> </div> <div class="card-content"> <div class="property-price">$475,000</div> <div class="property-address">303 Urban Lane, Downtown</div> <h3 class="property-title">Modern City Condominium</h3> <p class="property-description">Stylish 2-bedroom condo with premium finishes, balcony with city views, in-unit laundry, and access to building amenities including gym and rooftop lounge.</p> <div class="property-features"> <div class="feature"> <i class="fas fa-bed"></i> <div class="feature-value">2</div> <div class="feature-label">Bedrooms</div> </div> <div class="feature"> <i class="fas fa-bath"></i> <div class="feature-value">2</div> <div class="feature-label">Bathrooms</div> </div> <div class="feature"> <i class="fas fa-building"></i> <div class="feature-value">24/7</div> <div class="feature-label">Security</div> </div> <div class="feature"> <i class="fas fa-ruler-combined"></i> <div class="feature-value">1,100</div> <div class="feature-label">Sq Ft</div> </div> </div> </div> <div class="card-footer"> <div class="agent-info"> <div class="agent-avatar"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Agent"> </div> <div> <div class="agent-name">Lisa Park</div> <div class="agent-phone">(555) 345-6789</div> </div> </div> <button class="btn-contact">Contact Agent</button> </div> </div> </div> <div class="footer-note"> <p>© 2023 Premium Real Estate. All properties are subject to availability. Contact agents for the most up-to-date information.</p> </div> </div> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8f9fa; color: #333; padding: 20px; min-height: 100vh; } .container { max-width: 1400px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; padding: 20px; } h1 { color: #2c3e50; font-size: 2.8rem; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 1.2rem; max-width: 700px; margin: 0 auto; } .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; margin-bottom: 40px; } .card { background-color: white; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .card-image { height: 240px; position: relative; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.05); } .property-badge { position: absolute; top: 20px; right: 20px; background-color: #e74c3c; color: white; padding: 8px 16px; border-radius: 30px; font-weight: 600; font-size: 0.9rem; } .card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .property-price { font-size: 1.8rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px; } .property-address { color: #7f8c8d; font-size: 1.1rem; margin-bottom: 15px; } .property-title { font-size: 1.4rem; color: #2c3e50; margin-bottom: 15px; line-height: 1.3; } .property-description { color: #5d6d7e; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .property-features { display: flex; justify-content: space-between; margin-bottom: 25px; padding-top: 15px; border-top: 1px solid #eee; } .feature { text-align: center; } .feature i { color: #3498db; font-size: 1.3rem; margin-bottom: 8px; } .feature-value { font-weight: 700; color: #2c3e50; font-size: 1.1rem; } .feature-label { color: #7f8c8d; font-size: 0.9rem; } .card-footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background-color: #f8f9fa; border-top: 1px solid #eee; } .agent-info { display: flex; align-items: center; } .agent-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 12px; } .agent-avatar img { width: 100%; height: 100%; object-fit: cover; } .agent-name { font-weight: 600; color: #2c3e50; } .agent-phone { color: #7f8c8d; font-size: 0.9rem; } .btn-contact { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; } .btn-contact:hover { background-color: #2980b9; } .footer-note { text-align: center; color: #7f8c8d; margin-top: 40px; padding: 20px; font-size: 0.95rem; } /* Responsive adjustments */ @media (max-width: 1200px) { .cards-container { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } @media (max-width: 768px) { h1 { font-size: 2.2rem; } .cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; } .card-image { height: 220px; } } @media (max-width: 576px) { body { padding: 15px; } h1 { font-size: 1.9rem; } .subtitle { font-size: 1rem; } .cards-container { grid-template-columns: 1fr; gap: 20px; } .property-features { flex-wrap: wrap; } .feature { width: 50%; margin-bottom: 15px; } .card-footer { flex-direction: column; align-items: flex-start; } .btn-contact { margin-top: 15px; width: 100%; } } /* Loading animation for cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeIn 0.6s ease forwards; } .card:nth-child(2) { animation-delay: 0.1s; } .card:nth-child(3) { animation-delay: 0.2s; } .card:nth-child(4) { animation-delay: 0.3s; } .card:nth-child(5) { animation-delay: 0.4s; } .card:nth-child(6) { animation-delay: 0.5s; }
JavaScript
// Add interactivity to contact buttons document.querySelectorAll('.btn-contact').forEach(button => { button.addEventListener('click', function() { const agentName = this.closest('.card-footer').querySelector('.agent-name').textContent; const agentPhone = this.closest('.card-footer').querySelector('.agent-phone').textContent; alert(`Contacting ${agentName} at ${agentPhone}. They will respond within 24 hours.`); }); }); // Add animation on scroll const cards = document.querySelectorAll('.card'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = "1"; entry.target.style.transform = "translateY(0)"; } }); }, { threshold: 0.1 }); cards.forEach(card => { card.style.opacity = "0"; card.style.transform = "translateY(20px)"; card.style.transition = "opacity 0.6s ease, transform 0.6s ease"; observer.observe(card); });
Output Preview
Desktop
Mobile
Fullscreen