E-commerce a. Homepage Page: i. Header Top Section (Offer text, Track Order, Login) ii. Navigation Section with Logo, Home, Shop, Categories, Cart, Checkout, Dashboard, Contact. iii. Hero Banner Section (Full wide carousel with offers/sliding). iv. Category Highlight Section (Circular images). v. Flash Sale Section (using countdown timer). vi. Featured Products Section (using bootstrap card). vii. Big Footer Section (Links, App download, Payment methods). viii. Footer Bottom Section
<div class="container">
<!-- Content here -->
<!-- Link to Bootstrap CSS and Icons included via standard CDN as per usage instructions -->
<!-- TOP HEADER -->
<div class="bg-dark text-white py-2 small">
<div class="container d-flex justify-content-between align-items-center">
<div>
<span class="me-3"><i class="bi bi- megaphone me-1"></i> Special Offer: Get 20% off on your first order!</span>
</div>
<div class="d-none d-md-block">
<a href="#" class="text-white text-decoration-none me-3"><i class="bi bi-truck me-1"></i> Track Order</a>
<a href="#" class="text-white text-decoration-none"><i class="bi bi-person me-1"></i> Login / Register</a>
</div>
</div>
</div>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container text-uppercase fw-bold">
<a class="navbar-brand text-primary fw-bolder fs-3" href="#">SHOP<span class="text-dark">EASE</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Categories</a>
<ul class="dropdown-menu border-0 shadow-sm">
<li><a class="dropdown-item" href="#">Electronics</a></li>
<li><a class="dropdown-item" href="#">Fashion</a></li>
<li><a class="dropdown-item" href="#">Home & Decor</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item ms-lg-3">
<a class="btn btn-outline-dark position-relative rounded-pill px-3" href="#">
<i class="bi bi-cart3"></i> Cart
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
</a>
</li>
<li class="nav-item ms-2">
<a class="btn btn-primary rounded-pill px-3" href="#">Checkout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HERO BANNER CAROUSEL -->
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active bg-light" style="height: 500px; background: url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?auto=format&fit=crop&q=80&w=2070') center/cover;">
<div class="container h-100 d-flex flex-column justify-content-center text-white">
<h1 class="display-3 fw-bold mb-3">Summer Collection 2024</h1>
<p class="fs-4 mb-4">Discover the latest trends in fashion and tech.</p>
<div>
<a href="#" class="btn btn-primary btn-lg px-5 rounded-pill">Shop Now</a>
</div>
</div>
</div>
<div class="carousel-item" style="height: 500px; background: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=2070') center/cover;">
<div class="container h-100 d-flex flex-column justify-content-center text-white">
<h1 class="display-3 fw-bold mb-3">Tech Revolution</h1>
<p class="fs-4 mb-4">Up to 40% off on all electronic gadgets.</p>
<div>
<a href="#" class="btn btn-warning btn-lg px-5 rounded-pill text-white fw-bold">View Offers</a>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- CATEGORY HIGHLIGHT SECTION -->
<section class="py-5 bg-white">
<div class="container text-center">
<h2 class="fw-bold mb-5">Shop by Category</h2>
<div class="row g-4 justify-content-center">
<div class="col-6 col-md-2">
<div class="category-circle mx-auto mb-3 shadow-sm overflow-hidden rounded-circle" style="width: 120px; height: 120px;">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200" class="w-100 h-100 object-fit-cover" alt="Watches">
</div>
<h5>Watches</h5>
</div>
<div class="col-6 col-md-2">
<div class="category-circle mx-auto mb-3 shadow-sm overflow-hidden rounded-circle" style="width: 120px; height: 120px;">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=200" class="w-100 h-100 object-fit-cover" alt="Shoes">
</div>
<h5>Shoes</h5>
</div>
<div class="col-6 col-md-2">
<div class="category-circle mx-auto mb-3 shadow-sm overflow-hidden rounded-circle" style="width: 120px; height: 120px;">
<img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=200" class="w-100 h-100 object-fit-cover" alt="Fashion">
</div>
<h5>Fashion</h5>
</div>
<div class="col-6 col-md-2">
<div class="category-circle mx-auto mb-3 shadow-sm overflow-hidden rounded-circle" style="width: 120px; height: 120px;">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200" class="w-100 h-100 object-fit-cover" alt="Audio">
</div>
<h5>Audio</h5>
</div>
<div class="col-6 col-md-2">
<div class="category-circle mx-auto mb-3 shadow-sm overflow-hidden rounded-circle" style="width: 120px; height: 120px;">
<img src="https://images.unsplash.com/photo-1526170315870-ef6d82f58326?w=200" class="w-100 h-100 object-fit-cover" alt="Gadgets">
</div>
<h5>Gadgets</h5>
</div>
</div>
</div>
</section>
<!-- FLASH SALE SECTION -->
<section class="py-5 bg-danger text-white">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<h2 class="fw-bold mb-0">🔥 FLASH SALE IS ON!</h2>
<p class="mb-0">Hurry up! Grab your favorites before they go out of stock.</p>
</div>
<div class="col-lg-6">
<div class="d-flex justify-content-lg-end gap-3" id="countdown">
<div class="text-center p-3 bg-white text-danger rounded-3" style="min-width: 80px;">
<span class="d-block fs-3 fw-bold" id="days">00</span>
<small class="text-uppercase small">Days</small>
</div>
<div class="text-center p-3 bg-white text-danger rounded-3" style="min-width: 80px;">
<span class="d-block fs-3 fw-bold" id="hours">00</span>
<small class="text-uppercase small">Hours</small>
</div>
<div class="text-center p-3 bg-white text-danger rounded-3" style="min-width: 80px;">
<span class="d-block fs-3 fw-bold" id="mins">00</span>
<small class="text-uppercase small">Mins</small>
</div>
<div class="text-center p-3 bg-white text-danger rounded-3" style="min-width: 80px;">
<span class="d-block fs-3 fw-bold" id="secs">00</span>
<small class="text-uppercase small">Secs</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURED PRODUCTS -->
<section class="py-5">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="fw-bold mb-0">Featured Products</h2>
<a href="#" class="btn btn-link text-decoration-none">View All Products <i class="bi bi-arrow-right"></i></a>
</div>
<div class="row g-4 text-center">
<!-- Product Card 1 -->
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 product-card overflow-hidden">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=400" class="card-img-top p-3" alt="Product">
<div class="card-body">
<p class="text-muted small mb-1">Eyewear</p>
<h6 class="fw-bold">Premium Sunglasses</h6>
<div class="text-primary fw-bold mb-3">$129.00</div>
<button class="btn btn-dark w-100 rounded-pill"><i class="bi bi-cart-plus me-2"></i>Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 product-card overflow-hidden">
<img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400" class="card-img-top p-3" alt="Product">
<div class="card-body">
<p class="text-muted small mb-1">Accessories</p>
<h6 class="fw-bold">Leather Handbag</h6>
<div class="text-primary fw-bold mb-3">$250.00</div>
<button class="btn btn-dark w-100 rounded-pill"><i class="bi bi-cart-plus me-2"></i>Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 product-card overflow-hidden">
<img src="https://images.unsplash.com/photo-1546868801-89930f46dcc2?w=400" class="card-img-top p-3" alt="Product">
<div class="card-body">
<p class="text-muted small mb-1">Wearables</p>
<h6 class="fw-bold">Smart Watch Series 7</h6>
<div class="text-primary fw-bold mb-3">$399.00</div>
<button class="btn btn-dark w-100 rounded-pill"><i class="bi bi-cart-plus me-2"></i>Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm rounded-4 product-card overflow-hidden">
<img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=400" class="card-img-top p-3" alt="Product">
<div class="card-body">
<p class="text-muted small mb-1">Footwear</p>
<h6 class="fw-bold">Classic Sneakers</h6>
<div class="text-primary fw-bold mb-3">$89.00</div>
<button class="btn btn-dark w-100 rounded-pill"><i class="bi bi-cart-plus me-2"></i>Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-light pt-5 border-top">
<div class="container">
<div class="row g-4 mb-5">
<div class="col-lg-4">
<h4 class="fw-bold text-primary mb-4">SHOPEASE</h4>
<p class="text-muted">High-quality products delivered to your doorstep. We are committed to excellence in service and customer satisfaction.</p>
<div class="d-flex gap-3">
<a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-facebook"></i></a>
<a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-instagram"></i></a>
<a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-twitter-x"></i></a>
</div>
</div>
<div class="col-lg-2">
<h6 class="fw-bold mb-4">Quick Links</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">About Us</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Privacy Policy</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Terms & Conditions</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Refund Policy</a></li>
</ul>
</div>
<div class="col-lg-2">
<h6 class="fw-bold mb-4">Customer Care</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Contact Support</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Shipping Details</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">Order Tracking</a></li>
<li class="mb-2"><a href="#" class="text-muted text-decoration-none small">FAQs</a></li>
</ul>
</div>
<div class="col-lg-4">
<h6 class="fw-bold mb-4">Install App</h6>
<p class="small text-muted">From App Store or Google Play</p>
<div class="d-flex gap-2 mb-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" width="120" alt="App Store">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" width="120" alt="Play Store">
</div>
<h6 class="fw-bold mb-3">Secured Payment Gateways</h6>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" height="20" class="me-3 grayscale" alt="Visa">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" height="20" class="me-3 grayscale" alt="Mastercard">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" height="20" class="grayscale" alt="Paypal">
</div>
</div>
</div>
<div class="bg-dark text-white py-3 text-center">
<div class="container">
<p class="mb-0 small text-secondary">© 2024 ShopEase E-commerce. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<style>
.product-card {
transition: transform 0.3s ease, shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.object-fit-cover {
object-fit: cover;
}
.grayscale {
filter: grayscale(1);
opacity: 0.6;
}
.category-circle:hover img {
transform: scale(1.1);
transition: transform 0.3s ease;
}
</style>
<script>
// Simple Countdown Timer Logic
const countdownDate = new Date();
countdownDate.setDate(countdownDate.getDate() + 2); // 2 days from now
setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const d = Math.floor(distance / (1000 * 60 * 60 * 24));
const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = d.toString().padStart(2, '0');
document.getElementById("hours").innerText = h.toString().padStart(2, '0');
document.getElementById("mins").innerText = m.toString().padStart(2, '0');
document.getElementById("secs").innerText = s.toString().padStart(2, '0');
}, 1000);
</script>