ShirtCraft 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>ShirtCraft - Premium Shirt 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 id="header">
        <div class="container header-container">
            <div class="logo">
                <img src="https://via.placeholder.com/40" alt="ShirtCraft Logo">
                <h1>Shirt<span>Craft</span></h1>
            </div>
            <nav>
                <ul id="nav-menu">
                    <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>
                <div class="mobile-menu" id="mobile-menu">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Crafting Premium Shirts Since 1995</h1>
            <p>We combine traditional craftsmanship with modern technology to create shirts that stand the test of time. Our attention to detail and commitment to quality make us the preferred choice for brands worldwide.</p>
            <a href="#contact" class="btn">Get a Quote</a>
            <a href="#products" class="btn btn-outline">View Products</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Us</h2>
                <p>With over 25 years of experience in shirt manufacturing, we've perfected the art of creating high-quality shirts for discerning customers.</p>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>Our Story</h3>
                    <p>Founded in 1995, ShirtCraft began as a small workshop with just five employees. Today, we operate state-of-the-art facilities with over 500 skilled workers, producing millions of shirts annually for global brands.</p>
                    <p>What sets us apart is our unwavering commitment to quality. Every shirt that leaves our facility undergoes rigorous quality checks to ensure it meets our exacting standards.</p>
                    <p>We believe in sustainable manufacturing practices and ethical treatment of workers. Our facilities are certified by leading international organizations for labor practices and environmental responsibility.</p>
                    <a href="#process" class="btn">Our Process</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2013&q=80" alt="Shirt Manufacturing Facility">
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>We offer comprehensive shirt manufacturing solutions tailored to your brand's needs.</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3>Custom Design</h3>
                    <p>Our design team works with you to create unique shirt designs that reflect your brand identity and appeal to your target market.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-tshirt"></i>
                    </div>
                    <h3>Private Label</h3>
                    <p>Create your own branded shirts with our private label service. We handle everything from manufacturing to packaging.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-palette"></i>
                    </div>
                    <h3>Fabric Sourcing</h3>
                    <p>We source premium fabrics from around the world, including organic cotton, linen, and performance blends.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>Logistics</h3>
                    <p>Our global logistics network ensures timely delivery to your warehouse or directly to your customers.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <h3>Packaging</h3>
                    <p>Custom packaging solutions that enhance your brand's unboxing experience and protect your products.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Inventory Management</h3>
                    <p>We offer inventory management solutions to help you maintain optimal stock levels.</p>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <div class="section-title">
                <h2>Our Products</h2>
                <p>Explore our range of premium shirt products manufactured to the highest standards.</p>
            </div>
            <div class="products-filter">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="dress">Dress Shirts</button>
                <button class="filter-btn" data-filter="casual">Casual Shirts</button>
                <button class="filter-btn" data-filter="polo">Polo Shirts</button>
                <button class="filter-btn" data-filter="performance">Performance</button>
            </div>
            <div class="products-grid">
                <div class="product-card" data-category="dress">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80" alt="Premium Dress Shirt">
                    </div>
                    <div class="product-info">
                        <h3>Premium Dress Shirt</h3>
                        <p>100% Egyptian cotton with mother-of-pearl buttons and reinforced stitching.</p>
                        <div class="product-price">
                            <span class="price">$49.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="product-card" data-category="casual">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Linen Casual Shirt">
                    </div>
                    <div class="product-info">
                        <h3>Linen Casual Shirt</h3>
                        <p>Breathable pure linen fabric perfect for warm weather and casual occasions.</p>
                        <div class="product-price">
                            <span class="price">$39.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="product-card" data-category="polo">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Classic Polo Shirt">
                    </div>
                    <div class="product-info">
                        <h3>Classic Polo Shirt</h3>
                        <p>Premium pique cotton with reinforced collar and three-button placket.</p>
                        <div class="product-price">
                            <span class="price">$34.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="product-card" data-category="performance">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80" alt="Performance Shirt">
                    </div>
                    <div class="product-info">
                        <h3>Performance Shirt</h3>
                        <p>Moisture-wicking fabric with UV protection and odor control technology.</p>
                        <div class="product-price">
                            <span class="price">$44.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="product-card" data-category="dress">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1620799139507-2a76f79a2f4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80" alt="French Cuff Dress Shirt">
                    </div>
                    <div class="product-info">
                        <h3>French Cuff Dress Shirt</h3>
                        <p>Formal dress shirt with double cuffs and premium cotton fabric.</p>
                        <div class="product-price">
                            <span class="price">$54.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="product-card" data-category="casual">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1936&q=80" alt="Denim Shirt">
                    </div>
                    <div class="product-info">
                        <h3>Denim Shirt</h3>
                        <p>Classic denim shirt with reinforced stitching and adjustable cuffs.</p>
                        <div class="product-price">
                            <span class="price">$42.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="process" id="process">
        <div class="container">
            <div class="section-title">
                <h2>Our Manufacturing Process</h2>
                <p>Every shirt goes through our rigorous 10-step quality process to ensure perfection.</p>
            </div>
            <div class="process-steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Design & Pattern Making</h3>
                    <p>Our designers create patterns based on your specifications or our extensive library of designs.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Fabric Selection</h3>
                    <p>We source premium fabrics from trusted suppliers worldwide, testing for quality and durability.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Cutting</h3>
                    <p>Computer-guided cutting ensures precision and minimizes fabric waste.</p>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <h3>Sewing</h3>
                    <p>Skilled artisans assemble each shirt with attention to every stitch and detail.</p>
                </div>
                <div class="step">
                    <div class="step-number">5</div>
                    <h3>Quality Check #1</h3>
                    <p>First inspection checks for stitching quality, alignment, and construction.</p>
                </div>
                <div class="step">
                    <div class="step-number">6</div>
                    <h3>Washing & Finishing</h3>
                    <p>Special treatments ensure color fastness and the perfect hand feel.</p>
                </div>
                <div class="step">
                    <div class="step-number">7</div>
                    <h3>Pressing</h3>
                    <p>Professional pressing gives each shirt its crisp, finished appearance.</p>
                </div>
                <div class="step">
                    <div class="step-number">8</div>
                    <h3>Final Inspection</h3>
                    <p>Every shirt undergoes a 12-point quality check before packaging.</p>
                </div>
                <div class="step">
                    <div class="step-number">9</div>
                    <h3>Packaging</h3>
                    <p>Custom packaging protects your shirts and enhances brand presentation.</p>
                </div>
                <div class="step">
                    <div class="step-number">10</div>
                    <h3>Shipping</h3>
                    <p>Efficient logistics ensure your order arrives on time, anywhere in the world.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Our Clients Say</h2>
                <p>Hear from brands that trust us with their shirt manufacturing needs.</p>
            </div>
            <div class="testimonials-slider">
                <div class="testimonial active">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Client">
                    </div>
                    <p>"ShirtCraft has been our manufacturing partner for over 8 years. Their attention to detail and consistent quality have helped us build a loyal customer base that trusts our brand."</p>
                    <div class="client-info">
                        <h4>Michael Johnson</h4>
                        <p>CEO, Urban Threads Apparel</p>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Client">
                    </div>
                    <p>"The turnaround time and flexibility ShirtCraft offers is unmatched in the industry. They've helped us scale from a small startup to a nationally recognized brand."</p>
                    <div class="client-info">
                        <h4>Sarah Williams</h4>
                        <p>Founder, Coastal Classics</p>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="client-image">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Client">
                    </div>
                    <p>"As a sustainable fashion brand, we were impressed with ShirtCraft's eco-friendly manufacturing processes and ethical labor practices. They truly align with our values."</p>
                    <div class="client-info">
                        <h4>David Chen</h4>
                        <p>Creative Director, Green Thread</p>
                    </div>
                </div>
                <div class="slider-nav">
                    <div class="slider-dot active" data-slide="0"></div>
                    <div class="slider-dot" data-slide="1"></div>
                    <div class="slider-dot" data-slide="2"></div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Ready to start your shirt manufacturing project? Contact us today for a quote.</p>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Let's Talk About Your Project</h3>
                    <p>Whether you're a startup looking for your first production run or an established brand seeking a new manufacturing partner, we'd love to hear from you.</p>
                    <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 Garment Street, Fashion District, New York, NY 10001</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 (212) 555-1234</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@shirtcraft.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="company">Company Name</label>
                            <input type="text" id="company" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message">Project Details</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="submit-btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>About ShirtCraft</h3>
                    <p>Premium shirt manufacturing since 1995. We combine traditional craftsmanship with modern technology to deliver exceptional quality.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><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>
                        <li><a href="#contact">Contact</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="#">Private Label</a></li>
                        <li><a href="#">Fabric Sourcing</a></li>
                        <li><a href="#">Logistics</a></li>
                        <li><a href="#">Packaging</a></li>
                        <li><a href="#">Inventory Management</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 class="newsletter-form">
                        <input type="email" placeholder="Your Email" class="newsletter-input" required>
                        <button type="submit" class="newsletter-btn"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 ShirtCraft. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: #e74c3c;"></i> by ShirtCraft Team</p>
            </div>
        </div>
    </footer>

