ok

Mini Shell

Direktori : /home2/selectio/www/wedding-info-new/
Upload File :
Current File : /home2/selectio/www/wedding-info-new/modals-offcanvas.html

<!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