Home
Nezerwa Debora
shopp of shoes

shopp of shoes

shopp style

This tailwind example is contributed by Nezerwa Debora, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Shopping cart

Author Nezerwa Debora

946

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shoe Haven - Online Shoe Store</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

/* Global Styles */
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

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

/* Header Styles */
        header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

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

.logo {
            font-size: 24px;
            font-weight: 700;
            color: #ff6b6b;
            text-decoration: none;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

.nav-links a:hover {
            color: #ff6b6b;
        }

.cart-icon {
            position: relative;
        }

.cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ff6b6b;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 500px;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

.hero p {
            font-size: 20px;
            margin-bottom: 30px;
        }

.btn {
            display: inline-block;
            background-color: #ff6b6b;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s;
        }

.btn:hover {
            background-color: #ff5252;
        }

/* Featured Products */
        .section-title {
            text-align: center;
            margin: 60px 0 40px;
            font-size: 32px;
            color: #333;
        }

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

.product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

.product-card:hover {
            transform: translateY(-10px);
        }

.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: 20px;
        }

.product-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

.product-price {
            font-size: 20px;
            font-weight: 700;
            color: #ff6b6b;
            margin-bottom: 15px;
        }

.add-to-cart {
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }

.add-to-cart:hover {
            background-color: #ff6b6b;
        }

/* Categories */
        .categories {
            display: flex;
            justify-content: space-between;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }

.category-card {
            width: 23%;
            min-width: 200px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            margin-bottom: 20px;
        }

.category-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.category-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            font-weight: 700;
        }

/* Footer */
        footer {
            background-color: #333;
            color: white;
            padding: 60px 0 20px;
        }

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

.footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #ff6b6b;
        }

.footer-column ul {
            list-style: none;
        }

.footer-column ul li {
            margin-bottom: 10px;
        }

.footer-column ul li a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }

.footer-column ul li a:hover {
            color: #ff6b6b;
        }

.copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #555;
            color: #aaa;
            font-size: 14px;
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }

.nav-links {
                margin-top: 20px;
            }

.hero h1 {
                font-size: 36px;
            }

.category-card {
                width: 48%;
            }
        }

@media (max-width: 480px) {
            .nav-links li {
                margin-left: 15px;
            }

.hero h1 {
                font-size: 28px;
            }

.category-card {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">Shoe Haven</a>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Men</a></li>
                    <li><a href="#">Women</a></li>
                    <li><a href="#">Kids</a></li>
                    <li><a href="#">Contact</a></li>
                    <li>
                        <a href="#" class="cart-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="9" cy="21" r="1"></circle>
                                <circle cx="20" cy="21" r="1"></circle>
                                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                            </svg>
                            <span class="cart-count">3</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Step Into Style</h1>
                <p>Discover the perfect pair of shoes for every occasion from our premium collection</p>
                <a href="#" class="btn">Shop Now</a>
            </div>
        </div>
    </section>

<section class="container">
        <h2 class="section-title">Featured Products</h2>
        <div class="products">
            
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Running Shoes">
                </div>
                <div class="product-info">
                    <h3 class="product-title">Nike Air Max Running</h3>
                    <p class="product-price">$129.99</p>
                    <button class="add-to-cart">Add to Cart</button>
                </div>
            </div>

<div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1543508282-6319a3e2621f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Casual Shoes">
                </div>
                <div class="product-info">
                    <h3 class="product-title">Adidas Casual Sneakers</h3>
                    <p class="product-price">$89.99</p>
                    <button class="add-to-cart">Add to Cart</button>
                </div>
            </div>

<div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Basketball Shoes">
                </div>
                <div class="product-info">
                    <h3 class="product-title">Jordan Basketball Pro</h3>
                    <p class="product-price">$149.99</p>
                    <button class="add-to-cart">Add to Cart</button>
                </div>
            </div>

<div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Formal Shoes">
                </div>
                <div class="product-info">
                    <h3 class="product-title">Cole Haan Oxford</h3>
                    <p class="product-price">$119.99</p>
                    <button class="add-to-cart">Add to Cart</button>
                </div>
            </div>
        </div>
    </section>

<section class="container">
        <h2 class="section-title">Shop by Category</h2>
        <div class="categories">
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Men's Shoes">
                <div class="category-overlay">Men</div>
            </div>
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Women's Shoes">
                <div class="category-overlay">Women</div>
            </div>
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Kids' Shoes">
                <div class="category-overlay">Kids</div>
            </div>
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Sports Shoes">
                <div class="category-overlay">Sports</div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Shoe Haven</h3>
                    <p>Your one-stop destination for premium quality shoes at affordable prices.</p>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Shipping Policy</a></li>
                        <li><a href="#">Return Policy</a></li>
                        <li><a href="#">Size Guide</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>123 Shoe Street, Footville</li>
                        <li>Email: info@shoehaven.com</li>
                        <li>Phone: (123) 456-7890</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Shoe Haven. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples

Shopping cart page
this is the responsible shopping cart page

Author:
Anonymous

1 year ago

8.1k
shopping
Online shopping will help us find the things we want using our phone or computer and have them delivered to us.

Author:
Nishimwe Jeanine

7 months ago

960
Shopping cart template

Author:
JaxStone

3 years ago

16k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

8 months ago

1.3k
Shoping cart

Author:
Moriba Traore

2 years ago

13.3k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

3 weeks ago

196
shopping cart page product
Product page design single product, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.6k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

4 months ago

909
Best incamas to date

Author:
ORGIN_DREAMS

8 months ago

878
shoping products
Shopping products

Author:
Abhiraj

11 months ago

1.8k
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.1k
Checkout page template

Author:
JaxStone

2 years ago

24k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components