Aboutus Construction Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Us - BuildCraft Construction</title> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-lg fixed w-full z-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <div class="text-2xl font-bold text-blue-600">?️ BuildCraft</div> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-4"> <a href="#hero" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a> <a href="#story" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Our Story</a> <a href="#mission" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Mission</a> <a href="#team" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Team</a> <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">Contact</a> </div> </div> </div> </div> </nav> <!-- Hero Section --> <section id="hero" class="construction-bg min-h-screen flex items-center justify-center text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div class="fade-in"> <h1 class="text-5xl md:text-7xl font-bold mb-6">Building Dreams</h1> <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">With over 25 years of excellence in construction, we transform visions into reality through innovative design and superior craftsmanship.</p> <button class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all transform hover:scale-105"> Discover Our Story </button> </div> </div> </section> <!-- Our Story Section --> <section id="story" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Story</h2> <p class="text-lg text-gray-600 mb-6">Founded in 1998 by master craftsman John BuildCraft, our company began as a small family business with a simple mission: to build structures that stand the test of time while exceeding our clients' expectations.</p> <p class="text-lg text-gray-600 mb-6">From humble beginnings constructing residential homes, we've grown into a full-service construction company handling everything from luxury residences to commercial complexes and infrastructure projects.</p> <div class="flex items-center space-x-4"> <div class="w-16 h-1 bg-amber-500"></div> <span class="text-amber-600 font-semibold">25+ Years of Excellence</span> </div> </div> <div class="slide-in-right"> <div class="bg-gradient-to-br from-blue-50 to-amber-50 p-8 rounded-2xl floating"> <div class="text-6xl mb-4">?️</div> <h3 class="text-2xl font-bold text-gray-900 mb-4">From Vision to Reality</h3> <p class="text-gray-600">Every project begins with a dream. Our role is to transform that dream into a tangible, beautiful, and functional reality that exceeds expectations.</p> </div> </div> </div> </div> </section> <!-- Mission & Values Section --> <section id="mission" class="py-20 bg-gray-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Mission & Values</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto">We're committed to delivering exceptional construction services while maintaining the highest standards of integrity, safety, and environmental responsibility.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-xl shadow-lg scale-in text-center"> <div class="text-5xl mb-4">?</div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Excellence</h3> <p class="text-gray-600">We pursue perfection in every detail, ensuring superior quality in all our construction projects.</p> </div> <div class="bg-white p-8 rounded-xl shadow-lg scale-in text-center"> <div class="text-5xl mb-4">?</div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Integrity</h3> <p class="text-gray-600">Honest communication, transparent pricing, and ethical business practices guide everything we do.</p> </div> <div class="bg-white p-8 rounded-xl shadow-lg scale-in text-center"> <div class="text-5xl mb-4">?</div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Sustainability</h3> <p class="text-gray-600">We're committed to eco-friendly construction practices and sustainable building materials.</p> </div> </div> </div> </section> <!-- Statistics Section --> <section class="py-20 gradient-bg text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl font-bold mb-6">Our Achievements</h2> <p class="text-xl opacity-90">Numbers that speak to our commitment and success</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div class="scale-in"> <div class="counter" data-target="500">0</div> <p class="text-lg opacity-90">Projects Completed</p> </div> <div class="scale-in"> <div class="counter" data-target="25">0</div> <p class="text-lg opacity-90">Years Experience</p> </div> <div class="scale-in"> <div class="counter" data-target="98">0</div> <p class="text-lg opacity-90">Client Satisfaction %</p> </div> <div class="scale-in"> <div class="counter" data-target="150">0</div> <p class="text-lg opacity-90">Team Members</p> </div> </div> </div> </section> <!-- Services Section --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Services</h2> <p class="text-xl text-gray-600">Comprehensive construction solutions for every need</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="group bg-gray-50 p-8 rounded-xl hover:bg-blue-50 transition-all duration-300 slide-in-left"> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">?</div> <h3 class="text-xl font-bold text-gray-900 mb-3">Residential Construction</h3> <p class="text-gray-600">Custom homes, renovations, and residential developments built to your exact specifications.</p> </div> <div class="group bg-gray-50 p-8 rounded-xl hover:bg-blue-50 transition-all duration-300 scale-in"> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">?</div> <h3 class="text-xl font-bold text-gray-900 mb-3">Commercial Projects</h3> <p class="text-gray-600">Office buildings, retail spaces, and commercial complexes designed for success.</p> </div> <div class="group bg-gray-50 p-8 rounded-xl hover:bg-blue-50 transition-all duration-300 slide-in-right"> <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">?️</div> <h3 class="text-xl font-bold text-gray-900 mb-3">Infrastructure</h3> <p class="text-gray-600">Roads, bridges, and public works that connect and strengthen communities.</p> </div> </div> </div> </section> <!-- Team Section --> <section id="team" class="py-20 bg-gray-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl font-bold text-gray-900 mb-6">Meet Our Leadership</h2> <p class="text-xl text-gray-600">The experienced professionals leading our construction excellence</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-xl shadow-lg text-center scale-in"> <div class="w-24 h-24 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white text-2xl font-bold">JB</div> <h3 class="text-xl font-bold text-gray-900 mb-2">John BuildCraft</h3> <p class="text-blue-600 mb-4">Founder & CEO</p> <p class="text-gray-600">Master craftsman with 30+ years of experience in residential and commercial construction.</p> </div> <div class="bg-white p-8 rounded-xl shadow-lg text-center scale-in"> <div class="w-24 h-24 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white text-2xl font-bold">SM</div> <h3 class="text-xl font-bold text-gray-900 mb-2">Sarah Mitchell</h3> <p class="text-amber-600 mb-4">Chief Project Manager</p> <p class="text-gray-600">Expert in project coordination and client relations with a track record of on-time, on-budget delivery.</p> </div> <div class="bg-white p-8 rounded-xl shadow-lg text-center scale-in"> <div class="w-24 h-24 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-6 flex items-center justify-center text-white text-2xl font-bold">DR</div> <h3 class="text-xl font-bold text-gray-900 mb-2">David Rodriguez</h3> <p class="text-green-600 mb-4">Head of Engineering</p> <p class="text-gray-600">Structural engineer specializing in innovative construction techniques and sustainable building practices.</p> </div> </div> </div> </section> <!-- Skills & Expertise Section --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Expertise</h2> <p class="text-lg text-gray-600 mb-8">We've mastered every aspect of construction through decades of hands-on experience and continuous learning.</p> <div class="space-y-6"> <div> <div class="flex justify-between mb-2"> <span class="font-semibold text-gray-900">Project Management</span> <span class="text-gray-600">95%</span> </div> <div class="w-full bg-gray-200 rounded-full h-3"> <div class="progress-bar bg-blue-600 h-3 rounded-full" style="--progress: 95%"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold text-gray-900">Quality Control</span> <span class="text-gray-600">98%</span> </div> <div class="w-full bg-gray-200 rounded-full h-3"> <div class="progress-bar bg-amber-500 h-3 rounded-full" style="--progress: 98%"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold text-gray-900">Safety Standards</span> <span class="text-gray-600">100%</span> </div> <div class="w-full bg-gray-200 rounded-full h-3"> <div class="progress-bar bg-green-500 h-3 rounded-full" style="--progress: 100%"></div> </div> </div> <div> <div class="flex justify-between mb-2"> <span class="font-semibold text-gray-900">Client Satisfaction</span> <span class="text-gray-600">97%</span> </div> <div class="w-full bg-gray-200 rounded-full h-3"> <div class="progress-bar bg-purple-500 h-3 rounded-full" style="--progress: 97%"></div> </div> </div> </div> </div> <div class="slide-in-right"> <div class="bg-gradient-to-br from-gray-50 to-blue-50 p-8 rounded-2xl"> <div class="grid grid-cols-2 gap-6"> <div class="text-center"> <div class="text-3xl mb-2">?</div> <h4 class="font-bold text-gray-900">Award Winning</h4> <p class="text-sm text-gray-600">Industry recognition</p> </div> <div class="text-center"> <div class="text-3xl mb-2">?</div> <h4 class="font-bold text-gray-900">Expert Craftsmanship</h4> <p class="text-sm text-gray-600">Skilled professionals</p> </div> <div class="text-center"> <div class="text-3xl mb-2">⚡</div> <h4 class="font-bold text-gray-900">Fast Delivery</h4> <p class="text-sm text-gray-600">On-time completion</p> </div> <div class="text-center"> <div class="text-3xl mb-2">?</div> <h4 class="font-bold text-gray-900">Innovation</h4> <p class="text-sm text-gray-600">Modern techniques</p> </div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-900 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl font-bold mb-6">Ready to Build Together?</h2> <p class="text-xl opacity-90">Let's discuss your next construction project</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="slide-in-left"> <h3 class="text-2xl font-bold mb-6">Get In Touch</h3> <div class="space-y-4"> <div class="flex items-center space-x-4"> <div class="text-2xl">?</div> <div> <p class="font-semibold">Address</p> <p class="opacity-90">123 Construction Ave, Builder City, BC 12345</p> </div> </div> <div class="flex items-center space-x-4"> <div class="text-2xl">?</div> <div> <p class="font-semibold">Phone</p> <p class="opacity-90">(555) 123-BUILD</p> </div> </div> <div class="flex items-center space-x-4"> <div class="text-2xl">✉️</div> <div> <p class="font-semibold">Email</p> <p class="opacity-90">info@buildcraft.com</p> </div> </div> </div> </div> <div class="slide-in-right"> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <input type="text" placeholder="Your Name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-amber-500 transition-colors"> <input type="email" placeholder="Your Email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-amber-500 transition-colors"> </div> <input type="text" placeholder="Project Type" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-amber-500 transition-colors"> <textarea rows="4" placeholder="Tell us about your project..." class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-amber-500 transition-colors resize-none"></textarea> <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg font-semibold transition-all transform hover:scale-105"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-black text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <div class="text-3xl font-bold mb-4">?️ BuildCraft Construction</div> <p class="text-gray-400 mb-6">Building the future, one project at a time.</p> <div class="flex justify-center space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a> <a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a> </div> <div class="mt-8 pt-8 border-t border-gray-800"> <p class="text-gray-400">© 2024 BuildCraft Construction. All rights reserved.</p> </div> </div> </div> </footer> <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:'96aeea20a2cdff68',t:'MTc1NDQ4NzI5Ni4wMDAwMDA='};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
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); * { font-family: 'Inter', sans-serif; } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease-out; } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 0.8s ease-out; } .scale-in.visible { opacity: 1; transform: scale(1); } .counter { font-size: 3rem; font-weight: 700; color: #f59e0b; } .progress-bar { width: 0%; transition: width 2s ease-out; } .progress-bar.animate { width: var(--progress); } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .construction-bg { background: linear-gradient(rgba(0, 0, 0, 0.372), rgba(0, 0, 0, 0.307)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
JavaScript
// Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation function animateCounter(element, target) { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } element.textContent = Math.floor(current); }, 20); } // Progress bar animation function animateProgressBars() { document.querySelectorAll('.progress-bar').forEach(bar => { bar.classList.add('animate'); }); } // Counter observer const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counters = entry.target.querySelectorAll('.counter'); counters.forEach(counter => { const target = parseInt(counter.getAttribute('data-target')); animateCounter(counter, target); }); counterObserver.unobserve(entry.target); } }); }, observerOptions); // Progress bar observer const progressObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateProgressBars(); progressObserver.unobserve(entry.target); } }); }, observerOptions); // Observe counter and progress sections const statsSection = document.querySelector('.gradient-bg'); const skillsSection = document.querySelector('.slide-in-left'); if (statsSection) counterObserver.observe(statsSection); if (skillsSection) progressObserver.observe(skillsSection); // 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' }); } }); }); // Form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We\'ll get back to you soon.'); this.reset(); });
Output Preview
Desktop
Mobile
Fullscreen