Corporate Real Estate Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertex Global | Corporate Real Estate Development</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    
</head>
<body>
    
    <header class="premium-header" id="header">
        <div class="container">
            <nav class="premium-nav">
                <a href="#" class="premium-logo">
                    <div class="logo-icon">
                        <span>V</span>
                    </div>
                    <div class="logo-text">
                        <div class="brand">VERTEX</div>
                        <div class="tagline">Global Real Estate</div>
                    </div>
                </a>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                
                <ul class="premium-nav-links" id="navLinks">
                    <li><a href="#overview">Overview</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#certifications">Certifications</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                
                <a href="#contact" class="premium-nav-cta">Start a Project</a>
            </nav>
        </div>
    </header>

<section class="premium-hero">
        <div class="container">
            <div class="hero-content">
                <span class="hero-badge">Since 1997</span>
                <h1>Shaping Skylines, Building Legacies</h1>
                <p>Vertex Global develops iconic commercial properties that redefine urban landscapes and create lasting value for our clients and communities.</p>
                <a href="#contact" class="premium-nav-cta">Explore Our Vision</a>
                
                <div class="hero-stats">
                    <div class="hero-stat">
                        <div class="number">25+</div>
                        <div class="label">Years Experience</div>
                    </div>
                    <div class="hero-stat">
                        <div class="number">$12B+</div>
                        <div class="label">Portfolio Value</div>
                    </div>
                    <div class="hero-stat">
                        <div class="number">200+</div>
                        <div class="label">Projects Completed</div>
                    </div>
                    <div class="hero-stat">
                        <div class="number">45</div>
                        <div class="label">Awards Won</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding" id="overview">
        <div class="container">
            <div class="section-title">
                <h2>Global Real Estate Visionaries</h2>
            </div>
            
            <div class="overview-content">
                <div class="overview-image">
                    <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Vertex Global Headquarters">
                </div>
                <div class="overview-text">
                    <h3>Defining Excellence in Commercial Development</h3>
                    <p>For over two decades, Vertex Global has been at the forefront of corporate real estate development, transforming visions into iconic structures that shape skylines and drive economic growth.</p>
                    <p>Our multidisciplinary approach combines innovative design, sustainable practices, and strategic execution to deliver projects that exceed expectations and create lasting value.</p>
                    
                    <div class="overview-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Full-Service Development</h4>
                                <p>End-to-end project delivery from concept to completion</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-leaf"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Sustainable Design</h4>
                                <p>LEED-certified projects with eco-friendly innovations</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Global Reach</h4>
                                <p>Projects across North America, Europe, and Asia</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-award"></i>
                            </div>
                            <div class="feature-text">
                                <h4>Award-Winning</h4>
                                <p>Recognized for design excellence and innovation</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding projects-section" id="projects">
        <div class="container">
            <div class="section-title">
                <h2>Signature Developments</h2>
            </div>
            
            <div class="projects-filter">
                <button class="filter-btn active" data-filter="all">All Projects</button>
                <button class="filter-btn" data-filter="completed">Completed</button>
                <button class="filter-btn" data-filter="ongoing">Ongoing</button>
                <button class="filter-btn" data-filter="upcoming">Upcoming</button>
            </div>
            
            <div class="projects-grid">
                
                <div class="project-card" data-category="completed">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1487956382158-bb926046304a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="North Financial Center">
                        <div class="project-overlay">
                            <h3>North Financial Center</h3>
                        </div>
                    </div>
                    <div class="project-info">
                        <div class="project-meta">
                            <div class="project-location">
                                <i class="fas fa-map-marker-alt"></i> Chicago, IL
                            </div>
                            <span class="project-status status-completed">Completed 2022</span>
                        </div>
                        <p class="project-desc">A 45-story Class A office tower featuring sustainable design, premium amenities, and panoramic city views.</p>
                        <a href="#" class="project-link">View Project Details <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                
                <div class="project-card" data-category="ongoing">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Riverfront Corporate Center">
                        <div class="project-overlay">
                            <h3>Riverfront Corporate Center</h3>
                        </div>
                    </div>
                    <div class="project-info">
                        <div class="project-meta">
                            <div class="project-location">
                                <i class="fas fa-map-marker-alt"></i> Miami, FL
                            </div>
                            <span class="project-status status-ongoing">Completion Q4 2024</span>
                        </div>
                        <p class="project-desc">A 1.2 million sq ft sustainable development targeting LEED Platinum certification with waterfront amenities.</p>
                        <a href="#" class="project-link">View Project Details <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                
                <div class="project-card" data-category="completed">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Tech Campus West">
                        <div class="project-overlay">
                            <h3>Tech Campus West</h3>
                        </div>
                    </div>
                    <div class="project-info">
                        <div class="project-meta">
                            <div class="project-location">
                                <i class="fas fa-map-marker-alt"></i> Austin, TX
                            </div>
                            <span class="project-status status-completed">Completed 2021</span>
                        </div>
                        <p class="project-desc">A 12-building corporate campus designed for technology firms with collaborative workspaces and green zones.</p>
                        <a href="#" class="project-link">View Project Details <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding-sm" id="certifications">
        <div class="container">
            <div class="section-title">
                <h2>Certifications & Accolades</h2>
            </div>
            
            <div class="certifications-grid">
                <div class="certification-card">
                    <div class="cert-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>LEED Platinum Certified</h3>
                    <p>17 projects certified at the highest sustainability level with innovative green technologies.</p>
                </div>
                
                <div class="certification-card">
                    <div class="cert-icon">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3>NAIOP Developer of the Year</h3>
                    <p>2021 & 2022 National Award Winner for excellence in commercial real estate development.</p>
                </div>
                
                <div class="certification-card">
                    <div class="cert-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>ISO 9001:2015 Certified</h3>
                    <p>Internationally recognized quality management system ensuring consistent project excellence.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding testimonials-section" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Trusted by Global Leaders</h2>
            </div>
            
            <div class="testimonial-slider swiper">
                <div class="swiper-wrapper">
                    
                    <div class="testimonial-slide swiper-slide">
                        <div class="testimonial-quote">
                            Vertex delivered our global headquarters not just on time and within budget, but with an attention to detail that exceeded all expectations. Their team's professionalism and innovative approach transformed our vision into a landmark.
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson">
                            </div>
                            <div class="author-info">
                                <h4>Sarah Johnson</h4>
                                <p>Chief Financial Officer, TechForward Inc.</p>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="testimonial-slide swiper-slide">
                        <div class="testimonial-quote">
                            Working with Vertex Global was a partnership in the truest sense. Their sustainable design approach and commitment to quality have set a new standard for our corporate facilities worldwide.
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
                            </div>
                            <div class="author-info">
                                <h4>Michael Chen</h4>
                                <p>VP of Real Estate, Global Financial Group</p>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="testimonial-slide swiper-slide">
                        <div class="testimonial-quote">
                            The Innovation Towers project showcases Vertex's ability to blend architectural excellence with functional design. Their team managed complex challenges seamlessly, delivering a landmark that defines our brand.
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Elena Rodriguez">
                            </div>
                            <div class="author-info">
                                <h4>Elena Rodriguez</h4>
                                <p>CEO, InnovateCorp International</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="section-padding contact-form-section" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Start Your Project</h2>
            </div>
            
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Transform Your Vision into Reality</h3>
                    <p>Contact our team of real estate experts to discuss your corporate development needs. We provide end-to-end solutions from site selection to final construction.</p>
                    
                    <div class="contact-details">
                        <div class="contact-detail">
                            <div class="contact-detail-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-detail-text">
                                <h4>Global Headquarters</h4>
                                <p>500 Park Avenue, 32nd Floor<br>New York, NY 10022</p>
                            </div>
                        </div>
                        
                        <div class="contact-detail">
                            <div class="contact-detail-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-detail-text">
                                <h4>Contact Phone</h4>
                                <p>+1 (212) 555-8500</p>
                            </div>
                        </div>
                        
                        <div class="contact-detail">
                            <div class="contact-detail-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-detail-text">
                                <h4>Email Address</h4>
                                <p>inquiries@vertexglobal.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="premium-contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="company">Company</label>
                            <input type="text" id="company">
                        </div>
                        
                        <div class="form-group">
                            <label for="projectType">Project Type</label>
                            <select id="projectType">
                                <option value="">Select a project type</option>
                                <option value="office">Office Building</option>
                                <option value="campus">Corporate Campus</option>
                                <option value="mixed-use">Mixed-Use Development</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">Project Details</label>
                            <textarea id="message" rows="5" placeholder="Tell us about your project vision, requirements, and timeline..."></textarea>
                        </div>
                        
                        <button type="submit" class="submit-btn">Submit Inquiry</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="premium-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <div class="brand">VERTEX</div>
                    <p>Shaping skylines and building legacies through innovative commercial real estate development since 1997.</p>
                    
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#overview">Company Overview</a></li>
                        <li><a href="#projects">Our Projects</a></li>
                        <li><a href="#certifications">Certifications</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#contact">Contact Us</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Services</h3>
                    <ul>
                        <li><a href="#">Commercial Development</a></li>
                        <li><a href="#">Site Selection & Acquisition</a></li>
                        <li><a href="#">Architectural Design</a></li>
                        <li><a href="#">Construction Management</a></li>
                        <li><a href="#">Sustainable Consulting</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Global Offices</h3>
                    <ul>
                        <li><a href="#">New York, USA</a></li>
                        <li><a href="#">London, UK</a></li>
                        <li><a href="#">Singapore, SG</a></li>
                        <li><a href="#">Dubai, UAE</a></li>
                        <li><a href="#">Sydney, AUS</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2023 Vertex Global Real Estate Development. All rights reserved. | Privacy Policy | Terms of Service</p>
            </div>
        </div>
    </footer>

