Shoe Craft 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>Shoe Craft - Modern Footwear</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

</head>
<body>

<header class="header">
        <div class="container">
            <a href="#" class="logo">Shoe Craft</a>
            <nav class="nav">
                <ul class="nav-list">
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section id="hero" class="hero">
        <div class="container">
            <div class="hero-text">
                <h1>Step into Style with Shoe Craft</h1>
                <p>Discover handcrafted footwear that blends modern design with unparalleled comfort.</p>
                <a href="#products" class="btn">Explore Collection</a>
            </div>
            <div class="hero-image-wrapper">
                <img src="https://images.pexels.com/photos/1070360/pexels-photo-1070360.jpeg" alt="Hero Shoe" class="hero-image">
            </div>
        </div>
    </section>

<section id="products" class="section-padding">
        <div class="container scroll-reveal">
            <h2 class="section-heading">Featured Footwear</h2>
            <div class="products-grid">
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/2857040/pexels-photo-2857040.jpeg" alt="Classic Leather Loafers">
                    <h3>Classic Loafers</h3>
                    <p class="price">$150</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/601177/pexels-photo-601177.jpeg" alt="Urban Runner Sneakers">
                    <h3>Urban Runner</h3>
                    <p class="price">$110</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/1143503/pexels-photo-1143503.jpeg" alt="Adventure Hiker Boots">
                    <h3>Trail Blazer</h3>
                    <p class="price">$180</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/812871/pexels-photo-812871.jpeg" alt="Summer Slides">
                    <h3>Summer Comfort</h3>
                    <p class="price">$75</p>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="section-padding" style="background-color: var(--light-bg);">
        <div class="container scroll-reveal">
            <h2 class="section-heading">Our Story</h2>
            <div class="about-section">
                <div class="content">
                    <p>At Shoe Craft, our journey began with a passion for creating high-quality, comfortable, and stylish footwear that stands the test of time. Every pair is meticulously crafted by artisans who pour their heart and soul into every stitch, using only the finest materials.</p>
                    <p>We are deeply committed to sustainable practices and ethical production. We source eco-friendly materials and ensure fair wages for our artisans, so you can feel good about the shoes you wear. Join us in our mission to walk a better path, one step at a time.</p>
                </div>
                <img src="https://images.pexels.com/photos/2873383/pexels-photo-2873383.jpeg" alt="Shoe Making" class="about-image">
            </div>
        </div>
    </section>

<section id="why-us" class="section-padding">
        <div class="container scroll-reveal">
            <h2 class="section-heading">Why Choose Us?</h2>
            <div class="why-us-section">
                <div class="content">
                    <div class="features">
                        <div class="feature-item">
                            <span class="icon">&#9733;</span>
                            <div>
                                <h3>Handcrafted Quality</h3>
                                <p>Each shoe is a work of art, made with premium materials and obsessive attention to detail.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">&#128096;</span>
                            <div>
                                <h3>Superior Comfort</h3>
                                <p>We blend ergonomic design with timeless style to ensure all-day comfort and support.</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">&#128142;</span>
                            <div>
                                <h3>Ethical & Sustainable</h3>
                                <p>Our commitment to the planet and fair labor practices is at the core of our business.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <img src="https://images.pexels.com/photos/18709054/pexels-photo-18709054.jpeg" alt="Happy customer with shoes" class="why-us-image">
            </div>
        </div>
    </section>

<section id="new-arrivals" class="section-padding" style="background-color: var(--light-bg);">
        <div class="container scroll-reveal">
            <h2 class="section-heading">New Arrivals</h2>
            <div class="products-grid">
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=2070&auto=format&fit=crop" alt="Red sneakers">
                    <h3>Crimson Velocity</h3>
                    <p class="price">$110</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/1854220/pexels-photo-1854220.jpeg" alt="Green high top sneakers">
                    <h3>Forest Stompers</h3>
                    <p class="price">$130</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg" alt="White running shoes">
                    <h3>Cloud Striders</h3>
                    <p class="price">$105</p>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="section-padding">
        <div class="container scroll-reveal">
            <h2 class="section-heading">What Our Customers Say</h2>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <p>"I've never owned a more comfortable pair of shoes. The quality is exceptional and the design is truly unique. I get compliments everywhere I go!"</p>
                    <span class="author">— Jane D.</span>
                </div>
                <div class="testimonial-card">
                    <p>"Shoe Craft has a customer for life. Their commitment to sustainability is what drew me in, and the amazing shoes keep me coming back."</p>
                    <span class="author">— Mark S.</span>
                </div>
                <div class="testimonial-card">
                    <p>"The Trail Blazers are perfect for my weekend trips. They are durable, supportive, and stylish. Exactly what I was looking for!"</p>
                    <span class="author">— Emily R.</span>
                </div>
            </div>
        </div>
    </section>

