Premium Real Estate Services | QuickCoder

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 Services</title>

</head>

<body>
    <section class="services-section">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">? Premium Real Estate Services</div>
                <h2 class="section-title">Exceptional Real Estate Solutions</h2>
                <p class="section-subtitle">
                    From luxury residential properties to commercial investments, we provide comprehensive real estate
                    services tailored to your unique needs and aspirations.
                </p>
            </div>

<div class="services-grid">
                <div class="service-card" style="animation-delay: 0.1s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?</div>
                    </div>
                    <h3 class="service-title">Residential Sales</h3>
                    <p class="service-description">
                        Expert guidance through every step of buying or selling your dream home. We specialize in luxury
                        properties and provide personalized service to ensure the best outcomes.
                    </p>
                    <ul class="service-features">
                        <li>Market analysis and pricing strategy</li>
                        <li>Professional photography and staging</li>
                        <li>Negotiation and closing support</li>
                        <li>Post-sale assistance and referrals</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Learn more about our Residential Sales services!'); return false;">
                        Explore Homes
                        <span class="arrow">→</span>
                    </a>
                </div>

<div class="service-card" style="animation-delay: 0.2s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?</div>
                    </div>
                    <h3 class="service-title">Commercial Properties</h3>
                    <p class="service-description">
                        Strategic commercial real estate solutions for businesses and investors. From office spaces to
                        retail locations, we help you find the perfect commercial property.
                    </p>
                    <ul class="service-features">
                        <li>Investment property analysis</li>
                        <li>Lease negotiation and management</li>
                        <li>Market research and feasibility studies</li>
                        <li>Portfolio optimization strategies</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Discover our Commercial Properties services!'); return false;">
                        View Properties
                        <span class="arrow">→</span>
                    </a>
                </div>

<div class="service-card" style="animation-delay: 0.3s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?️</div>
                    </div>
                    <h3 class="service-title">Property Management</h3>
                    <p class="service-description">
                        Comprehensive property management services to maximize your investment returns while minimizing
                        your involvement in day-to-day operations.
                    </p>
                    <ul class="service-features">
                        <li>Tenant screening and placement</li>
                        <li>Rent collection and accounting</li>
                        <li>Maintenance and repair coordination</li>
                        <li>Regular property inspections</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Learn about our Property Management solutions!'); return false;">
                        Get Started
                        <span class="arrow">→</span>
                    </a>
                </div>

<div class="service-card" style="animation-delay: 0.4s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?</div>
                    </div>
                    <h3 class="service-title">Investment Consulting</h3>
                    <p class="service-description">
                        Strategic real estate investment advice to help you build wealth through property investments.
                        Our experts analyze market trends and identify opportunities.
                    </p>
                    <ul class="service-features">
                        <li>Portfolio diversification strategies</li>
                        <li>ROI analysis and projections</li>
                        <li>Market timing and entry strategies</li>
                        <li>Risk assessment and mitigation</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Explore our Investment Consulting services!'); return false;">
                        Start Investing
                        <span class="arrow">→</span>
                    </a>
                </div>

<div class="service-card" style="animation-delay: 0.5s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?</div>
                    </div>
                    <h3 class="service-title">Property Valuation</h3>
                    <p class="service-description">
                        Accurate property valuations using advanced market analysis and industry expertise. Essential
                        for buying, selling, refinancing, or investment decisions.
                    </p>
                    <ul class="service-features">
                        <li>Comparative market analysis</li>
                        <li>Professional appraisal services</li>
                        <li>Investment property evaluation</li>
                        <li>Market trend reporting</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Get your Property Valuation today!'); return false;">
                        Get Valuation
                        <span class="arrow">→</span>
                    </a>
                </div>

<div class="service-card" style="animation-delay: 0.6s;">
                    <div class="service-icon-wrapper">
                        <div class="service-icon">?</div>
                    </div>
                    <h3 class="service-title">Relocation Services</h3>
                    <p class="service-description">
                        Seamless relocation assistance for individuals and corporations. We handle every aspect of your
                        move to ensure a smooth transition to your new location.
                    </p>
                    <ul class="service-features">
                        <li>Area orientation and tours</li>
                        <li>School and community research</li>
                        <li>Temporary housing solutions</li>
                        <li>Moving and settling assistance</li>
                    </ul>
                    <a href="#" class="service-cta"
                        onclick="alert('Learn about our Relocation Services!'); return false;">
                        Plan Your Move
                        <span class="arrow">→</span>
                    </a>
                </div>
            </div>

<div class="stats-section">
                <div class="stats-grid">
                    <div class="stat-item" style="animation-delay: 0.7s;">
                        <span class="stat-number">2,500+</span>
                        <div class="stat-label">Properties Sold</div>
                    </div>
                    <div class="stat-item" style="animation-delay: 0.8s;">
                        <span class="stat-number">98%</span>
                        <div class="stat-label">Client Satisfaction</div>
                    </div>
                    <div class="stat-item" style="animation-delay: 0.9s;">
                        <span class="stat-number">15+</span>
                        <div class="stat-label">Years Experience</div>
                    </div>
                    <div class="stat-item" style="animation-delay: 1s;">
                        <span class="stat-number">$2.5B+</span>
                        <div class="stat-label">Total Sales Volume</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</body>

</html>

CSS

body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            min-height: 100vh;
            color: #333;
        }

* {
            box-sizing: border-box;
        }

.services-section {
            padding: 8rem 0;
            position: relative;
            overflow: hidden;
        }

