E-Commerce Full

This bootstrap css example is contributed by Zahid Hasan Riyad, on 28-Jul-2026. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Frequently asked questions, QnA,blog template,CTA,banner,Get in touch, Contact form,404 Pages, Not found,Services,Why choose us,Masonry,loading, loader,Register, Sign in

Tags: Footer Header Card Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error Page Feature showcase Gallery Hero Input Spinner / Loading Login Form

Author Zahid Hasan Riyad

916

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.pexels.com/photos/13162091/pexels-photo-13162091.jpeg?_gl=1*s8vwtd*_ga*MTkzMTg4NjU1NC4xNzc3MjgzNDIy*_ga_8JE65Q40S6*czE3ODIwNDE5NTQkbzIkZzEkdDE3ODIwNDIwMzckajQwJGwwJGgw" class="d-block w-100" height="450"  alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1456733/pexels-photo-1456733.jpeg?_gl=1*14e151c*_ga*MTkzMTg4NjU1NC4xNzc3MjgzNDIy*_ga_8JE65Q40S6*czE3ODIwNDE5NTQkbzIkZzEkdDE3ODIwNDIxNjkkajM4JGwwJGgw" class="d-block w-100" height="400" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://cdn.pixabay.com/photo/2016/04/08/18/46/as_photography-shopping-mall-1316787_1280.jpg" class="d-block w-100" height="400" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="container py-5">
        
        <div class="text-center mb-5">
            <h2 class="fw-bold">Featured Products</h2>
            <p class="text-muted">Check out our weekly bestsellers and top-rated items</p>
        </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            
            
            <div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <span class="badge bg-danger sale-badge">Sale</span>
                    <img src="https://cdn.pixabay.com/photo/2016/11/19/16/01/audio-1840073_1280.jpg" class="card-img-top" alt="Wireless Headphones">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Premium Wireless Headphones</h5>
                        <p class="text-muted small">Noise-canceling, 40-hour battery</p>
                        <div class="mt-auto">
                            <span class="text-danger fw-bold fs-4">$129.99</span>
                            <span class="text-muted text-decoration-line-through ms-2">$199.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <img src="https://cdn.pixabay.com/photo/2013/07/11/15/30/male-watch-144648_1280.jpg" class="card-img-top" alt="Minimalist Watch">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Minimalist Analog Watch</h5>
                        <p class="text-muted small">Stainless steel, water-resistant</p>
                        <div class="mt-auto">
                            <span class="text-dark fw-bold fs-4">$149.00</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <span class="badge bg-success sale-badge">New</span>
                    <img src="https://cdn.pixabay.com/photo/2023/10/07/14/24/smartwatch-8300238_1280.jpg" class="card-img-top" alt="Smartwatch">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Sport Smartwatch</h5>
                        <p class="text-muted small">Heart rate monitor, GPS, fit</p>
                        <div class="mt-auto">
                            <span class="text-danger fw-bold fs-4">$199.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <img src="https://cdn.pixabay.com/photo/2018/09/17/14/27/headphones-3683983_1280.jpg" class="card-img-top" alt="Headset">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Studio Pro Headset</h5>
                        <p class="text-muted small">Over-ear, bass boost</p>
                        <div class="mt-auto">
                            <span class="text-dark fw-bold fs-4">$79.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

</div>
    </div>

<div class="container py-5">
        
        <div class="row justify-content-center mb-5 text-center">
            <div class="col-lg-6">
                <span class="text-primary fw-bold text-uppercase">Our Categories</span>
                <h2 class="display-6 fw-bold">Explore Top Categories</h2>
                <p class="text-muted">Find exactly what you need with our carefully curated and categorized collections.</p>
            </div>
        </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            
            
            <div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-laptop category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Electronics</h5>
                            <p class="card-text text-muted small">Smartphones, laptops, gadgets, and accessories.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-cart3 category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Fashion</h5>
                            <p class="card-text text-muted small">Latest trends in apparel, footwear, and watches.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-house-door category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Home & Kitchen</h5>
                            <p class="card-text text-muted small">Decor, appliances, furniture, and cookware.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-bicycle category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Sports & Outdoors</h5>
                            <p class="card-text text-muted small">Gear, apparel, and equipment for all activities.</p>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>