<section id="newsletter" class="newsletter-section">
        <div class="container scroll-reveal">
            <h2>Stay in the Loop</h2>
            <p>Subscribe to our newsletter for exclusive offers and new product announcements.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit" class="btn">Subscribe</button>
            </form>
        </div>
    </section>

<section id="lookbook" class="section-padding" style="background-color: var(--light-bg);">
        <div class="container scroll-reveal">
            <h2 class="section-heading">Style Guide</h2>
            <div class="products-grid">
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/2996261/pexels-photo-2996261.jpeg" alt="Stylish outfit with shoes">
                    <h3>Spring Essentials</h3>
                    <p>How to style our latest collection for the new season.</p>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/18014875/pexels-photo-18014875.jpeg" alt="Sneaker collection">
                    <h3>The Ultimate Sneaker Guide</h3>
                    <p>Find the perfect pair of sneakers for any occasion.</p>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/32564811/pexels-photo-32564811.jpeg" alt="Shoe crafting process">
                    <h3>Handcrafted & Heritage</h3>
                    <p>A deep dive into our traditional shoe-making process.</p>
                </div>
            </div>
        </div>
    </section>

<footer id="contact" class="footer">
        <div class="container">
            <div class="social-links">
                <a href="#">Fb</a>
                <a href="#">Insta</a>
                <a href="#">Twiter</a>
            </div>
            <p>&copy; 2025 Shoe Craft. All Rights Reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFC107; /* Bright Yellow */
            --secondary-color: #2c2c2c; /* Dark Grey */
            --text-color: #333;
            --light-bg: #f9f9f9;
            --white-color: #fff;
            --shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

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

html {
            scroll-behavior: smooth;
        }

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

a {
            text-decoration: none;
            color: var(--secondary-color);
        }

ul {
            list-style: none;
        }

/* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

.btn {
            display: inline-block;
            padding: 1rem 2.5rem;
            background: var(--primary-color);
            color: var(--secondary-color);
            border: none;
            cursor: pointer;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 50px;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(255, 193, 7, 0.6);
        }

.section-heading {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            position: relative;
            font-weight: 700;
        }

.section-heading::after {
            content: '';
            display: block;
            width: 80px;
            height: 5px;
            background: var(--primary-color);
            margin: 15px auto 0;
            border-radius: 2px;
        }

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

.scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .scroll-reveal.visible .delay-1 { transition-delay: 0.2s; }
        .scroll-reveal.visible .delay-2 { transition-delay: 0.4s; }
        .scroll-reveal.visible .delay-3 { transition-delay: 0.6s; }
        
        /* Header */
        .header {
            background: var(--white-color);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
        }

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

.logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.nav-list {
            display: flex;
            gap: 2.5rem;
        }

.nav-list a {
            font-weight: 600;
            position: relative;
            transition: var(--transition);
        }

.nav-list a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