.services-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>') center/cover;
            pointer-events: none;
        }

.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 2;
        }

.section-header {
            text-align: center;
            margin-bottom: 6rem;
            animation: fadeInUp 1s ease-out;
        }

.section-badge {
            display: inline-block;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
            animation: pulse 2s infinite;
        }

.section-title {
            font-size: 4rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.1;
            margin-bottom: 2rem;
            letter-spacing: -0.02em;
        }

.section-subtitle {
            font-size: 1.3rem;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
            font-weight: 400;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 3rem;
            margin-top: 6rem;
        }

.service-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 3.5rem;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            animation: slideInUp 0.8s ease-out;
        }

.service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.6s ease;
        }

.service-card:hover::before {
            left: 100%;
        }

.service-card:hover {
            transform: translateY(-15px);
            border-color: rgba(245, 158, 11, 0.3);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }

.service-icon-wrapper {
            position: relative;
            margin-bottom: 2.5rem;
        }

.service-icon {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 15px 40px rgba(245, 158, 11, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

.service-card:hover .service-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 20px 50px rgba(245, 158, 11, 0.6);
        }

.service-icon::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border-radius: 25px;
            opacity: 0.2;
            z-index: -1;
            animation: iconGlow 3s ease-in-out infinite;
        }

.service-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

.service-description {
            color: #cbd5e1;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 2.5rem;
        }

.service-features {
            list-style: none;
            padding: 0;
            margin-bottom: 3rem;
        }

.service-features li {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            color: #e2e8f0;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.service-features li:hover {
            color: #f59e0b;
            transform: translateX(5px);
        }

.service-features li::before {
            content: '✓';
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: bold;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

.service-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            padding: 1.2rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
            position: relative;
            overflow: hidden;
        }

.service-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

.service-cta:hover::before {
            left: 100%;
        }

.service-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(245, 158, 11, 0.4);
        }

.service-cta .arrow {
            transition: transform 0.3s ease;
        }

.service-cta:hover .arrow {
            transform: translateX(5px);
        }

.stats-section {
            margin-top: 8rem;
            padding: 4rem 0;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            text-align: center;
        }

.stat-item {
            animation: fadeInUp 1s ease-out;
        }

.stat-number {
            font-size: 3.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
            line-height: 1;
            margin-bottom: 1rem;
        }

.stat-label {
            font-size: 1.1rem;
            color: #94a3b8;
            font-weight: 500;
        }

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

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(80px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes pulse {

0%,
            100% {
                transform: scale(1);
            }

50% {
                transform: scale(1.05);
            }
        }

@keyframes iconGlow {

0%,
            100% {
                opacity: 0.2;
                transform: scale(1);
            }

50% {
                opacity: 0.4;
                transform: scale(1.1);
            }
        }

/* Responsive Design */
        @media (max-width: 1200px) {
            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                gap: 2.5rem;
            }
        }

@media (max-width: 768px) {
            .services-section {
                padding: 4rem 0;
            }

.container {
                padding: 0 1.5rem;
            }

.section-title {
                font-size: 2.8rem;
            }

.section-subtitle {
                font-size: 1.1rem;
            }

.services-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
                margin-top: 4rem;
            }

.service-card {
                padding: 2.5rem;
            }

.service-icon {
                width: 70px;
                height: 70px;
                font-size: 2rem;
            }

.service-title {
                font-size: 1.5rem;
            }

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

.stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }

.stat-number {
                font-size: 2.5rem;
            }
        }

@media (max-width: 480px) {
            .section-title {
                font-size: 2.2rem;
            }

.service-card {
                padding: 2rem;
            }

.service-cta {
                padding: 1rem 2rem;
                font-size: 0.9rem;
            }

.stats-grid {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all service cards and stat items
        document.querySelectorAll('.service-card, .stat-item').forEach(el => {
            el.style.animationPlayState = 'paused';
            observer.observe(el);
        });

// Add hover effects for service cards
        document.querySelectorAll('.service-card').forEach(card => {
            card.addEventListener('mouseenter', function () {
                this.style.transform = 'translateY(-15px) scale(1.02)';
            });

card.addEventListener('mouseleave', function () {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

// Animate numbers on scroll
        function animateNumbers() {
            const statNumbers = document.querySelectorAll('.stat-number');

statNumbers.forEach(stat => {
                const target = stat.textContent;
                const isPercentage = target.includes('%');
                const isCurrency = target.includes('$');
                const isPlus = target.includes('+');

let numericValue = parseFloat(target.replace(/[^0-9.]/g, ''));
                let current = 0;
                const increment = numericValue / 50;

const timer = setInterval(() => {
                    current += increment;
                    if (current >= numericValue) {
                        current = numericValue;
                        clearInterval(timer);
                    }

stat.textContent = displayValue;
                }, 50);
            });
        }

// Trigger number animation when stats section is visible
        const statsObserver = new IntersectionObserver(function (entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateNumbers();
                    statsObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

const statsSection = document.querySelector('.stats-section');
        if (statsSection) {
            statsObserver.observe(statsSection);
        }

// Add parallax effect to service cards
        window.addEventListener('scroll', function () {
            const scrolled = window.pageYOffset;
            const cards = document.querySelectorAll('.service-card');

cards.forEach((card, index) => {
                const rate = scrolled * -0.1 * (index % 2 === 0 ? 1 : -1);
                card.style.transform = `translateY(${rate}px)`;
            });
        });

Premium Real Estate Services Preview

Download Options