<section class="py-5">
        <div class="container">
            
            <div class="text-center mb-5">
                <span class="text-primary fw-bold text-uppercase tracking-wide">Limited Time</span>
                <h2 class="display-5 fw-bold text-dark">Exclusive Special Offers</h2>
                <p class="text-muted mx-auto" style="max-width: 500px;">
                    Grab these amazing deals before they expire. Elevate your experience with top-tier quality at unbeatable prices.
                </p>
            </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                
                
                <div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-danger badge-discount shadow-sm">20% OFF</span>
                        <img src="https://cdn.pixabay.com/photo/2015/01/20/12/51/mobile-605422_1280.jpg" class="card-img-top" alt="Premium Headphones" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Premium Wireless Headphones</h5>
                            <p class="card-text text-muted flex-grow-1">Experience crystal-clear sound, active noise cancellation, and a 40-hour battery life.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$199.99</span>
                                <span class="text-primary fw-bold fs-3">$159.99</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

<div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-danger badge-discount shadow-sm">Save $50</span>
                        <img src="https://cdn.pixabay.com/photo/2014/09/24/14/29/macbook-459196_1280.jpg" class="card-img-top" alt="Laptop" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Pro Creator Laptop 14"</h5>
                            <p class="card-text text-muted flex-grow-1">Lightning-fast processing, 16GB RAM, and a stunning retina display for creators and professionals.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$999.00</span>
                                <span class="text-primary fw-bold fs-3">$949.00</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

<div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-warning text-dark badge-discount shadow-sm">Flash Sale</span>
                        <img src="https://cdn.pixabay.com/photo/2015/06/25/17/22/smart-watch-821559_1280.jpg" class="card-img-top" alt="Smartwatch" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Classic Smartwatch Series V</h5>
                            <p class="card-text text-muted flex-grow-1">Track your fitness, manage notifications, and look elegant with this timeless smartwatch design.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$249.99</span>
                                <span class="text-primary fw-bold fs-3">$179.99</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">What Our Customers Say</h2>
            <p class="text-muted">Trusted by thousands of happy customers</p>
        </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">John Doe</h5>
                        <div class="text-warning mb-2">
                            ★★★★★
                        </div>
                        <p class="card-text text-muted">
                            Amazing service! The quality exceeded my expectations.
                            Highly recommended for everyone.
                        </p>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">Sarah Smith</h5>
                        <div class="text-warning mb-2">
                            ★★★★★
                        </div>
                        <p class="card-text text-muted">
                            Fast delivery and excellent customer support.
                            Will definitely order again.
                        </p>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">Michael Lee</h5>
                        <div class="text-warning mb-2">
                            ★★★★☆
                        </div>
                        <p class="card-text text-muted">
                            Great experience overall. Product quality is very good
                            and worth the price.
                        </p>
                    </div>
                </div>
            </div>

</div>
    </div>
</section>

<section class="py-5 bg-white border-top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <form class="needs-validation p-4 border rounded shadow-sm" novalidate>
                        <h3 class="fw-bold text-center mb-4">Leave Feedback</h3>
                        <div class="mb-3"><input type="text" class="form-control" placeholder="Name" required></div>
                        <div class="mb-3"><input type="email" class="form-control" placeholder="Email" required></div>
                        <div class="mb-3"><textarea class="form-control" rows="3" placeholder="Message" required></textarea></div>
                        <button type="submit" class="btn btn-primary w-100">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<footer class="mt-auto">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        <h5>About Us</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis quam tristique convallis.</p>
      </div>
      <div class="col-md-4 mb-3">
        <h5>Quick Links</h5>
        <ul class="list-unstyled">
          <li><a href="#" class="text-decoration-none text-white">Home</a></li>
          <li><a href="#" class="text-decoration-none text-white">Services</a></li>
          <li><a href="#" class="text-decoration-none text-white">Contact</a></li>
        </ul>
      </div>
      <div class="col-md-4 mb-3">
        <h5>Follow Us</h5>
        <ul class="list-inline social-icons">
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-facebook"></i></a></li>
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-twitter"></i></a></li>
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-instagram"></i></a></li>
        </ul>
      </div>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-md-12 text-center">
        <p>&copy; 2026 Your Company. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

    
        