.nav-list a:hover::after {
            width: 100%;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(to right, #ffffff, #fffbeb);
            height: 90vh;
            display: flex;
            align-items: center;
            text-align: left;
            position: relative;
            overflow: hidden;
        }
        
        .hero .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

.hero-text {
            flex: 1;
            max-width: 600px;
        }

.hero-text h1 {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
            animation: fadeInDown 1s forwards;
        }

.hero-text p {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
            animation: fadeInUp 1s forwards 0.5s;
            opacity: 0;
        }

.hero .btn {
            animation: fadeInUp 1s forwards 1s;
            opacity: 0;
        }

.hero-image-wrapper {
            flex: 1;
            position: relative;
            text-align: right;
        }

.hero-image {
            width: 100%;
            max-width: 600px;
            transform: rotate(-15deg);
            animation: shoeFloat 3s ease-in-out infinite;
        }
        
        /* Sections */
        .section-padding {
            padding: 7rem 0;
        }

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

.product-card {
            background: var(--white-color);
            border-radius: 15px;
            box-shadow: var(--shadow);
            padding: 2rem;
            text-align: center;
            overflow: hidden;
            position: relative;
            transition: var(--transition);
        }

.product-card:hover {
            transform: translateY(-15px) scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

.product-card img {
            width: 100%;
            height: 250px;
            object-fit: contain;
            margin-bottom: 1.5rem;
            transition: transform 0.5s ease;
        }

.product-card:hover img {
            transform: scale(1.1) rotate(5deg);
        }

.product-card h3 {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
        }

.product-card .price {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--primary-color);
        }
        
        .product-card .btn {
            padding: 0.6rem 1.5rem;
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
        
        .product-card:hover .btn {
            opacity: 1;
            transform: translateY(0);
        }

/* About & Why Choose Us */
        .about-section, .why-us-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5rem;
        }

.about-section .content, .why-us-section .content {
            flex: 1;
        }

.about-section img, .why-us-section img {
            max-width: 500px;
            border-radius: 15px;
            box-shadow: var(--shadow);
            transition: transform 0.5s ease;
            transform: rotate(-3deg);
        }

.about-section img:hover, .why-us-section img:hover {
            transform: rotate(0deg) scale(1.05);
        }

.why-us-section .features {
            display: grid;
            gap: 2rem;
        }

.feature-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            background: var(--light-bg);
            padding: 1.5rem;
            border-left: 5px solid var(--primary-color);
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .feature-item:hover {
            transform: translateX(10px);
        }

.feature-item .icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            min-width: 40px;
        }

/* Testimonials */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
        }

.testimonial-card {
            background: var(--light-bg);
            padding: 2.5rem;
            border-radius: 15px;
            position: relative;
            font-style: italic;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.testimonial-card p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

.testimonial-card .author {
            font-weight: 700;
            text-align: right;
            display: block;
            color: var(--primary-color);
        }
        
        .testimonial-card::before {
            content: '“';
            font-size: 5rem;
            position: absolute;
            top: 10px;
            left: 20px;
            color: var(--primary-color);
            opacity: 0.2;
            line-height: 1;
        }

/* Newsletter */
        .newsletter-section {
            background: var(--primary-color);
            padding: 6rem 0;
            text-align: center;
        }

.newsletter-section h2 {
            margin-bottom: 1rem;
            color: var(--secondary-color);
            font-size: 2.5rem;
        }

.newsletter-form {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 2rem;
        }

.newsletter-form input[type="email"] {
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 50px;
            width: 400px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .newsletter-form input[type="email"]:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
        }

.newsletter-form .btn {
            background: var(--secondary-color);
            color: var(--primary-color);
        }

/* Footer */
        .footer {
            background: var(--secondary-color);
            color: var(--white-color);
            padding: 4rem 0;
            text-align: center;
        }

.footer .social-links a {
            font-size: 1.8rem;
            margin: 0 1rem;
            color: var(--white-color);
            transition: color 0.3s;
        }

.footer .social-links a:hover {
            color: var(--primary-color);
        }

.footer p {
            margin-top: 2rem;
            font-size: 0.9rem;
            opacity: 0.7;
        }

/* Animations */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }

@keyframes fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes shoeFloat {
            0% { transform: translateY(0) rotate(-15deg); }
            50% { transform: translateY(-20px) rotate(-15deg); }
            100% { transform: translateY(0) rotate(-15deg); }
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .hero { text-align: center; height: auto; padding: 5rem 0; }
            .hero .container { flex-direction: column; gap: 3rem; }
            .hero-text h1 { font-size: 3rem; }
            .hero-image-wrapper { order: -1; margin-bottom: 2rem; }
            .hero-image { max-width: 500px; transform: rotate(0); animation: none; }
            
            .about-section, .why-us-section {
                flex-direction: column;
                gap: 3rem;
                text-align: center;
            }
            .about-section img, .why-us-section img {
                order: -1;
                margin-bottom: 2rem;
            }
        }

@media (max-width: 768px) {
            .header .nav-list { display: none; }
            .section-heading { font-size: 2rem; }
            .hero-text h1 { font-size: 2.5rem; }
            
            .newsletter-form {
                flex-direction: column;
                align-items: center;
            }
            .newsletter-form input[type="email"] {
                width: 100%;
            }
        }

JavaScript

Shoe Craft Template Preview

Download Options