ShoeCraft Template | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShoeCraft Pro - Premium Footwear Manufacturing</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header>
        <div class="header-container">
            <div class="logo">
                <i class="fas fa-shoe-prints"></i>
                ShoeCraft Pro
            </div>
            <nav id="nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#process">Process</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <div class="mobile-menu-btn" id="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Crafting Excellence in Every Step</h1>
            <p>Premium shoe manufacturing with unmatched quality and craftsmanship. We blend tradition with innovation to create footwear that stands the test of time.</p>
            <div>
                <a href="#contact" class="cta-btn">Get a Quote</a>
                <a href="#products" class="cta-btn secondary-btn">View Products</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="section-title">
            <h2>About <span>Us</span></h2>
        </div>
        <div class="about-content">
            <div class="about-text">
                <h3>Decades of Craftsmanship in Every Pair</h3>
                <p>Founded in 1985, ShoeCraft Pro has been at the forefront of footwear manufacturing, combining traditional techniques with modern technology to create shoes that are both stylish and durable.</p>
                <p>Our team of skilled artisans brings decades of experience to every pair we make, ensuring the highest standards of quality and comfort.</p>
                <p>We pride ourselves on sustainable practices, using ethically sourced materials and environmentally friendly production methods.</p>
                <a href="#process" class="cta-btn">Our Process</a>
            </div>
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="Shoe craftsmanship">
                <p style="text-align: center; margin-top: 10px; font-size: 0.8rem;">Image from <a href="https://unsplash.com/photos/brown-leather-dress-shoe-on-brown-wooden-table-during-daytime-eSK5A1MpWQY" target="_blank">Unsplash</a></p>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="services-container">
            <div class="section-title">
                <h2>Our <span>Services</span></h2>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-shoe-prints"></i>
                    </div>
                    <h3>Custom Shoe Design</h3>
                    <p>From concept to creation, our design team works with you to develop unique footwear that reflects your brand identity and meets your exact specifications.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-industry"></i>
                    </div>
                    <h3>OEM Manufacturing</h3>
                    <p>Full-service original equipment manufacturing with minimum order quantities as low as 500 pairs. We handle everything from material sourcing to final packaging.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-tshirt"></i>
                    </div>
                    <h3>Private Label Solutions</h3>
                    <p>Establish your own footwear brand with our private label services. Choose from our existing designs or create custom styles with your branding.</p>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="section-title">
            <h2>Our <span>Products</span></h2>
        </div>
        <div class="products-grid">
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Running shoes">
                </div>
                <div class="product-info">
                    <h3>Performance Runners</h3>
                    <p>High-performance running shoes with advanced cushioning technology.</p>
                    <div class="product-price">From $89.99</div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Casual shoes">
                </div>
                <div class="product-info">
                    <h3>Casual Collection</h3>
                    <p>Stylish everyday footwear combining comfort with contemporary design.</p>
                    <div class="product-price">From $69.99</div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Dress shoes">
                </div>
                <div class="product-info">
                    <h3>Formal Elegance</h3>
                    <p>Handcrafted dress shoes made with premium leather and attention to detail.</p>
                    <div class="product-price">From $129.99</div>
                </div>
            </div>
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="Leather shoes">
                </div>
                <div class="product-info">
                    <h3>Premium Leather</h3>
                    <p>Luxury footwear crafted from the finest full-grain leathers.</p>
                    <div class="product-price">From $159.99</div>
                </div>
            </div>
        </div>
        <p style="text-align: center; margin-top: 30px; font-size: 0.9rem;">All product images from <a href="https://unsplash.com/s/photos/shoes" target="_blank">Unsplash</a></p>
    </section>