<footer class="footer text-center mt-3">
    <div class="container">
        <p>Copyright &copy; 2026. All rights reserved.<span class="text-danger"> &hearts;</span>Designed with Md.Zahid Hasan</p>
        
        <span id="dt"></span>
    </div>
</footer>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">

</head>
  <body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<section class="py-5 bg-light border-bottom">
  <div class="container">
    <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-3">
      
      <div>
        <h1 class="fw-bold mb-1 text-dark h2">User Settings</h1>
        <p class="text-muted mb-0 small">Manage your account preferences and security configuration.</p>
      </div>
      
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 bg-transparent p-0">
          <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Dashboard</a></li>
          <li class="breadcrumb-item active" aria-current="page">Settings</li>
        </ol>
      </nav>
    </div>
  </div>
</section>

<div class="container">
        <h2 class="text-center mb-5">Our Featured Products</h2>
        
        
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            
            
            <div class="col">
                <div class="card h-100 product-card shadow-sm border-0">
                    <img src="https://cdn.pixabay.com/photo/2015/10/29/01/24/shoes-1011596_1280.jpg" class="card-img-top" alt="Red Running Shoes">
                    <div class="card-body d-flex flex-column text-center">
                        <h5 class="card-title">Nike Air Max Sport</h5>
                        <p class="product-price mt-auto mb-3">$129.99</p>
                        <button class="btn btn-dark mt-auto w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card h-100 product-card shadow-sm border-0">
                    <img src="https://cdn.pixabay.com/photo/2019/11/05/16/32/hour-4603921_1280.jpg" class="card-img-top" alt="Smart Watch">
                    <div class="card-body d-flex flex-column text-center">
                        <h5 class="card-title">Minimalist Smart Watch</h5>
                        <p class="product-price mt-auto mb-3">$199.50</p>
                        <button class="btn btn-dark mt-auto w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card h-100 product-card shadow-sm border-0">
                    <img src="https://cdn.pixabay.com/photo/2026/02/04/09/28/09-28-28-293_1280.jpg" class="card-img-top" alt="Sunglasses">
                    <div class="card-body d-flex flex-column text-center">
                        <h5 class="card-title">Classic Sunglasses</h5>
                        <p class="product-price mt-auto mb-3">$45.00</p>
                        <button class="btn btn-dark mt-auto w-100">Add to Cart</button>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card h-100 product-card shadow-sm border-0">
                    <img src="https://cdn.pixabay.com/photo/2018/09/17/22/26/headphone-3684963_1280.jpg" class="card-img-top" alt="Headphones">
                    <div class="card-body d-flex flex-column text-center">
                        <h5 class="card-title">Wireless Headphones</h5>
                        <p class="product-price mt-auto mb-3">$89.99</p>
                        <button class="btn btn-dark mt-auto w-100">Add to Cart</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

<div class="container py-5">
    <div class="row g-4">
        
        <aside class="col-lg-3">
            <div class="card shadow-sm border-0 radial-3">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="fw-bold mb-0">Filters</h5>
                        <button class="btn btn-sm btn-link text-decoration-none p-0">Clear All</button>
                    </div>
                    <hr class="text-muted my-3">

<div class="mb-4">
                        <h6 class="fw-bold text-uppercase fs-7 text-muted mb-3">Categories</h6>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="cat-electronics" checked>
                            <label class="form-check-label" for="cat-electronics">Electronics</label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="cat-clothing">
                            <label class="form-check-label" for="cat-clothing">Clothing</label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="cat-home">
                            <label class="form-check-label" for="cat-home">Home & Kitchen</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="cat-books">
                            <label class="form-check-label" for="cat-books">Books</label>
                        </div>
                    </div>

<div class="mb-4">
                        <h6 class="fw-bold text-uppercase fs-7 text-muted mb-3">Price Range</h6>
                        <label for="priceRange" class="form-label d-flex justify-content-between">
                            <span>$0</span>
                            <span class="fw-bold text-primary">$500</span>
                        </label>
                        <input type="range" class="form-range" min="0" max="1000" id="priceRange">
                    </div>

