ok
Mini Shell
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Original URL: https://themes.pixelstrap.com/multikart-app/modals-offcanvas.html
Date Downloaded: 20-09-2023 15:19:54 !-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Multikart" />
<meta name="keywords" content="Multikart" />
<meta name="author" content="Multikart" />
<link rel="manifest" href="manifest.json" />
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon" />
<title>Multikart PWA App </title>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" href="assets/images/favicon.png" />
<meta name="theme-color" content="#ff4c3b" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="multikart" />
<meta name="msapplication-TileImage" content="assets/images/favicon.png" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Google font-->
<link href="../../fonts.googleapis.com/css_e5ba3bda.css" rel="stylesheet" />
<!-- bootstrap css -->
<link rel="stylesheet" id="rtl-link" type="text/css" href="assets/css/vendors/bootstrap.css" />
<!-- slick css -->
<link rel="stylesheet" type="text/css" href="assets/css/vendors/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="assets/css/vendors/slick.css" />
<!-- iconly css -->
<link rel="stylesheet" type="text/css" href="assets/css/vendors/iconly.css" />
<!-- pricing slider css -->
<link rel="stylesheet" type="text/css" href="assets/css/vendors/pricing-slider.css" />
<!-- Theme css -->
<link rel="stylesheet" id="change-link" type="text/css" href="assets/css/style.css" />
</head>
<body>
<!-- loader strat -->
<div class="loader">
<span></span>
<span></span>
</div>
<!-- loader end -->
<!-- header start -->
<header>
<div class="back-links">
<a href="pages.html">
<i class="iconly-Arrow-Left icli"></i>
<div class="content">
<h2>Modals & Off Canvas </h2>
</div>
</a>
</div>
</header>
<!-- header end -->
<!-- modal section start -->
<section class="top-space lg-space px-15 pt-0">
<div class="row g-3">
<div class="col-12"><a class="btn btn-outline w-100" data-bs-toggle="modal" data-bs-target="#filterModal" href="javascript:void(0)">Filter Selection </a></div>
<div class="col-12"><a class="btn btn-outline w-100" data-bs-toggle="offcanvas" data-bs-target="#selectQty" href="javascript:void(0)">Select Quantity </a></div>
<div class="col-12"><a class="btn btn-outline w-100" data-bs-toggle="offcanvas" data-bs-target="#selectSize" href="javascript:void(0)">Select Size </a></div>
<div class="col-12"><a class="btn btn-outline w-100" data-bs-toggle="offcanvas" data-bs-target="#removecart" href="javascript:void(0)">Remove Cart </a></div>
</div>
</section>
<!-- modal section end -->
<!-- filter modal start -->
<div class="modal filter-modal" id="filterModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h2>Filters </h2>
<a href="javascript:void(0)" data-bs-dismiss="modal"><img src="assets/svg/x-dark.svg" class="img-fluid" alt="" /></a>
</div>
<div class="modal-body">
<div class="filter-box">
<h2 class="filter-title">Sort By: </h2>
<div class="filter-content">
<select class="form-select form-control form-theme" aria-label="Default select example">
<option selected="" />Recommended
<option value="1" />Popularity
<option value="2" />What's New
<option value="3" />Price: High to Low
<option value="4" />Price: Low to High
<option value="5" />Customer rating
</select>
</div>
</div>
<div class="filter-box">
<h2 class="filter-title">Brand: </h2>
<div class="filter-content">
<ul class="row filter-row g-3">
<li class="col-6">
<div class="filter-col">Here & Now </div>
</li>
<li class="col-6">
<div class="filter-col">Zara </div>
</li>
<li class="col-6 active">
<div class="filter-col">Mast & harbour </div>
</li>
<li class="col-6">
<div class="filter-col">Tokyo talkies </div>
</li>
<li class="col-6">
<div class="filter-col">Vogue </div>
</li>
<li class="col-6">
<div class="filter-col">gucci </div>
</li>
</ul>
</div>
</div>
<div class="filter-box">
<h2 class="filter-title">Size: </h2>
<div class="filter-content">
<ul class="row filter-row g-3">
<li class="col-4">
<div class="filter-col">small </div>
</li>
<li class="col-4">
<div class="filter-col">Medium </div>
</li>
<li class="col-4">
<div class="filter-col">large </div>
</li>
<li class="col-4">
<div class="filter-col">XL </div>
</li>
<li class="col-4">
<div class="filter-col">2XL </div>
</li>
</ul>
</div>
</div>
<div class="filter-box">
<h2 class="filter-title">Price: </h2>
<div class="filter-content">
<div class="range-slider pricing-slider">
<input type="text" class="js-range-slider" value="" />
</div>
</div>
</div>
<div class="filter-box">
<h2 class="filter-title">Occasion: </h2>
<div class="filter-content">
<ul class="row filter-row g-3">
<li class="col-6">
<div class="filter-col">Casual </div>
</li>
<li class="col-6">
<div class="filter-col">sports </div>
</li>
<li class="col-6">
<div class="filter-col">beach wear </div>
</li>
<li class="col-6">
<div class="filter-col">lounge wear </div>
</li>
<li class="col-6">
<div class="filter-col">formal </div>
</li>
<li class="col-6">
<div class="filter-col">party </div>
</li>
</ul>
</div>
</div>
<div class="filter-box">
<h2 class="filter-title">Colors: </h2>
<div class="filter-content">
<ul class="filter-color">
<li>
<div class="color-box light-purple"></div>
</li>
<li class="active">
<div class="color-box light-grey"></div>
</li>
<li>
<div class="color-box blue-purple"></div>
</li>
<li>
<div class="color-box light-orange"></div>
</li>
<li>
<div class="color-box dark-pink"></div>
</li>
<li>
<div class="color-box green-blue"></div>
</li>
<li>
<div class="color-box green"></div>
</li>
<li>
<div class="color-box blue"></div>
</li>
<li>
<div class="color-box yellow"></div>
</li>
<li>
<div class="color-box light-red"></div>
</li>
<li>
<div class="color-box light-purple2"></div>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="reset-link" data-bs-dismiss="modal">RESET </a>
<a href="javascript:void(0)" class="btn btn-solid" data-bs-dismiss="modal">apply filters </a>
</div>
</div>
</div>
</div>
<!-- filter modal end -->
<!-- select qty offcanvas start -->
<div class="offcanvas offcanvas-bottom h-auto qty-canvas" id="selectQty">
<div class="offcanvas-body small">
<h4>Select Quanity: </h4>
<div class="qty-counter">
<div class="input-group">
<button type="button" class="btn quantity-left-minus" data-type="minus" data-field="">
<img src="assets/svg/minus-square.svg" class="img-fluid" alt="" />
</button>
<input type="text" name="quantity" class="form-control form-theme qty-input input-number" value="1" />
<button type="button" class="btn quantity-right-plus" data-type="plus" data-field="">
<img src="assets/svg/plus-square.svg" class="img-fluid" alt="" />
</button>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-solid w-100" data-bs-dismiss="offcanvas">Add to Bag </a>
</div>
</div>
<!-- select qty offcanvas end -->
<!-- select size offcanvas start -->
<div class="offcanvas offcanvas-bottom h-auto qty-canvas" id="selectSize">
<div class="offcanvas-body small">
<h4>Select Size: </h4>
<div class="size-detail mb-2 mt-2">
<ul class="size-select">
<li>S </li>
<li>M </li>
<li>L </li>
<li class="disable">XL </li>
</ul>
</div>
<div class="price mb-3">
<h4>$32.00 <del>$35.00 </del><span>20% </span></h4>
</div>
<a href="javascript:void(0)" class="btn btn-solid w-100" data-bs-dismiss="offcanvas">DONE </a>
</div>
</div>
<!-- select size offcanvas end -->
<!-- remove item canvas start -->
<div class="offcanvas offcanvas-bottom h-auto removecart-canvas" id="removecart">
<div class="offcanvas-body small">
<div class="content">
<h4>Remove Item: </h4>
<p>Are you sure you ____ to remove or move ____ item from the cart? </p>
</div>
<div class="bottom-cart-panel">
<div class="row">
<div class="col-7">
<a href="wishlist.html" class="title-color">MOVE TO WISHLIST </a>
</div>
<div class="col-5">
<a href="#" class="theme-color">REMOVE </a>
</div>
</div>
</div>
</div>
</div>
<!-- remove item canvas end -->
<!-- latest jquery-->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap js-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- pricing slider js -->
<script src="assets/js/pricing-slider.js"></script>
<!-- Slick js-->
<script src="assets/js/slick.js"></script>
<!-- script js -->
<script src="assets/js/script.js"></script>
</body>
</html>
Zerion Mini Shell 1.0