<section class="process" id="process">
        <div class="process-container">
            <div class="section-title">
                <h2>Our <span>Process</span></h2>
            </div>
            <div class="process-steps">
                <div class="step">
                    <div class="step-icon">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <h3>Design</h3>
                    <p>Our designers create detailed sketches and 3D models based on your specifications and market trends.</p>
                </div>
                <div class="step">
                    <div class="step-icon">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3>Pattern Making</h3>
                    <p>Precision patterns are developed to ensure perfect fit and optimal material usage.</p>
                </div>
                <div class="step">
                    <div class="step-icon">
                        <i class="fas fa-leather"></i>
                    </div>
                    <h3>Material Selection</h3>
                    <p>We source premium materials from trusted suppliers worldwide, with options for vegan and sustainable alternatives.</p>
                </div>
                <div class="step">
                    <div class="step-icon">
                        <i class="fas fa-shoe-prints"></i>
                    </div>
                    <h3>Production</h3>
                    <p>Skilled artisans craft each component with meticulous attention to detail.</p>
                </div>
                <div class="step">
                    <div class="step-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3>Quality Control</h3>
                    <p>Every pair undergoes rigorous testing for durability, comfort, and finish before shipment.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-title">
            <h2>Client <span>Testimonials</span></h2>
        </div>
        <div class="testimonial-slider">
            <div class="testimonial-slide active">
                <div class="testimonial-content">
                    "Working with ShoeCraft Pro has transformed our footwear line. Their attention to detail and commitment to quality is unmatched in the industry. Our customers consistently praise the comfort and durability of shoes manufactured by them."
                </div>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="author-info">
                        <h4>Sarah Johnson</h4>
                        <p>CEO, UrbanSteps Footwear</p>
                    </div>
                </div>
            </div>
        </div>
        <p style="text-align: center; margin-top: 30px; font-size: 0.9rem;">Testimonial image from <a href="https://unsplash.com/photos/woman-wearing-black-suit-jacket-and-white-button-up-shirt-7i5HMCGupVw" target="_blank">Unsplash</a></p>
    </section>

<section class="contact" id="contact">
        <div class="contact-container">
            <div class="contact-info">
                <h3>Get In Touch</h3>
                <div class="contact-details">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Location</h4>
                            <p>123 Shoe Street, Footwear District<br>Portland, OR 97201, USA</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Phone</h4>
                            <p>+1 (503) 555-0199<br>+1 (503) 555-0188</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Email</h4>
                            <p>info@shoecraftpro.com<br>sales@shoecraftpro.com</p>
                        </div>
                    </div>
                </div>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="contact-form">
                <h3>Send Us a Message</h3>
                <form>
                    <div class="form-group">
                        <label for="name">Your Name</label>
                        <input type="text" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Your Email</label>
                        <input type="email" id="email" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>ShoeCraft Pro</h3>
                <p>Premium footwear manufacturing since 1985. We combine traditional craftsmanship with modern technology to create exceptional shoes.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#process">Our Process</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#">Custom Design</a></li>
                    <li><a href="#">OEM Manufacturing</a></li>
                    <li><a href="#">Private Label</a></li>
                    <li><a href="#">Prototype Development</a></li>
                    <li><a href="#">Small Batch Production</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Newsletter</h3>
                <p>Subscribe to our newsletter for the latest updates and industry insights.</p>
                <form>
                    <div class="form-group">
                        <input type="email" placeholder="Your Email" required>
                    </div>
                    <button type="submit" class="submit-btn">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 ShoeCraft Pro. All Rights Reserved.</p>
        </div>
    </footer>

CSS

