simple light box fixed

all-product.html

@@ -19,6 +19,9 @@
      <!-- swiper slider css -->
      <link rel="stylesheet" href="./css/swiper-bundle.min.css">
 
+     <!-- lightbox css -->
+     <link rel="stylesheet" href="./css/simple-lightbox.css">
+
 
     <!-- custom css -->
     <link rel="stylesheet" href="./css/style.css">
@@ -1566,60 +1569,60 @@
         <!-- footer -->
         <section id="footer" class=" bg-dark text-white mt-5">
             <div class="container py-5">
-    
+
                 <div class="row  footer-border-bottom justify-content-evenly">
-    
+
                     <div class="col-12 col-lg-4">
                         <div class="py-2 footer-comp-title h3 text-center">
                             BECOME AN INSIDER
                         </div>
-    
-                        <form class="mt-2" action="">
-                            <input class="py-3 px-5 fs-5 w-100 text-center" type="text" placeholder="ENTER YOUR EMAIL ADDRESS">
+
+                        <form class="mt-2 text-center" action="">
+                            <input class="footer-input px-3 py-3 py-md-3 px-md-5 mx-auto text-center" type="text" placeholder="ENTER YOUR EMAIL ADDRESS">
                         </form>
-    
+
                         <div class="social mt-5 mb-5">
-                            <div class="footer-comp-title h4 text-center">
+                            <div class="footer-comp-title h3 text-center">
                                 FOLLOW US ON
                             </div>
-    
-                            <ul class="mt-4 d-flex justify-content-around align-items-center">
+
+                            <ul class="mt-4 d-flex justify-content-center align-items-center">
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/instragram.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-facebook.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/massenger.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-twitter.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/facebook.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-insta.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/massenger.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-pinterest.svg" alt="">
                                     </a>
-                                 </li>
-                                 <li>
+                                </li>
+                                <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/instragram.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-youtube.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                             </ul>
-    
+
                             <p class="mt-4 fw-light fs-5 text-center">hr@themallbd.com</p>
                         </div>
                     </div>
-    
+
                     <div class="col-12 col-lg-6">
-    
+
                         <div class="row justify-content-between">
-                            <div class="col-8 col-md-5 mb-5">
-                                <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3 ">HELP</div>
+                            <div class="col-6 col-md-5 mb-5">
+                                <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3  ">HELP</div>
                                 <ul>
                                     <li class="mb-2"><a href="#">ORDER</a></li>
                                     <li class="mb-2"><a href="#">DELIVERY</a></li>
@@ -1631,8 +1634,8 @@
                                     <li class="mb-2"><a href="#">THE MALL GLOBAL</a></li>
                                 </ul>
                             </div>
-    
-                            <div class="col-8 col-md-5 mb-5">
+
+                            <div class="col-6 col-md-5 mb-5">
                                 <div class="py-2 mb-3  footer-comp-title footer-border-bottom h3">OUR COMPANY</div>
                                 <ul>
                                     <li class="mb-2"><a  href="#">ABOUT US</a></li>
@@ -1643,13 +1646,13 @@
                                     <li class="mb-2"><a href="#">SITEMAP</a></li>
                                     <li class="mb-2"><a href="#">TERMS & CONDITIONS</a></li>
                                 </ul>
-    
+
                             </div>
                         </div>
                     </div>
                 </div>
-    
-                <div class="mt-4 fs-4 text-center fw-light">
+
+                <div class="copyright mt-4  text-center fw-light">
                     &copy 2022 THE MALL ALL RIGHT RESERVED
                 </div>
             </div>
@@ -1659,6 +1662,7 @@
 
 
 
+
     
     <!-- bootstrap js -->
     <script src="./js/bootstrap.bundle.min.js"></script>
@@ -1666,6 +1670,9 @@
     <!-- swiper slider js -->
     <script src="./js/swiper-bundle.min.js"></script>
 
+    <!-- lightbox js -->
+    <script src="./js/simple-lightbox.js"></script>
+
     <!-- custom js -->
     <script src="./js/app.js"></script>
 </body>

css/style.css

@@ -974,17 +974,17 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
     #product-details .product-carousel {
         box-shadow: var(--shadow-black);
+        height: 100%;
     }
 
     #product-details .thumb-container .productThumb {
-        max-height: 300px;
-        /* width: 100px !important; */
+        max-height: 350px;
         overflow: hidden;
     }
 
 
     #product-details .thumb-container .productThumb .swiper-wrapper img {
-        width: 75px !important;
+        width: 120px !important;
         height: auto !important;
     }
 

index.html

@@ -18,6 +18,9 @@
      <!-- swiper slider css -->
      <link rel="stylesheet" href="./css/swiper-bundle.min.css">
 
+     <!-- lightbox css -->
+     <link rel="stylesheet" href="./css/simple-lightbox.css">
+
 
     <!-- custom css -->
     <link rel="stylesheet" href="./css/style.css">
@@ -151,23 +154,23 @@
 
 
             <!-- shop tabs -->