<div class="mb-2">
                        <h6 class="fw-bold text-uppercase fs-7 text-muted mb-3">Customer Rating</h6>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="ratingRadio" id="rate-4">
                            <label class="form-check-label text-warning" for="rate-4">
                                <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <span class="text-dark ms-1">& Up</span>
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="ratingRadio" id="rate-3">
                            <label class="form-check-label text-warning" for="rate-3">
                                <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star-fill"></i> <i class="bi bi-star"></i> <span class="text-dark ms-1">& Up</span>
                            </label>
                        </div>
                    </div>
                    
                </div>
            </div>
        </aside>

<main class="col-lg-9">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body p-3">
                    <div class="row g-3 align-items-center">
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0 text-muted">
                                    <i class="bi bi-search"></i>
                                </span>
                                <input type="text" class="form-control border-start-0 ps-0" placeholder="Search for products, brands, and more...">
                                <button class="btn btn-primary px-4" type="button">Search</button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-md-end">
                                <label class="text-nowrap me-2 text-muted d-none d-sm-block" for="sortSelect">Sort by:</label>
                                <select class="form-select w-auto" id="sortSelect">
                                    <option selected>Popularity</option>
                                    <option value="1">Price: Low to High</option>
                                    <option value="2">Price: High to Low</option>
                                    <option value="3">Newest Arrivals</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="d-flex justify-content-between align-items-center mb-3 px-1">
                <span class="text-muted">Showing <strong class="text-dark">12</strong> of 120 products</span>
                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Electronics X</span>
            </div>

<div class="row row-cols-1 row-cols-md-3 g-3">
                <div class="col">
                    <div class="card h-100 shadow-sm border-0">
                        
                        <img src="https://cdn.pixabay.com/photo/2025/02/12/09/50/headphones-9401018_1280.jpg" alt="">
                        <div class="card-body">
                            <h6 class="card-title fw-bold">Wireless Headphones</h6>
                            <p class="text-muted small mb-2">Electronics</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-primary">$99.00</span>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-cart-plus"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100 shadow-sm border-0">
                        <img src="https://cdn.pixabay.com/photo/2021/12/07/14/27/watch-6853385_1280.jpg" alt="">
                        <div class="card-body">
                            <h6 class="card-title fw-bold">Smart Watch v2</h6>
                            <p class="text-muted small mb-2">Electronics</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-primary">$199.00</span>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-cart-plus"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100 shadow-sm border-0">
                        <img src="https://cdn.pixabay.com/photo/2019/04/07/09/41/speakers-4109274_1280.jpg" alt="">
                        <div class="card-body">
                            <h6 class="card-title fw-bold">Bluetooth Speaker</h6>
                            <p class="text-muted small mb-2">Electronics</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-primary">$45.00</span>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-cart-plus"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

</main>
    </div>
</div>

<section class="container py-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold position-relative d-inline-block pb-2">
            Trending Collections
            <span class="position-absolute bottom-0 start-50 translate-middle-x bg-primary" style="width: 50px; height: 3px;"></span>
        </h2>
        <p class="text-muted mt-2">Discover our curated seasonal pickings</p>
    </div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
        
        <div class="col">
            <div class="card border-0 text-white category-container shadow-sm h-100">
                <div class="category-zoom h-100">
                    <img src="https://cdn.pixabay.com/photo/2012/10/17/20/29/market-61931_1280.jpg" class="card-img w-100 h-100" style="min-height: 350px;" alt="Women's Apparel">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-4">
                    <p class="mb-1 text-uppercase tracking-wider small text-white-50">New Arrivals</p>
                    <h4 class="card-title fw-bold mb-3">Women's Apparel</h4>
                    <div>
                        <a href="#" class="btn btn-light btn-sm rounded-pill px-3 category-btn fw-semibold shadow-sm">
                            Shop Now <i class="bi bi-chevron-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card border-0 text-white category-container shadow-sm h-100">
                <div class="category-zoom h-100">
                    <img src="https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?auto=format&fit=crop&w=500&q=80" class="card-img w-100 h-100" style="min-height: 350px;" alt="Men's Outfits">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-4">
                    <p class="mb-1 text-uppercase tracking-wider small text-white-50">Classic Styles</p>
                    <h4 class="card-title fw-bold mb-3">Men's Outfits</h4>
                    <div>
                        <a href="#" class="btn btn-light btn-sm rounded-pill px-3 category-btn fw-semibold shadow-sm">
                            Shop Now <i class="bi bi-chevron-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card border-0 text-white category-container shadow-sm h-100">
                <div class="category-zoom h-100">
                    <img src="https://cdn.pixabay.com/photo/2015/12/13/16/02/ios-1091307_1280.jpg" class="card-img w-100 h-100" style="min-height: 350px;" alt="Gadgets">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-4">
                    <p class="mb-1 text-uppercase tracking-wider small text-white-50">Smart Devices</p>
                    <h4 class="card-title fw-bold mb-3">Smart Gadgets</h4>
                    <div>
                        <a href="#" class="btn btn-light btn-sm rounded-pill px-3 category-btn fw-semibold shadow-sm">
                            Shop Now <i class="bi bi-chevron-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