:root {
            --primary: #ff6b6b;
            --secondary: #4ecdc4;
            --dark: #292f36;
            --light: #f7fff7;
            --accent: #ffbe0b;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }
        
        /* Header Styles */
        header {
            background-color: rgba(255, 255, 255, 0.95);
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            color: var(--accent);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 2rem;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }
        
        nav ul li a:hover {
            color: var(--primary);
        }
        
        nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        
        nav ul li a:hover::after {
            width: 100%;
        }
        
        .mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1460353581641-37baddab0fa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 2rem;
        }
        
        .hero-content {
            max-width: 800px;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s forwards 0.5s;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .cta-btn {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            border: 2px solid var(--primary);
        }
        
        .cta-btn:hover {
            background-color: transparent;
            color: var(--primary);
        }
        
        .secondary-btn {
            background-color: transparent;
            border: 2px solid white;
            margin-left: 1rem;
        }
        
        .secondary-btn:hover {
            background-color: white;
            color: var(--dark);
        }
        
        /* About Section */
        .about {
            padding: 6rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--dark);
        }
        
        .section-title h2 span {
            color: var(--primary);
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--primary);
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 4rem;
        }
        
        .about-text {
            flex: 1;
            opacity: 0;
            transform: translateX(-50px);
            animation: fadeInRight 1s forwards 0.5s;
        }
        
        .about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .about-text p {
            margin-bottom: 1.5rem;
            line-height: 1.7;
            color: #555;
        }
        
        .about-image {
            flex: 1;
            position: relative;
            opacity: 0;
            transform: translateX(50px);
            animation: fadeInLeft 1s forwards 0.5s;
        }
        
        .about-image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid var(--primary);
            border-radius: 10px;
            top: -20px;
            left: -20px;
            z-index: -1;
        }
        
        /* Services Section */
        .services {
            padding: 6rem 5%;
            background-color: #f9f9f9;
        }
        
        .services-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .service-card {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .service-card:nth-child(1) {
            animation: fadeInUp 1s forwards 0.3s;
        }
        
        .service-card:nth-child(2) {
            animation: fadeInUp 1s forwards 0.6s;
        }
        
        .service-card:nth-child(3) {
            animation: fadeInUp 1s forwards 0.9s;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        
        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .service-card p {
            color: #666;
            line-height: 1.6;
        }
        
        /* Products Section */
        .products {
            padding: 6rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }
        
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .product-card:nth-child(1) {
            animation: fadeInUp 1s forwards 0.3s;
        }
        
        .product-card:nth-child(2) {
            animation: fadeInUp 1s forwards 0.6s;
        }
        
        .product-card:nth-child(3) {
            animation: fadeInUp 1s forwards 0.9s;
        }
        
        .product-card:nth-child(4) {
            animation: fadeInUp 1s forwards 1.2s;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .product-image {
            height: 250px;
            overflow: hidden;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.1);
        }
        
        .product-info {
            padding: 1.5rem;
        }
        
        .product-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        
        .product-info p {
            color: #666;
            margin-bottom: 1rem;
        }
        
        .product-price {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        /* Process Section */
        .process {
            padding: 6rem 5%;
            background-color: var(--dark);
            color: white;
        }
        
        .process-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .process-steps {
            display: flex;
            justify-content: space-between;
            margin-top: 4rem;
            position: relative;
        }
        
        .process-steps::before {
            content: '';
            position: absolute;
            width: 80%;
            height: 3px;
            background: var(--primary);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .step {
            text-align: center;
            width: 20%;
            position: relative;
            z-index: 1;
            opacity: 0;
            transform: translateY(50px);
        }
        
        .step:nth-child(1) {
            animation: fadeInUp 1s forwards 0.3s;
        }
        
        .step:nth-child(2) {
            animation: fadeInUp 1s forwards 0.6s;
        }
        
        .step:nth-child(3) {
            animation: fadeInUp 1s forwards 0.9s;
        }
        
        .step:nth-child(4) {
            animation: fadeInUp 1s forwards 1.2s;
        }
        
        .step:nth-child(5) {
            animation: fadeInUp 1s forwards 1.5s;
        }
        
        .step-icon {
            width: 80px;
            height: 80px;
            background-color: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 1.8rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .step h3 {
            margin-bottom: 1rem;
        }
        
        .step p {
            color: #ccc;
            line-height: 1.6;
        }
        
        /* Testimonials Section */
        .testimonials {
            padding: 6rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .testimonial-slider {
            margin-top: 4rem;
            position: relative;
            overflow: hidden;
        }
        
        .testimonial-slide {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin: 0 1rem;
            opacity: 0;
            transform: scale(0.9);
            transition: all 0.5s;
        }
        
        .testimonial-slide.active {
            opacity: 1;
            transform: scale(1);
        }
        
        .testimonial-content {
            margin-bottom: 1.5rem;
            font-style: italic;
            color: #555;
            line-height: 1.7;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 1rem;
        }
        
        .author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
        }
        
        .author-info p {
            color: #777;
            font-size: 0.9rem;
        }
        
        /* Contact Section */
        .contact {
            padding: 6rem 5%;
            background-color: #f9f9f9;
        }
        
        .contact-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 4rem;
        }
        
        .contact-info {
            flex: 1;
            opacity: 0;
            transform: translateX(-50px);
            animation: fadeInLeft 1s forwards 0.5s;
        }
        
        .contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .contact-details {
            margin-bottom: 2rem;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .contact-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1rem;
        }
        
        .contact-text h4 {
            font-size: 1.1rem;
            margin-bottom: 0.2rem;
        }
        
        .contact-text p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .contact-form {
            flex: 1;
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            opacity: 0;
            transform: translateX(50px);
            animation: fadeInRight 1s forwards 0.5s;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
        }
        
        .form-group textarea {
            height: 150px;
            resize: vertical;
        }
        
        .submit-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #ff5252;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 4rem 5% 2rem;
        }
        
        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }
        
        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 3px;
            background: var(--primary);
            bottom: -8px;
            left: 0;
        }
        
        .footer-col p {
            color: #bbb;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--primary);
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s;
        }
        
        .social-links a:hover {
            background-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 3rem;
            margin-top: 3rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
            font-size: 0.9rem;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .contact-container {
                flex-direction: column;
            }
            
            .process-steps {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .process-steps::before {
                display: none;
            }
            
            .step {
                width: 45%;
                margin-bottom: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
            }
            
            nav.active {
                left: 0;
            }
            
            nav ul {
                flex-direction: column;
                align-items: center;
            }
            
            nav ul li {
                margin: 1rem 0;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .step {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .cta-btn {
                display: block;
                margin-bottom: 1rem;
                width: 100%;
                text-align: center;
            }
            
            .secondary-btn {
                margin-left: 0;
                width: 100%;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const nav = document.getElementById('nav');
        
        mobileMenuBtn.addEventListener('click', () => {
            nav.classList.toggle('active');
            mobileMenuBtn.innerHTML = nav.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        
        // Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                if(nav.classList.contains('active')) {
                    nav.classList.remove('active');
                    mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
                }
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 50);
        });
        
        // Animation on Scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.service-card, .product-card, .step, .about-text, .about-image, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if(elementPosition < screenPosition) {
                    element.style.animationPlayState = 'running';
                }
            });
        };
        
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);
        
        // Simple Testimonial Slider
        let currentTestimonial = 0;
        const testimonials = [
            {
                content: "Working with ShoeCraft Pro has transformed our footwear line. Their attention to detail and commitment to quality is unmatched in the industry. Our customers consistently praise the comfort and durability of shoes manufactured by them.",
                name: "Sarah Johnson",
                title: "CEO, UrbanSteps Footwear",
                image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
            },
            {
                content: "As a startup, finding a reliable manufacturing partner was crucial. ShoeCraft Pro exceeded our expectations with their flexibility, quality, and guidance throughout the process. They've been instrumental in our brand's success.",
                name: "Michael Chen",
                title: "Founder, Wanderlust Footwear",
                image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
            },
            {
                content: "We've been partnering with ShoeCraft Pro for over a decade. Their consistent quality, on-time delivery, and ethical manufacturing practices make them our go-to choice for premium footwear production.",
                name: "Elena Rodriguez",
                title: "VP Production, LuxeShoes International",
                image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
            }
        ];
        
        function showTestimonial(index) {
            const testimonialSlide = document.querySelector('.testimonial-slide');
            testimonialSlide.classList.remove('active');
            
            setTimeout(() => {
                testimonialSlide.querySelector('.testimonial-content').textContent = testimonials[index].content;
                testimonialSlide.querySelector('.author-image img').src = testimonials[index].image;
                testimonialSlide.querySelector('h4').textContent = testimonials[index].name;
                testimonialSlide.querySelector('p').textContent = testimonials[index].title;
                testimonialSlide.classList.add('active');
            }, 500);
        }
        
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);

ShoeCraft Template Preview

Download Options