cart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="style.css" />
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">E-shopper</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Categories
              </a>
              <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="/#products">Cameras</a></li>
                <li><a class="dropdown-item" href="/#products">Apple Gadgets</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="/#products">Drones</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/cart.html" tabindex="-1">
                Cart<i class="bi bi-cart-plus-fill"></i> 
                <span class="cart-badge badge bg-success">4</span></a>
            </li>
          </ul>
          <ul class="navbar-nav mb-2 mb-lg-0 mx-lg-2 order-sm-last">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="myaccount" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                My Account
              </a>
              <ul class="dropdown-menu bg-dark text-light" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="/#" data-bs-toggle="modal" data-bs-target="#exampleModal">My Orders</a></li>
                <li><a class="dropdown-item" href="/#" data-bs-toggle="modal" data-bs-target="#exampleModal">Profile</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="/#">Logout</a></li>
              </ul>
            </li>
          </ul>
          <form class="d-flex search-form">
            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-success" type="submit" data-bs-toggle="tooltip" data-bs-placement="left" title="Search for all products">
              <i class="bi bi-search"></i>
            </button>
          </form>
         
        </div>
      </div>
    </nav>
    <!-- End of Navigation -->

    <div class="container mb-5">
      <div class="d-flex flex-row align-items-start">
        <div class="col-8 d-flex flex-column m-2">
          <div class="cart-item p-3">
            <div class="d-flex flex-row">
              <img
                class="col-2 img-fluid"
                src="images/product-1-square.jpg"
                alt=""
              />
              <div class="col-6 p-2">
                <h5>Product Name</h5>
                <h6>Brand</h6>
                <p>$100</p>
              </div>
              <div class="col-2 p-2">
                Quatity
                <select name="" id="">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
              <div data-bs-toggle="modal" data-bs-target="#removeItemModal"
                class="col-2 d-flex justify-content-end align-items-start close"
              >
                <i class="bi bi-x-circle"></i>
              </div>
            </div>
          </div>
          <div class="cart-item p-3">
            <div class="d-flex flex-row">
              <img
                class="col-2 img-fluid"
                src="images/product-1-square.jpg"
                alt=""
              />
              <div class="col-6 p-2">
                <h5>Product Name</h5>
                <h6>Brand</h6>
                <p>$100</p>
              </div>
              <div class="col-2 p-2">
                Quatity
                <select name="" id="">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
              <div data-bs-toggle="modal" data-bs-target="#removeItemModal"
                class="col-2 d-flex justify-content-end align-items-start close"
              >
                <i class="bi bi-x-circle"></i>
              </div>
            </div>
          </div>
          <div class="cart-item p-3">
            <div class="d-flex flex-row">
              <img
                class="col-2 img-fluid"
                src="images/product-1-square.jpg"
                alt=""
              />
              <div class="col-6 p-2">
                <h5>Product Name</h5>
                <h6>Brand</h6>
                <p>$100</p>
              </div>
              <div class="col-2 p-2">
                Quatity
                <select name="" id="">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
              <div data-bs-toggle="modal" data-bs-target="#removeItemModal"
                class="col-2 d-flex justify-content-end align-items-start close"
              >
                <i class="bi bi-x-circle"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4 order p-3 m-2">
          <h4>Order Total</h4>
          <div class="d-flex flex-row py-2">
            <input type="text" class="form-control" placeholder="promo code" />
            <button class="btn btn-primary">Apply</button>
          </div>
          <div class="d-flex flex-row justify-content-between p-2">
            <span class="billing-item">items</span>
            <span class="billing-cost">$100</span>
          </div>
          <div class="d-flex flex-row justify-content-between p-2">
            <span class="billing-item">Shipping</span>
            <span class="billing-cost">$10</span>
          </div>
          <div class="d-flex flex-row justify-content-between p-2">
            <span class="billing-item">Discount</span>
            <span class="billing-cost">-$10</span>
          </div>
          <div class="d-flex flex-row justify-content-between p-2">
            <span class="billing-item fs-5">Total</span>
            <span class="billing-cost fs-5">$100</span>
          </div>

          <div class="d-flex mt-3">
              <a href="/checkout.html" class="btn btn-primary flex-grow-1">Pay Now</a>
          </div>
        </div>
      </div>
    </div>

    <div class="footer mt-auto bg-dark text-light">
      <div class="container py-3">
          <div class="row d-flex footer-items">
              <div class="col-lg-4">
                  <h5>Categories</h5>
                  <ul>
                      <li><a href="#">Watches</a></li>
                      <li><a href="#">Mobiles</a></li>
                      <li><a href="#">Tablets</a></li>
                      <li><a href="#">Audio</a></li>
                      <li><a href="#">Drones</a></li>
                  </ul>
              </div>
              <div class="col-lg-4">
                 <h5>Useful Links</h5>
                 <ul>
                     <li><a href="#">Terms</a></li>
                     <li><a href="#">Privacy</a></li>
                     <li><a href="#">About us</a></li>
                     <li><a href="#">Mission</a></li>
                 </ul>
             </div>
             <div class="col-lg-4">
                 <h5>Get Updates</h5>
                 <div class="d-flex subscribe">
                     <input type="text" class="form-control">
                     <button class="btn btn-warning">Subscribe</button>
                 </div>
                 <div class="mt-2">
                  <div class="btn-group me-2 social-icons" role="group" aria-label="First group">
                    <button type="button" class="btn btn-secondary mx-1 d-flex flex-column justify-content-center align-items-center">
                      <i class="bi bi-facebook"></i>
                    </button>
                    <button type="button" class="btn btn-secondary mx-1 d-flex flex-column justify-content-center align-items-center">
                      <i class="bi bi-instagram"></i>
                    </button>                      
                    <button type="button" class="btn btn-secondary mx-1 d-flex flex-column justify-content-center align-items-center">
                      <i class="bi bi-twitter"></i>
                    </button>                      
                    <button type="button" class="btn btn-secondary mx-1 d-flex flex-column justify-content-center align-items-center">
                      <i class="bi bi-linkedin"></i>
                    </button>                   
                   </div>
                 </div>
             </div>
         </div>
         <div class="row text-center">
           <span>@coderdost</span>
         </div>
      </div>
   
  </div>
  <!-- End of Footer -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">My Account</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            You will need to Login of Check your account.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <a type="button" href="login.html" class="btn btn-primary">Go To Login</a>
          </div>
        </div>
      </div>
    </div>
       <!-- End of Modal -->

       <div class="modal fade" id="removeItemModal" tabindex="-1" aria-labelledby="removeItemModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="removeItemModalLabel">Removing Item</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              Are you sure you want to remove this item from your cart ?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">NO</button>
              <button type="button" class="btn btn-success" data-bs-dismiss="modal">YES</a>
            </div>
          </div>
        </div>
      </div>
         <!-- End of Modal -->
     <script src="app.js"></script>
  </body>
</html>