<div class="col">
            <div class="card border-0 text-white category-container shadow-sm h-100">
                <div class="category-zoom h-100">
                    <img src="https://cdn.pixabay.com/photo/2017/01/07/17/48/interior-1961070_1280.jpg" class="card-img w-100 h-100" style="min-height: 350px;" alt="Home Decor">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-end p-4">
                    <p class="mb-1 text-uppercase tracking-wider small text-white-50">Minimalist</p>
                    <h4 class="card-title fw-bold mb-3">Home Decor</h4>
                    <div>
                        <a href="#" class="btn btn-light btn-sm rounded-pill px-3 category-btn fw-semibold shadow-sm">
                            Shop Now <i class="bi bi-chevron-right small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

</div>
</section>

<footer class="footer text-center mt-3">
    <div class="container">
        <p>Copyright &copy; 2026. All rights reserved.<span class="text-danger"> &hearts;</span>Designed with Md.Zahid Hasan</p>
        
        <span id="dt"></span>
    </div>
</footer>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link active" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="bg-white border-bottom py-3 mb-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">Home</a></li>
                <li class="breadcrumb-item"><a href="product-page.html" class="text-decoration-none">Product</a></li>
                <li class="breadcrumb-item active" aria-current="page">Headphones</li>
            </ol>
        </nav>
        <h1 class="fw-bold h3 mb-0 mt-5">Premium Wireless Headphones (Noise Cancelling)</h1>
    </div>
</div>
<div class="container mb-5">
    <div class="row g-4">
        
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm p-3 bg-white rounded-3">
                <div class="position-relative mb-3 bg-light rounded overflow-hidden" style="max-height: 380px;">
                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=800&q=80" 
                         class="w-100 h-100" 
                         style="object-fit: contain; max-height: 380px;" 
                         alt="Main Product Image">
                </div>
                <div class="row g-2">
                    <div class="col-3">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=200&q=80" class="img-fluid rounded border border-primary w-100" style="height: 70px; object-fit: cover; cursor: pointer;" alt="Thumb 1">
                    </div>
                    <div class="col-3">
                        <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?auto=format&fit=crop&w=200&q=80" class="img-fluid rounded border w-100" style="height: 70px; object-fit: cover; cursor: pointer;" alt="Thumb 2">
                    </div>
                    <div class="col-3">
                        <img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&w=200&q=80" class="img-fluid rounded border w-100" style="height: 70px; object-fit: cover; cursor: pointer;" alt="Thumb 3">
                    </div>
                    <div class="col-3">
                        <img src="https://images.unsplash.com/photo-1487215078519-e21cc028cb29?auto=format&fit=crop&w=200&q=80" class="img-fluid rounded border w-100" style="height: 70px; object-fit: cover; cursor: pointer;" alt="Thumb 4">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm p-4 bg-white rounded-3 h-100 d-flex flex-column justify-content-between">
                
                <div>
                    <div class="mb-4">
                        <div class="d-flex align-items-center mb-2">
                            <div class="text-warning me-2">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-half"></i>
                            </div>
                            <span class="text-muted small">(4.8 out of 5 from 120 reviews)</span>
                        </div>
                        
                        <div class="d-flex align-items-baseline mb-2">
                            <span class="display-6 fw-bold text-primary me-3">$199.00</span>
                            <span class="text-muted text-decoration-line-through fs-5">$249.00</span>
                            <span class="badge bg-danger ms-2">20% OFF</span>
                        </div>

<div>
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                <i class="bi bi-check-circle-fill me-1"></i> In Stock (25 units available)
                            </span>
                        </div>
                    </div>
                    <hr class="text-muted">