-            <ul id="shop-tabs" class="nav nav-pills mb-3 mt-5 d-flexs justify-content-around justify-content-lg-end align-items-start" id="pills-tab" role="tablist">
+            <ul id="shop-tabs" class="nav nav-pills mb-3 mt-5 d-flexs justify-content-evenly  align-items-start" id="pills-tab" role="tablist">
 
                 <!-- SHOP BY BEST SELLERS -->
-                <li class="ms-0 ms-lg-5 nav-item" role="presentation">
+                <li class="ms-0  nav-item" role="presentation">
                   <button class="tabs-btn px-2 pb-2 pb-lg-3  text-gray fw-semibold active" id="shop-by-best-sellers-tab" data-bs-toggle="pill" data-bs-target="#shop-by-best-sellers" type="button" role="tab" aria-controls="shop-by-best-sellers" aria-selected="true">SHOP BY BEST SELLERS
                 </button>
                 </li>
 
                 <!-- SHOP BY SKIN TYPE -->
-                <li class="ms-0 ms-md-3 ms-lg-5 nav-item" role="presentation">
+                <li class="ms-0 ms-md-3  nav-item" role="presentation">
                   <button class="tabs-btn px-2 pb-2 pb-lg-3  text-gray fw-semibold " id="shop-by-skin-type-tab" data-bs-toggle="pill" data-bs-target="#shop-by-skin" type="button" role="tab" aria-controls="shop-by-skin" aria-selected="false">
                     SHOP BY SKIN TYPE
                     </button>
                 </li>
 
                 <!-- SHOP BY BRAND -->
-                <li class="ms-0 ms-md-3 ms-lg-5 nav-item" role="presentation">
+                <li class="ms-0 ms-md-3  nav-item" role="presentation">
                   <button class="tabs-btn px-2 pb-2 pb-lg-3  text-gray fw-semibold " id="shop-by-band-tab" data-bs-toggle="pill" data-bs-target="#shop-by-band" type="button" role="tab" aria-controls="shop-by-band" aria-selected="false">
                     SHOP BY BRAND
                     </button>
@@ -1336,7 +1339,7 @@
                 <div class="swiper-wrapper">
 
                     <div class="swiper-slide">
-                        <div class="trending-container p-2">
+                        <div class="trending-container p-3">
                             <div class="image-container">
                                 <a href="#">
                                     <img class="w-100" src="./images/home_page/trending-1.png" alt="">
@@ -1498,8 +1501,8 @@
                     </div>
 
                 </div>
-                <div class="swiper-button-next"></div>
-                <div class="swiper-button-prev"></div>
+                <!-- <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div> -->
             </div>
 
 
@@ -1509,7 +1512,7 @@
     <!-- find on instagram -->
     <section id="find-on-instagram" class="my-2 pb-3">
         <div class="container ">
-            <div class="text-center display-6 fw-semibold">FIND US ON INSTAGRAM</div>
+            <div class="text-center section-title fw-semibold">FIND US ON INSTAGRAM</div>
             <div class="mt-1 mx-auto border-image"></div>
 
             <div class="mt-3 py-3 image-container">
@@ -2076,6 +2079,8 @@
     </section>
     <!-- footer end-->
 
+
+
     
     <!-- bootstrap js -->
     <script src="./js/bootstrap.bundle.min.js"></script>
@@ -2083,6 +2088,9 @@
     <!-- swiper slider js -->
     <script src="./js/swiper-bundle.min.js"></script>
 
+    <!-- lightbox js -->
+    <script src="./js/simple-lightbox.js"></script>
+
     <!-- custom js -->
     <script src="./js/app.js"></script>
 

js/app.js

@@ -294,9 +294,6 @@
 
 // simple light box
 
-    // (function() {
-    //     var $gallery = new SimpleLightbox('.gallery  a', {});
-    // })()
   
   let gallery =  new SimpleLightbox('.gallery a', {});
 

product-details.html

@@ -145,7 +145,7 @@
                 <div class="row">
 
                     <!-- product carousel -->
-                    <div class="col-12 col-lg-7 col-xl-7">
+                    <div class="col-12 col-lg-7 col-xl-7 ">
                         <div class="product-carousel d-flex flex-column flex-lg-row align-items-center">
 
                             <!-- thumb slider -->
@@ -158,7 +158,7 @@
                                         </div>
                                         
                                         <div class="swiper-slide ">
-                                            <img src="./images/product_details/product image.png" />
+                                            <img src="./images/product_details/product.jpg" />
                                         </div>
                                         
                                         <div class="swiper-slide ">
@@ -166,7 +166,7 @@
                                         </div>
                                         
                                         <div class="swiper-slide ">
-                                            <img src="./images/product_details/product image.png" />
+                                            <img src="./images/product_details/product.jpg" />
                                         </div>
                                         
                                         <div class="swiper-slide ">
@@ -174,7 +174,7 @@
                                         </div>
                                         
                                         <div class="swiper-slide ">
-                                            <img src="./images/product_details/product image.png" />
+                                            <img src="./images/product_details/product.jpg" />
                                         </div>
 
                                     </div>
