Premium Footwear Solutions
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>SoleCraft Manufacturing - Premium Footwear Solutions</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Header Banner --> <div class="header-banner" id="headerBanner"> <div class="container position-relative"> <div class="banner-text"> ? Premium Footwear Manufacturing | Custom Orders Welcome | ISO 9001 Certified | Global Shipping Available ? </div> <button class="banner-close" onclick="closeBanner()">Ć</button> </div> </div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fas fa-shoe-prints"></i> SoleCraft </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#products">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-quote" onclick="requestQuote()"> <i class="fas fa-calculator me-2"></i>Get Quote </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title display-font">Crafting Quality Footwear</h1> <p class="hero-subtitle">Leading manufacturer of premium shoes with 25+ years of expertise. From athletic footwear to luxury dress shoes, we deliver exceptional quality at scale for brands worldwide.</p> <div class="hero-stats"> <div class="stat-item"> <div class="stat-number">25+</div> <div class="stat-text">Years Experience</div> </div> <div class="stat-item"> <div class="stat-number">2M+</div> <div class="stat-text">Pairs Annually</div> </div> <div class="stat-item"> <div class="stat-number">50+</div> <div class="stat-text">Global Brands</div> </div> <div class="stat-item"> <div class="stat-number">ISO</div> <div class="stat-text">Certified Quality</div> </div> </div> <div class="hero-buttons"> <a href="#products" class="btn btn-custom btn-primary-custom">View Products</a> <a href="#quote" class="btn btn-custom btn-secondary-custom">Request Quote</a> </div> </div> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="products-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Our Product Range</h2> <p class="section-subtitle animate-on-scroll">Comprehensive footwear solutions for every market segment and application</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Popular</div> </div> <div class="product-content"> <div class="product-category">Athletic Footwear</div> <h4 class="product-title">Sports & Running Shoes</h4> <p class="product-description">High-performance athletic footwear with advanced cushioning, breathable materials, and durable construction.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> EVA midsole technology</li> <li><i class="fas fa-check"></i> Breathable mesh uppers</li> <li><i class="fas fa-check"></i> Anti-slip rubber outsoles</li> <li><i class="fas fa-check"></i> Custom colorways available</li> </ul> <div class="product-price"> <span class="price-range">$15 - $35</span> <span class="moq">MOQ: 500 pairs</span> </div> <button class="btn-product" onclick="selectProduct('athletic')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Premium</div> </div> <div class="product-content"> <div class="product-category">Formal Footwear</div> <h4 class="product-title">Dress & Business Shoes</h4> <p class="product-description">Elegant formal shoes crafted with genuine leather, traditional construction methods, and timeless designs.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> Genuine leather uppers</li> <li><i class="fas fa-check"></i> Goodyear welt construction</li> <li><i class="fas fa-check"></i> Leather or rubber soles</li> <li><i class="fas fa-check"></i> Multiple width options</li> </ul> <div class="product-price"> <span class="price-range">$25 - $65</span> <span class="moq">MOQ: 300 pairs</span> </div> <button class="btn-product" onclick="selectProduct('formal')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1560769629-975ec94e6a86?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNob2V8ZW58MHx8MHx8fDA%3D')"> <div class="product-badge">Trending</div> </div> <div class="product-content"> <div class="product-category">Casual Footwear</div> <h4 class="product-title">Lifestyle & Casual Shoes</h4> <p class="product-description">Comfortable everyday footwear combining style and functionality for modern lifestyles.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> Canvas or synthetic uppers</li> <li><i class="fas fa-check"></i> Cushioned insoles</li> <li><i class="fas fa-check"></i> Flexible rubber outsoles</li> <li><i class="fas fa-check"></i> Trendy designs & colors</li> </ul> <div class="product-price"> <span class="price-range">$12 - $28</span> <span class="moq">MOQ: 600 pairs</span> </div> <button class="btn-product" onclick="selectProduct('casual')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"> <div class="product-badge">Specialized</div> </div> <div class="product-content"> <div class="product-category">Safety Footwear</div> <h4 class="product-title">Work & Safety Boots</h4> <p class="product-description">Industrial-grade safety footwear meeting international standards for workplace protection.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> Steel toe protection</li> <li><i class="fas fa-check"></i> Slip-resistant soles</li> <li><i class="fas fa-check"></i> Puncture-resistant midsole</li> <li><i class="fas fa-check"></i> ASTM/EN certified</li> </ul> <div class="product-price"> <span class="price-range">$20 - $45</span> <span class="moq">MOQ: 400 pairs</span> </div> <button class="btn-product" onclick="selectProduct('safety')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1551107696-a4b0c5a0d9a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1112&q=80')"> <div class="product-badge">Seasonal</div> </div> <div class="product-content"> <div class="product-category">Children's Footwear</div> <h4 class="product-title">Kids & Youth Shoes</h4> <p class="product-description">Specially designed footwear for growing feet with comfort, durability, and fun designs.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> Flexible construction</li> <li><i class="fas fa-check"></i> Non-toxic materials</li> <li><i class="fas fa-check"></i> Easy-on designs</li> <li><i class="fas fa-check"></i> Fun colors & patterns</li> </ul> <div class="product-price"> <span class="price-range">$8 - $22</span> <span class="moq">MOQ: 800 pairs</span> </div> <button class="btn-product" onclick="selectProduct('kids')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="product-card animate-on-scroll"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1180&q=80')"> <div class="product-badge">Luxury</div> </div> <div class="product-content"> <div class="product-category">Women's Footwear</div> <h4 class="product-title">Fashion & Heels</h4> <p class="product-description">Stylish women's footwear including heels, flats, and fashion boots with contemporary designs.</p> <ul class="product-features"> <li><i class="fas fa-check"></i> Premium materials</li> <li><i class="fas fa-check"></i> Comfort padding</li> <li><i class="fas fa-check"></i> Fashion-forward designs</li> <li><i class="fas fa-check"></i> Multiple heel heights</li> </ul> <div class="product-price"> <span class="price-range">$18 - $55</span> <span class="moq">MOQ: 350 pairs</span> </div> <button class="btn-product" onclick="selectProduct('womens')"> <i class="fas fa-shopping-cart me-2"></i>Request Quote </button> </div> </div> </div> </div> </div> </section> <!-- Manufacturing Process Section --> <section id="process" class="process-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Manufacturing Process</h2> <p class="section-subtitle animate-on-scroll">Our proven 8-step process ensures consistent quality and timely delivery</p> </div> </div> <div class="process-timeline"> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Design & Development</h4> <p class="process-description">Collaborative design process with 3D modeling, material selection, and prototype development.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> 3D CAD design and modeling</li> <li><i class="fas fa-check"></i> Material sourcing and testing</li> <li><i class="fas fa-check"></i> Prototype creation and fitting</li> <li><i class="fas fa-check"></i> Design refinement and approval</li> </ul> </div> <div class="process-number">1</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Pattern Making</h4> <p class="process-description">Precision pattern creation using advanced CAD systems for optimal fit and material efficiency.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Digital pattern development</li> <li><i class="fas fa-check"></i> Size grading across all sizes</li> <li><i class="fas fa-check"></i> Pattern testing and validation</li> <li><i class="fas fa-check"></i> Production pattern finalization</li> </ul> </div> <div class="process-number">2</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Material Cutting</h4> <p class="process-description">Automated cutting systems ensure precision and minimize waste while maintaining quality standards.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Computer-controlled cutting</li> <li><i class="fas fa-check"></i> Quality inspection of materials</li> <li><i class="fas fa-check"></i> Batch tracking and organization</li> <li><i class="fas fa-check"></i> Waste minimization protocols</li> </ul> </div> <div class="process-number">3</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Upper Assembly</h4> <p class="process-description">Skilled craftsmen assemble shoe uppers using traditional and modern techniques.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Component preparation and sorting</li> <li><i class="fas fa-check"></i> Stitching and bonding operations</li> <li><i class="fas fa-check"></i> Quality control at each stage</li> <li><i class="fas fa-check"></i> Upper finishing and inspection</li> </ul> </div> <div class="process-number">4</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Sole Preparation</h4> <p class="process-description">Manufacturing and preparation of outsoles, midsoles, and insoles using various materials and processes.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Sole molding and shaping</li> <li><i class="fas fa-check"></i> Cushioning system integration</li> <li><i class="fas fa-check"></i> Tread pattern application</li> <li><i class="fas fa-check"></i> Sole quality testing</li> </ul> </div> <div class="process-number">5</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Lasting & Assembly</h4> <p class="process-description">Critical process of shaping the shoe over the last and attaching the sole system.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Last selection and preparation</li> <li><i class="fas fa-check"></i> Upper stretching and shaping</li> <li><i class="fas fa-check"></i> Sole attachment process</li> <li><i class="fas fa-check"></i> Pressure and heat application</li> </ul> </div> <div class="process-number">6</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Finishing & Details</h4> <p class="process-description">Final touches including trimming, polishing, and adding hardware or decorative elements.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Edge trimming and smoothing</li> <li><i class="fas fa-check"></i> Surface polishing and buffing</li> <li><i class="fas fa-check"></i> Hardware and accessory attachment</li> <li><i class="fas fa-check"></i> Final aesthetic inspection</li> </ul> </div> <div class="process-number">7</div> </div> <div class="process-step animate-on-scroll"> <div class="process-content"> <h4 class="process-title">Quality Control & Packaging</h4> <p class="process-description">Comprehensive quality inspection followed by professional packaging and shipping preparation.</p> <ul class="process-details"> <li><i class="fas fa-check"></i> Multi-point quality inspection</li> <li><i class="fas fa-check"></i> Fit and comfort testing</li> <li><i class="fas fa-check"></i> Custom packaging solutions</li> <li><i class="fas fa-check"></i> Shipping documentation</li> </ul> </div> <div class="process-number">8</div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Our Services</h2> <p class="section-subtitle animate-on-scroll">Comprehensive manufacturing solutions tailored to your brand's needs</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-drafting-compass"></i> </div> <h4 class="service-title">Custom Design & Development</h4> <p class="service-description">Complete design services from concept to production-ready specifications.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> 3D design and visualization</li> <li><i class="fas fa-check"></i> Material consultation</li> <li><i class="fas fa-check"></i> Prototype development</li> <li><i class="fas fa-check"></i> Technical specifications</li> <li><i class="fas fa-check"></i> Design optimization</li> </ul> <button class="btn-service" onclick="selectService('design')"> <i class="fas fa-pencil-ruler me-2"></i>Learn More </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-industry"></i> </div> <h4 class="service-title">Private Label Manufacturing</h4> <p class="service-description">Complete manufacturing solutions for your brand with flexible MOQs.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Brand customization</li> <li><i class="fas fa-check"></i> Flexible order quantities</li> <li><i class="fas fa-check"></i> Quality assurance</li> <li><i class="fas fa-check"></i> Timely delivery</li> <li><i class="fas fa-check"></i> Competitive pricing</li> </ul> <button class="btn-service" onclick="selectService('private-label')"> <i class="fas fa-tags me-2"></i>Learn More </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-shipping-fast"></i> </div> <h4 class="service-title">Global Logistics</h4> <p class="service-description">Worldwide shipping and logistics management for seamless delivery.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> International shipping</li> <li><i class="fas fa-check"></i> Customs documentation</li> <li><i class="fas fa-check"></i> Tracking and monitoring</li> <li><i class="fas fa-check"></i> Insurance coverage</li> <li><i class="fas fa-check"></i> Delivery coordination</li> </ul> <button class="btn-service" onclick="selectService('logistics')"> <i class="fas fa-globe me-2"></i>Learn More </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-certificate"></i> </div> <h4 class="service-title">Quality Assurance</h4> <p class="service-description">Comprehensive quality control systems ensuring consistent excellence.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> ISO 9001 certification</li> <li><i class="fas fa-check"></i> Material testing</li> <li><i class="fas fa-check"></i> Production monitoring</li> <li><i class="fas fa-check"></i> Final inspection</li> <li><i class="fas fa-check"></i> Quality documentation</li> </ul> <button class="btn-service" onclick="selectService('quality')"> <i class="fas fa-award me-2"></i>Learn More </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-palette"></i> </div> <h4 class="service-title">Custom Branding</h4> <p class="service-description">Complete branding solutions including logos, packaging, and marketing materials.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Logo embossing/printing</li> <li><i class="fas fa-check"></i> Custom packaging design</li> <li><i class="fas fa-check"></i> Hang tags and labels</li> <li><i class="fas fa-check"></i> Marketing materials</li> <li><i class="fas fa-check"></i> Brand guidelines</li> </ul> <button class="btn-service" onclick="selectService('branding')"> <i class="fas fa-paint-brush me-2"></i>Learn More </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h4 class="service-title">Technical Support</h4> <p class="service-description">Ongoing technical assistance and consultation throughout the production process.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Design consultation</li> <li><i class="fas fa-check"></i> Material guidance</li> <li><i class="fas fa-check"></i> Production support</li> <li><i class="fas fa-check"></i> Problem resolution</li> <li><i class="fas fa-check"></i> Continuous improvement</li> </ul> <button class="btn-service" onclick="selectService('support')"> <i class="fas fa-phone me-2"></i>Learn More </button> </div> </div> </div> </div> </section> <!-- Capabilities Section --> <section id="capabilities" class="capabilities-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Manufacturing Capabilities</h2> <p class="section-subtitle animate-on-scroll">State-of-the-art facilities and advanced technology for superior production</p> </div> </div> <div class="capability-grid"> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-industry"></i> </div> <h4 class="capability-title">Production Capacity</h4> <div class="capability-value">2M+</div> <p class="capability-description">Pairs per year with scalable production lines</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-users"></i> </div> <h4 class="capability-title">Skilled Workforce</h4> <div class="capability-value">500+</div> <p class="capability-description">Experienced craftsmen and technicians</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-clock"></i> </div> <h4 class="capability-title">Lead Time</h4> <div class="capability-value">30-45</div> <p class="capability-description">Days for standard orders</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-boxes"></i> </div> <h4 class="capability-title">Minimum Order</h4> <div class="capability-value">300</div> <p class="capability-description">Pairs per style/color combination</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-globe"></i> </div> <h4 class="capability-title">Export Markets</h4> <div class="capability-value">40+</div> <p class="capability-description">Countries worldwide</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-award"></i> </div> <h4 class="capability-title">Quality Rate</h4> <div class="capability-value">99.5%</div> <p class="capability-description">First-pass quality approval</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-warehouse"></i> </div> <h4 class="capability-title">Facility Size</h4> <div class="capability-value">50K</div> <p class="capability-description">Square meters of production space</p> </div> <div class="capability-item animate-on-scroll"> <div class="capability-icon"> <i class="fas fa-cogs"></i> </div> <h4 class="capability-title">Production Lines</h4> <div class="capability-value">12</div> <p class="capability-description">Dedicated manufacturing lines</p> </div> </div> </div> </section> <!-- Quote Request Section --> <section id="quote" class="quote-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white display-font">Request a Quote</h2> <p class="section-subtitle animate-on-scroll text-white-50">Get detailed pricing and specifications for your footwear manufacturing needs</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="quote-form animate-on-scroll"> <form id="quoteForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Company Name *</label> <input type="text" class="form-control" id="companyName" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Contact Person *</label> <input type="text" class="form-control" id="contactPerson" required> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Email Address *</label> <input type="email" class="form-control" id="email" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Phone Number *</label> <input type="tel" class="form-control" id="phone" required> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Product Category *</label> <select class="form-select" id="productCategory" required> <option value="">Select Category</option> <option value="athletic">Athletic & Sports Shoes</option> <option value="formal">Formal & Dress Shoes</option> <option value="casual">Casual & Lifestyle</option> <option value="safety">Safety & Work Boots</option> <option value="kids">Children's Footwear</option> <option value="womens">Women's Fashion</option> <option value="custom">Custom Design</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Estimated Quantity *</label> <select class="form-select" id="quantity" required> <option value="">Select Quantity</option> <option value="300-500">300 - 500 pairs</option> <option value="500-1000">500 - 1,000 pairs</option> <option value="1000-5000">1,000 - 5,000 pairs</option> <option value="5000-10000">5,000 - 10,000 pairs</option> <option value="10000+">10,000+ pairs</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Target Price Range</label> <select class="form-select" id="priceRange"> <option value="">Select Range</option> <option value="under-15">Under $15</option> <option value="15-25">$15 - $25</option> <option value="25-40">$25 - $40</option> <option value="40-60">$40 - $60</option> <option value="60+">$60+</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Required Delivery</label> <select class="form-select" id="delivery"> <option value="">Select Timeline</option> <option value="30-days">Within 30 days</option> <option value="45-days">Within 45 days</option> <option value="60-days">Within 60 days</option> <option value="90-days">Within 90 days</option> <option value="flexible">Flexible</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Services Needed</label> <select class="form-select" id="services"> <option value="">Select Services</option> <option value="manufacturing-only">Manufacturing Only</option> <option value="design-manufacturing">Design + Manufacturing</option> <option value="full-service">Full Service (Design, Manufacturing, Branding)</option> <option value="private-label">Private Label</option> <option value="consultation">Consultation</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Shipping Destination</label> <input type="text" class="form-control" id="destination" placeholder="Country/Region"> </div> </div> </div> <div class="form-group"> <label class="form-label">Material Preferences</label> <textarea class="form-control" id="materials" rows="3" placeholder="Specify preferred materials, colors, or special requirements..."></textarea> </div> <div class="form-group"> <label class="form-label">Project Details</label> <textarea class="form-control" id="projectDetails" rows="4" placeholder="Describe your project, specific requirements, quality standards, or any other important details..."></textarea> </div> <div class="text-center"> <div class="mb-3"> <div class="form-check d-inline-block me-4"> <input class="form-check-input" type="checkbox" id="nda" required> <label class="form-check-label text-white" for="nda"> I agree to the <a href="#" onclick="showNDA()" class="text-warning">Non-Disclosure Agreement</a> </label> </div> <div class="form-check d-inline-block"> <input class="form-check-input" type="checkbox" id="updates"> <label class="form-check-label text-white" for="updates"> Subscribe to industry updates and new product announcements </label> </div> </div> <button type="submit" class="btn-submit"> <i class="fas fa-paper-plane me-2"></i>Submit Quote Request </button> </div> </form> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white display-font">Contact Us</h2> <p class="section-subtitle animate-on-scroll text-white-50">Connect with our team to discuss your footwear manufacturing needs</p> </div> </div> <div class="row"> <div class="col-lg-6 mb-4"> <div class="contact-info animate-on-scroll"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h5>Manufacturing Facility</h5> <p>789 Industrial Boulevard<br>Manufacturing District, Guangzhou 510000<br>Guangdong Province, China</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h5>Phone & WhatsApp</h5> <p>+86 20 8888-9999<br>+86 138-0013-8888 (WhatsApp)</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h5>Email</h5> <p>sales@solecraftmfg.com<br>info@solecraftmfg.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h5>Business Hours</h5> <p>Monday - Friday: 8:00 AM - 6:00 PM (GMT+8)<br> Saturday: 9:00 AM - 5:00 PM<br> Sunday: Closed</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="contact-info animate-on-scroll"> <h4 class="mb-4">Send us a Message</h4> <form id="contactForm"> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Company Name" required> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email Address" required> </div> <div class="form-group"> <input type="tel" class="form-control" placeholder="Phone Number"> </div> <div class="form-group"> <select class="form-select"> <option value="">Select Inquiry Type</option> <option value="quote">Quote Request</option> <option value="samples">Sample Request</option> <option value="partnership">Partnership Inquiry</option> <option value="technical">Technical Support</option> <option value="quality">Quality Concerns</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea class="form-control" rows="4" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn-submit"> <i class="fas fa-paper-plane me-2"></i>Send Message </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand">? SoleCraft</div> <p class="text-white-50 mb-4">Leading footwear manufacturer with 25+ years of expertise in creating quality shoes for global brands. From design to delivery, we ensure excellence at every step.</p> <div class="social-links"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Products</h5> <div class="footer-links"> <a href="#products">Athletic Shoes</a> <a href="#products">Formal Footwear</a> <a href="#products">Casual Shoes</a> <a href="#products">Safety Boots</a> <a href="#products">Children's Shoes</a> <a href="#products">Women's Fashion</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Services</h5> <div class="footer-links"> <a href="#services">Custom Design</a> <a href="#services">Private Label</a> <a href="#services">Quality Assurance</a> <a href="#services">Global Logistics</a> <a href="#services">Technical Support</a> <a href="#" onclick="showCertifications()">Certifications</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Company</h5> <div class="footer-links"> <a href="#" onclick="showAbout()">About Us</a> <a href="#capabilities">Capabilities</a> <a href="#" onclick="showCareers()">Careers</a> <a href="#" onclick="showNews()">News & Updates</a> <a href="#" onclick="showSustainability()">Sustainability</a> <a href="#contact">Contact Us</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 SoleCraft Manufacturing. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Quality Policy</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'976a3a3af51b5983',t:'MTc1NjQ1MTQxNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-brown: #8B4513; --secondary-tan: #D2B48C; --accent-gold: #DAA520; --accent-orange: #FF8C00; --accent-blue: #4682B4; --accent-green: #228B22; --soft-cream: #FFF8DC; --warm-beige: #F5F5DC; --deep-brown: #654321; --dark-charcoal: #2F2F2F; --light-gray: #F8F9FA; --white: #FFFFFF; --gradient-primary: linear-gradient(135deg, #8B4513 0%, #D2B48C 100%); --gradient-secondary: linear-gradient(135deg, #DAA520 0%, #FF8C00 100%); --gradient-industrial: linear-gradient(135deg, #4682B4 0%, #228B22 100%); --shadow-soft: 0 4px 6px -1px rgba(139, 69, 19, 0.1); --shadow-medium: 0 10px 15px -3px rgba(139, 69, 19, 0.1); --shadow-heavy: 0 25px 50px -12px rgba(139, 69, 19, 0.25); --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-charcoal); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } .display-font { font-family: 'Playfair Display', serif; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--soft-cream); } ::-webkit-scrollbar-thumb { background: var(--primary-brown); border-radius: 4px; } /* Header Banner */ .header-banner { background: var(--gradient-industrial); color: white; padding: 10px 0; text-align: center; font-weight: 500; font-size: 0.9rem; animation: slideDown 0.5s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .banner-close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.2rem; cursor: pointer; color: white; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-weight: 700; font-size: 1.8rem; color: var(--primary-brown) !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 10px; font-size: 2rem; color: var(--accent-gold); } .nav-link { font-weight: 500; color: var(--dark-charcoal) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-brown) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-quote { background: var(--gradient-primary); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-left: 15px; transition: all 0.3s ease; } .btn-quote:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(139, 69, 19, 0.402), rgba(210, 180, 140, 0.526)), url('https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&auto=format&fit=crop&w=2012&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 3.5rem; font-weight: 800; color: white; /* margin-bottom: 1.5rem; */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); /* margin-bottom: 3rem; */ animation: fadeInUp 1s ease-out 0.3s both; } .hero-stats { display: flex; gap: 3rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; } .stat-item { text-align: center; color: white; } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--accent-gold); margin-bottom: 0.5rem; } .stat-text { font-size: 1rem; opacity: 0.9; } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 15px 35px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; } .btn-primary-custom { background: var(--gradient-secondary); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); color: white; } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--primary-brown); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 2.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-charcoal); text-align: center; } .section-subtitle { font-size: 1.2rem; color: var(--primary-brown); margin-bottom: 4rem; text-align: center; opacity: 0.8; } /* Products Section */ .products-section { background: var(--soft-cream); } .product-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; position: relative; } .product-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); } .product-image { height: 250px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } .product-badge { position: absolute; top: 15px; right: 15px; background: var(--gradient-secondary); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .product-content { padding: 2rem; } .product-category { color: var(--accent-blue); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .product-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-charcoal); } .product-description { color: var(--primary-brown); margin-bottom: 1.5rem; opacity: 0.8; } .product-features { list-style: none; margin-bottom: 2rem; } .product-features li { padding: 0.25rem 0; color: var(--dark-charcoal); font-size: 0.9rem; display: flex; align-items: center; } .product-features li i { color: var(--accent-green); margin-right: 0.5rem; font-size: 0.8rem; } .product-price { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .price-range { font-size: 1.2rem; font-weight: 700; color: var(--primary-brown); } .moq { font-size: 0.9rem; color: var(--accent-blue); font-weight: 500; } .btn-product { background: var(--gradient-primary); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-product:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Manufacturing Process Section */ .process-section { background: white; } .process-timeline { position: relative; padding: 2rem 0; } .process-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: var(--gradient-primary); transform: translateX(-50%); } .process-step { position: relative; margin-bottom: 4rem; display: flex; align-items: center; } .process-step:nth-child(even) { flex-direction: row-reverse; } .process-content { flex: 1; padding: 2rem; background: var(--warm-beige); border-radius: var(--border-radius); box-shadow: var(--shadow-soft); margin: 0 2rem; transition: all 0.3s ease; } .process-content:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .process-number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: var(--gradient-secondary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; z-index: 2; } .process-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-charcoal); } .process-description { color: var(--primary-brown); margin-bottom: 1rem; } .process-details { list-style: none; } .process-details li { padding: 0.25rem 0; color: var(--dark-charcoal); font-size: 0.9rem; display: flex; align-items: center; } .process-details li i { color: var(--accent-green); margin-right: 0.5rem; } /* Services Section */ .services-section { background: var(--warm-beige); } .service-card { background: white; border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); } .service-icon { width: 80px; height: 80px; background: var(--gradient-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-charcoal); } .service-description { color: var(--primary-brown); margin-bottom: 2rem; opacity: 0.8; } .service-features { list-style: none; margin-bottom: 2rem; text-align: left; } .service-features li { padding: 0.5rem 0; color: var(--dark-charcoal); display: flex; align-items: center; } .service-features li i { color: var(--accent-green); margin-right: 0.5rem; } .btn-service { background: var(--gradient-industrial); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-service:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Capabilities Section */ .capabilities-section { background: white; } .capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .capability-item { background: var(--soft-cream); border-radius: var(--border-radius); padding: 2rem; text-align: center; transition: all 0.3s ease; } .capability-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .capability-icon { font-size: 3rem; color: var(--primary-brown); margin-bottom: 1rem; } .capability-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-charcoal); } .capability-value { font-size: 2rem; font-weight: 800; color: var(--accent-gold); margin-bottom: 0.5rem; } .capability-description { color: var(--primary-brown); opacity: 0.8; } /* Quote Form Section */ .quote-section { background: var(--gradient-primary); color: white; } .quote-form { background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 3rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .form-group { margin-bottom: 2rem; } .form-label { font-weight: 600; color: white; margin-bottom: 0.5rem; } .form-control { border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 12px 15px; font-size: 1rem; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.1); color: white; } .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .form-control:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 0.2rem rgba(218, 165, 32, 0.25); background: rgba(255, 255, 255, 0.2); } .form-select { border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 12px 15px; font-size: 1rem; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.1); color: white; } .form-select:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 0.2rem rgba(218, 165, 32, 0.25); } .btn-submit { background: var(--gradient-secondary); color: white; border: none; padding: 15px 40px; border-radius: 25px; font-weight: 600; font-size: 1.1rem; width: 100%; transition: all 0.3s ease; } .btn-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Contact Section */ .contact-section { background: var(--dark-charcoal); color: white; } .contact-info { background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 3rem; backdrop-filter: blur(10px); } .contact-item { display: flex; align-items: center; margin-bottom: 2rem; } .contact-icon { width: 60px; height: 60px; background: var(--accent-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; font-size: 1.5rem; } .contact-details h5 { margin-bottom: 0.5rem; font-weight: 600; } .contact-details p { margin: 0; opacity: 0.9; } /* Footer */ .footer-section { background: var(--deep-brown); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--accent-gold); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.5rem; } .footer-links a:hover { color: var(--accent-gold); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--gradient-secondary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 20px; background: var(--accent-green); color: white; padding: 15px 25px; border-radius: 10px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .section-title { font-size: 2.2rem; } .hero-stats { flex-direction: column; gap: 1rem; } .process-timeline::before { left: 30px; } .process-step { flex-direction: column !important; padding-left: 60px; } .process-number { left: 30px; } .process-content { margin: 0; } }
JavaScript
// Product and service selection variables let selectedProduct = null; let selectedService = null; // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 20px rgba(139, 69, 19, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 6px -1px rgba(139, 69, 19, 0.1)'; } animateOnScroll(); }); // Close banner function closeBanner() { document.getElementById('headerBanner').style.display = 'none'; } // Request quote function function requestQuote() { document.getElementById('quote').scrollIntoView({ behavior: 'smooth' }); showSuccessMessage('Ready to provide you with a detailed quote!'); } // Select product function function selectProduct(productType) { selectedProduct = productType; // Update quote form const categorySelect = document.getElementById('productCategory'); categorySelect.value = productType; showSuccessMessage(`${productType.charAt(0).toUpperCase() + productType.slice(1)} product selected!`); // Scroll to quote section setTimeout(() => { document.getElementById('quote').scrollIntoView({ behavior: 'smooth' }); }, 1000); } // Select service function function selectService(serviceType) { selectedService = serviceType; showSuccessMessage('Service information loaded!'); setTimeout(() => { const serviceNames = { 'design': 'Custom Design & Development', 'private-label': 'Private Label Manufacturing', 'logistics': 'Global Logistics', 'quality': 'Quality Assurance', 'branding': 'Custom Branding', 'support': 'Technical Support' }; const serviceDetails = { 'design': 'Complete design services from concept to production:\n\n⢠3D CAD design and visualization\n⢠Material consultation and selection\n⢠Prototype development and testing\n⢠Technical specifications creation\n⢠Design optimization for manufacturing\n⢠Pattern making and grading\n⢠Sample production and approval\n\nTimeline: 2-4 weeks\nCost: $500-2000 per design', 'private-label': 'Full private label manufacturing solutions:\n\n⢠Brand customization and labeling\n⢠Flexible minimum order quantities\n⢠Quality assurance and testing\n⢠Timely delivery and logistics\n⢠Competitive pricing structures\n⢠Custom packaging solutions\n⢠Ongoing production support\n\nMOQ: 300-500 pairs per style\nLead time: 30-45 days', 'logistics': 'Comprehensive global shipping solutions:\n\n⢠International shipping coordination\n⢠Customs documentation and clearance\n⢠Real-time tracking and monitoring\n⢠Insurance coverage and protection\n⢠Delivery coordination and scheduling\n⢠Warehousing and distribution\n⢠Returns and exchanges handling\n\nShipping to 40+ countries\nDelivery time: 7-21 days', 'quality': 'Rigorous quality control systems:\n\n⢠ISO 9001:2015 certification\n⢠Incoming material testing\n⢠In-process production monitoring\n⢠Final product inspection\n⢠Quality documentation and reporting\n⢠Continuous improvement programs\n⢠Customer satisfaction tracking\n\nQuality rate: 99.5% first-pass\nTesting standards: ASTM, EN, ISO', 'branding': 'Complete branding and customization:\n\n⢠Logo embossing and printing\n⢠Custom packaging design\n⢠Hang tags and labels creation\n⢠Marketing materials development\n⢠Brand guidelines establishment\n⢠Color matching and consistency\n⢠Trademark and copyright support\n\nSetup cost: $200-800 per brand\nMinimum quantity: 300 pairs', 'support': 'Ongoing technical assistance:\n\n⢠Design consultation and advice\n⢠Material guidance and selection\n⢠Production support and monitoring\n⢠Problem resolution and troubleshooting\n⢠Continuous improvement suggestions\n⢠Training and knowledge transfer\n⢠24/7 customer service availability\n\nResponse time: Within 24 hours\nSupport channels: Phone, email, WhatsApp' }; alert(`? ${serviceNames[serviceType].toUpperCase()} ?\n\n${serviceDetails[serviceType]}\n\n? Contact Information:\n⢠Phone: +86 20 8888-9999\n⢠Email: sales@solecraftmfg.com\n⢠WhatsApp: +86 138-0013-8888\n\n? SoleCraft Manufacturing\n789 Industrial Boulevard\nGuangzhou, China\n\n? Ready to discuss your project?\nClick "Get Quote" to start your custom manufacturing journey!`); }, 1000); } // Quote form submission document.getElementById('quoteForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = { company: document.getElementById('companyName').value, contact: document.getElementById('contactPerson').value, email: document.getElementById('email').value, phone: document.getElementById('phone').value, category: document.getElementById('productCategory').value, quantity: document.getElementById('quantity').value, priceRange: document.getElementById('priceRange').value, delivery: document.getElementById('delivery').value, services: document.getElementById('services').value, destination: document.getElementById('destination').value, materials: document.getElementById('materials').value, details: document.getElementById('projectDetails').value }; const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Processing...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; const categoryNames = { 'athletic': 'Athletic & Sports Shoes', 'formal': 'Formal & Dress Shoes', 'casual': 'Casual & Lifestyle', 'safety': 'Safety & Work Boots', 'kids': 'Children\'s Footwear', 'womens': 'Women\'s Fashion', 'custom': 'Custom Design' }; showSuccessMessage('Quote request submitted successfully!'); setTimeout(() => { alert(`? MANUFACTURING QUOTE REQUEST CONFIRMED ?\n\nCompany: ${formData.company}\nContact: ${formData.contact}\nProduct: ${categoryNames[formData.category] || 'Custom Product'}\nQuantity: ${formData.quantity}\nServices: ${formData.services}\n\nā Your quote request has been received!\n? Confirmation sent to ${formData.email}\n? Our team will contact you within 24 hours\n\n? SoleCraft Manufacturing\n789 Industrial Boulevard, Guangzhou, China\n? +86 20 8888-9999\n? sales@solecraftmfg.com\n\n? What happens next:\n⢠Technical review of your requirements\n⢠Material and pricing analysis\n⢠Detailed quote preparation\n⢠Sample development (if requested)\n⢠Production timeline planning\n\n? Why choose SoleCraft:\n⢠25+ years manufacturing experience\n⢠2M+ pairs annual capacity\n⢠ISO 9001 certified quality\n⢠Global shipping to 40+ countries\n⢠Competitive pricing and flexible MOQs\n\n? We're excited to bring your footwear vision to life!\nThank you for choosing SoleCraft Manufacturing! ?`); this.reset(); }, 1000); }, 2000); }); // Contact form submission document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage('Message sent! We\'ll respond within 24 hours.'); }, 2000); }); // Footer functions function showAbout() { alert('? ABOUT SOLECRAFT MANUFACTURING ?\n\n? Company Overview:\n⢠Founded in 1999 with 25+ years of expertise\n⢠Leading footwear manufacturer in China\n⢠2M+ pairs annual production capacity\n⢠Serving 50+ global brands worldwide\n⢠ISO 9001:2015 certified quality systems\n\n? Our Facilities:\n⢠50,000 sq meters manufacturing space\n⢠12 dedicated production lines\n⢠State-of-the-art machinery and equipment\n⢠Advanced quality control laboratories\n⢠Sustainable manufacturing practices\n\n? Our Team:\n⢠500+ skilled craftsmen and technicians\n⢠Experienced design and development team\n⢠Quality assurance specialists\n⢠International sales and support staff\n⢠Continuous training and development\n\n? Global Reach:\n⢠Exporting to 40+ countries\n⢠Partnerships with major brands\n⢠Flexible manufacturing solutions\n⢠Competitive pricing and quality\n⢠Reliable delivery and service\n\n? Our Mission:\nTo be the world\'s most trusted footwear manufacturing partner, delivering exceptional quality, innovation, and service to brands globally.'); } function showCertifications() { alert('? CERTIFICATIONS & STANDARDS ?\n\nā Quality Certifications:\n⢠ISO 9001:2015 - Quality Management\n⢠ISO 14001:2015 - Environmental Management\n⢠OHSAS 18001 - Occupational Health & Safety\n⢠BSCI - Business Social Compliance\n⢠Sedex - Supplier Ethical Data Exchange\n\n? Testing Standards:\n⢠ASTM F2413 - Safety Footwear\n⢠EN ISO 20345 - Safety Footwear\n⢠CPSIA - Consumer Product Safety\n⢠REACH - Chemical Safety Regulation\n⢠Oeko-Tex Standard 100 - Textile Safety\n\n? Sustainability:\n⢠Eco-friendly materials sourcing\n⢠Waste reduction programs\n⢠Energy efficiency initiatives\n⢠Water conservation systems\n⢠Carbon footprint reduction\n\n? Manufacturing Excellence:\n⢠Lean manufacturing principles\n⢠Six Sigma quality methodology\n⢠Continuous improvement programs\n⢠Advanced production planning\n⢠Real-time quality monitoring\n\n? Compliance:\n⢠International labor standards\n⢠Environmental regulations\n⢠Product safety requirements\n⢠Export/import regulations\n⢠Industry best practices'); } function showCareers() { alert('? CAREERS AT SOLECRAFT ?\n\n? Join Our Team:\nWe\'re always looking for talented individuals to join our growing team of footwear manufacturing professionals.\n\n? Current Opportunities:\n⢠Production Managers\n⢠Quality Control Specialists\n⢠Design Engineers\n⢠Sales Representatives\n⢠Technical Support Staff\n⢠Logistics Coordinators\n\n? Benefits & Perks:\n⢠Competitive salary packages\n⢠Performance-based bonuses\n⢠Health insurance coverage\n⢠Professional development training\n⢠Career advancement opportunities\n⢠International work environment\n\n? What We Look For:\n⢠Passion for manufacturing excellence\n⢠Strong technical or business skills\n⢠Team collaboration abilities\n⢠Problem-solving mindset\n⢠Commitment to quality and innovation\n\n? How to Apply:\nSend your resume to careers@solecraftmfg.com\nInclude position of interest in subject line\n\n? Work Environment:\n⢠Modern manufacturing facilities\n⢠Safety-first culture\n⢠Diverse and inclusive workplace\n⢠Continuous learning opportunities\n⢠Innovation-driven projects\n\nJoin us in crafting the future of footwear!'); } function showNews() { alert('? COMPANY NEWS & UPDATES ?\n\n? Latest News (2024):\n\n? Q4 2024: Achieved ISO 14001:2015 Environmental Certification\n⢠Implemented sustainable manufacturing practices\n⢠Reduced carbon footprint by 25%\n⢠Launched eco-friendly product line\n\n? Q3 2024: Expanded Production Capacity\n⢠Added 2 new production lines\n⢠Increased annual capacity to 2.5M pairs\n⢠Reduced lead times by 15%\n\n? Q2 2024: New Market Expansion\n⢠Entered European and Australian markets\n⢠Established partnerships with 10 new brands\n⢠Opened regional sales offices\n\n? Q1 2024: Technology Upgrade\n⢠Implemented AI-powered quality control\n⢠Upgraded CAD design systems\n⢠Launched customer portal platform\n\n? Upcoming Events:\n⢠Canton Fair 2024 - Booth A123\n⢠Footwear Innovation Summit\n⢠Sustainability in Manufacturing Conference\n\n? Stay Updated:\nSubscribe to our newsletter for the latest news, product launches, and industry insights.\n\nEmail: news@solecraftmfg.com'); } function showSustainability() { alert('? SUSTAINABILITY COMMITMENT ?\n\nā»ļø Environmental Responsibility:\n⢠Carbon-neutral manufacturing by 2030\n⢠50% renewable energy usage\n⢠Zero waste to landfill program\n⢠Water recycling and conservation\n⢠Sustainable material sourcing\n\n? Eco-Friendly Materials:\n⢠Recycled rubber outsoles\n⢠Organic cotton uppers\n⢠Bio-based synthetic materials\n⢠Water-based adhesives\n⢠Biodegradable packaging\n\n? Social Responsibility:\n⢠Fair labor practices\n⢠Safe working conditions\n⢠Employee development programs\n⢠Community support initiatives\n⢠Supplier code of conduct\n\n? 2024 Sustainability Goals:\n⢠30% reduction in water usage\n⢠25% reduction in energy consumption\n⢠100% sustainable packaging\n⢠Zero hazardous chemical discharge\n⢠Employee wellness programs\n\n? Achievements:\n⢠BSCI Certified Supplier\n⢠Sedex Member\n⢠ISO 14001 Environmental Management\n⢠OEKO-TEX Standard 100\n⢠Green Factory Certification\n\n? Our Commitment:\nBuilding a sustainable future for footwear manufacturing while maintaining the highest quality standards and competitive pricing.\n\nTogether, we can make a difference! ?'); } function showNDA() { alert('? NON-DISCLOSURE AGREEMENT ?\n\nBy submitting this quote request, you agree to the following confidentiality terms:\n\n? Confidential Information:\n⢠Product designs and specifications\n⢠Pricing and cost information\n⢠Manufacturing processes and techniques\n⢠Business strategies and plans\n⢠Customer and supplier information\n\nā Our Commitments:\n⢠Protect all shared information\n⢠Use information only for quote purposes\n⢠Not disclose to third parties\n⢠Maintain secure data storage\n⢠Return or destroy information upon request\n\nāļø Legal Protection:\n⢠Governed by Chinese and international law\n⢠Binding for 5 years from agreement date\n⢠Mutual protection of interests\n⢠Dispute resolution procedures\n⢠Remedies for breach of agreement\n\n? Your Rights:\n⢠Request information return/destruction\n⢠Limit information sharing scope\n⢠Specify confidentiality levels\n⢠Monitor information usage\n⢠Legal recourse for violations\n\n? Questions about this NDA?\nContact: legal@solecraftmfg.com\n\nāļø Electronic signature constitutes acceptance of these terms.'); } // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen