About Us Transport Solutions 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 - Swift Transport Solutions</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md shadow-lg transition-all duration-300"> <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-shrink-0 flex items-center"> <div class="truck-move text-2xl mr-2">?</div> <h1 class="text-2xl font-bold gradient-text">Swift Transport</h1> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Home</a> <a href="#" class="text-blue-600 px-3 py-2 text-sm font-medium">About</a> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Services</a> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Fleet</a> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Tracking</a> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">Contact</a> </div> </div> <button class="md:hidden"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </nav> <!-- Hero Section --> <section class="hero-bg min-h-screen flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-r from-blue-900/60 to-indigo-900/40"></div> <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> <div class="text-6xl mb-4 floating">?</div> <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">Our Transport Legacy</h1> <p class="text-xl md:text-2xl mb-8 fade-in" style="animation-delay: 0.3s;">Delivering excellence across the nation with reliable, efficient, and innovative transport solutions</p> <button class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 fade-in" style="animation-delay: 0.6s;"> Discover Our Journey </button> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </section> <!-- Our Story 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 md:text-5xl font-bold text-gray-900 mb-6">Our Transport Heritage</h2> <p class="text-lg text-gray-600 mb-6 leading-relaxed"> Founded in 1985 by logistics veteran Robert Martinez, Swift Transport Solutions began with a single truck and an unwavering commitment to reliable delivery. What started as a local freight service has evolved into a comprehensive transport network spanning the entire continent. </p> <p class="text-lg text-gray-600 mb-8 leading-relaxed"> Our dedication to innovation, safety, and customer satisfaction has made us a trusted partner for businesses of all sizes. From small packages to oversized cargo, we deliver with precision and care. </p> <div class="flex flex-wrap gap-4"> <div class="bg-blue-50 px-6 py-3 rounded-full"> <span class="text-blue-600 font-semibold">? Est. 1985</span> </div> <div class="bg-green-50 px-6 py-3 rounded-full"> <span class="text-green-600 font-semibold">? Nationwide</span> </div> <div class="bg-yellow-50 px-6 py-3 rounded-full"> <span class="text-yellow-600 font-semibold">? ISO Certified</span> </div> </div> </div> <div class="slide-in-right"> <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Transport fleet" class="rounded-2xl shadow-2xl w-full h-96 object-cover hover-lift"> </div> </div> </div> </section> <!-- Statistics Section --> <section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-600 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 md:text-5xl font-bold mb-4">Our Transport Impact</h2> <p class="text-xl opacity-90">Numbers that showcase our logistics excellence</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div class="text-center scale-in"> <div class="text-4xl mb-2">?</div> <div class="counter mb-2" data-target="10000">0</div> <p class="text-lg font-medium">Deliveries Completed</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="text-4xl mb-2">?</div> <div class="counter mb-2" data-target="150">0</div> <p class="text-lg font-medium">Fleet Vehicles</p> </div> <div class="text-center scale-in" style="animation-delay: 0.4s;"> <div class="text-4xl mb-2">?</div> <div class="counter mb-2" data-target="500">0</div> <p class="text-lg font-medium">Business Partners</p> </div> <div class="text-center scale-in" style="animation-delay: 0.6s;"> <div class="text-4xl mb-2">⭐</div> <div class="counter mb-2" data-target="99">0</div> <p class="text-lg font-medium">On-Time Delivery</p> </div> </div> </div> </section> <!-- Services Overview --> <section class="py-20 bg-gray-50"> <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 md:text-5xl font-bold text-gray-900 mb-4">What We Do Best</h2> <p class="text-xl text-gray-600">Comprehensive transport solutions for every need</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="transport-card p-8 text-center scale-in"> <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Freight Transport</h3> <p class="text-gray-600 leading-relaxed mb-6"> Reliable freight services for businesses of all sizes, from local deliveries to cross-country shipments. </p> <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Freight transport" class="w-full h-48 object-cover rounded-lg"> </div> <div class="transport-card p-8 text-center scale-in" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Logistics Management</h3> <p class="text-gray-600 leading-relaxed mb-6"> End-to-end logistics solutions including planning, coordination, and real-time tracking systems. </p> <img src="https://images.unsplash.com/photo-1553413077-190dd305871c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Logistics management" class="w-full h-48 object-cover rounded-lg"> </div> <div class="transport-card p-8 text-center scale-in" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Warehousing</h3> <p class="text-gray-600 leading-relaxed mb-6"> Secure storage facilities with inventory management and distribution services across multiple locations. </p> <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Warehousing" class="w-full h-48 object-cover rounded-lg"> </div> </div> </div> </section> <!-- Mission & Values 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 md:text-5xl font-bold text-gray-900 mb-4">Our Mission & Values</h2> <p class="text-xl text-gray-600">The principles that drive our transport excellence</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl shadow-xl hover-lift slide-in-left"> <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mb-6"> <span class="text-2xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3> <p class="text-gray-600 leading-relaxed"> To provide reliable, efficient, and innovative transport solutions that connect businesses and communities, enabling economic growth while maintaining the highest standards of safety and environmental responsibility. </p> </div> <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-8 rounded-2xl shadow-xl hover-lift slide-in-right"> <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mb-6"> <span class="text-2xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Values</h3> <p class="text-gray-600 leading-relaxed"> Safety first, customer satisfaction, operational excellence, and environmental stewardship. We believe in building long-term partnerships through trust, reliability, and continuous innovation in transport technology. </p> </div> </div> </div> </section> <!-- Team Section --> <section class="py-20 bg-gray-50"> <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 md:text-5xl font-bold text-gray-900 mb-4">Meet Our Transport Team</h2> <p class="text-xl text-gray-600">The experienced professionals behind our success</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center scale-in"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="CEO" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600/20 to-indigo-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Robert Martinez</h3> <p class="text-blue-600 font-semibold mb-3">CEO & Founder</p> <p class="text-gray-600 text-sm">Logistics industry veteran with 35+ years of experience in transport operations and business development.</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Operations Director" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600/20 to-indigo-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Sarah Johnson</h3> <p class="text-green-600 font-semibold mb-3">Operations Director</p> <p class="text-gray-600 text-sm">Expert in fleet management and logistics optimization with a focus on efficiency and safety.</p> </div> <div class="text-center scale-in" style="animation-delay: 0.4s;"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Fleet Manager" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-600/20 to-indigo-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Michael Chen</h3> <p class="text-purple-600 font-semibold mb-3">Fleet Manager</p> <p class="text-gray-600 text-sm">Specialist in vehicle maintenance, driver training, and transportation technology implementation.</p> </div> </div> </div> </section> <!-- Awards Section --> <section class="py-20 parallax" style="background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-white"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Awards & Recognition</h2> <p class="text-xl opacity-90">Celebrating our commitment to transport excellence</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="text-center scale-in"> <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4"> <span class="text-3xl">?</span> </div> <h3 class="text-lg font-bold mb-2">Transport Excellence</h3> <p class="text-sm opacity-80">Industry Leader Award 2023</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4"> <span class="text-3xl">?</span> </div> <h3 class="text-lg font-bold mb-2">Green Fleet</h3> <p class="text-sm opacity-80">Environmental Sustainability</p> </div> <div class="text-center scale-in" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4"> <span class="text-3xl">?️</span> </div> <h3 class="text-lg font-bold mb-2">Safety First</h3> <p class="text-sm opacity-80">Zero Accident Recognition</p> </div> <div class="text-center scale-in" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"> <span class="text-3xl">⭐</span> </div> <h3 class="text-lg font-bold mb-2">Customer Choice</h3> <p class="text-sm opacity-80">Best Service Provider 2023</p> </div> </div> </div> </section> <!-- Fleet Overview 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 md:text-5xl font-bold text-gray-900 mb-4">Our Fleet Capabilities</h2> <p class="text-xl text-gray-600">Modern vehicles equipped for every transport need</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="transport-card overflow-hidden scale-in"> <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Heavy trucks" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-bold text-gray-900 mb-2">? Heavy Trucks</h3> <p class="text-gray-600 text-sm">Long-haul freight transport with maximum capacity and efficiency</p> </div> </div> <div class="transport-card overflow-hidden scale-in" style="animation-delay: 0.2s;"> <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Delivery vans" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-bold text-gray-900 mb-2">? Delivery Vans</h3> <p class="text-gray-600 text-sm">Urban and suburban delivery solutions for smaller shipments</p> </div> </div> <div class="transport-card overflow-hidden scale-in" style="animation-delay: 0.4s;"> <img src="https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Refrigerated trucks" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-bold text-gray-900 mb-2">❄️ Refrigerated Units</h3> <p class="text-gray-600 text-sm">Temperature-controlled transport for perishable goods</p> </div> </div> <div class="transport-card overflow-hidden scale-in" style="animation-delay: 0.6s;"> <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Specialized vehicles" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-bold text-gray-900 mb-2">?️ Specialized Vehicles</h3> <p class="text-gray-600 text-sm">Custom solutions for oversized and specialized cargo</p> </div> </div> </div> </div> </section> <!-- Call to Action --> <section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-600 text-white"> <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8"> <div class="fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Move Forward?</h2> <p class="text-xl mb-8 opacity-90">Let us handle your transport needs with our reliable, efficient, and professional logistics solutions.</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105"> Get Free Quote </button> <button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105"> Track Shipment </button> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="fade-in"> <div class="flex items-center mb-4"> <span class="text-2xl mr-2">?</span> <h3 class="text-2xl font-bold gradient-text">Swift Transport</h3> </div> <p class="text-gray-400 mb-4">Delivering excellence across the nation with reliable transport solutions since 1985.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> </a> </div> </div> <div class="fade-in" style="animation-delay: 0.2s;"> <h4 class="text-lg font-semibold mb-4">Services</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Freight Transport</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Express Delivery</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Warehousing</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Logistics Management</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Supply Chain</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.4s;"> <h4 class="text-lg font-semibold mb-4">Quick Links</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Track Shipment</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Get Quote</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Fleet Information</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Safety Standards</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.6s;"> <h4 class="text-lg font-semibold mb-4">Contact Info</h4> <div class="space-y-2 text-gray-400"> <p>? 789 Transport Avenue</p> <p>Logistics District, TX 75201</p> <p>? Phone: +1 (555) SWIFT-01</p> <p>✉️ Email: info@swifttransport.com</p> <p>? 24/7 Operations Center</p> <p>? Emergency: +1 (555) 911-HELP</p> </div> </div> </div> <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> <p>© 2024 Swift Transport Solutions. All rights reserved. | Privacy Policy | Terms of Service | Safety Compliance</p> </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:'97072471277a3ce8',t:'MTc1NTQxMjQzMi4wMDAwMDA='};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
* { font-family: 'Poppins', 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); } .hero-bg { background: linear-gradient(135deg, rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.6)), url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; background-attachment: fixed; } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .gradient-text { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .counter { font-size: 3rem; font-weight: 700; color: #1e3a8a; } .transport-card { background: linear-gradient(145deg, #ffffff, #f8fafc); border-radius: 20px; box-shadow: 0 10px 30px rgba(30, 58, 138, 0.1); transition: all 0.3s ease; } .transport-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30, 58, 138, 0.15); } .truck-move { animation: truckMove 4s ease-in-out infinite; } @keyframes truckMove { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(10px); } } .wheel-spin { animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
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) + (target === 99 ? '%' : target >= 1000 ? 'K+' : '+'); }, 20); } // Start counter animations when visible const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = parseInt(counter.dataset.target); animateCounter(counter, target); counterObserver.unobserve(counter); } }); }, observerOptions); document.querySelectorAll('.counter').forEach(counter => { counterObserver.observe(counter); }); // Smooth scrolling for navigation 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' }); } }); }); // Navbar background change on scroll window.addEventListener('scroll', () => { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-white/95'); navbar.classList.remove('bg-white/90'); } else { navbar.classList.add('bg-white/90'); navbar.classList.remove('bg-white/95'); } }); // Button click animations document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.classList.add('ripple'); this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add ripple effect styles const style = document.createElement('style'); style.textContent = ` button { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: ripple-animation 0.6s linear; pointer-events: none; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Transport card hover effects document.querySelectorAll('.transport-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); // Truck movement animation const truckElements = document.querySelectorAll('.truck-move'); truckElements.forEach((truck, index) => { truck.style.animationDelay = `${index * 0.5}s`; }); // Add wheel spinning effect to transport images const transportImages = document.querySelectorAll('.transport-card img'); transportImages.forEach(img => { img.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05)'; this.style.transition = 'transform 0.3s ease'; }); img.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); });
Output Preview
Desktop
Mobile
Fullscreen