Note: This code is for practice and educational purposes only.
At First Create Folder namde with(
css(style.css)
and js(script.js)).
Create File named:
- index.html
- product.html
- productsdetails.html
- singup.html
- login.html
- cart.html
Home Page:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Home</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="#" class="me-3">Wishlist</a>
<a href="#" class="me-2">Login</a>
<a href="#">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Banner section (Full wide, Add kinum three images with sliding) -->
<section id="banner">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner1.avif" class="d-block w-100" alt="Banner 1">
</div>
<div class="carousel-item">
<img src="images/banner2.avif" class="d-block w-100" alt="Banner 2">
</div>
<div class="carousel-item">
<img src="images/banner3.avif" class="d-block w-100" alt="Banner 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- End Banner section -->
<!-- Best selling products section(uisng bootstrap card with details button and add cart button) -->
<section id="best-selling" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Best Selling Products</h2>
<div class="row">
<!-- Product Card 1 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product5.avif" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">$29.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product2.avif" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">$39.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product3.avif" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">$49.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product4.avif" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 4</h5>
<p class="card-text">$49.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Best selling products section -->
<!-- Featured Product section(uisng bootstrap card with details button and add cart button) -->
<section id="featured-products" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Featured Products</h2>
<div class="row">
<!-- Product Card 1 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product1.avif" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 5</h5>
<p class="card-text">$59.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product6.avif" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 6</h5>
<p class="card-text">$69.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product1.avif" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 7</h5>
<p class="card-text">$79.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product8.avif" class="card-img-top" alt="Product 4">
<div class="card-body">
<h5 class="card-title">Product 8</h5>
<p class="card-text">$89.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Featured Product section -->
<!-- Offerd Product section(uisng bootstrap card with details button and add cart button) -->
<section id="offered-products" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Offered Products</h2>
<div class="row">
<!-- Product Card 1 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product3.avif" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 9</h5>
<p class="card-text">$19.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product4.avif" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 10</h5>
<p class="card-text">$24.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product5.avif" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 11</h5>
<p class="card-text">$34.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="col-md-3 mb-4">
<div class="card">
<img src="images/product6.avif" class="card-img-top" alt="Product 4">
<div class="card-body">
<h5 class="card-title">Product 12</h5>
<p class="card-text">$44.99</p>
<a href="#" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Offerd Product section -->
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
Product Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Products</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="#" class="me-3">Wishlist</a>
<a href="#" class="me-2">Login</a>
<a href="#">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<!-- Logo -->
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Breadcrumb -->
<nav class="container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Products</li>
</ol>
</nav>
<!-- Categories section (Accordion ) left pan Brand Section (Accordion) left pan , Product section right pan with paginations -->
<div class="container my-4">
<div class="row">
<!-- Left Pan -->
<div class="col-md-3">
<!-- Categories Accordion -->
<div class="accordion mb-4" id="categoriesAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Categories
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#categoriesAccordion">
<div class="accordion-body">
<ul class="list-unstyled">
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Brand Accordion -->
<div class="accordion" id="brandAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Brands
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
data-bs-parent="#brandAccordion">
<div class="accordion-body">
<ul class="list-unstyled">
<li><a href="#">Brand A</a></li>
<li><a href="#">Brand B</a></li>
<li><a href="#">Brand C</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Left Pan -->
<!-- Right Pan -->
<div class="col-md-9">
<div class="row">
<!-- Sample Product Card -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="images/product1.avif" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">$19.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<!-- Sample Product Card -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="images/product2.avif" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">$29.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<!-- Sample Product Card -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="images/product3.avif" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">$39.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- End Pagination -->
</div>
<!-- End Right Pan -->
</div>
</div>
<!-- End Breadcrumb -->
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
Product Details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Details</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="#" class="me-3">Wishlist</a>
<a href="#" class="me-2">Login</a>
<a href="#">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<!-- Logo -->
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Breadcrumb -->
<nav class="container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="product.html">Products</a></li>
<li class="breadcrumb-item active" aria-current="page">Products Details</li>
</ol>
</nav>
<!-- Image zoom left pan product details (Quick overview, cart item quantity, add to car button, buy now button) right pan -->
<section class="container my-5">
<div class="row">
<div class="col-md-6 zoom-pan">
<img src="images/productsdetails.jpg" alt="Product Image" class="img-fluid zoomable">
</div>
<div class="col-md-6">
<h2>Product Name</h2>
<p class="text-muted">$49.99</p>
<p>Quick overview of the product goes here. Highlight key features and benefits to entice customers to
make any other relevant information that would help the customer make an informed decision a
purchase. any other relevant information that would help the customer make an informed decision</p>
<div class="mb-3">
<label for="quantity" class="form-label">Quantity:</label>
<input type="number" id="quantity" class="form-control w-25" value="1" min="1">
</div>
<button class="btn btn-primary me-2">Add to Cart</button>
<button class="btn btn-success">Buy Now</button>
</div>
</div>
</section>
<!-- End Image zoom left pan product details (Quick overview, cart item quantity, add to car button, buy now button) right pan -->
<!-- Big Footer section with Contact info, Social media links, quick links -->
<!-- Product details section -->
<section>
<div class="container my-5">
<h3>Product Details</h3>
<p>Here are the detailed specifications and features of the product. Include information such as dimensions,
weight, materials used, warranty details, and any other relevant information that would help the
customer make an informed decision.</p>
<ul>
<li>Feature 1: Description of feature 1.</li>
<li>Feature 2: Description of feature 2.</li>
<li>Feature 3: Description of feature 3.</li>
<li>Feature 4: Description of feature 4.</li>
</ul>
<h4>Customer Reviews</h4>
<p>Customer reviews and ratings can be displayed here to build trust and provide social proof.</p>
</div>
</section>
<!-- End Product details section -->
<!-- Related Products Section -->
<section class="container my-5">
<h3>Related Products</h3>
<hr>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="images/product1.avif" class="card-img-top" alt="Related Product 1">
<div class="card-body">
<h5 class="card-title">Related Product 1</h5>
<p class="card-text">$19.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/product2.avif" class="card-img-top" alt="Related Product 2">
<div class="card-body">
<h5 class="card-title">Related Product 2</h5>
<p class="card-text">$29.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/product5.avif" class="card-img-top" alt="Related Product 3">
<div class="card-body">
<h5 class="card-title">Related Product 3</h5>
<p class="card-text">$39.99</p>
<a href="productsdetails.html" class="btn btn-primary">Details</a>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
</div>
</section>
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
Singup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Singup</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="" class="me-3">Wishlist</a>
<a href="login.html" class="me-2">Login</a>
<a href="register.html">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<!-- Logo -->
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link " href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Signup Form Section (First name, Last name, Phone, Email, password) -->
<section class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4 text-center">Create Your Account</h2>
<form action="#" method="get" onsubmit="alert('Submit succefully')">
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter your first name" required>
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter your last name">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter your phone number">
</div>
<div class="mb-3">
<label for="emailSignup" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailSignup" placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="username" class="form-label">User name</label>
<input type="text" class="form-control" id="username" placeholder="Enter your username">
</div>
<div class="mb-3">
<label for="passwordSignup" class="form-label">Password</label>
<input type="password" class="form-control" id="passwordSignup" placeholder="Enter your password">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
</form>
</div>
</div>
</section>
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
Login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Login</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="" class="me-3">Wishlist</a>
<a href="login.html" class="me-2">Login</a>
<a href="register.html">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<!-- Logo -->
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Login Form Section -->
<section class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4 text-center">Login to Your Account</h2>
<form action="#" method="get" onsubmit="alert('Submit succefully')">
<div class="mb-3">
<label for="username" class="form-label">User name</label>
<input type="text" class="form-control" id="username" placeholder="Enter your username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</section>
<!-- End Login Form Section -->
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html> Cart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce- Cart</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header TOP section (Email, Phone Number, Wishlist, login, Register with button) -->
<header class="bg-light py-2">
<div class="container d-flex justify-content-between align-items-center">
<div>
<a href="mailto:info@ecommerce.com">info@ecommerce.com</a>
<span class="mx-2">|</span>
<a href="tel:+1234567890">+1 234 567 890</a>
</div>
<div>
<a href="#" class="me-3">Wishlist</a>
<a href="#" class="me-2">Login</a>
<a href="#">Register</a>
</div>
</div>
</header>
<!-- End Header TOP section -->
<!-- Navigation Bar with logo , Home, Product, Singup, Login , Cart page link -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<!-- Logo -->
<img src="images/logo.png" alt="Ecommerce Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="singup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="cart.html">Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation Bar -->
<!-- Breadcrumb -->
<nav class="container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Cart</li>
</ol>
</nav>
<!-- Cart Content cart product list section -->
<section class="container my-5">
<h2 class="mb-4">Shopping Cart</h2>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>$19.99</td>
<td><input type="number" class="form-control" value="1" min="1"></td>
<td>$19.99</td>
<td><button class="btn btn-danger btn-sm">Remove</button></td>
</tr>
<tr>
<td>Product 2</td>
<td>$29.99</td>
<td><input type="number" class="form-control" value="2" min="1"></td>
<td>$59.98</td>
<td><button class="btn btn-danger btn-sm">Remove</button></td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-end">
<h4>Total: $79.97</h4>
</div>
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-primary">Proceed to Checkout</button>
</div>
</section>
<!-- End Cart Content cart product list section -->
<!-- Cart coupon and total summary -->
<section class="container my-5">
<div class="row">
<!-- Left column for coupon -->
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Apply Coupon</h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="Coupon Code">
<button class="btn btn-secondary">Apply</button>
</div>
</div>
</div>
</div>
<!-- Right column for order summary -->
<div class="col-md-4 offset-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Order Summary</h5>
<p>Total: $79.97</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Cart coupon and total summary -->
<!-- Big Footer section with Contact info, Social media links, quick links -->
<section class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Contact Us</h5>
<p>Email: info@ecommerce.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Ecommerce St, Shop City, SC 12345</p>
</div>
<div class="col-md-4">
<h5>Quick Links</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">Home</a></li>
<li><a href="product.html" class="text-white">Products</a></li>
<li><a href="signup.html" class="text-white">Signup</a></li>
<li><a href="login.html" class="text-white">Login</a></li>
<li><a href="cart.html" class="text-white">Cart</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<a href="#" class="text-white me-2">Facebook</a>
<a href="#" class="text-white me-2">Twitter</a>
<a href="#" class="text-white">Instagram</a>
</div>
</div>
</div>
</section>
<!-- Footer section -->
<footer class="bg-secondary text-white text-center py-2">
<div class="container">
<p class="mb-0">© <span class="dateTime"></span> Ecommerce. All rights reserved.</p>
</div>
</footer>
<!-- End Footer Section -->
<!-- End Footer section -->
<!-- Bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
Css:
/* over flow hidden */
/* Hover navigation */
.nav-item .nav-link:hover {
color: #ff5722;
transition: color 0.3s ease;
}
.zoom-pan {
overflow: hidden;
}
.zoomable {
transition: transform 1s ease;
}
.zoomable:hover {
transform: scale(1.5);
}
.dateTime {
font-weight: bold;
}
JS:
const now = new Date();
const dateTimeElement = document.querySelector('.dateTime');
dateTimeElement.textContent = now.toLocaleString();
setInterval(() => {
const current = new Date();
dateTimeElement.textContent = current.toLocaleString();
}, 1000); // Update every minute