<div class="mb-4">
                        <h5 class="fw-bold mb-2">Product Description</h5>
                        <p class="text-muted lh-base small">
                            Experience world-class sound with advanced active noise cancellation. These premium wireless headphones deliver deep, immersive bass and crystal-clear highs. Perfect for long commutes, office focus, or intense workout sessions. Features up to 40 hours of battery life on a single charge.
                        </p>
                        <ul class="text-muted small ps-3">
                            <li>Hybrid Active Noise Cancelling (ANC)</li>
                            <li>Bluetooth 5.2 Seamless Connectivity</li>
                            <li>40-Hour Battery Life with Fast Charging</li>
                            <li>Ergonomic Memory Foam Earcups</li>
                        </ul>
                    </div>
                    </div>

<div class="container my-5 py-4"> <div class="text-center mb-5">
        <h4 class="fw-bold position-relative d-inline-block pb-3">
            Related Products
            <span class="position-absolute bottom-0 start-50 translate-middle-x bg-primary" style="width: 50px; height: 3px;"></span>
        </h4>
    </div>
    
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 px-2">
        
        <div class="col">
            <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1546435770-a3e426bf472b?auto=format&fit=crop&w=400&q=80" class="card-img-top" style="height: 180px; object-fit: cover;" alt="Related Product 1">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-truncate mb-1">Wireless Earbuds X</h6>
                    <p class="text-primary fw-bold mb-0">$79.00</p>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1608156639585-b3a032ef9689?auto=format&fit=crop&w=400&q=80" class="card-img-top" style="height: 180px; object-fit: cover;" alt="Related Product 2">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-truncate mb-1">Bluetooth Speaker Pod</h6>
                    <p class="text-primary fw-bold mb-0">$55.00</p>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=400&q=80" class="card-img-top" style="height: 180px; object-fit: cover;" alt="Related Product 3">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-truncate mb-1">Minimal Smart Watch</h6>
                    <p class="text-primary fw-bold mb-0">$149.00</p>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?auto=format&fit=crop&w=400&q=80" class="card-img-top" style="height: 180px; object-fit: cover;" alt="Related Product 4">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-truncate mb-1">Gaming Headset Pro</h6>
                    <p class="text-primary fw-bold mb-0">$120.00</p>
                </div>
            </div>
        </div>

</div>
</div>

</head>
  <body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link active" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="bg-white border-bottom py-4 mb-5">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Your Shopping Cart</li>
            </ol>
        </nav>
        <h1 class="fw-bold h3 mb-0 mt-5"><i class="bi bi-cart3 me-2"></i>Shopping Cart (2 Items)</h1>
    </div>
</div>
<div class="container mb-5">
    <div class="row g-4">
        
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 bg-white rounded-3">
                <h5 class="fw-bold mb-4">Cart Items</h5>
                
                <div class="row g-3 align-items-center pb-3 mb-3 border-bottom">
                    <div class="col-3 col-md-2">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=150&q=80" class="img-fluid rounded border" alt="Product 1">
                    </div>
                    <div class="col-9 col-md-4">
                        <h6 class="fw-bold mb-1 text-truncate">Premium Wireless Headphones</h6>
                        <p class="text-muted small mb-0">Color: Black</p>
                        <p class="text-primary fw-bold mb-0 d-md-none">$199.00</p> </div>
                    <div class="col-6 col-md-3">
                        <div class="input-group input-group-sm" style="max-width: 110px;">
                            <button class="btn btn-outline-secondary" type="button"><i class="bi bi-minus"></i></button>
                            <input type="text" class="form-control text-center fw-bold" value="1" readonly>
                            <button class="btn btn-outline-secondary" type="button"><i class="bi bi-plus"></i></button>
                        </div>
                    </div>
                    <div class="col-4 col-md-2 d-none d-md-block text-end">
                        <span class="fw-bold fs-6 text-dark">$199.00</span>
                    </div>
                    <div class="col-2 col-md-1 text-end">
                        <button class="btn btn-sm btn-outline-danger border-0" title="Remove Item">
                            <i class="bi bi-trash3 fs-6"></i>
                        </button>
                    </div>
                </div>