@@ -191,7 +191,7 @@
                                         </div>
 
                                         <div class="swiper-slide">
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
+                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
                                         </div>
 
                                         <div class="swiper-slide">
@@ -199,7 +199,7 @@
                                         </div>
 
                                         <div class="swiper-slide">
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
+                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
                                         </div>
 
                                         <div class="swiper-slide">
@@ -207,7 +207,7 @@
                                         </div>
 
                                         <div class="swiper-slide">
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
+                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
                                         </div>
 
 
@@ -802,7 +802,7 @@
                             <!-- product image -->
                             <a href="./product-details.html">
                                 <div class="image-container text-center">
-                                    <img class="h-100" src="./images/product_details/also-product.png" alt="">
+                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
                                 </div>
                             </a>
 
@@ -862,7 +862,7 @@
                             <!-- product image -->
                             <a href="./product-details.html">
                                 <div class="image-container text-center">
-                                    <img class="h-100" src="./images/product_details/also-product.png" alt="">
+                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
                                 </div>
                             </a>
 
@@ -922,7 +922,7 @@
                             <!-- product image -->
                             <a href="./product-details.html">
                                 <div class="image-container text-center">
-                                    <img class="h-100" src="./images/product_details/also-product.png" alt="">
+                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
                                 </div>
                             </a>
 
@@ -982,7 +982,7 @@
                             <!-- product image -->
                             <a href="./product-details.html">
                                 <div class="image-container text-center">
-                                    <img class="h-100" src="./images/product_details/also-product.png" alt="">
+                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
                                 </div>
                             </a>
 
@@ -1042,7 +1042,7 @@
                             <!-- product image -->
                             <a href="./product-details.html">
                                 <div class="image-container text-center">
-                                    <img class="h-100" src="./images/product_details/also-product.png" alt="">
+                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
                                 </div>
                             </a>
 
@@ -1105,60 +1105,60 @@
         <!-- footer -->
         <section id="footer" class=" bg-dark text-white mt-5">
             <div class="container py-5">
-    
+
                 <div class="row  footer-border-bottom justify-content-evenly">
-    
+
                     <div class="col-12 col-lg-4">
                         <div class="py-2 footer-comp-title h3 text-center">
                             BECOME AN INSIDER
                         </div>
-    
-                        <form class="mt-2" action="">
-                            <input class="py-3 px-5 fs-5 w-100 text-center" type="text" placeholder="ENTER YOUR EMAIL ADDRESS">
+
+                        <form class="mt-2 text-center" action="">
+                            <input class="footer-input px-3 py-3 py-md-3 px-md-5 mx-auto text-center" type="text" placeholder="ENTER YOUR EMAIL ADDRESS">
                         </form>
-    
+
                         <div class="social mt-5 mb-5">
-                            <div class="footer-comp-title h4 text-center">
+                            <div class="footer-comp-title h3 text-center">
                                 FOLLOW US ON
                             </div>
-    
-                            <ul class="mt-4 d-flex justify-content-around align-items-center">
+
+                            <ul class="mt-4 d-flex justify-content-center align-items-center">
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/instragram.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-facebook.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/massenger.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-twitter.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/facebook.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-insta.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                                 <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/massenger.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-pinterest.svg" alt="">
                                     </a>
-                                 </li>
-                                 <li>
+                                </li>
+                                <li>
                                     <a href="#">
-                                        <img class="social-icon" src="./images/icon/instragram.svg" alt="">
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-youtube.svg" alt="">
                                     </a>
-                                 </li>
+                                </li>
                             </ul>
-    
+
                             <p class="mt-4 fw-light fs-5 text-center">hr@themallbd.com</p>
                         </div>
                     </div>
-    
+
                     <div class="col-12 col-lg-6">
-    
+
                         <div class="row justify-content-between">
-                            <div class="col-8 col-md-5 mb-5">
-                                <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3 ">HELP</div>
+                            <div class="col-6 col-md-5 mb-5">
+                                <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3  ">HELP</div>
                                 <ul>
                                     <li class="mb-2"><a href="#">ORDER</a></li>
                                     <li class="mb-2"><a href="#">DELIVERY</a></li>
@@ -1170,8 +1170,8 @@
                                     <li class="mb-2"><a href="#">THE MALL GLOBAL</a></li>
                                 </ul>
                             </div>
-    
-                            <div class="col-8 col-md-5 mb-5">
+
+                            <div class="col-6 col-md-5 mb-5">
                                 <div class="py-2 mb-3  footer-comp-title footer-border-bottom h3">OUR COMPANY</div>
                                 <ul>
                                     <li class="mb-2"><a  href="#">ABOUT US</a></li>
@@ -1182,13 +1182,13 @@
                                     <li class="mb-2"><a href="#">SITEMAP</a></li>
                                     <li class="mb-2"><a href="#">TERMS & CONDITIONS</a></li>
                                 </ul>
-    
+
                             </div>
                         </div>
                     </div>
                 </div>
-    
-                <div class="mt-4 fs-4 text-center fw-light">
+
+                <div class="copyright mt-4  text-center fw-light">
                     &copy 2022 THE MALL ALL RIGHT RESERVED
                 </div>
             </div>