Professional Construction Services
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BuildCraft Construction - Professional Construction Services</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto+Slab:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fas fa-hard-hat"></i> BuildCraft </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#projects">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-quote" onclick="requestQuote()"> <i class="fas fa-calculator me-2"></i>Get Quote </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title">Building Dreams Into Reality</h1> <p class="hero-subtitle">Professional construction services for residential, commercial, and industrial projects. Quality craftsmanship, on-time delivery, and competitive pricing guaranteed.</p> <div class="hero-stats"> <div class="stat-item"> <span class="stat-number">500+</span> <span class="stat-label">Projects Completed</span> </div> <div class="stat-item"> <span class="stat-number">15+</span> <span class="stat-label">Years Experience</span> </div> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">Client Satisfaction</span> </div> </div> <div class="hero-buttons"> <a href="#projects" class="btn btn-custom btn-primary-custom">View Our Work</a> <a href="#contact" class="btn btn-custom btn-secondary-custom">Get Started</a> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Our Construction Services</h2> <p class="section-subtitle animate-on-scroll">Comprehensive construction solutions for all your building needs</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-home"></i> </div> <h4 class="service-title">Residential Construction</h4> <p class="service-description">Custom homes, renovations, and residential building projects with attention to detail and quality craftsmanship.</p> <ul class="service-features"> <li>Custom Home Building</li> <li>Home Renovations</li> <li>Kitchen & Bathroom Remodeling</li> <li>Additions & Extensions</li> <li>Interior Design Services</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-building"></i> </div> <h4 class="service-title">Commercial Construction</h4> <p class="service-description">Office buildings, retail spaces, and commercial facilities built to meet business requirements and regulations.</p> <ul class="service-features"> <li>Office Buildings</li> <li>Retail Spaces</li> <li>Restaurants & Hotels</li> <li>Medical Facilities</li> <li>Tenant Improvements</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-industry"></i> </div> <h4 class="service-title">Industrial Construction</h4> <p class="service-description">Warehouses, manufacturing facilities, and industrial complexes designed for efficiency and functionality.</p> <ul class="service-features"> <li>Manufacturing Plants</li> <li>Warehouses & Distribution</li> <li>Industrial Complexes</li> <li>Power Plants</li> <li>Infrastructure Projects</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-tools"></i> </div> <h4 class="service-title">Renovation & Remodeling</h4> <p class="service-description">Transform existing spaces with professional renovation and remodeling services for homes and businesses.</p> <ul class="service-features"> <li>Complete Renovations</li> <li>Structural Modifications</li> <li>Modernization Projects</li> <li>Historic Restorations</li> <li>Energy Efficiency Upgrades</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-drafting-compass"></i> </div> <h4 class="service-title">Design & Planning</h4> <p class="service-description">Comprehensive design and planning services from concept to completion with 3D visualization and permits.</p> <ul class="service-features"> <li>Architectural Design</li> <li>3D Visualization</li> <li>Permit Processing</li> <li>Project Planning</li> <li>Cost Estimation</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-clipboard-check"></i> </div> <h4 class="service-title">Project Management</h4> <p class="service-description">Professional project management ensuring on-time delivery, quality control, and budget management.</p> <ul class="service-features"> <li>Timeline Management</li> <li>Quality Control</li> <li>Budget Oversight</li> <li>Safety Compliance</li> <li>Progress Reporting</li> </ul> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="projects-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Featured Projects</h2> <p class="section-subtitle animate-on-scroll">Showcasing our finest construction work across various sectors</p> </div> </div> <!-- Project Filters --> <div class="project-filters animate-on-scroll"> <button class="filter-btn active" onclick="filterProjects('all')">All Projects</button> <button class="filter-btn" onclick="filterProjects('residential')">Residential</button> <button class="filter-btn" onclick="filterProjects('commercial')">Commercial</button> <button class="filter-btn" onclick="filterProjects('industrial')">Industrial</button> </div> <div class="row" id="projectsContainer"> <!-- Residential Projects --> <div class="col-lg-4 col-md-6 mb-4 project-item residential"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=2075&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('luxury-villa')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Residential</div> <h5 class="project-title">Luxury Villa Complex</h5> <p class="project-description">Modern luxury villas with premium finishes, smart home technology, and sustainable design features.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>18 Months </span> <span class="project-status">Completed</span> </div> </div> </div> </div> <!-- Commercial Projects --> <div class="col-lg-4 col-md-6 mb-4 project-item commercial"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('office-tower')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Commercial</div> <h5 class="project-title">Corporate Office Tower</h5> <p class="project-description">25-story office building with modern amenities, energy-efficient systems, and premium office spaces.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>24 Months </span> <span class="project-status">Completed</span> </div> </div> </div> </div> <!-- Industrial Projects --> <div class="col-lg-4 col-md-6 mb-4 project-item industrial"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('manufacturing-plant')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Industrial</div> <h5 class="project-title">Manufacturing Plant</h5> <p class="project-description">State-of-the-art manufacturing facility with automated systems and environmental compliance.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>15 Months </span> <span class="project-status">Completed</span> </div> </div> </div> </div> <!-- More Residential --> <div class="col-lg-4 col-md-6 mb-4 project-item residential"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('apartment-complex')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Residential</div> <h5 class="project-title">Apartment Complex</h5> <p class="project-description">120-unit apartment complex with modern amenities, parking, and recreational facilities.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>20 Months </span> <span class="project-status">In Progress</span> </div> </div> </div> </div> <!-- More Commercial --> <div class="col-lg-4 col-md-6 mb-4 project-item commercial"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('shopping-center')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Commercial</div> <h5 class="project-title">Shopping Center</h5> <p class="project-description">Multi-level shopping center with retail spaces, food court, and entertainment facilities.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>22 Months </span> <span class="project-status">Completed</span> </div> </div> </div> </div> <!-- More Industrial --> <div class="col-lg-4 col-md-6 mb-4 project-item industrial"> <div class="project-card animate-on-scroll"> <div class="project-image" style="background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="project-overlay"> <button class="project-view-btn" onclick="viewProject('warehouse-complex')">View Details</button> </div> </div> <div class="project-info"> <div class="project-category">Industrial</div> <h5 class="project-title">Warehouse Complex</h5> <p class="project-description">Large-scale warehouse and distribution center with automated storage and logistics systems.</p> <div class="project-details"> <span class="project-duration"> <i class="fas fa-calendar me-2"></i>12 Months </span> <span class="project-status">Completed</span> </div> </div> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="about-text animate-on-scroll"> <h2 class="section-title text-start">Building Excellence Since 2009</h2> <p class="section-subtitle text-start">With over 15 years of experience in the construction industry, BuildCraft Construction has established itself as a trusted partner for residential, commercial, and industrial projects.</p> <p>Our commitment to quality, safety, and customer satisfaction has made us one of the leading construction companies in the region. We combine traditional craftsmanship with modern technology to deliver exceptional results.</p> <p>From concept to completion, our experienced team manages every aspect of your construction project, ensuring it's delivered on time, within budget, and to the highest standards of quality.</p> <div class="about-stats"> <div class="about-stat"> <span class="about-stat-number">500+</span> <span class="about-stat-label">Projects Completed</span> </div> <div class="about-stat"> <span class="about-stat-number">50+</span> <span class="about-stat-label">Expert Team Members</span> </div> <div class="about-stat"> <span class="about-stat-number">15+</span> <span class="about-stat-label">Years of Experience</span> </div> <div class="about-stat"> <span class="about-stat-number">98%</span> <span class="about-stat-label">Client Satisfaction</span> </div> </div> </div> </div> <div class="col-lg-6"> <div class="about-image animate-on-scroll"> <i class="fas fa-hard-hat"></i> <div class="experience-badge"> <span class="experience-years">15+</span> <span>Years</span> </div> </div> </div> </div> </div> </section> <!-- Team Section --> <section id="team" class="team-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Our Expert Team</h2> <p class="section-subtitle animate-on-scroll">Meet the professionals who bring your construction projects to life</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">Michael Johnson</h5> <p class="team-position">Project Manager & CEO</p> <p class="team-bio">15+ years of experience in construction management. Specializes in large-scale commercial and residential projects.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('michael', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('michael', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('michael', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1494790108755-2616c96c5e24?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">Sarah Williams</h5> <p class="team-position">Lead Architect</p> <p class="team-bio">Award-winning architect with expertise in sustainable design and modern construction techniques.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('sarah', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('sarah', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('sarah', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">David Rodriguez</h5> <p class="team-position">Construction Supervisor</p> <p class="team-bio">Expert in construction safety and quality control with 12+ years of field experience.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('david', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('david', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('david', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">Emily Chen</h5> <p class="team-position">Structural Engineer</p> <p class="team-bio">Licensed structural engineer specializing in seismic design and high-rise construction.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('emily', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('emily', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('emily', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">Robert Taylor</h5> <p class="team-position">Safety Manager</p> <p class="team-bio">Certified safety professional ensuring all projects meet OSHA standards and safety regulations.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('robert', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('robert', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('robert', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="team-card animate-on-scroll"> <div class="team-avatar" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="team-name">Lisa Anderson</h5> <p class="team-position">Quality Control Manager</p> <p class="team-bio">Ensures every project meets our high standards of quality and client expectations.</p> <div class="team-contact"> <button class="contact-btn" onclick="contactTeamMember('lisa', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactTeamMember('lisa', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactTeamMember('lisa', 'linkedin')"> <i class="fab fa-linkedin-in"></i> </button> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">Client Testimonials</h2> <p class="section-subtitle animate-on-scroll text-white-50">What our clients say about working with BuildCraft Construction</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">BuildCraft Construction exceeded our expectations. They delivered our office building on time and within budget. The quality of work is exceptional and their team was professional throughout the project.</p> <div class="testimonial-author"> <div class="author-avatar"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h6>John Smith</h6> <p class="author-company">CEO, TechCorp Solutions</p> </div> </div> <div class="rating-stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Our dream home became a reality thanks to BuildCraft. From design to completion, they guided us through every step. The attention to detail and craftsmanship is outstanding.</p> <div class="testimonial-author"> <div class="author-avatar"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h6>Maria Garcia</h6> <p class="author-company">Homeowner</p> </div> </div> <div class="rating-stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Professional, reliable, and skilled. BuildCraft handled our warehouse expansion project flawlessly. Their project management and communication were excellent throughout.</p> <div class="testimonial-author"> <div class="author-avatar"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h6>James Wilson</h6> <p class="author-company">Operations Manager, LogiCorp</p> </div> </div> <div class="rating-stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Get In Touch</h2> <p class="section-subtitle animate-on-scroll">Ready to start your construction project? Contact us for a free consultation and quote</p> </div> </div> <div class="row"> <div class="col-lg-6 mb-4"> <div class="contact-info animate-on-scroll"> <h4 class="mb-4">Contact Information</h4> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h6>Office Address</h6> <p>123 Construction Ave, Building City, BC 12345</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <h6>Phone Number</h6> <p>+1 (555) 123-4567</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div> <h6>Email Address</h6> <p>info@buildcraft.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <h6>Business Hours</h6> <p>Mon-Fri: 8:00 AM - 6:00 PM<br>Sat: 9:00 AM - 4:00 PM</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-tools"></i> </div> <div> <h6>Emergency Services</h6> <p>24/7 Emergency Construction Support</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="contact-form animate-on-scroll"> <h4 class="mb-4">Request a Quote</h4> <form id="contactForm"> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Your Email" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="tel" class="form-control" placeholder="Phone Number" required> </div> <div class="col-md-6"> <select class="form-control" required> <option value="">Project Type</option> <option value="residential">Residential</option> <option value="commercial">Commercial</option> <option value="industrial">Industrial</option> <option value="renovation">Renovation</option> </select> </div> </div> <input type="text" class="form-control" placeholder="Project Location"> <input type="text" class="form-control" placeholder="Estimated Budget Range"> <textarea class="form-control" rows="5" placeholder="Project Description and Requirements" required></textarea> <button type="submit" class="btn btn-submit"> <i class="fas fa-paper-plane me-2"></i>Send Quote Request </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand">?ļø BuildCraft </div> <p class="text-white-50 mb-4">Professional construction services for residential, commercial, and industrial projects. Quality craftsmanship, on-time delivery, and competitive pricing guaranteed.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></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-youtube"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Services</h5> <div class="footer-links"> <a href="#services">Residential Construction</a> <a href="#services">Commercial Construction</a> <a href="#services">Industrial Construction</a> <a href="#services">Renovation & Remodeling</a> <a href="#services">Design & Planning</a> <a href="#services">Project Management</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#about">About Us</a> <a href="#projects">Our Projects</a> <a href="#team">Our Team</a> <a href="#contact">Contact Us</a> <a href="#">Careers</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Contact Info</h5> <div class="footer-links"> <a href="tel:+15551234567">? +1 (555) 123-4567</a> <a href="mailto:info@buildcraft.com">āļø info@buildcraft.com</a> <a href="#">? 123 Construction Ave, Building City</a> <a href="#">? Mon-Fri: 8 AM - 6 PM</a> <a href="#">? 24/7 Emergency Services</a> <a href="#">? Free Consultations</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 BuildCraft Construction. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Safety Standards</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Message sent successfully!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97694255118f54dd',t:'MTc1NjQ0MTI2MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-orange: #ff6b35; --secondary-blue: #1e3a8a; --accent-yellow: #fbbf24; --dark-gray: #374151; --light-gray: #f9fafb; --success-green: #10b981; --white: #ffffff; --gradient-orange: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%); --gradient-blue: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); --gradient-dark: linear-gradient(135deg, #374151 0%, #1f2937 100%); --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-gray); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-weight: 600; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-gray); } ::-webkit-scrollbar-thumb { background: var(--primary-orange); border-radius: 4px; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-light); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 1.8rem; color: var(--primary-orange) !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 10px; font-size: 2rem; } .nav-link { font-weight: 500; color: var(--dark-gray) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-orange) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-orange); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-quote { background: var(--gradient-orange); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-left: 15px; transition: all 0.3s ease; } .btn-quote:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(30, 59, 138, 0.442), rgba(55, 65, 81, 0.426)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 40px; font-weight: 700; color: white; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.3s both; } .hero-stats { display: flex; gap: 3rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; } .stat-item { text-align: center; color: white; } .stat-number { font-size: 3rem; font-weight: 700; color: var(--accent-yellow); display: block; } .stat-label { font-size: 1rem; opacity: 0.9; } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 15px 35px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; } .btn-primary-custom { background: var(--gradient-orange); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); color: white; } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--secondary-blue); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--secondary-blue); text-align: center; } .section-subtitle { font-size: 1.2rem; color: var(--dark-gray); margin-bottom: 4rem; text-align: center; opacity: 0.8; } /* Services Section */ .services-section { background: var(--light-gray); } .service-card { background: white; border-radius: 20px; padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; border: 1px solid rgba(255, 107, 53, 0.1); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-orange); transform: scaleX(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); } .service-icon { width: 80px; height: 80px; background: var(--gradient-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--secondary-blue); } .service-description { color: var(--dark-gray); margin-bottom: 2rem; opacity: 0.8; } .service-features { list-style: none; text-align: left; } .service-features li { padding: 0.5rem 0; color: var(--dark-gray); position: relative; padding-left: 2rem; } .service-features li::before { content: 'ā'; position: absolute; left: 0; color: var(--success-green); font-weight: bold; } /* Projects Section */ .projects-section { background: white; } .project-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; position: relative; } .project-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .project-image { height: 250px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } .project-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, var(--primary-orange), var(--secondary-blue)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .project-card:hover .project-overlay { opacity: 0.9; } .project-view-btn { background: white; color: var(--secondary-blue); border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; transform: translateY(20px); transition: transform 0.3s ease; } .project-card:hover .project-view-btn { transform: translateY(0); } .project-info { padding: 2rem; } .project-category { color: var(--primary-orange); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .project-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--secondary-blue); } .project-description { color: var(--dark-gray); opacity: 0.8; margin-bottom: 1.5rem; } .project-details { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--light-gray); } .project-duration { color: var(--dark-gray); font-size: 0.9rem; } .project-status { background: var(--success-green); color: white; padding: 5px 15px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; } /* About Section */ .about-section { background: var(--light-gray); } .about-content { display: flex; align-items: center; gap: 4rem; } .about-text { flex: 1; } .about-image { flex: 1; height: 500px; background: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-4.0.3&auto=format&fit=crop&w=2076&q=80') center/cover; border-radius: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-heavy); } .about-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(55, 65, 81, 0.3)); border-radius: 20px; } .experience-badge { position: absolute; top: 2rem; right: 2rem; background: var(--accent-yellow); color: var(--secondary-blue); padding: 1rem 2rem; border-radius: 15px; text-align: center; font-weight: 700; } .experience-years { font-size: 2rem; display: block; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .about-stat { text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: var(--shadow-light); } .about-stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-orange); display: block; } .about-stat-label { color: var(--dark-gray); font-weight: 500; } /* Team Section */ .team-section { background: white; } .team-card { background: white; border-radius: 20px; padding: 2rem; text-align: center; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; } .team-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .team-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.5rem; background-size: cover; background-position: center; background-repeat: no-repeat; border: 4px solid var(--primary-orange); position: relative; box-shadow: var(--shadow-medium); } .team-name { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--secondary-blue); } .team-position { color: var(--primary-orange); font-weight: 500; margin-bottom: 1rem; } .team-bio { color: var(--dark-gray); opacity: 0.8; margin-bottom: 1.5rem; } .team-contact { display: flex; justify-content: center; gap: 1rem; } .contact-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--light-gray); color: var(--dark-gray); border: none; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .contact-btn:hover { background: var(--primary-orange); color: white; transform: translateY(-2px); } /* Testimonials Section */ .testimonials-section { background: var(--gradient-blue); color: white; } .testimonial-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; height: 100%; } .testimonial-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); } .testimonial-quote { font-size: 4rem; color: var(--accent-yellow); opacity: 0.5; margin-bottom: 1rem; } .testimonial-text { font-size: 1.1rem; margin-bottom: 2rem; font-style: italic; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 3px solid var(--accent-yellow); box-shadow: var(--shadow-light); } .author-info h6 { margin-bottom: 0.25rem; font-weight: 600; } .author-company { font-size: 0.9rem; opacity: 0.8; } .rating-stars { color: var(--accent-yellow); margin-top: 1rem; } /* Contact Section */ .contact-section { background: var(--light-gray); } .contact-info { background: white; border-radius: 20px; padding: 3rem; box-shadow: var(--shadow-light); height: 100%; } .contact-item { display: flex; align-items: center; margin-bottom: 2rem; padding: 1.5rem; background: var(--light-gray); border-radius: 15px; transition: all 0.3s ease; } .contact-item:hover { background: var(--primary-orange); color: white; transform: translateX(10px); } .contact-icon { width: 50px; height: 50px; background: var(--gradient-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; color: white; } .contact-item:hover .contact-icon { background: white; color: var(--primary-orange); } .contact-form { background: white; border-radius: 20px; padding: 3rem; box-shadow: var(--shadow-light); } .form-control { border: 2px solid var(--light-gray); border-radius: 10px; padding: 15px; margin-bottom: 1.5rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25); } .btn-submit { background: var(--gradient-orange); color: white; border: none; padding: 15px 40px; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--secondary-blue); color: white; padding: 80px 0 40px; } .footer-brand { font-family: 'Roboto Slab', serif; font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--accent-yellow); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.5rem; } .footer-links a:hover { color: var(--accent-yellow); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--gradient-orange); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 20px; background: var(--success-green); color: white; padding: 15px 25px; border-radius: 10px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; } .success-message.show { transform: translateX(0); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .section-title { font-size: 2.2rem; } .hero-stats { flex-direction: column; gap: 1rem; } .about-content { flex-direction: column; gap: 2rem; } .about-image { height: 300px; } .about-stats { grid-template-columns: 1fr; } } /* Loading Animation */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Project Filter */ .project-filters { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 10px; } .filter-btn { background: white; border: 2px solid var(--light-gray); color: var(--dark-gray); padding: 12px 25px; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; } .filter-btn.active { background: var(--gradient-orange); color: white; border-color: var(--primary-orange); } .filter-btn:hover { border-color: var(--primary-orange); color: var(--primary-orange); }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)'; } animateOnScroll(); }); // Project filtering function filterProjects(category) { // Update active button document.querySelectorAll('.filter-btn').forEach(btn => { btn.classList.remove('active'); }); event.target.classList.add('active'); // Filter projects const projects = document.querySelectorAll('.project-item'); projects.forEach(project => { if (category === 'all' || project.classList.contains(category)) { project.style.display = 'block'; setTimeout(() => { project.style.opacity = '1'; project.style.transform = 'translateY(0)'; }, 100); } else { project.style.opacity = '0'; project.style.transform = 'translateY(20px)'; setTimeout(() => { project.style.display = 'none'; }, 300); } }); showSuccessMessage(`Showing ${category === 'all' ? 'all' : category} projects`); } // View project details function viewProject(projectId) { const projectDetails = { 'luxury-villa': { name: 'Luxury Villa Complex', description: 'Modern luxury villas with premium finishes, smart home technology, and sustainable design features.', details: 'Location: Beverly Hills\nSize: 15,000 sq ft\nBedrooms: 6\nBathrooms: 8\nFeatures: Smart home automation, Solar panels, Pool & Spa, 3-car garage' }, 'office-tower': { name: 'Corporate Office Tower', description: '25-story office building with modern amenities, energy-efficient systems, and premium office spaces.', details: 'Location: Downtown Business District\nFloors: 25\nTotal Area: 500,000 sq ft\nFeatures: LEED Certified, High-speed elevators, Conference facilities, Parking garage' }, 'manufacturing-plant': { name: 'Manufacturing Plant', description: 'State-of-the-art manufacturing facility with automated systems and environmental compliance.', details: 'Location: Industrial Zone\nSize: 200,000 sq ft\nFeatures: Automated production lines, Quality control labs, Environmental systems, Loading docks' } }; const project = projectDetails[projectId]; if (project) { alert(`?ļø PROJECT DETAILS ?ļø\n\n${project.name}\n\n${project.description}\n\n${project.details}\n\nā This is a demo view\n? Contact us for more information about this project`); } } // Request quote function requestQuote() { document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); showSuccessMessage('Scroll down to request your free quote!'); } // Contact team member function contactTeamMember(member, method) { const contacts = { 'michael': { name: 'Michael Johnson', phone: '+1 (555) 123-4567', email: 'michael@buildcraft.com' }, 'sarah': { name: 'Sarah Williams', phone: '+1 (555) 123-4568', email: 'sarah@buildcraft.com' }, 'david': { name: 'David Rodriguez', phone: '+1 (555) 123-4569', email: 'david@buildcraft.com' }, 'emily': { name: 'Emily Chen', phone: '+1 (555) 123-4570', email: 'emily@buildcraft.com' }, 'robert': { name: 'Robert Taylor', phone: '+1 (555) 123-4571', email: 'robert@buildcraft.com' }, 'lisa': { name: 'Lisa Anderson', phone: '+1 (555) 123-4572', email: 'lisa@buildcraft.com' } }; const contact = contacts[member]; if (contact) { let message = ''; switch(method) { case 'phone': message = `? Calling ${contact.name} at ${contact.phone}`; break; case 'email': message = `āļø Emailing ${contact.name} at ${contact.email}`; break; case 'linkedin': message = `? Connecting with ${contact.name} on LinkedIn`; break; } showSuccessMessage(message); } } // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Contact form submission document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const name = this.querySelector('input[placeholder="Your Name"]').value; const email = this.querySelector('input[placeholder="Your Email"]').value; const phone = this.querySelector('input[placeholder="Phone Number"]').value; const projectType = this.querySelector('select').value; const location = this.querySelector('input[placeholder="Project Location"]').value; const budget = this.querySelector('input[placeholder="Estimated Budget Range"]').value; const description = this.querySelector('textarea').value; // Simulate form submission const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage(`Thank you ${name}! Your quote request has been received. We'll contact you within 24 hours.`); // Show quote summary setTimeout(() => { alert(`?ļø QUOTE REQUEST RECEIVED ?ļø\n\nName: ${name}\nEmail: ${email}\nPhone: ${phone}\nProject Type: ${projectType}\nLocation: ${location}\nBudget: ${budget}\n\nDescription: ${description}\n\nā This is a demo submission\n? In a real scenario, our team would contact you within 24 hours\n? We'll provide a detailed quote and project timeline\n\nThank you for choosing BuildCraft Construction!`); }, 1000); }, 2000); }); // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); // Counter animation for stats function animateCounters() { const counters = document.querySelectorAll('.stat-number, .about-stat-number'); counters.forEach(counter => { const target = parseInt(counter.textContent.replace(/[^\d]/g, '')); const increment = target / 100; let current = 0; const updateCounter = () => { if (current < target) { current += increment; if (counter.textContent.includes('+')) { counter.textContent = Math.ceil(current) + '+'; } else if (counter.textContent.includes('%')) { counter.textContent = Math.ceil(current) + '%'; } else { counter.textContent = Math.ceil(current); } requestAnimationFrame(updateCounter); } else { counter.textContent = counter.textContent.replace(/\d+/, target); } }; // Start animation when element is visible const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { updateCounter(); observer.unobserve(entry.target); } }); }); observer.observe(counter); }); } animateCounters(); }); // Service card interactions document.querySelectorAll('.service-card').forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.service-icon'); icon.style.transform = 'scale(1.1) rotate(5deg)'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.service-icon'); icon.style.transform = 'scale(1) rotate(0deg)'; }); }); // Emergency contact function function emergencyContact() { alert('? EMERGENCY CONSTRUCTION SERVICES ?\n\n24/7 Emergency Hotline: +1 (555) 911-BUILD\n\nWe provide immediate response for:\n⢠Structural damage\n⢠Water damage repairs\n⢠Storm damage\n⢠Safety hazards\n⢠Emergency stabilization\n\nā” Average response time: 30 minutes\n? Certified emergency crews available\n? Call now for immediate assistance'); } // Quote calculator (demo) function calculateQuote() { showSuccessMessage('Opening quote calculator...'); setTimeout(() => { alert('? CONSTRUCTION QUOTE CALCULATOR ?\n\nProject Type: Residential\nSize: 2,500 sq ft\nLocation: Standard\nFinish Level: Standard\n\nEstimated Cost Range: $250,000 - $350,000\n\n? This is a rough estimate\n? Contact us for detailed quote\n?ļø Final cost depends on specifications\n? Free consultation available\n\nNote: This is a demo calculator'); }, 1000); } // Project timeline tracker (demo) function trackProject() { showSuccessMessage('Loading project timeline...'); setTimeout(() => { alert('? PROJECT TIMELINE TRACKER ?\n\nProject: Luxury Villa Complex\nStatus: In Progress (75% Complete)\n\nCompleted Phases:\nā Design & Planning\nā Permits & Approvals\nā Foundation & Structure\nā Electrical & Plumbing\n\nCurrent Phase:\n? Interior Finishing (Week 3 of 6)\n\nUpcoming:\n? Final Inspections\n? Landscaping\n? Final Walkthrough\n\nEstimated Completion: March 15, 2024\n\n? Contact project manager for updates'); }, 1000); }
Output Preview
Desktop
Mobile
Fullscreen