<a href="#" class="back-to-top" id="backToTop">
        <i class="fas fa-chevron-up"></i>
    </a>

CSS

:root {
            --primary-navy: #0a1a3a;
            --secondary-blue: #1c3d6d;
            --accent-blue: #3a7bd5;
            --accent-gold: #d4af37;
            --dark-graphite: #1a1a1a;
            --medium-graphite: #3d3d3d;
            --light-graphite: #f8f9fa;
            --border-light: #e8ecef;
            --white: #ffffff;
            --gradient-blue: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-blue) 100%);
            --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f7ef8a 100%);
            --shadow-soft: 0 10px 30px rgba(10, 26, 58, 0.08);
            --shadow-medium: 0 15px 40px rgba(10, 26, 58, 0.12);
            --shadow-heavy: 0 25px 60px rgba(10, 26, 58, 0.15);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            color: var(--dark-graphite);
            line-height: 1.7;
            background-color: var(--white);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            color: var(--primary-navy);
        }
        
        .container {
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Premium Header */
        .premium-header {
            background-color: var(--white);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow-soft);
            transition: all 0.4s ease;
        }
        
        .premium-header.scrolled {
            padding: 10px 0;
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.95);
        }
        
        .premium-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            transition: padding 0.4s ease;
        }
        
        .scrolled .premium-nav {
            padding: 10px 0;
        }
        
        .premium-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .logo-icon {
            width: 48px;
            height: 48px;
            background: var(--gradient-blue);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .logo-icon:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--gradient-gold);
            opacity: 0.2;
        }
        
        .logo-icon span {
            color: var(--white);
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            z-index: 1;
        }
        
        .logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .logo-text .brand {
            font-family: 'Playfair Display', serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--primary-navy);
            letter-spacing: -0.5px;
        }
        
        .logo-text .tagline {
            font-size: 11px;
            letter-spacing: 1.5px;
            color: var(--medium-graphite);
            text-transform: uppercase;
            margin-top: 2px;
        }
        
        .premium-nav-links {
            display: flex;
            list-style: none;
        }
        
        .premium-nav-links li {
            margin-left: 40px;
        }
        
        .premium-nav-links a {
            text-decoration: none;
            color: var(--dark-graphite);
            font-weight: 500;
            font-size: 16px;
            position: relative;
            padding: 5px 0;
            transition: color 0.3s;
        }
        
        .premium-nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--gradient-gold);
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }
        
        .premium-nav-links a:hover {
            color: var(--accent-blue);
        }
        
        .premium-nav-links a:hover:after {
            width: 100%;
        }
        
        .premium-nav-cta {
            background: var(--gradient-blue);
            color: var(--white);
            padding: 12px 28px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-soft);
        }
        
        .premium-nav-cta:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--primary-navy);
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light-graphite);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Premium Hero */
        .premium-hero {
            background: var(--gradient-blue);
            padding: 180px 0 120px;
            position: relative;
            overflow: hidden;
        }
        
        .premium-hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://plus.unsplash.com/premium_photo-1661915661139-5b6a4e4a6fcc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dmlsbGF8ZW58MHx8MHx8fDA%3D');
            background-size: cover;
            background-position: center;
            opacity: 0.5;
            z-index: 0;
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 850px;
            color: var(--white);
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            color: var(--white);
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 25px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hero-content h1 {
            font-size: 62px;
            line-height: 1.1;
            margin-bottom: 25px;
            color: var(--white);
        }
        
        .hero-content p {
            font-size: 20px;
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 700px;
        }
        
        .hero-stats {
            display: flex;
            margin-top: 60px;
            gap: 40px;
        }
        
        .hero-stat {
            text-align: center;
        }
        
        .hero-stat .number {
            font-size: 42px;
            font-weight: 700;
            color: var(--accent-gold);
            font-family: 'Playfair Display', serif;
            line-height: 1;
        }
        
        .hero-stat .label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
            opacity: 0.8;
        }
        
        /* Premium Sections */
        .section-padding {
            padding: 120px 0;
        }
        
        .section-padding-sm {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 70px;
        }
        
       
        
        .section-title h2 {
            font-size: 46px;
            position: relative;
            display: inline-block;
            padding-bottom: 20px;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--gradient-gold);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* Company Overview */
        .overview-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        
        .overview-image {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
            transform: perspective(1000px) rotateY(-5deg);
            transition: transform 0.5s ease;
        }
        
        .overview-image:hover {
            transform: perspective(1000px) rotateY(0deg);
        }
        
        .overview-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            display: block;
        }
        
        .overview-text h3 {
            font-size: 38px;
            margin-bottom: 25px;
            line-height: 1.2;
        }
        
        .overview-text p {
            color: var(--medium-graphite);
            margin-bottom: 25px;
            font-size: 17px;
        }
        
        .overview-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-top: 40px;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
        }
        
        .feature-icon {
            width: 48px;
            height: 48px;
            background: var(--light-graphite);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: var(--accent-blue);
            font-size: 20px;
        }
        
        .feature-text h4 {
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        /* Projects */
        .projects-section {
            background-color: var(--light-graphite);
        }
        
        .projects-filter {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            background: var(--white);
            border: 1px solid var(--border-light);
            color: var(--medium-graphite);
            padding: 10px 24px;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .filter-btn.active, .filter-btn:hover {
            background: var(--gradient-blue);
            color: var(--white);
            border-color: transparent;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 40px;
        }
        
        .project-card {
            background: var(--white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .project-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-heavy);
        }
        
        .project-image {
            height: 240px;
            overflow: hidden;
            position: relative;
        }
        
        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .project-card:hover .project-image img {
            transform: scale(1.08);
        }
        
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(10, 26, 58, 0.9) 100%);
            display: flex;
            align-items: flex-end;
            padding: 25px;
        }
        
        .project-overlay h3 {
            color: var(--white);
            font-size: 22px;
        }
        
        .project-info {
            padding: 30px;
        }
        
        .project-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .project-location {
            color: var(--accent-blue);
            font-weight: 500;
            font-size: 15px;
        }
        
        .project-status {
            padding: 5px 15px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .status-completed {
            background-color: rgba(58, 123, 213, 0.1);
            color: var(--accent-blue);
        }
        
        .status-ongoing {
            background-color: rgba(212, 175, 55, 0.1);
            color: var(--accent-gold);
        }
        
        .project-desc {
            color: var(--medium-graphite);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .project-link {
            display: inline-flex;
            align-items: center;
            color: var(--accent-blue);
            font-weight: 600;
            text-decoration: none;
            font-size: 15px;
        }
        
        .project-link i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        
        .project-link:hover i {
            transform: translateX(5px);
        }
        
        /* Certifications */
        .certifications-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
        
        .certification-card {
            background: var(--white);
            border-radius: 16px;
            padding: 40px 30px;
            text-align: center;
            box-shadow: var(--shadow-soft);
            transition: all 0.4s ease;
            border: 1px solid var(--border-light);
            position: relative;
            overflow: hidden;
        }
        
        .certification-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--gradient-gold);
        }
        
        .certification-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-medium);
        }
        
        .cert-icon {
            width: 80px;
            height: 80px;
            background: var(--light-graphite);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: var(--accent-blue);
            font-size: 32px;
            transition: all 0.3s ease;
        }
        
        .certification-card:hover .cert-icon {
            background: var(--gradient-blue);
            color: var(--white);
        }
        
        .certification-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        /* Testimonials */
        .testimonials-section {
            background: var(--gradient-blue);
            position: relative;
            overflow: hidden;
        }
        
        .testimonials-section:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.1;
        }
        
        .testimonials-section .section-title h2,
        .testimonials-section .section-subtitle {
            color: var(--white);
        }
        
        .testimonial-slider {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .testimonial-slide {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 50px;
            box-shadow: var(--shadow-heavy);
            text-align: center;
        }
        
        .testimonial-quote {
            font-size: 22px;
            font-style: italic;
            color: var(--dark-graphite);
            margin-bottom: 40px;
            line-height: 1.6;
            position: relative;
        }
        
        .testimonial-quote:before {
            content: '"';
            font-size: 80px;
            color: var(--accent-gold);
            position: absolute;
            top: -30px;
            left: -20px;
            font-family: Georgia, serif;
            opacity: 0.3;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
            border: 3px solid var(--accent-gold);
        }
        
        .author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            font-size: 20px;
            margin-bottom: 5px;
            text-align: left;
        }
        
        .author-info p {
            color: var(--medium-graphite);
            text-align: left;
        }
        
        .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.5);
            opacity: 1;
        }
        
        .swiper-pagination-bullet-active {
            background-color: var(--accent-gold);
        }
        
        /* Contact Form */
        .contact-form-section {
            background-color: var(--light-graphite);
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
        }
        
        .contact-info h3 {
            font-size: 36px;
            margin-bottom: 25px;
        }
        
        .contact-info p {
            color: var(--medium-graphite);
            margin-bottom: 40px;
            font-size: 17px;
        }
        
        .contact-details {
            margin-top: 40px;
        }
        
        .contact-detail {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .contact-detail-icon {
            width: 56px;
            height: 56px;
            background: var(--white);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            color: var(--accent-blue);
            font-size: 22px;
            box-shadow: var(--shadow-soft);
        }
        
        .contact-detail-text h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .premium-contact-form {
            background: var(--white);
            padding: 50px;
            border-radius: 20px;
            box-shadow: var(--shadow-heavy);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--dark-graphite);
        }
        
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid var(--border-light);
            border-radius: 10px;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            transition: all 0.3s ease;
            background-color: var(--light-graphite);
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--accent-blue);
            background-color: var(--white);
            box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.1);
        }
        
        .submit-btn {
            background: var(--gradient-blue);
            color: var(--white);
            padding: 18px 40px;
            border-radius: 10px;
            border: none;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 10px;
            box-shadow: var(--shadow-soft);
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }
        
        /* Premium Footer */
        .premium-footer {
            background: var(--primary-navy);
            color: var(--white);
            padding: 80px 0 40px;
            position: relative;
            overflow: hidden;
        }
        
        .premium-footer:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            opacity: 0.05;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 60px;
            margin-bottom: 60px;
            position: relative;
            z-index: 1;
        }
        
        .footer-logo .brand {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 10px;
        }
        
        .footer-logo p {
            color: rgba(255, 255, 255, 0.7);
            margin-top: 20px;
            max-width: 300px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 25px;
            color: var(--white);
            position: relative;
            padding-bottom: 15px;
        }
        
        .footer-column h3:after {
            content: '';
            position: absolute;
            width: 40px;
            height: 2px;
            background: var(--accent-gold);
            bottom: 0;
            left: 0;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 15px;
        }
        
        .footer-column ul li a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-column ul li a:hover {
            color: var(--accent-gold);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background: var(--accent-gold);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            position: relative;
            z-index: 1;
        }
        
        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--gradient-blue);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 20px;
            box-shadow: var(--shadow-medium);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }
        
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            transform: translateY(-5px);
            background: var(--gradient-gold);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .hero-content h1 {
                font-size: 54px;
            }
            
            .section-title h2 {
                font-size: 40px;
            }
        }
        
        @media (max-width: 992px) {
            .overview-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .overview-image {
                max-width: 600px;
                margin: 0 auto;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .mobile-menu-btn {
                display: flex;
            }
            
            .premium-nav-links {
                position: fixed;
                top: 90px;
                left: 0;
                background: var(--white);
                width: 100%;
                flex-direction: column;
                align-items: center;
                padding: 30px 0;
                box-shadow: var(--shadow-heavy);
                transform: translateY(-100%);
                opacity: 0;
                transition: all 0.4s ease;
                z-index: 999;
            }
            
            .premium-nav-links.active {
                transform: translateY(0);
                opacity: 1;
            }
            
            .premium-nav-links li {
                margin: 15px 0;
            }
            
            .premium-nav-cta {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 44px;
            }
            
            .section-padding {
                padding: 80px 0;
            }
            
            .section-title h2 {
                font-size: 36px;
            }
            
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-stats {
                flex-wrap: wrap;
                justify-content: center;
                gap: 30px;
            }
            
            .overview-features {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 36px;
            }
            
            .hero-content p {
                font-size: 18px;
            }
            
            .premium-contact-form {
                padding: 30px 20px;
            }
            
            .testimonial-slide {
                padding: 30px 20px;
            }
            
            .testimonial-quote {
                font-size: 18px;
            }
        }

JavaScript

// Initialize Swiper for testimonials
        const swiper = new Swiper('.testimonial-slider', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navLinks = document.getElementById('navLinks');
        
        mobileMenuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            const icon = mobileMenuBtn.querySelector('i');
            icon.classList.toggle('fa-bars');
            icon.classList.toggle('fa-times');
        });
        
        // Close mobile menu when clicking on a link
        document.querySelectorAll('.premium-nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                const icon = mobileMenuBtn.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });
        
        // Header scroll effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
            
            // Back to top button visibility
            const backToTop = document.getElementById('backToTop');
            if (window.scrollY > 500) {
                backToTop.classList.add('visible');
            } else {
                backToTop.classList.remove('visible');
            }
        });
        
        // Project filtering
        const filterBtns = document.querySelectorAll('.filter-btn');
        const projectCards = document.querySelectorAll('.project-card');
        
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Update active button
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // Filter projects
                const filter = btn.getAttribute('data-filter');
                
                projectCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 100);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Form submission
        const contactForm = document.getElementById('contactForm');
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form data
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            
            // Create a success message
            const formContainer = document.querySelector('.premium-contact-form');
            const originalContent = formContainer.innerHTML;
            
            formContainer.innerHTML = `
                <div style="text-align: center; padding: 40px 20px;">
                    <div style="width: 80px; height: 80px; background: var(--gradient-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px;">
                        <i class="fas fa-check" style="color: white; font-size: 36px;"></i>
                    </div>
                    <h3 style="margin-bottom: 15px;">Thank You, ${name}!</h3>
                    <p style="color: var(--medium-graphite); margin-bottom: 25px;">Your inquiry has been submitted successfully. Our team will contact you at <strong>${email}</strong> within 24 hours.</p>
                    <button id="resetForm" style="background: var(--gradient-blue); color: white; border: none; padding: 12px 30px; border-radius: 8px; font-weight: 600; cursor: pointer;">Submit Another Inquiry</button>
                </div>
            `;
            
            // Reset form button
            document.getElementById('resetForm').addEventListener('click', () => {
                formContainer.innerHTML = originalContent;
                // Reattach event listener to the new form
                document.getElementById('contactForm').addEventListener('submit', (e) => {
                    e.preventDefault();
                    // In a real implementation, you would submit the form data to a server
                    alert('Form submitted successfully!');
                });
            });
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if (this.getAttribute('href') === '#') return;
                
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Initialize animations on scroll
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animated');
                }
            });
        }, observerOptions);
        
        // Observe elements for animation
        document.querySelectorAll('.project-card, .certification-card, .feature-item').forEach(el => {
            observer.observe(el);
        });

Corporate Real Estate Template Preview

Download Options