<div class="row g-3 align-items-center pb-2">
                    <div class="col-3 col-md-2">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=150&q=80" class="img-fluid rounded border" alt="Product 2">
                    </div>
                    <div class="col-9 col-md-4">
                        <h6 class="fw-bold mb-1 text-truncate">Minimal Smart Watch</h6>
                        <p class="text-muted small mb-0">Size: 44mm</p>
                        <p class="text-primary fw-bold mb-0 d-md-none">$149.00</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="input-group input-group-sm" style="max-width: 110px;">
                            <button class="btn btn-outline-secondary" type="button"><i class="bi bi-minus"></i></button>
                            <input type="text" class="form-control text-center fw-bold" value="1" readonly>
                            <button class="btn btn-outline-secondary" type="button"><i class="bi bi-plus"></i></button>
                        </div>
                    </div>
                    <div class="col-4 col-md-2 d-none d-md-block text-end">
                        <span class="fw-bold fs-6 text-dark">$149.00</span>
                    </div>
                    <div class="col-2 col-md-1 text-end">
                        <button class="btn btn-sm btn-outline-danger border-0" title="Remove Item">
                            <i class="bi bi-trash3 fs-6"></i>
                        </button>
                    </div>
                </div>

</div>
            
            <div class="mt-3 ms-2">
                <a href="products.html" class="text-decoration-none small fw-semibold"><i class="bi bi-arrow-left me-2"></i>Continue Shopping</a>
            </div>
        </div>

<div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 bg-white rounded-3">
                <h5 class="fw-bold mb-4">Order Summary</h5>
                
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal (2 items)</span>
                    <span class="fw-semibold">$348.00</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Shipping Fee</span>
                    <span class="text-success fw-semibold">FREE</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted">Estimated Tax</span>
                    <span class="fw-semibold">$12.00</span>
                </div>
                
                <hr class="text-muted my-3">
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <span class="fw-bold fs-5 text-dark">Total Amount</span>
                    <span class="fw-bold fs-4 text-primary">$360.00</span>
                </div>
                
                <a href="checkout-page.html">
                  <button class="btn btn-primary btn-md w-100 fw-bold py-2 rounded-2">
                    Proceed to Checkout <i class="bi bi-arrow-right ms-2"></i>
                </button>
                </a>
            </div>
        </div>
        </div>
</div>

</head>
  <body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link active" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="col-12">
                            <label for="email" class="form-label small fw-semibold text-muted">Email Address</label>
                            <input type="email" class="form-control" id="email" placeholder="email@example.com" required>
                        </div>

<div class="col-12">
                            <label for="phone" class="form-label small fw-semibold text-muted">Phone Number</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">+880</span>
                                <input type="tel" class="form-control" id="phone" placeholder="1XXXXXXXXX" required>
                            </div>
                        </div>

<div class="col-12">
                            <label for="address" class="form-label small fw-semibold text-muted">Street Address</label>
                            <input type="text" class="form-control" id="address" placeholder="House/Holding No, Road No, Area" required>
                        </div>

<div class="col-md-6">
                            <label for="zipCode" class="form-label small fw-semibold text-muted">Postal / ZIP Code</label>
                            <input type="text" class="form-control" id="zipCode" placeholder="ZIP Code" required>
                        </div>
                    </div>
                </form>
                </div>
        </div>

<div class="col-lg-5">
            <div class="card border-0 shadow-sm p-4 bg-white rounded-3 mb-4">
                <h5 class="fw-bold mb-4"><i class="bi bi-receipt me-2 text-muted"></i>Order Summary</h5>
                
                <div class="d-flex align-items-center mb-3">
                    <div class="flex-shrink-0 bg-light p-1 rounded border">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=60&h=60&q=80" class="rounded" alt="Product 1" style="width: 50px; height: 50px; object-fit: cover;">
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h6 class="small fw-bold mb-0 text-truncate" style="max-width: 200px;">Premium Wireless Headphones</h6>
                        <span class="text-muted small">Qty: 1</span>
                    </div>
                    <span class="fw-semibold text-dark">$199.00</span>
                </div>

<div class="d-flex align-items-center mb-3">
                    <div class="flex-shrink-0 bg-light p-1 rounded border">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=60&h=60&q=80" class="rounded" alt="Product 2" style="width: 50px; height: 50px; object-fit: cover;">
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h6 class="small fw-bold mb-0 text-truncate" style="max-width: 200px;">Minimal Smart Watch</h6>
                        <span class="text-muted small">Qty: 1</span>
                    </div>
                    <span class="fw-semibold text-dark">$149.00</span>
                </div>