CSS

:root {
            --primary: #2c3e50;
            --secondary: #e74c3c;
            --accent: #3498db;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --text: #333;
            --text-light: #7f8c8d;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text);
            overflow-x: hidden;
        }

/* Header */
        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.scrolled {
            background-color: rgba(255, 255, 255, 0.98);
            padding: 10px 0;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            display: flex;
            align-items: center;
        }

.logo img {
            height: 40px;
            margin-right: 10px;
        }

.logo h1 {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }

.logo span {
            color: var(--secondary);
        }

nav ul {
            display: flex;
            list-style: none;
        }

nav ul li {
            margin-left: 30px;
        }

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(--secondary);
        }

nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--secondary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }

nav ul li a:hover::after {
            width: 100%;
        }

.mobile-menu {
            display: none;
            font-size: 24px;
            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-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

.hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            animation: fadeInUp 1s ease;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--secondary);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
            border: 2px solid var(--secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.btn:hover {
            background: transparent;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.btn-outline {
            background: transparent;
            border: 2px solid white;
            margin-left: 15px;
        }

.btn-outline:hover {
            background: white;
            color: var(--primary);
        }

/* About Section */
        .about {
            padding: 100px 0;
            background-color: white;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 3px;
            background: var(--secondary);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

.section-title p {
            color: var(--text-light);
            max-width: 700px;
            margin: 15px auto 0;
            line-height: 1.6;
        }

.about-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

.about-text {
            flex: 1;
            padding-right: 40px;
            animation: fadeInLeft 1s ease;
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--primary);
        }

.about-text p {
            margin-bottom: 15px;
            line-height: 1.8;
            color: var(--text-light);
        }

.about-image {
            flex: 1;
            animation: fadeInRight 1s ease;
        }

.about-image img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

/* Services Section */
        .services {
            padding: 100px 0;
            background-color: var(--light);
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.service-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
        }

.service-card.animated {
            opacity: 1;
            transform: translateY(0);
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.service-icon {
            font-size: 3rem;
            color: var(--secondary);
            margin-bottom: 20px;
        }

.service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--primary);
        }

.service-card p {
            color: var(--text-light);
            line-height: 1.6;
        }

/* Products Section */
        .products {
            padding: 100px 0;
            background: white;
        }

.products-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
        }

.filter-btn {
            padding: 8px 20px;
            margin: 0 10px;
            background: none;
            border: none;
            color: var(--text-light);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

.filter-btn.active {
            color: var(--secondary);
        }

.filter-btn::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--secondary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }

.filter-btn.active::after {
            width: 100%;
        }

.filter-btn:hover {
            color: var(--secondary);
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

.product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            opacity: 0;
            transform: scale(0.9);
        }

.product-card.animated {
            opacity: 1;
            transform: scale(1);
        }

.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 ease;
        }

.product-card:hover .product-image img {
            transform: scale(1.1);
        }

.product-info {
            padding: 20px;
        }

.product-info h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--primary);
        }

.product-info p {
            color: var(--text-light);
            margin-bottom: 15px;
            line-height: 1.5;
        }

.product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.price {
            font-weight: 700;
            color: var(--secondary);
            font-size: 1.2rem;
        }

.add-to-cart {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

.add-to-cart:hover {
            background: var(--secondary);
        }

/* Process Section */
        .process {
            padding: 100px 0;
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                        url('https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
            background-size: cover;
            background-attachment: fixed;
            color: white;
            text-align: center;
        }

.process-steps {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 50px;
            position: relative;
        }

.process-steps::before {
            content: '';
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.3);
        }

.step {
            flex: 1;
            min-width: 200px;
            margin-bottom: 30px;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
        }

.step.animated {
            opacity: 1;
            transform: translateY(0);
        }

.step-number {
            width: 60px;
            height: 60px;
            background: var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0 auto 20px;
            position: relative;
            z-index: 2;
        }

.step h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

.step p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            padding: 0 20px;
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background: white;
        }

.testimonials-slider {
            max-width: 800px;
            margin: 50px auto 0;
            position: relative;
        }

.testimonial {
            background: var(--light);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: none;
        }

.testimonial.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

