Fashion Hub - Online Clothing Store

    
    
    Clothing Store
    


    
    

        

            Clothing Store
            
        
    

<!-- User Login Form -->
<section class="login">
    <h2>Login to Your Account</h2>
    <form id="login-form">
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</section>

<!-- Product Filtering -->
<section class="filter-section">
    <h3>Filter by Category</h3>
    <select id="category-filter" onchange="filterProducts()">
        <option value="all">All</option>
        <option value="men">Men's Clothing</option>
        <option value="women">Women's Clothing</option>
        <option value="accessories">Accessories</option>
    </select>
</section>

<!-- Product Listings -->
<section class="product-listing">
    <h2>Products</h2>
    <div class="products" id="product-container">
        <div class="product" data-category="men">
            <img src="shirt1.jpg" alt="Shirt" class="zoom" onclick="zoomImage(this)">
            <h3>Men's Shirt</h3>
            <p>$25.00</p>
            <button onclick="addToCart('Men\'s Shirt', 25)">Add to Cart</button>
        </div>
        <div class="product" data-category="women">
            <img src="dress1.jpg" alt="Dress" class="zoom" onclick="zoomImage(this)">
            <h3>Women's Dress</h3>
            <p>$45.00</p>
            <button onclick="addToCart('Women\'s Dress', 45)">Add to Cart</button>
        </div>
        <div class="product" data-category="accessories">
            <img src="belt1.jpg" alt="Belt" class="zoom" onclick="zoomImage(this)">
            <h3>Leather Belt</h3>
            <p>$15.00</p>
            <button onclick="addToCart('Leather Belt', 15)">Add to Cart</button>
        </div>
    </div>
</section>

<!-- Shopping Cart -->
<section class="cart">
    <h2>Your Cart</h2>
    <ul id="cart-items"></ul>
    <p>Total: $<span id="cart-total">0</span></p>
    <button onclick="checkout()">Checkout</button>
</section>

<!-- Footer -->
<footer>
    <p>© 2024 Clothing Store. All rights reserved.</p>
</footer>

<script src="script.js"></script>