<div class="d-flex justify-content-between mb-2 small">
                    <span class="text-muted">Subtotal</span>
                    <span class="fw-semibold text-dark">$348.00</span>
                </div>
                <div class="d-flex justify-content-between mb-2 small">
                    <span class="text-muted">Shipping</span>
                    <span class="text-success fw-semibold">FREE</span>
                </div>
                <div class="d-flex justify-content-between mb-3 small">
                    <span class="text-muted">Estimated Tax</span>
                    <span class="fw-semibold text-dark">$12.00</span>
                </div>
                
                <hr class="text-muted my-3">
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <span class="fw-bold fs-5 text-dark">Total Amount</span>
                    <span class="fw-bold fs-4 text-primary">$360.00</span>
                </div>
                <div class="pt-2">
                    <a href="contact-page.html">
                      <button type="submit" class="btn btn-success btn-md w-100 fw-bold py-2.5 shadow-sm rounded-2 fs-5">
                        <i class="bi bi-credit-card-2-back me-2"></i>Place Order
                    </button>
                    </a>
                    <p class="text-center text-muted small mt-2 mb-0">
                        <i class="bi bi-lock-fill text-success small me-1"></i> SSL Encrypted & Secure Payment
                    </p>
                </div>
                </div>
        </div>

</div>
</div>

</head>
  <body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link active" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="d-flex mb-4">
                    <div class="bg-warning-subtle text-warning rounded p-3 me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="bi bi-envelope-fill fs-5"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Email Support</h6>
                        <p class="text-muted small mb-0">info@example.com</p>
                    </div>
                </div>

<hr class="text-muted my-3">
                
                <div>
                    <h6 class="fw-bold mb-2">Business Hours</h6>
                    <p class="text-muted small mb-1">Saturday - Thursday: 9:00 AM - 6:00 PM</p>
                    <p class="text-muted small mb-0 text-danger">Friday: Closed</p>
                </div>
            </div>
            </div>

<div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 bg-white rounded-3">
                <h5 class="fw-bold mb-4">Send Us a Message</h5>
                
                <form class="row g-3">
                    <div class="col-md-6">
                        <label for="userName" class="form-label small fw-semibold text-muted">Full Name</label>
                        <input type="text" class="form-control" id="userName" placeholder="Your Name" required>
                    </div>

<div class="col-md-6">
                        <label for="userEmail" class="form-label small fw-semibold text-muted">Email Address</label>
                        <input type="email" class="form-control" id="userEmail" placeholder="name@example.com" required>
                    </div>

<div class="col-md-6">
                        <label for="userPhone" class="form-label small fw-semibold text-muted">Phone Number</label>
                        <input type="tel" class="form-control" id="userPhone" placeholder="01XXXXXXXXX" required>
                    </div>

<div class="col-md-6">
                        <label for="userAddress" class="form-label small fw-semibold text-muted">Address</label>
                        <input type="text" class="form-control" id="userAddress" placeholder="City, Country" required>
                    </div>

<div class="col-12">
                        <label for="userMessage" class="form-label small fw-semibold text-muted">Your Message</label>
                        <textarea class="form-control" id="userMessage" rows="4" placeholder="Write your message here..." required></textarea>
                    </div>

<div class="col-12 pt-2">
                        <button type="submit" class="btn btn-primary btn-md px-4 fw-bold">
                            <i class="bi bi-send-fill me-2"></i>Send Message
                        </button>
                    </div>
                </form>
            </div>
            </div>

</div>

More Examples

Simple Login form

Author:
Prajwal Hallale

2 years ago

10.3k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

2 years ago

9.7k

v.4.6
Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

5.1k

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1.2k

v.4.6
Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

7 months ago

1.6k

v.5.3
Contact us form

Author:
Anonymous

2 years ago

8.6k

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

9.3k

v.4.6
Home Page of portfolio (WDD)

Author:
sajid taz

4 months ago

786

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

4 months ago

580

v.4.6
Liberation war Archive WDD

Author:
Anonymous

4 months ago

772

v.4.6
E-Commerce index

Author:
Creative Araf

4 months ago

445

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

4 months ago

553

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent