Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PalletPal Pro - Premium Pallet Solutions</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| secondary: { | |
| 50: '#fff7ed', | |
| 100: '#ffedd5', | |
| 200: '#fed7aa', | |
| 300: '#fdba74', | |
| 400: '#fb923c', | |
| 500: '#f97316', | |
| 600: '#ea580c', | |
| 700: '#c2410c', | |
| 800: '#9a3412', | |
| 900: '#7c2d12', | |
| }, | |
| wood: { | |
| 50: '#fafaf9', | |
| 100: '#f5f5f4', | |
| 200: '#e7e5e4', | |
| 300: '#d6d3d1', | |
| 400: '#a8a29e', | |
| 500: '#78716c', | |
| 600: '#57534e', | |
| 700: '#44403c', | |
| 800: '#292524', | |
| 900: '#1c1917', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| display: ['Playfair Display', 'serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'slide-up': 'slideUp 0.6s ease-out forwards', | |
| 'scale-in': 'scaleIn 0.4s ease-out forwards', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| slideUp: { | |
| '0%': { opacity: '0', transform: 'translateY(30px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| scaleIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.9)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-sans antialiased bg-wood-50 text-wood-800 dark:bg-wood-900 dark:text-wood-100 transition-colors duration-300"> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center overflow-hidden"> | |
| <!-- Background Pattern --> | |
| <div class="absolute inset-0 opacity-5 dark:opacity-10"> | |
| <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div> | |
| </div> | |
| <!-- Gradient Overlay --> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 via-transparent to-secondary-500/10 dark:from-primary-900/20 dark:to-secondary-900/20"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32"> | |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center"> | |
| <!-- Content --> | |
| <div class="space-y-8 animate-slide-up"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-medium"> | |
| <i data-feather="award" class="w-4 h-4"></i> | |
| Trusted by 500+ Businesses | |
| </div> | |
| <h1 class="font-display text-5xl lg:text-7xl font-bold leading-tight"> | |
| Premium Pallet <br> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-500">Solutions</span> | |
| </h1> | |
| <p class="text-xl text-wood-600 dark:text-wood-300 max-w-lg leading-relaxed"> | |
| From B2B bulk orders to individual needs, we deliver quality wooden pallets that keep your supply chain moving. Sustainable, durable, and built to last. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#products" class="inline-flex items-center gap-2 px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg shadow-primary-500/25"> | |
| <span>Explore Products</span> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#quote" class="inline-flex items-center gap-2 px-8 py-4 bg-white dark:bg-wood-800 hover:bg-wood-50 dark:hover:bg-wood-700 text-wood-800 dark:text-wood-100 rounded-xl font-semibold transition-all duration-300 border-2 border-wood-200 dark:border-wood-700"> | |
| <i data-feather="file-text" class="w-5 h-5"></i> | |
| <span>Get Quote</span> | |
| </a> | |
| </div> | |
| <!-- Stats --> | |
| <div class="flex gap-8 pt-8 border-t border-wood-200 dark:border-wood-700"> | |
| <div> | |
| <div class="text-3xl font-bold text-primary-600">50K+</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Pallets Delivered</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-secondary-600">98%</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Client Satisfaction</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-wood-700 dark:text-wood-300">24h</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Fast Delivery</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Image --> | |
| <div class="relative lg:h-[600px] flex items-center justify-center"> | |
| <div class="absolute w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div> | |
| <div class="absolute w-72 h-72 bg-secondary-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div> | |
| <img src="http://static.photos/industry/640x640/42" alt="Premium Wooden Pallets" class="relative rounded-3xl shadow-2xl animate-float object-cover w-full max-w-lg"> | |
| <!-- Floating Cards --> | |
| <div class="absolute -left-4 top-1/4 bg-white dark:bg-wood-800 p-4 rounded-2xl shadow-xl animate-float" style="animation-delay: 1s;"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center"> | |
| <i data-feather="truck" class="w-6 h-6 text-primary-600"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Fast Shipping</div> | |
| <div class="text-xs text-wood-500">Nationwide delivery</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -right-4 bottom-1/4 bg-white dark:bg-wood-800 p-4 rounded-2xl shadow-xl animate-float" style="animation-delay: 2s;"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-secondary-100 dark:bg-secondary-900/30 rounded-xl flex items-center justify-center"> | |
| <i data-feather="leaf" class="w-6 h-6 text-secondary-600"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Eco-Friendly</div> | |
| <div class="text-xs text-wood-500">Sustainable wood</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-white dark:bg-wood-800/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="font-display text-4xl font-bold mb-4">Why Choose PalletPal Pro?</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg">We combine quality craftsmanship with exceptional service to deliver pallets that exceed expectations.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="group p-6 rounded-2xl bg-wood-50 dark:bg-wood-800 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-feather="shield" class="w-7 h-7 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Premium Quality</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Heat-treated and certified pallets meeting international standards.</p> | |
| </div> | |
| <div class="group p-6 rounded-2xl bg-wood-50 dark:bg-wood-800 hover:bg-secondary-50 dark:hover:bg-secondary-900/10 transition-all duration-300"> | |
| <div class="w-14 h-14 bg-secondary-100 dark:bg-secondary-900/30 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-feather="refresh-cw" class="w-7 h-7 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Buy & Sell</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">We purchase used pallets and resell refurbished ones at great prices.</p> | |
| </div> | |
| <div class="group p-6 rounded-2xl bg-wood-50 dark:bg-wood-800 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-feather="package" class="w-7 h-7 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Custom Sizes</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Need something specific? We build pallets to your exact specifications.</p> | |
| </div> | |
| <div class="group p-6 rounded-2xl bg-wood-50 dark:bg-wood-800 hover:bg-secondary-50 dark:hover:bg-secondary-900/10 transition-all duration-300"> | |
| <div class="w-14 h-14 bg-secondary-100 dark:bg-secondary-900/30 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"> | |
| <i data-feather="headphones" class="w-7 h-7 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">24/7 Support</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Our dedicated team is always ready to assist with your pallet needs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12"> | |
| <div> | |
| <h2 class="font-display text-4xl font-bold mb-4">Our Pallet Collection</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg max-w-2xl">From standard sizes to custom builds, find the perfect pallet solution for your business.</p> | |
| </div> | |
| <a href="products.html" class="mt-4 md:mt-0 inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold"> | |
| View All Products | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="product-grid"> | |
| <!-- Products will be loaded dynamically --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- B2B Section --> | |
| <section class="py-20 bg-gradient-to-br from-primary-900 to-primary-800 text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 40L40 0H20L0 20M40 40V20L20 40\'/%3E%3C/g%3E%3C/svg%3E');"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-primary-100 text-sm font-medium mb-6"> | |
| <i data-feather="briefcase" class="w-4 h-4"></i> | |
| B2B Solutions | |
| </div> | |
| <h2 class="font-display text-4xl lg:text-5xl font-bold mb-6">Enterprise-Grade Pallet Programs</h2> | |
| <p class="text-primary-100 text-lg mb-8 leading-relaxed"> | |
| Partner with us for volume discounts, dedicated account management, and just-in-time delivery. We serve manufacturers, distributors, and logistics companies nationwide. | |
| </p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center"> | |
| <i data-feather="check" class="w-5 h-5"></i> | |
| </div> | |
| <span>Volume pricing with contract terms</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center"> | |
| <i data-feather="check" class="w-5 h-5"></i> | |
| </div> | |
| <span>Dedicated fleet and logistics support</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center"> | |
| <i data-feather="check" class="w-5 h-5"></i> | |
| </div> | |
| <span>Pallet pooling and recycling programs</span> | |
| </div> | |
| </div> | |
| <a href="b2b.html" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-primary-800 rounded-xl font-semibold hover:bg-primary-50 transition-all duration-300"> | |
| <span>Explore B2B Options</span> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/warehouse/640x480/88" alt="B2B Pallet Solutions" class="rounded-3xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -left-6 bg-white text-wood-800 p-6 rounded-2xl shadow-xl"> | |
| <div class="text-3xl font-bold text-primary-600 mb-1">$2.5M+</div> | |
| <div class="text-sm text-wood-600">Annual B2B Revenue</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="quote" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h2 class="font-display text-4xl font-bold mb-4">Instant Quote Calculator</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg mb-8">Get an estimated price for your pallet order in seconds. For precise quotes, our team will follow up within 2 hours.</p> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl p-8 shadow-xl border border-wood-100 dark:border-wood-700"> | |
| <form id="quote-form" class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Pallet Type</label> | |
| <select id="pallet-type" class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"> | |
| <option value="standard">Standard 48x40" (New)</option> | |
| <option value="heavy">Heavy Duty 48x40"</option> | |
| <option value="custom">Custom Size</option> | |
| <option value="used">Refurbished/Used</option> | |
| <option value="export">Export/Heat Treated</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Quantity</label> | |
| <input type="number" id="quantity" min="1" value="100" class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Delivery Location</label> | |
| <select id="location" class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"> | |
| <option value="local">Local (Within 50 miles)</option> | |
| <option value="regional">Regional (50-200 miles)</option> | |
| <option value="national">National Shipping</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-primary-600 hover:bg-primary-700 text-white rounded-xl font-semibold transition-all duration-300 flex items-center justify-center gap-2"> | |
| <i data-feather="calculator" class="w-5 h-5"></i> | |
| Calculate Estimate | |
| </button> | |
| </form> | |
| <div id="quote-result" class="hidden mt-6 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-2xl border border-primary-200 dark:border-primary-800"> | |
| <div class="text-sm text-wood-600 dark:text-wood-400 mb-2">Estimated Total</div> | |
| <div class="text-4xl font-bold text-primary-600 mb-4" id="quote-price">$0</div> | |
| <p class="text-sm text-wood-500 dark:text-wood-400">*Final price may vary based on specifications and current lumber costs</p> | |
| <button onclick="submitQuote()" class="mt-4 w-full py-3 bg-secondary-600 hover:bg-secondary-700 text-white rounded-xl font-semibold transition-all duration-300"> | |
| Request Formal Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/workspace/640x640/156" alt="Pallet Manufacturing" class="rounded-3xl shadow-2xl w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-wood-900/80 to-transparent rounded-3xl flex items-end p-8"> | |
| <div class="text-white"> | |
| <div class="text-sm font-medium text-primary-300 mb-2">Need Help?</div> | |
| <h3 class="font-display text-2xl font-bold mb-2">Talk to Our Experts</h3> | |
| <p class="text-wood-200 mb-4">Not sure what you need? Our pallet specialists are here to help.</p> | |
| <a href="contact.html" class="inline-flex items-center gap-2 text-white font-semibold hover:text-primary-300 transition-colors"> | |
| Schedule a Call | |
| <i data-feather="phone" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-wood-100 dark:bg-wood-800/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="font-display text-4xl font-bold text-center mb-12">What Our Clients Say</h2> | |
| <div class="grid md:grid-cols-3 gap-8" id="testimonials-grid"> | |
| <!-- Testimonials loaded dynamically --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="relative bg-gradient-to-r from-secondary-600 to-secondary-500 rounded-3xl p-12 lg:p-16 text-center text-white overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div> | |
| </div> | |
| <div class="relative"> | |
| <h2 class="font-display text-4xl lg:text-5xl font-bold mb-6">Ready to Get Started?</h2> | |
| <p class="text-secondary-100 text-lg max-w-2xl mx-auto mb-8"> | |
| Join hundreds of businesses that trust PalletPal Pro for their shipping and storage needs. Get your free quote today. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="contact.html" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-secondary-600 rounded-xl font-semibold hover:bg-secondary-50 transition-all duration-300"> | |
| <i data-feather="message-circle" class="w-5 h-5"></i> | |
| Contact Sales | |
| </a> | |
| <a href="tel:+1234567890" class="inline-flex items-center gap-2 px-8 py-4 bg-secondary-700 text-white rounded-xl font-semibold hover:bg-secondary-800 transition-all duration-300"> | |
| <i data-feather="phone" class="w-5 h-5"></i> | |
| Call Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |