<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DINZO</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Topbar Start -->
<div class="container-fluid">
<div class="row bg-secondary py-2 px-xl-5">
<div class="col-lg-6 d-none d-lg-block">
<div class="d-inline-flex align-items-center">
<a class="text-dark" href="">FAQs</a>
<span class="text-muted px-2">|</span>
<a class="text-dark" href="">Help</a>
<span class="text-muted px-2">|</span>
<a class="text-dark" href="">Support</a>
</div>
</div>
<div class="col-lg-6 text-center text-lg-right">
<div class="d-inline-flex align-items-center">
<a class="text-dark px-2" href="">
<i class="fab fa-facebook-f"></i>
</a>
<a class="text-dark px-2" href="">
<i class="fab fa-twitter"></i>
</a>
<a class="text-dark px-2" href="">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="text-dark px-2" href="">
<i class="fab fa-instagram"></i>
</a>
<a class="text-dark pl-2" href="">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="row align-items-center py-3 px-xl-5">
<div class="col-lg-3 d-none d-lg-block">
<a href="" class="text-decoration-none">
<h1 class="m-0 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border px-3 mr-1">D</span>DINZO</h1>
</a>
</div>
<div class="col-lg-6 col-6 text-left">
<form action="">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for products">
<div class="input-group-append">
<span class="input-group-text bg-transparent text-primary">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
</div>
<div class="col-lg-3 col-6 text-right">
<a href="" class="btn border">
<i class="fas fa-heart text-primary"></i>
<span class="badge">0</span>
</a>
<a href="" class="btn border">
<i class="fas fa-shopping-cart text-primary"></i>
<span class="badge">0</span>
</a>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar Start -->
<div class="container-fluid">
<div class="row border-top px-xl-5">
<div class="col-lg-3 d-none d-lg-block">
<a class="btn shadow-none d-flex align-items-center justify-content-between bg-primary text-white w-100" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; margin-top: -1px; padding: 0 30px;">
<h6 class="m-0">Categories</h6>
<i class="fa fa-angle-down text-dark"></i>
</a>
<nav class="collapse position-absolute navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0 bg-light" id="navbar-vertical" style="width: calc(100% - 30px); z-index: 1;">
<div class="navbar-nav w-100 overflow-hidden" style="height: 410px">
<div class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">Dresses <i class="fa fa-angle-down float-right mt-1"></i></a>
<div class="dropdown-menu position-absolute bg-secondary border-0 rounded-0 w-100 m-0">
<a href="" class="dropdown-item">Men's Dresses</a>
<a href="" class="dropdown-item">Women's Dresses</a>
<a href="" class="dropdown-item">Baby's Dresses</a>
</div>
</div>
<a href="" class="nav-item nav-link">Shirts</a>
<a href="" class="nav-item nav-link">Jeans</a>
<a href="" class="nav-item nav-link">Swimwear</a>
<a href="" class="nav-item nav-link">Sleepwear</a>
<a href="" class="nav-item nav-link">Sportswear</a>
<a href="" class="nav-item nav-link">Jumpsuits</a>
<a href="" class="nav-item nav-link">Blazers</a>
<a href="" class="nav-item nav-link">Jackets</a>
<a href="" class="nav-item nav-link">Shoes</a>
</div>
</nav>
</div>
<div class="col-lg-9">
<nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0">
<a href="" class="text-decoration-none d-block d-lg-none">
<h1 class="m-0 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border px-3 mr-1">E</span>Shopper</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav mr-auto py-0">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="shop.html" class="nav-item nav-link">Shop</a>
<a href="detail.html" class="nav-item nav-link">Shop Detail</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle active" data-toggle="dropdown">Pages</a>
<div class="dropdown-menu rounded-0 m-0">
<a href="cart.html" class="dropdown-item">Shopping Cart</a>
<a href="checkout.html" class="dropdown-item">Checkout</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ml-auto py-0">
<a href="./Login/login.html" class="nav-item nav-link">Login</a>
<a href="./Signup/signup.html" class="nav-item nav-link">Register</a>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Navbar End -->
<!-- Page Header Start -->
<div class="container-fluid bg-secondary mb-5">
<div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 300px">
<h1 class="font-weight-semi-bold text-uppercase mb-3">Shopping Cart</h1>
<div class="d-inline-flex">
<p class="m-0"><a href="">Home</a></p>
<p class="m-0 px-2">-</p>
<p class="m-0">Shopping Cart</p>
</div>
</div>
</div>
<!-- Page Header End -->
<!-- Cart Start -->
<div class="container-fluid pt-5">
<div class="row px-xl-5">
<div class="col-lg-8 table-responsive mb-5">
<table class="table table-bordered text-center mb-0">
<thead class="bg-secondary text-dark">
<tr>
<th>Products</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody class="align-middle">
<tr>
<td class="align-middle"><img src="img/product-1.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-2.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="0">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-3.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="0">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-4.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="0">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-5.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="0">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">Rs 1500</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<form class="mb-5" action="">
<div class="input-group">
<input type="text" class="form-control p-4" placeholder="Coupon Code">
<div class="input-group-append">
<button class="btn btn-primary">Apply Coupon</button>
</div>
</div>
</form>
<div class="card border-secondary mb-5">
<div class="card-header bg-secondary border-0">
<h4 class="font-weight-semi-bold m-0">Cart Summary</h4>
</div>
<div class="card-body">
<div class="d-flex justify-content-between mb-3 pt-1">
<h6 class="font-weight-medium">Subtotal</h6>
<h6 class="font-weight-medium">Rs 1500</h6>
</div>
<div class="d-flex justify-content-between">
<h6 class="font-weight-medium">Shipping</h6>
<h6 class="font-weight-medium">Rs 100</h6>
</div>
</div>
<div class="card-footer border-secondary bg-transparent">
<div class="d-flex justify-content-between mt-2">
<h5 class="font-weight-bold">Total</h5>
<h5 class="font-weight-bold">Rs 1600</h5>
</div>
<button class="btn btn-block btn-primary my-3 py-3">Proceed To Checkout</button>
</div>
</div>
</div>
</div>
</div>
<!-- Cart End -->
<!-- Footer Start -->
<div class="container-fluid bg-secondary text-dark mt-5 pt-5">
<div class="row px-xl-5 pt-5">
<div class="col-lg-4 col-md-12 mb-5 pr-3 pr-xl-5">
<a href="" class="text-decoration-none">
<h1 class="mb-4 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border border-white px-3 mr-1">D</span>DINZO</h1>
</a>
<p>Dolore erat dolor sit lorem vero amet. Sed sit lorem magna, ipsum no sit erat lorem et magna ipsum dolore amet erat.</p>
<p class="mb-2"><i class="fa fa-map-marker-alt text-primary mr-3"></i>Vardhaman College , hyd</p>
<p class="mb-2"><i class="fa fa-envelope text-primary mr-3"></i>info@example.com</p>
<p class="mb-0"><i class="fa fa-phone-alt text-primary mr-3"></i>+91 70345 67890</p>
</div>
<div class="col-lg-8 col-md-12">
<div class="row">
<div class="col-md-4 mb-5">
<h5 class="font-weight-bold text-dark mb-4">Quick Links</h5>
<div class="d-flex flex-column justify-content-start">
<a class="text-dark mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
<a class="text-dark mb-2" href="shop.html"><i class="fa fa-angle-right mr-2"></i>Our Shop</a>
<a class="text-dark mb-2" href="detail.html"><i class="fa fa-angle-right mr-2"></i>Shop Detail</a>
<a class="text-dark mb-2" href="cart.html"><i class="fa fa-angle-right mr-2"></i>Shopping Cart</a>
<a class="text-dark mb-2" href="checkout.html"><i class="fa fa-angle-right mr-2"></i>Checkout</a>
<a class="text-dark" href="contact.html"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
</div>
</div>
<div class="col-md-4 mb-5">
<h5 class="font-weight-bold text-dark mb-4">Quick Links</h5>
<div class="d-flex flex-column justify-content-start">
<a class="text-dark mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
<a class="text-dark mb-2" href="shop.html"><i class="fa fa-angle-right mr-2"></i>Our Shop</a>
<a class="text-dark mb-2" href="detail.html"><i class="fa fa-angle-right mr-2"></i>Shop Detail</a>
<a class="text-dark mb-2" href="cart.html"><i class="fa fa-angle-right mr-2"></i>Shopping Cart</a>
<a class="text-dark mb-2" href="checkout.html"><i class="fa fa-angle-right mr-2"></i>Checkout</a>
<a class="text-dark" href="contact.html"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
</div>
</div>
<div class="col-md-4 mb-5">
<h5 class="font-weight-bold text-dark mb-4">Newsletter</h5>
<form action="">
<div class="form-group">
<input type="text" class="form-control border-0 py-4" placeholder="Your Name" required="required" />
</div>
<div class="form-group">
<input type="email" class="form-control border-0 py-4" placeholder="Your Email"
required="required" />
</div>
<div>
<button class="btn btn-primary btn-block border-0 py-3" type="submit">Subscribe Now</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row border-top border-light mx-xl-5 py-4">
<div class="col-md-6 px-xl-0">
<p class="mb-md-0 text-center text-md-left text-dark">
© <a class="text-dark font-weight-semi-bold" href="#">DINZO</a>. All Rights Reserved.
</p>
</div>
<div class="col-md-6 px-xl-0 text-center text-md-right">
<img class="img-fluid" src="img/payments.png" alt="">
</div>
</div>
</div>
<!-- Footer End -->
<!-- Back to Top -->
<a href="#" class="btn btn-primary back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Contact Javascript File -->
<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>
<!-- Template Javascript -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Function to update the total price for an item
function updateTotalPrice(row) {
const priceElement = row.querySelector("td:nth-child(2)").innerText;
const quantityElement = row.querySelector(".quantity input").value;
const totalElement = row.querySelector("td:nth-child(4)");
const price = parseFloat(priceElement.replace("Rs ", ""));
const quantity = parseInt(quantityElement);
const total = price * quantity;
totalElement.innerText = "Rs " + total.toFixed(2);
updateCartSummary();
}
// Function to update the cart summary (subtotal, total)
function updateCartSummary() {
let subtotal = 0;
const rows = document.querySelectorAll("tbody tr");
rows.forEach(row => {
const totalElement = row.querySelector("td:nth-child(4)").innerText;
const total = parseFloat(totalElement.replace("Rs ", ""));
subtotal += total;
});
const shipping = 100; // Assume a flat shipping rate
const total = subtotal + shipping;
document.querySelector(".card-body .font-weight-medium").innerText = "Rs " + subtotal.toFixed(2);
document.querySelector(".card-footer .font-weight-bold").innerText = "Rs " + total.toFixed(2);
}
// Increase quantity
document.querySelectorAll(".btn-plus").forEach(button => {
button.addEventListener("click", function () {
const quantityInput = this.parentNode.parentNode.querySelector("input");
quantityInput.value = parseInt(quantityInput.value) + 1;
updateTotalPrice(this.closest("tr"));
});
});
// Decrease quantity
document.querySelectorAll(".btn-minus").forEach(button => {
button.addEventListener("click", function () {
const quantityInput = this.parentNode.parentNode.querySelector("input");
if (parseInt(quantityInput.value) > 0) {
quantityInput.value = parseInt(quantityInput.value) - 1;
}
updateTotalPrice(this.closest("tr"));
});
});
// Remove item from cart
document.querySelectorAll(".fa-times").forEach(button => {
button.addEventListener("click", function () {
const row = this.closest("tr");
row.remove();
updateCartSummary();
});
});
});
</script>
<script src="js/main.js"></script>
</body>
</html>
Comments
Post a Comment