Construction About Page 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>BuildPro - Construction Services</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo"><i class="fas fa-building"></i> BuildPro</a>
            <nav>
                <ul class="nav-links" id="navLinks">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="hamburger" id="hamburger">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Building Your Dreams Into Reality</h1>
                <p>With over 20 years of experience in the construction industry, we deliver quality projects on time and within budget.</p>
                <div class="hero-btns">
                    <a href="#contact" class="btn">Get a Quote</a>
                    <a href="#projects" class="btn btn-outline">Our Projects</a>
                </div>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Our Company</h2>
                <p>We are a full-service construction firm specializing in residential, commercial, and industrial projects with a commitment to excellence and innovation.</p>
            </div>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.pexels.com/photos/53610/large-home-residential-house-architecture-53610.jpeg" alt="Construction team working">
                </div>
                <div class="about-text">
                    <h3>Building Excellence Since 2003</h3>
                    <p>BuildPro Construction was founded with a vision to transform the construction industry through innovative design, quality craftsmanship, and exceptional customer service.</p>
                    <p>Our team of experienced professionals brings together diverse expertise to deliver projects that exceed client expectations while maintaining the highest standards of safety and sustainability.</p>
                    <div class="about-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-medal"></i>
                            </div>
                            <div>
                                <h4>Quality Assurance</h4>
                                <p>We adhere to strict quality control measures at every stage of construction.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <h4>On-Time Delivery</h4>
                                <p>Our projects are completed within agreed timelines without compromising quality.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-hand-holding-usd"></i>
                            </div>
                            <div>
                                <h4>Cost Effective</h4>
                                <p>We provide competitive pricing without sacrificing quality or safety standards.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>We offer comprehensive construction services tailored to meet the unique needs of each client and project.</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Residential Construction">
                    </div>
                    <div class="service-content">
                        <h3>Residential Construction</h3>
                        <p>Custom home building, renovations, and additions designed to reflect your personal style and meet your family's needs.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Commercial Construction">
                    </div>
                    <div class="service-content">
                        <h3>Commercial Construction</h3>
                        <p>Office buildings, retail spaces, and mixed-use developments built to enhance business operations and customer experience.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-img">
                        <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Construction">
                    </div>
                    <div class="service-content">
                        <h3>Industrial Construction</h3>
                        <p>Warehouses, manufacturing facilities, and industrial parks designed for efficiency, safety, and scalability.</p>
                        <a href="#" class="btn">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section projects" id="projects">
        <div class="container">
            <div class="section-title">
                <h2>Our Projects</h2>
                <p>Explore our portfolio of completed projects that showcase our expertise and commitment to excellence.</p>
            </div>
            <div class="projects-filter">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="residential">Residential</button>
                <button class="filter-btn" data-filter="commercial">Commercial</button>
                <button class="filter-btn" data-filter="industrial">Industrial</button>
            </div>
            <div class="projects-grid">
                <div class="project-card" data-category="residential">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern House">
                    </div>
                    <div class="project-overlay">
                        <h3>Modern Hillside Residence</h3>
                        <p>Los Angeles, CA</p>
                    </div>
                </div>
                <div class="project-card" data-category="commercial">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Office Building">
                    </div>
                    <div class="project-overlay">
                        <h3>Downtown Office Tower</h3>
                        <p>Chicago, IL</p>
                    </div>
                </div>
                <div class="project-card" data-category="industrial">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Industrial Facility">
                    </div>
                    <div class="project-overlay">
                        <h3>Advanced Manufacturing Plant</h3>
                        <p>Houston, TX</p>
                    </div>
                </div>
                <div class="project-card" data-category="residential">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Apartment">
                    </div>
                    <div class="project-overlay">
                        <h3>Luxury Waterfront Apartments</h3>
                        <p>Miami, FL</p>
                    </div>
                </div>
                <div class="project-card" data-category="commercial">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Shopping Mall">
                    </div>
                    <div class="project-overlay">
                        <h3>Regional Shopping Center</h3>
                        <p>Dallas, TX</p>
                    </div>
                </div>
                <div class="project-card" data-category="industrial">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Warehouse">
                    </div>
                    <div class="project-overlay">
                        <h3>Distribution Center</h3>
                        <p>Memphis, TN</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section team" id="team">
        <div class="container">
            <div class="section-title">
                <h2>Our Team</h2>
                <p>Meet the dedicated professionals who make our projects successful through their expertise and commitment.</p>
            </div>
            <div class="team-grid">
                <div class="team-member">
                    <div class="member-img">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="John Smith">
                    </div>
                    <div class="member-info">
                        <h3>John Smith</h3>
                        <p>Founder & CEO</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-img">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="member-info">
                        <h3>Sarah Johnson</h3>
                        <p>Project Manager</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-img">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Michael Chen">
                    </div>
                    <div class="member-info">
                        <h3>Michael Chen</h3>
                        <p>Lead Architect</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <div class="member-img">
                        <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="David Rodriguez">
                    </div>
                    <div class="member-info">
                        <h3>David Rodriguez</h3>
                        <p>Construction Supervisor</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Client Testimonials</h2>
                <p>Hear what our clients have to say about their experience working with BuildPro Construction.</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial active">
                    <div class="testimonial-text">
                        BuildPro delivered our commercial building project on time and under budget. Their attention to detail and communication throughout the process was exceptional. We couldn't be happier with the results.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Jennifer Lee">
                        </div>
                        <div class="client-name">
                            <h4>Jennifer Lee</h4>
                            <p>CEO, TechSolutions Inc.</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-text">
                        Our custom home built by BuildPro exceeded all expectations. They listened to our needs, offered creative solutions, and executed flawlessly. The quality of craftsmanship is outstanding.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Robert Williams">
                        </div>
                        <div class="client-name">
                            <h4>Robert Williams</h4>
                            <p>Homeowner</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-text">
                        As a developer, I've worked with many construction firms, but BuildPro stands out for their professionalism, reliability, and quality. They've become our go-to partner for all our projects.
                    </div>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Thomas Brown">
                        </div>
                        <div class="client-name">
                            <h4>Thomas Brown</h4>
                            <p>Principal, Urban Development Group</p>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <div class="slider-dot active" data-slide="0"></div>
                    <div class="slider-dot" data-slide="1"></div>
                    <div class="slider-dot" data-slide="2"></div>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
                <p>Get in touch with our team to discuss your construction project or request a quote.</p>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Let's Build Something Great Together</h3>
                    <p>Whether you're planning a new construction project or need renovation services, our team is ready to assist you every step of the way.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Our Office</h4>
                                <p>123 Construction Ave, Building City, BC 12345</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Call Us</h4>
                                <p>+1 (555) 123-4567</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Email Us</h4>
                                <p>info@buildpro.com</p>
                            </div>
                        </div>
                    </div>
              
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Your Message" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>About BuildPro</h3>
                    <p>BuildPro Construction is a leading construction firm dedicated to delivering exceptional quality and value to our clients through innovative solutions and expert craftsmanship.</p>
                    <div class="social-contact">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#projects">Projects</a></li>
                        <li><a href="#team">Our Team</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Services</h3>
                    <ul class="footer-links">
                        <li><a href="#">Residential Construction</a></li>
                        <li><a href="#">Commercial Construction</a></li>
                        <li><a href="#">Industrial Construction</a></li>
                        <li><a href="#">Renovations</a></li>
                        <li><a href="#">Project Management</a></li>
                        <li><a href="#">Consulting</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <ul class="footer-contact">
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Construction Ave, Building City, BC 12345</span>
                        </li>
                        <li>
                            <i class="fas fa-phone-alt"></i>
                            <span>+1 (555) 123-4567</span>
                        </li>
                        <li>
                            <i class="fas fa-envelope"></i>
                            <span>info@buildpro.com</span>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <span>Mon-Fri: 8:00 AM - 5:00 PM</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 BuildPro Construction. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --secondary-color: #333;
            --accent-color: #FFA500;
            --light-color: #f9f9f9;
            --dark-color: #222;
            --text-color: #444;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

h1, h2, h3, h4 {
            color: var(--secondary-color);
            line-height: 1.2;
        }

a {
            text-decoration: none;
            color: inherit;
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

.btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--secondary-color);
            padding: 12px 25px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow);
        }

.btn:hover {
            background: var(--accent-color);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3);
        }

.section {
            padding: 80px 0;
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 2px;
        }

.section-title p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 20px 0;
        }

header.scrolled {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: var(--shadow);
            padding: 15px 0;
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }

.logo i {
            margin-right: 10px;
            font-size: 2rem;
        }

.nav-links {
            display: flex;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            color: white;
            display: flex;
            align-items: center;
            text-align: center;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 1s ease;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: white;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

.hero-btns .btn {
            background: var(--primary-color);
            color: var(--secondary-color);
        }

.hero-btns .btn-outline {
            background: transparent;
            border: 2px solid white;
            color: white;
        }

.hero-btns .btn-outline:hover {
            background: white;
            color: var(--secondary-color);
        }

/* About Section */
        .about {
            background: var(--light-color);
        }

.about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.about-img {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            animation: fadeInLeft 1s ease;
        }

.about-img img {
            transition: transform 0.5s ease;
        }

.about-img:hover img {
            transform: scale(1.05);
        }

.about-text {
            animation: fadeInRight 1s ease;
        }

.about-text h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--secondary-color);
        }

.about-text p {
            margin-bottom: 20px;
        }

.about-features {
            margin-top: 30px;
        }

.feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.feature-icon {
            background: var(--primary-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

.feature-icon i {
            font-size: 1.2rem;
            color: var(--secondary-color);
        }

/* Services Section */
        .services {
            background: white;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.service-card {
            background: var(--light-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            animation: fadeInUp 0.5s ease;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.service-img {
            height: 200px;
            overflow: hidden;
        }

.service-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.service-card:hover .service-img img {
            transform: scale(1.1);
        }

.service-content {
            padding: 25px;
        }

.service-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

/* Projects Section */
        .projects {
            background: var(--light-color);
        }

.projects-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

.filter-btn {
            padding: 8px 20px;
            margin: 0 10px 10px 0;
            background: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

.filter-btn.active, .filter-btn:hover {
            background: var(--primary-color);
            color: var(--secondary-color);
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.project-card {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            animation: fadeInUp 0.5s ease;
        }

.project-img {
            height: 250px;
        }

.project-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.project-card:hover .project-overlay {
            opacity: 1;
        }

.project-overlay h3 {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 10px;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

.project-overlay p {
            color: #ddd;
            transform: translateY(20px);
            transition: transform 0.3s ease 0.1s;
        }

.project-card:hover .project-overlay h3,
        .project-card:hover .project-overlay p {
            transform: translateY(0);
        }

/* Team Section */
        .team {
            background: white;
        }

.team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.team-member {
            background: var(--light-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            text-align: center;
            animation: fadeInUp 0.5s ease;
        }

.team-member:hover {
            transform: translateY(-10px);
        }

.member-img {
            height: 300px;
            overflow: hidden;
        }

.member-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.team-member:hover .member-img img {
            transform: scale(1.1);
        }

.member-info {
            padding: 20px;
        }

.member-info h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

.member-info p {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 15px;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-links a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--primary-color);
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.social-links a:hover {
            background: var(--accent-color);
            transform: translateY(-3px);
        }

/* Testimonials Section */
        .testimonials {
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            color: white;
            text-align: center;
        }

.testimonials .section-title h2,
        .testimonials .section-title p {
            color: white;
        }

.testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

.testimonial {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 10px;
            margin: 20px;
            display: none;
            animation: fadeIn 0.5s ease;
        }

.testimonial.active {
            display: block;
        }

.testimonial-text {
            font-size: 1.1rem;
            font-style: italic;
            margin-bottom: 20px;
            position: relative;
        }

.testimonial-text::before,
        .testimonial-text::after {
            content: '"';
            font-size: 2rem;
            color: var(--primary-color);
            opacity: 0.5;
        }

.testimonial-text::before {
            position: absolute;
            top: -15px;
            left: -10px;
        }

.testimonial-text::after {
            position: absolute;
            bottom: -30px;
            right: -10px;
        }

.client-info {
            display: flex;
            align-items: center;
            justify-content: center;
        }

.client-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            border: 3px solid var(--primary-color);
        }

.client-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.client-name h4 {
            color: white;
            margin-bottom: 5px;
        }

.client-name p {
            color: #ddd;
        }

.slider-controls {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.slider-dot.active {
            background: var(--primary-color);
            transform: scale(1.2);
        }

/* Contact Section */
        .contact {
            background: white;
        }

.contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }

.contact-info {
            animation: fadeInLeft 1s ease;
        }

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

.contact-details {
            margin-bottom: 30px;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.contact-icon {
            background: var(--primary-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

.contact-icon i {
            font-size: 1.2rem;
            color: var(--secondary-color);
        }

.contact-text h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

.social-contact {
            display: flex;
            gap: 15px;
        }

.social-contact a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--light-color);
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.social-contact a:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
        }

.contact-form {
            animation: fadeInRight 1s ease;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
        }

.form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
            outline: none;
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        footer {
            background: var(--secondary-color);
            color: white;
            padding: 50px 0 20px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

.footer-col h3 {
            color: var(--primary-color);
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary-color);
        }

.footer-col p {
            margin-bottom: 15px;
        }

.footer-links li {
            margin-bottom: 10px;
        }

.footer-links a {
            transition: color 0.3s ease;
        }

.footer-links a:hover {
            color: var(--primary-color);
        }

.footer-contact li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }

.footer-contact i {
            margin-right: 10px;
            color: var(--primary-color);
        }

.footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                grid-template-columns: 1fr;
            }

.about-img {
                order: -1;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
            }

.nav-links.active {
                left: 0;
            }

.nav-links li {
                margin: 15px 0;
            }

.hamburger {
                display: block;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero-btns {
                flex-direction: column;
                align-items: center;
            }

.section-title h2 {
                font-size: 2rem;
            }

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

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

.section {
                padding: 60px 0;
            }

.section-title h2 {
                font-size: 1.8rem;
            }
        }

JavaScript

// Mobile Navigation
        const hamburger = document.getElementById('hamburger');
        const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            hamburger.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Sticky Header
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Smooth Scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Testimonial Slider
        const testimonials = document.querySelectorAll('.testimonial');
        const dots = document.querySelectorAll('.slider-dot');

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                // Remove active class from all testimonials and dots
                testimonials.forEach(testimonial => testimonial.classList.remove('active'));
                dots.forEach(d => d.classList.remove('active'));
                
                // Add active class to clicked dot and corresponding testimonial
                dot.classList.add('active');
                testimonials[index].classList.add('active');
            });
        });

// Auto slide testimonials
        let currentSlide = 0;
        function autoSlide() {
            testimonials.forEach(testimonial => testimonial.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (currentSlide + 1) % testimonials.length;
            
            testimonials[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

// Change slide every 5 seconds
        setInterval(autoSlide, 5000);

// Project Filter
        const filterButtons = document.querySelectorAll('.filter-btn');
        const projectCards = document.querySelectorAll('.project-card');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                button.classList.add('active');
                
                const filterValue = button.getAttribute('data-filter');
                
                projectCards.forEach(card => {
                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

// Animation on Scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.service-card, .team-member, .project-card');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };

// Set initial state for animated elements
        document.querySelectorAll('.service-card, .team-member, .project-card').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        });

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

// Form Submission
        const contactForm = document.getElementById('contactForm');
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your message! We will get back to you soon.');
            this.reset();
        });

Construction About Page Template Preview

Download Options