.client-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 20px;
            border: 3px solid var(--secondary);
        }

.client-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.testimonial p {
            font-style: italic;
            color: var(--text);
            line-height: 1.8;
            margin-bottom: 20px;
        }

.client-info h4 {
            color: var(--primary);
            margin-bottom: 5px;
        }

.client-info p {
            color: var(--text-light);
            font-style: normal;
            font-size: 0.9rem;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

.slider-dot.active {
            background: var(--secondary);
            transform: scale(1.2);
        }

/* Contact Section */
        .contact {
            padding: 100px 0;
            background: var(--light);
        }

.contact-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }

.contact-info {
            flex: 1;
            min-width: 300px;
            animation: fadeInLeft 1s ease;
        }

.contact-info h3 {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 20px;
        }

.contact-info p {
            color: var(--text-light);
            line-height: 1.8;
            margin-bottom: 30px;
        }

.contact-details {
            margin-bottom: 30px;
        }

.contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

.contact-icon {
            width: 40px;
            height: 40px;
            background: var(--secondary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1rem;
        }

.contact-text h4 {
            color: var(--primary);
            margin-bottom: 5px;
        }

.contact-text p {
            margin: 0;
            color: var(--text-light);
        }

.social-links {
            display: flex;
            gap: 15px;
        }

.social-link {
            width: 40px;
            height: 40px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

.social-link:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }

.contact-form {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            animation: fadeInRight 1s ease;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--primary);
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s;
        }

.form-control:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

.submit-btn {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.submit-btn:hover {
            background: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 50px 0 20px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

.footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background: var(--secondary);
        }

.footer-col p {
            color: #bdc3c7;
            line-height: 1.6;
            margin-bottom: 15px;
        }

.footer-links li {
            margin-bottom: 10px;
            list-style: none;
        }

.footer-links a {
            color: #bdc3c7;
            text-decoration: none;
            transition: all 0.3s;
            display: block;
        }

.footer-links a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }

.footer-newsletter p {
            margin-bottom: 20px;
        }

.newsletter-form {
            display: flex;
        }

.newsletter-input {
            flex: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 5px 0 0 5px;
            font-family: 'Poppins', sans-serif;
        }

.newsletter-btn {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: all 0.3s;
        }

.newsletter-btn:hover {
            background: #c0392b;
        }

.footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bdc3c7;
            font-size: 0.9rem;
        }

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

/* Responsive */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .about-text {
                padding-right: 0;
                margin-bottom: 30px;
            }
            
            .step {
                min-width: 150px;
            }
        }

@media (max-width: 768px) {
            nav ul {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                padding-top: 30px;
                transition: all 0.3s;
            }
            
            nav ul.active {
                left: 0;
            }
            
            nav ul li {
                margin: 15px 0;
            }
            
            .mobile-menu {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .process-steps {
                flex-direction: column;
            }
            
            .step {
                margin-bottom: 40px;
            }
            
            .process-steps::before {
                display: none;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .btn {
                display: block;
                width: 100%;
                margin-bottom: 15px;
            }
            
            .btn-outline {
                margin-left: 0;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobile-menu');
        const navMenu = document.getElementById('nav-menu');

mobileMenuBtn.addEventListener('click', () => {
            navMenu.classList.toggle('active');
            mobileMenuBtn.innerHTML = navMenu.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('#nav-menu a').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Testimonial slider
        const testimonials = document.querySelectorAll('.testimonial');
        const dots = document.querySelectorAll('.slider-dot');
        let currentTestimonial = 0;

function showTestimonial(index) {
            testimonials.forEach(testimonial => testimonial.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            testimonials[index].classList.add('active');
            dots[index].classList.add('active');
            currentTestimonial = index;
        }

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => showTestimonial(index));
        });

// Auto slide testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);

// Product filtering
        const filterButtons = document.querySelectorAll('.filter-btn');
        const productCards = document.querySelectorAll('.product-card');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                button.classList.add('active');
                
                const filter = button.getAttribute('data-filter');
                
                productCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

// Scroll animations
        function animateOnScroll() {
            const elements = document.querySelectorAll('.service-card, .product-card, .step');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animated');
                }
            });
        }

window.addEventListener('scroll', animateOnScroll);
        // Initial check in case elements are already in view
        animateOnScroll();

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Form submission
        const contactForm = document.getElementById('contactForm');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                alert('Thank you for your message! We will get back to you soon.');
                this.reset();
            });
        }

ShirtCraft Template Preview

Download Options