ToolMaster Hardware 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>ToolMaster Hardware - Your Complete Tool Solution</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="bg-gray-900 text-white overflow-x-hidden"> <!-- Emergency Banner --> <!-- <div class="emergency-pulse text-white text-center py-2 text-sm font-semibold"> <i class="fas fa-tools mr-2"></i>Emergency Repairs: +1 (555) FIX-FAST | 24/7 Available </div> --> <!-- Navigation --> <nav class="fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm border-b border-yellow-400/20"> <div class="container mx-auto px-4 py-4"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold text-yellow-400 animate-pulse-slow"> <i class="fas fa-hammer mr-2"></i>ToolMaster </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300">About</a> <a href="#categories" class="hover:text-yellow-400 transition-colors duration-300">Categories</a> <a href="#products" class="hover:text-yellow-400 transition-colors duration-300">Products</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300">Services</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300">Contact</a> </div> <div class="hidden md:flex items-center space-x-4"> <div class="relative"> <button class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fas fa-shopping-cart text-xl"></i> <span class="cart-count" id="cartCount">0</span> </button> </div> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-full font-semibold hover:bg-yellow-300 transition-colors duration-300"> Shop Tools </button> </div> <button class="md:hidden text-yellow-400" onclick="toggleMenu()"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </nav> <!-- Mobile Menu --> <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-gray-900/95 backdrop-blur-sm z-40 transform -translate-x-full transition-transform duration-300 md:hidden"> <div class="flex flex-col items-center justify-center h-full space-y-8 text-xl"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">About</a> <a href="#categories" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Categories</a> <a href="#products" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Products</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Services</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Contact</a> </div> </div> <!-- Hero Section --> <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div> <div class="absolute inset-0 opacity-20"> <img src="https://images.unsplash.com/photo-1504148455328-c376907d081c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Hardware Tools" class="w-full h-full object-cover"> </div> <div class="container mx-auto px-4 text-center relative z-10"> <div class="animate-slide-up" style="animation-delay: 0.2s;"> <h1 class="text-5xl md:text-7xl font-bold mb-6"> Build with <span class="text-yellow-400 typing-animation">ToolMaster</span> </h1> <p class="text-xl md:text-2xl mb-8 text-gray-300">Professional Tools & Hardware for Every Project</p> <div class="space-x-4"> <button class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-full font-semibold hover-scale hover:bg-yellow-300 transition-all duration-300"> Shop Now </button> <button class="border-2 border-yellow-400 text-yellow-400 px-8 py-4 rounded-full font-semibold hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300"> View Catalog </button> </div> </div> </div> <div class="absolute top-20 left-10 text-yellow-400 text-4xl animate-float hammer-swing"> <i class="fas fa-hammer"></i> </div> <div class="absolute top-40 right-20 text-yellow-400 text-3xl animate-float tool-spin" style="animation-delay: 1s;"> <i class="fas fa-cog"></i> </div> <div class="absolute bottom-32 left-20 text-yellow-400 text-2xl animate-float" style="animation-delay: 2s;"> <i class="fas fa-wrench"></i> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <i class="fas fa-chevron-down text-yellow-400 text-2xl"></i> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <h2 class="text-4xl font-bold mb-6 text-yellow-400">About ToolMaster Hardware</h2> <p class="text-lg mb-6 text-gray-300"> ToolMaster Hardware has been serving professionals and DIY enthusiasts for over 30 years. We provide high-quality tools, hardware, and expert advice to help you complete any project with confidence. From small repairs to major construction, we have everything you need. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">75K+</div> <div class="text-sm text-gray-300">Products Available</div> </div> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">30+</div> <div class="text-sm text-gray-300">Years Experience</div> </div> </div> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Our History </button> </div> <div class="animate-slide-right"> <img src="https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Hardware Store" class="rounded-lg shadow-2xl hover-scale"> </div> </div> </div> </section> <!-- Categories Section --> <section id="categories" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Shop by Category</h2> <p class="text-xl text-gray-300">Find the right tools for your project</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="product-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1572981779307-38b8cabb2407?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Power Tools" class="w-full h-48 object-cover"> <div class="product-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Shop Power Tools</button> </div> <div class="p-6 text-center"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-bolt"></i> </div> <h3 class="text-xl font-semibold mb-2">Power Tools</h3> <p class="text-gray-300 text-sm">Drills, Saws & More</p> </div> </div> <div class="product-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1508873535684-277a3cbcc4e8?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hand Tools" class="w-full h-48 object-cover"> <div class="product-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Shop Hand Tools</button> </div> <div class="p-6 text-center"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-hammer"></i> </div> <h3 class="text-xl font-semibold mb-2">Hand Tools</h3> <p class="text-gray-300 text-sm">Hammers, Wrenches & Sets</p> </div> </div> <div class="product-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Hardware" class="w-full h-48 object-cover"> <div class="product-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Shop Hardware</button> </div> <div class="p-6 text-center"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-cog"></i> </div> <h3 class="text-xl font-semibold mb-2">Hardware</h3> <p class="text-gray-300 text-sm">Screws, Bolts & Fasteners</p> </div> </div> <div class="product-card bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Safety Equipment" class="w-full h-48 object-cover"> <div class="product-overlay"> <button class="bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold">Shop Safety</button> </div> <div class="p-6 text-center"> <div class="text-4xl text-yellow-400 mb-4"> <i class="fas fa-hard-hat"></i> </div> <h3 class="text-xl font-semibold mb-2">Safety</h3> <p class="text-gray-300 text-sm">Protective Gear & Equipment</p> </div> </div> </div> </div> </section> <!-- Featured Products Section --> <section id="products" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Featured Products</h2> <p class="text-xl text-gray-300">Professional-grade tools for serious projects</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1504148455328-c376907d081c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Professional Drill Set" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Professional Drill Set</h3> <p class="text-gray-300 mb-4">18V cordless drill with 50-piece accessory kit</p> <div class="flex justify-between items-center mb-4"> <span class="text-2xl font-bold text-yellow-400">$149.99</span> <div class="flex space-x-1"> <span class="text-yellow-400">★★★★★</span> <span class="text-sm text-gray-300">(4.9)</span> </div> </div> <button class="w-full bg-yellow-400 text-gray-900 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300" onclick="addToCart('Professional Drill Set', 149.99)"> Add to Cart </button> </div> </div> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1508873535684-277a3cbcc4e8?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Mechanic Tool Set" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Mechanic Tool Set</h3> <p class="text-gray-300 mb-4">120-piece comprehensive mechanic's tool kit</p> <div class="flex justify-between items-center mb-4"> <span class="text-2xl font-bold text-yellow-400">$299.99</span> <div class="flex space-x-1"> <span class="text-yellow-400">★★★★★</span> <span class="text-sm text-gray-300">(4.8)</span> </div> </div> <button class="w-full bg-yellow-400 text-gray-900 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300" onclick="addToCart('Mechanic Tool Set', 299.99)"> Add to Cart </button> </div> </div> <div class="bg-gray-700 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Circular Saw" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Circular Saw Pro</h3> <p class="text-gray-300 mb-4">7.25" circular saw with laser guide system</p> <div class="flex justify-between items-center mb-4"> <span class="text-2xl font-bold text-yellow-400">$189.99</span> <div class="flex space-x-1"> <span class="text-yellow-400">★★★★☆</span> <span class="text-sm text-gray-300">(4.7)</span> </div> </div> <button class="w-full bg-yellow-400 text-gray-900 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300" onclick="addToCart('Circular Saw Pro', 189.99)"> Add to Cart </button> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Our Services</h2> <p class="text-xl text-gray-300">Professional services to support your projects</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-800 rounded-lg p-8 card-hover text-center"> <div class="text-5xl text-yellow-400 mb-6"> <i class="fas fa-tools"></i> </div> <h3 class="text-2xl font-semibold mb-4">Tool Repair</h3> <p class="text-gray-300 mb-6">Professional repair services for all major tool brands</p> <ul class="text-left text-gray-300 mb-6 space-y-2"> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Power tool diagnostics</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Parts replacement</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Warranty service</li> </ul> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Schedule Repair </button> </div> <div class="bg-gray-800 rounded-lg p-8 card-hover text-center"> <div class="text-5xl text-yellow-400 mb-6"> <i class="fas fa-home"></i> </div> <h3 class="text-2xl font-semibold mb-4">Installation</h3> <p class="text-gray-300 mb-6">Expert installation services for home and business</p> <ul class="text-left text-gray-300 mb-6 space-y-2"> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Fixture installation</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Hardware mounting</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Assembly services</li> </ul> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Book Installation </button> </div> <div class="bg-gray-800 rounded-lg p-8 card-hover text-center"> <div class="text-5xl text-yellow-400 mb-6"> <i class="fas fa-graduation-cap"></i> </div> <h3 class="text-2xl font-semibold mb-4">Training</h3> <p class="text-gray-300 mb-6">Learn proper tool usage and safety techniques</p> <ul class="text-left text-gray-300 mb-6 space-y-2"> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Safety workshops</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Tool operation classes</li> <li><i class="fas fa-check text-yellow-400 mr-2"></i>Project planning</li> </ul> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Join Workshop </button> </div> </div> </div> </section> <!-- Features Section --> <section class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Why Choose ToolMaster?</h2> <p class="text-xl text-gray-300">Quality tools and exceptional service</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-medal text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Quality Guarantee</h4> <p class="text-sm text-gray-300">Professional-grade tools only</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-truck text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Fast Delivery</h4> <p class="text-sm text-gray-300">Same-day local delivery</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-user-tie text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Expert Advice</h4> <p class="text-sm text-gray-300">Professional consultation</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-shield-alt text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Warranty Support</h4> <p class="text-sm text-gray-300">Full manufacturer warranties</p> </div> </div> </div> </section> <!-- Project Gallery Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Project Gallery</h2> <p class="text-xl text-gray-300">Inspiration from completed projects</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="project-card relative rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1508873535684-277a3cbcc4e8?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Kitchen Renovation" class="w-full h-48 object-cover"> <div class="project-overlay"> <div class="text-white"> <h4 class="font-semibold">Kitchen Renovation</h4> <p class="text-sm">Complete kitchen remodel</p> </div> </div> </div> <div class="project-card relative rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Deck Construction" class="w-full h-48 object-cover"> <div class="project-overlay"> <div class="text-white"> <h4 class="font-semibold">Deck Construction</h4> <p class="text-sm">Custom outdoor deck build</p> </div> </div> </div> <div class="project-card relative rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Workshop Setup" class="w-full h-48 object-cover"> <div class="project-overlay"> <div class="text-white"> <h4 class="font-semibold">Workshop Setup</h4> <p class="text-sm">Professional workshop design</p> </div> </div> </div> <div class="project-card relative rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Garage Organization" class="w-full h-48 object-cover"> <div class="project-overlay"> <div class="text-white"> <h4 class="font-semibold">Garage Organization</h4> <p class="text-sm">Complete storage solution</p> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Customer Reviews</h2> <p class="text-xl text-gray-300">What our customers say about us</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-700 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Mike Thompson</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Best hardware store in town! The staff is incredibly knowledgeable and they have everything I need for my construction projects. Quality tools at great prices."</p> </div> <div class="bg-gray-700 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Sarah Davis</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Excellent service and fast delivery! I ordered a drill set online and it arrived the same day. The repair service is also top-notch. Highly recommend!"</p> </div> <div class="bg-gray-700 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Robert Wilson</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Professional-grade tools at competitive prices. The workshop training sessions are fantastic - learned so much about tool safety and proper usage. Great experience!"</p> </div> </div> </div> </section> <!-- Location Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Visit Our Store</h2> <p class="text-xl text-gray-300">See our full inventory in person</p> </div> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <div class="bg-gray-800 p-8 rounded-lg"> <h3 class="text-2xl font-semibold mb-6 text-yellow-400">ToolMaster Hardware Store</h3> <div class="space-y-4"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-yellow-400 mr-4"></i> <span>789 Industrial Blvd, Hardware District, City 54321</span> </div> <div class="flex items-center"> <i class="fas fa-phone text-yellow-400 mr-4"></i> <span>+1 (555) TOOLMASTER</span> </div> <div class="flex items-center"> <i class="fas fa-envelope text-yellow-400 mr-4"></i> <span>info@toolmaster.com</span> </div> <div class="flex items-center"> <i class="fas fa-clock text-yellow-400 mr-4"></i> <span>Mon-Fri: 7AM-8PM, Sat: 8AM-6PM, Sun: 9AM-5PM</span> </div> <div class="flex items-center"> <i class="fas fa-tools text-yellow-400 mr-4"></i> <span>Emergency Repairs: 24/7 Available</span> </div> </div> </div> </div> <div class="animate-slide-right"> <img src="https://images.unsplash.com/photo-1581244277943-fe4a9c777189?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Hardware Store Interior" class="w-full h-80 object-cover rounded-lg hover-scale"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Contact Us</h2> <p class="text-xl text-gray-300">Get expert advice for your next project</p> </div> <div class="max-w-2xl mx-auto"> <form class="bg-gray-700 p-8 rounded-lg"> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium mb-2">Name</label> <input type="text" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Name"> </div> <div> <label class="block text-sm font-medium mb-2">Phone</label> <input type="tel" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Phone"> </div> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Inquiry Type</label> <select class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300"> <option>General Question</option> <option>Tool Repair Service</option> <option>Installation Request</option> <option>Workshop Training</option> <option>Bulk Order Inquiry</option> <option>Emergency Repair</option> </select> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Project Details</label> <textarea rows="5" class="w-full px-4 py-3 bg-gray-600 border border-gray-500 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Tell us about your project or what tools you need..."></textarea> </div> <button type="submit" class="w-full bg-yellow-400 text-gray-900 py-4 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Send Message </button> </form> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 py-12 border-t border-gray-700"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="text-2xl font-bold text-yellow-400 mb-4"> <i class="fas fa-hammer mr-2"></i>ToolMaster </div> <p class="text-gray-300 mb-4">Your complete tool solution for over 30 years. Quality tools, expert advice, professional service.</p> <div class="flex space-x-4"> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-facebook text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-youtube text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-linkedin text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-instagram text-xl"></i> </a> </div> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Quick Links</h4> <ul class="space-y-2"> <li><a href="#home" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Home</a></li> <li><a href="#about" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">About</a></li> <li><a href="#categories" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Categories</a></li> <li><a href="#services" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Services</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Categories</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Power Tools</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Hand Tools</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Hardware</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Safety Equipment</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Emergency Contact</h4> <ul class="space-y-2 text-gray-300"> <li><i class="fas fa-map-marker-alt text-yellow-400 mr-2"></i>789 Industrial Blvd</li> <li><i class="fas fa-phone text-yellow-400 mr-2"></i>+1 (555) TOOLMASTER</li> <li><i class="fas fa-tools text-yellow-400 mr-2"></i>Emergency: +1 (555) FIX-FAST</li> <li><i class="fas fa-clock text-yellow-400 mr-2"></i>24/7 Emergency Repairs</li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center"> <p class="text-gray-300">© 2024 ToolMaster Hardware. All rights reserved. Build it right, build it strong.</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:'970b9b9af5789361',t:'MTc1NTQ1OTI1NS4wMDAwMDA='};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; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(50px); } .animate-slide-left { animation: slideLeft 0.8s ease-out forwards; opacity: 0; transform: translateX(-50px); } .animate-slide-right { animation: slideRight 0.8s ease-out forwards; opacity: 0; transform: translateX(50px); } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { to { opacity: 1; transform: translateX(0); } } @keyframes slideRight { to { opacity: 1; transform: translateX(0); } } .gradient-bg { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(251, 191, 36, 0.3); } .typing-animation { overflow: hidden; border-right: 3px solid #fbbf24; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #fbbf24; } } .product-card { position: relative; overflow: hidden; } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; } .tool-spin { animation: toolSpin 4s linear infinite; } @keyframes toolSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .cart-count { background: #dc2626; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; position: absolute; top: -8px; right: -8px; } .emergency-pulse { animation: emergencyPulse 1.5s ease-in-out infinite; } @keyframes emergencyPulse { 0%, 100% { background-color: #dc2626; } 50% { background-color: #ef4444; } } .hammer-swing { animation: hammerSwing 3s ease-in-out infinite; } @keyframes hammerSwing { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } } .project-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); display: flex; align-items: flex-end; padding: 1rem; opacity: 0; transition: opacity 0.3s ease; } .project-card:hover .project-overlay { opacity: 1; }
JavaScript
let cartCount = 0; // Mobile menu toggle function toggleMenu() { const menu = document.getElementById('mobileMenu'); menu.classList.toggle('-translate-x-full'); } // Add to cart functionality function addToCart(productName, price) { cartCount++; document.getElementById('cartCount').textContent = cartCount; alert(`${productName} added to cart! Total items: ${cartCount}`); } // 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' }); } }); }); // 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.style.animationPlayState = 'running'; } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.animate-slide-up, .animate-slide-left, .animate-slide-right').forEach(el => { el.style.animationPlayState = 'paused'; observer.observe(el); }); // Contact form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const inquiryType = this.querySelector('select').value; if (inquiryType === 'Emergency Repair') { alert('Emergency repair request received! We\'ll contact you within 30 minutes. For immediate assistance, call +1 (555) FIX-FAST'); } else { alert('Thank you for your inquiry! Our tool experts will get back to you within 24 hours.'); } this.reset(); }); // Add scroll effect to navbar window.addEventListener('scroll', function() { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-gray-900'); } else { navbar.classList.remove('bg-gray-900'); } }); // Category shopping functionality document.querySelectorAll('.product-overlay button').forEach(button => { button.addEventListener('click', function() { const category = this.textContent.replace('Shop ', ''); alert(`Browsing ${category} collection! Redirecting to ${category.toLowerCase()} page...`); }); }); // Service booking functionality document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Schedule Repair')) { button.addEventListener('click', function() { alert('Repair service booking! Please call +1 (555) TOOLMASTER or fill out the contact form with your repair details.'); }); } else if (button.textContent.includes('Book Installation')) { button.addEventListener('click', function() { alert('Installation service booking! Our professional installers will contact you to schedule an appointment.'); }); } else if (button.textContent.includes('Join Workshop')) { button.addEventListener('click', function() { alert('Workshop registration! Next safety workshop is this Saturday at 10AM. Call to reserve your spot!'); }); } }); // Shop Now and Shop Tools buttons document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Shop Now') || button.textContent.includes('Shop Tools')) { button.addEventListener('click', function() { document.querySelector('#categories').scrollIntoView({ behavior: 'smooth' }); }); } }); // View Catalog button functionality document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('View Catalog')) { button.addEventListener('click', function() { document.querySelector('#products').scrollIntoView({ behavior: 'smooth' }); }); } }); // Cart icon click document.querySelector('.fa-shopping-cart').parentElement.addEventListener('click', function() { if (cartCount > 0) { alert(`You have ${cartCount} item(s) in your cart. Redirecting to checkout...`); } else { alert('Your cart is empty. Start shopping for tools to add items!'); } }); // Emergency banner click document.querySelector('.emergency-pulse').addEventListener('click', function() { alert('Emergency Repair Line: +1 (555) FIX-FAST\n\nAvailable 24/7 for urgent tool repairs and emergency hardware needs!'); }); // Add loading animation window.addEventListener('load', function() { document.body.classList.add('loaded'); });
Output Preview
Desktop
Mobile
Fullscreen