Home Explore Help
Register Sign In
ShofiqulShuvo
/
TheMallBd
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

navbar responsive done

@Mostafijur 1 year ago
parent
f58d0f8a84
commit
5c8c23fbe4
16 changed files with 5092 additions and 2551 deletions
Unified View Show Diff Stats
  1. 17 7
      all-product.html
  2. 733 0
      checkout.html
  3. 434 4
      css/style.css
  4. 0 3
      images/icon/Cart-icon.svg
  5. 3 0
      images/icon/arrow-down-solid.svg
  6. 6 0
      images/icon/bkash.svg
  7. 5 0
      images/icon/burger-menu.svg
  8. 4 0
      images/icon/money-hand.svg
  9. 22 0
      images/icon/regular delivery.svg
  10. 4 0
      images/icon/selected.svg
  11. 26 0
      images/icon/the mall delivery.svg
  12. 10 0
      images/icon/user.svg
  13. 6 0
      images/icon/visa.svg
  14. 2454 1696
      index.html
  15. 192 62
      js/app.js
  16. 1176 779
      product-details.html

+ 17 - 7
all-product.html
View File 

@@ -1520,12 +1520,13 @@
 
                             </div>
 
                             </div>
 
 
 
                             <div class="text-center w-50">
 
                             <div class="text-center w-50">
 
-                                <button class="btn  rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
 
+                                <a href="./checkout.html" class="btn  rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
 
                                     PROCEED 
                                     PROCEED 
-                                </button>
 
+                                </a>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
+
 
                 </div>
 
                 </div>
 
 
 
             
             
@@ -1548,12 +1549,21 @@
 
                 <!-- checkout navigation button for mobile -->
 
                 <!-- checkout navigation button for mobile -->
 
                 <div id="checkout-btn-mobile" class="d-block">
 
                 <div id="checkout-btn-mobile" class="d-block">
 
                     <div class="checkout-mobile d-flex position-fixed bottom-0 start-0  d-block d-lg-none shadow-sm" >
 
                     <div class="checkout-mobile d-flex position-fixed bottom-0 start-0  d-block d-lg-none shadow-sm" >
 
-                        <div class=" border-0 py-2 bg-pink-extralight w-50 text-center">
 
-                            <span>
 
-                                <img src="./images/icon/Cart-icon.svg" alt="">
 
-                            </span>
 
-                            <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
 
+
 
+                        <div class="border-0 py-2 bg-pink-extralight w-50 text-center">
 
+
 
+                            <div class="cart-details position-relative mx-auto">
 
+
 
+                                <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
 
+    
+                                <!-- total -->
 
+                                <span class="total position-absolute text-deep-red">
 
+                                    500000 ৳ 
+                                </span>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+
 
+                        <!-- checkout nav button -->
 
                         <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
 
                         <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
 
                             Go To Checkout 
                             Go To Checkout 
                         </button>
 
                         </button>

+ 733 - 0
checkout.html
View File 

@@ -0,0 +1,733 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+
 
+        <!-- fonts -->
 
+        <link rel="preconnect" href="https://fonts.googleapis.com">
 
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">  
+    
+    
+        <!-- bootstrap css -->
 
+        <link rel="stylesheet" href="./css/bootstrap.min.css">
 
+    
+         <!-- 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">
 
+
 
+    <title>Checkout</title>
 
+</head>
 
+<body>
 
+    
+    
+        <!-- nav header -->
 
+        <section id="header">
 
+            
+            <!-- offrer -->
 
+            <div class="offer bg-pink text-white py-1">
 
+                <div class="container">
 
+                    <p class="text-center px-2 py-1">
 
+                        free delivery over dhaka over 999 Delivery policy (Inside Dhaka delivery within 24hrs, Outside Dhaka delivery within 72hrs)
 
+                    </p>
 
+                </div>
 
+            </div>
 
+
 
+            <!-- upper nav -->
 
+            <div id="uper-nav" class="bg-white">
 
+                <div class="container py-1">
 
+                    <div class="d-flex justify-content-between align-items-center w-100">
 
+
 
+                        <!-- brand logo -->
 
+                        <div class="brand-logo">
 
+                            <img src="./images/navbar/brand-logo.svg" alt="">
 
+                        </div>
 
+
 
+                        <!-- search box -->
 
+                        <div class="search flex-fill px-5">
 
+                            <div class="  form-group   position-relative ">
 
+                                <label for="search-box" class="search-icon position-absolute">
 
+                                    <img src="./images/icon/search.svg" alt="">
 
+                                </label>
 
+                                <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
 
+                            </div>
 
+                        </div>
 
+
 
+                        <!-- link  -->
 
+                        <div class="link-box d-flex align-items-center">
 
+                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
 
+                                <img class="link-icon" src="./images/navbar/group.png" alt="">
 
+                            </a>
 
+                            <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
 
+                                <img class="link-icon" src="./images/navbar/face.png" alt="">
 
+                                <div>
 
+                                    <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
 
+                                    <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
 
+                                </div>
 
+                            </a>
 
+                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
 
+                                <img class="link-icon" src="./images/navbar/message.png" alt="">
 
+                            </a>
 
+                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
 
+                                <img class="link-icon" src="./images/navbar/heart.png" alt="">
 
+                            </a>
 
+                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
 
+                                <img class="link-icon" src="./images/navbar/bascket.png" alt="">
 
+                            </a>
 
+                        </div>
 
+
 
+                    </div>
 
+                </div>
 
+            </div>
 
+
 
+            <!-- main navigation -->
 
+            <div class="main-nav bg-black text-white">
 
+                <div class="container py-2">
 
+                    <ul class="d-flex align-items-center justify-content-between px-1">
 
+                        <li>Makeup</li>
 
+                        <li>Skincare</li>
 
+                        <li>K beauty</li>
 
+                        <li>Heir</li>
 
+                        <li>Man</li>
 
+                        <li>Baby</li>
 
+                        <li>Fragnance</li>
 
+                        <li>Healthcare</li>
 
+                        <li>Lifestyle</li>
 
+                        <li>pet</li>
 
+                        <li>Gifts</li>
 
+                        <li>Brands</li>
 
+                        <li>Makeup</li>
 
+                        <li>
 
+                            <button class="btn btn-sm btn-pink px-3">Blog</button>
 
+                        </li>
 
+                        <li>
 
+                            <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
 
+                        </li>
 
+                        <li>
 
+                            <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
 
+                        </li>
 
+                    </ul>
 
+                </div>
 
+            </div>
 
+
 
+        </section>
 
+
 
+
 
+        <!-- checkpot  -->
 
+
 
+        <section id="checkout-page">
 
+            <div class="container py-4">
 
+
 
+                <!-- title -->
 
+                <div class="section-title text-start py-3 border-bottom border-2 border-extralight-black">CHECKOUT</div>
 
+
 
+                <div class="mt-3 p-3 bg-pink-light text-pink fs-1">
 
+                    Hello Shuvo, You are our VIP customer.
 
+                </div>
 
+
 
+                <!-- checkout section -->
 
+                <div class="row mt-3">
 
+
 
+                    <!-- checkout steper form -->
 
+                    <div class="col-12 col-lg-7">
 
+                        <div class="checkout-container px-4 py-5">
 
+                            <form id="checkoutForm" action="#!">
 
+
 
+                                <!-- start step indicators -->
 
+                                <div class="form-header d-flex mb-4">
 
+                                    <span class="stepIndicator">Delivery Address</span>
 
+                                    <span class="stepIndicator">Shipping Method</span>
 
+                                    <span class="stepIndicator">Payment</span>
 
+                                </div>
 
+                                <!-- end step indicators -->
 
+                            
+                                <!-- step one -->
 
+                                <div class="step pt-5">
 
+
 
+                                    <div class="mb-3">
 
+                                        <select id="address" class=" form-select text-gray bg-gray-extralight border-0 rounded-0" aria-label="Default select example"  >
 
+                                            <option selected value="">Select your delivery address</option>
 
+                                            <option value="1">One</option>
 
+                                            <option value="2">Two</option>
 
+                                            <option value="3">Three</option>
 
+                                          </select>
 
+                                    </div>
 
+
 
+                                    <div class="mb-3 d-flex flex-column flex-md-row gap-3">
 
+                                        <input type="text" placeholder="First Name"  name="first-name">
 
+                                        <input type="text" placeholder="Last Name"  name="password">
 
+                                    </div>
 
+
 
+                                    <div class="mb-3">
 
+                                        <textarea placeholder="Address" name="address" id="" cols="30" rows="2" ></textarea>
 
+                                    </div>
 
+
 
+                                    <div class="mb-3">
 
+                                        <select class="form-select text-gray border-0 rounded-0 w-100" aria-label="Default select example"  >
 
+                                            <option selected value="">City</option>
 
+                                            <option value="1">One</option>
 
+                                            <option value="2">Two</option>
 
+                                            <option value="3">Three</option>
 
+                                          </select>
 
+                                    </div>
 
+
 
+                                    <div class="mb-3 d-flex flex-column flex-md-row gap-3">
 
+                                        <input type="text" placeholder="Phone Number"  name="phone">
 
+                                    </div>
 
+
 
+                                </div>
 
+
 
+                            
+                                <!-- step two -->
 
+                                <div class="step py-4">
 
+
 
+                                    <div class="d-flex flex-wrap justify-content-center  gap-4">
 
+
 
+                                        <!-- the mall delivery -->
 
+                                        <div class="position-relative delivery-method text-gray rounded-1 ">
 
+
 
+                                            <input type="radio" id="mall-delivery-services" name="delivery">
 
+
 
+                                            <label for="mall-delivery-services" class="p-3 py-4">
 
+
 
+                                                <!-- icon -->
 
+                                                <div class="icon text-center mx-auto">
 
+                                                    <img src="./images/icon/the mall delivery.svg" alt="">
 
+                                                </div>
 
+
 
+                                                <!-- service name -->
 
+                                                <div class="fw-semibold fs-5 text-center">
 
+                                                    The Mall Delivery Service
 
+                                                </div>
 
+
 
+                                                <!-- notice -->
 
+                                                <div class="text-center">
 
+                                                    (within Dhaka only)
 
+                                                </div>
 
+
 
+                                                <!-- delivery fee -->
 
+                                                <div class="delivery-fee mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery Fees</span>
 
+                                                    <span class="text-black">Tk 45</span>
 
+                                                </div>
 
+
 
+                                                <!-- delivery time -->
 
+                                                <div class="delivery-time mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery Time</span>
 
+                                                    <span class="text-black">24-48h</span>
 
+                                                </div>
 
+
 
+                                                <!-- delivery in -->
 
+                                                <div class="delivery-in mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery in </span>
 
+                                                    <span class="text-black">Home</span>
 
+                                                </div>
 
+
 
+
 
+                                            </label>
 
+
 
+                                             <!-- selected icon -->
 
+                                            <div class="selected">
 
+                                                <img src="./images/icon/selected.svg" alt="">
 
+                                            </div>
 
+                                        </div>
 
+
 
+                                        <!-- other delivery -->
 
+                                        <div class="position-relative delivery-method text-gray rounded-1 ">
 
+
 
+                                            <input type="radio" id="regular-delivery-services" name="delivery">
 
+
 
+                                            <label for="regular-delivery-services" class="p-3 py-4">
 
+
 
+                                                <!-- icon -->
 
+                                                <div class="icon text-center mx-auto">
 
+                                                    <img src="./images/icon/regular delivery.svg" alt="">
 
+                                                </div>
 
+
 
+                                                <!-- service name -->
 
+                                                <div class="fw-semibold fs-5 text-center">
 
+                                                    Regular Delivery Service
 
+                                                </div>
 
+
 
+                                                <!-- notice -->
 
+                                                <div class="text-center">
 
+                                                    (Outside Dhaka )
 
+                                                </div>
 
+
 
+                                                <!-- delivery fee -->
 
+                                                <div class="delivery-fee mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery Fees</span>
 
+                                                    <span class="text-black">Tk 45</span>
 
+                                                </div>
 
+
 
+                                                <!-- delivery time -->
 
+                                                <div class="delivery-time mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery Time</span>
 
+                                                    <span class="text-black">24-48h</span>
 
+                                                </div>
 
+
 
+                                                <!-- delivery in -->
 
+                                                <div class="delivery-in mt-2 py-2 d-flex justify-content-between align-items-center border-bottom border-1 border-extralight-gray">
 
+                                                    <span class="text-light-gray">Delivery in </span>
 
+                                                    <span class="text-black">Home</span>
 
+                                                </div>
 
+
 
+
 
+                                            </label>
 
+
 
+                                            <!-- selected icon -->
 
+                                            <div class="selected">
 
+                                                <img src="./images/icon/selected.svg" alt="">
 
+                                            </div>
 
+                                        </div>
 
+
 
+
 
+                                    </div>
 
+                                   
+                                </div>
 
+
 
+                            
+                                <!-- step three -->
 
+                                <div class="step py-5">
 
+                                    
+                                    <div class="d-flex flex-column justify-content-center align-items-center flex-wrap gap-3">
 
+
 
+                                        <!-- cashon payment -->
 
+                                        <div class="position-relative payment-type text-gray rounded-1">
 
+
 
+                                            <input class="position-absolute " type="radio" id="cash-on" name="delivery">
 
+
 
+                                            <label for="cash-on" class="d-flex justify-content-center align-items-center  px-5 py-2">
 
+
 
+                                               <span>
 
+                                                    <img class="" src="./images/icon/money-hand.svg" alt="">
 
+                                               </span>
 
+
 
+                                               <span class="ms-2">
 
+                                                    Cash on Delivery
 
+                                               </span>
 
+
 
+                                            </label>
 
+
 
+                                            <!-- selected icon -->
 
+                                            <div class="selected">
 
+                                                <img src="./images/icon/selected.svg" alt="">
 
+                                            </div>
 
+
 
+                                        </div>
 
+
 
+                                        <!-- bkash payment -->
 
+                                        <div class="position-relative payment-type text-gray rounded-1 ">
 
+
 
+                                            <input  type="radio" id="bkash" name="delivery">
 
+
 
+                                            <label for="bkash" class="d-flex justify-content-center align-items-center px-5 py-2">
 
+
 
+                                               <span>
 
+                                                    <img class="" src="./images/icon/bkash.svg" alt="">
 
+                                               </span>
 
+
 
+                                               <span class="ms-2">
 
+                                                    Pay By Bkash
 
+                                               </span>
 
+
 
+                                            </label>
 
+
 
+                                            <!-- selected icon -->
 
+                                            <div class="selected">
 
+                                                <img src="./images/icon/selected.svg" alt="">
 
+                                            </div>
 
+
 
+                                        </div>
 
+
 
+                                        <!-- visa card payment -->
 
+                                        <div class="position-relative payment-type text-gray rounded-1">
 
+
 
+                                            <input  type="radio" id="visa-card" name="delivery">
 
+
 
+                                            <label for="visa-card" class="d-flex justify-content-center align-items-center  px-5 py-2">
 
+
 
+                                               <span>
 
+                                                    <img class="" src="./images/icon/visa.svg" alt="">
 
+                                               </span>
 
+
 
+                                               <span class="ms-2">
 
+                                                Visa/MasterCard
 
+                                               </span>
 
+
 
+                                            </label>
 
+
 
+                                            <!-- selected icon -->
 
+                                            <div class="selected">
 
+                                                <img src="./images/icon/selected.svg" alt="">
 
+                                            </div>
 
+
 
+                                        </div>
 
+
 
+
 
+                                    </div>
 
+                                    
+                                    
+
 
+                                </div>
 
+                            
+                                <!-- start previous / next buttons -->
 
+                                <div class="form-footer d-flex">
 
+                                    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
 
+                                    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
 
+                                </div>
 
+                                <!-- end previous / next buttons -->
 
+                            </form>
 
+                        </div>
 
+                    </div>
 
+
 
+
 
+                    <!-- order summery -->
 
+                    <div class="col-12 col-lg-5 mt-3 mt-lg-0">
 
+                        <div class="order-summery py-4 px-3">
 
+
 
+                            <!-- title -->
 
+                            <div class="pb-2 fs-5 text-gray border-bottom border-1 border-extralight-gray">
 
+                                Order Summary
 
+                            </div>
 
+
 
+                            <!-- summery products -->
 
+                            <div class="summery-products">
 
+
 
+                                <!-- product -->
 
+                                <div class="product position-relative pt-2 mt-2 border-bottom border-1 border-extralight-black">
 
+
 
+                                    <!-- product details -->
 
+                                    <div class="details row mb-3">
 
+
 
+                                        <!-- product picture -->
 
+                                        <div class="col-3">
 
+                                            <img class="w-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <!-- product details -->
 
+                                        <div class="col-9">
 
+                                            <div class="title w-75 fs-5 text-light-gray">
 
+                                                Clear Men Cool Sport Menthol Shampoo 450ml
 
+                                            </div>
 
+
 
+                                            <!-- count and price -->
 
+                                            <div class="mt-2 d-flex justify-content-between align-items-center">
 
+
 
+                                                <!-- count -->
 
+                                                <div class=" count-container px-1 border border-1 border-light-gray rounded-0 d-flex">
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/minus.svg" alt="">
 
+                                                    </div>
 
+                                                    <div class="mx-2 count">1</div>
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/plus.svg" alt="">
 
+                                                    </div>
 
+                                                </div>
 
+
 
+                                                <!-- product price -->
 
+                                                <div class="fs-6 pe-3">
 
+                                                    <span class="text-decoration-line-through text-light-gray">৳ 600 </span>
 
+                                                    <span class="ms-3 text-deep-red">৳ 510 </span>
 
+                                                </div>
 
+                                            </div>
 
+
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    
+                                    <!-- discount notice -->
 
+                                    <div class="discount-notice mt-2">
 
+                                        <span class="text-black bg-orange-vivid-light px-2 py-1">VIP: 10% Off</span>
 
+                                        <span class="text-deep-red ms-2">25% Discount Notice</span>
 
+                                    </div>
 
+
 
+                                    <!-- clear btn -->
 
+                                    <div class="btn clear-btn position-absolute top-0 end-0">
 
+                                        <img  src="./images/icon/cross-icon.svg" alt="">
 
+                                    </div>
 
+
 
+                                </div>
 
+
 
+                                <!-- product -->
 
+                                <div class="product position-relative pt-2 mt-2 border-bottom border-1 border-extralight-black">
 
+
 
+                                    <!-- product details -->
 
+                                    <div class="details row mb-3">
 
+
 
+                                        <!-- product picture -->
 
+                                        <div class="col-3">
 
+                                            <img class="w-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <!-- product details -->
 
+                                        <div class="col-9">
 
+                                            <div class="title w-75 fs-5 text-light-gray">
 
+                                                Clear Men Cool Sport Menthol Shampoo 450ml
 
+                                            </div>
 
+
 
+                                            <!-- count and price -->
 
+                                            <div class="mt-2 d-flex justify-content-between align-items-center">
 
+
 
+                                                <!-- count -->
 
+                                                <div class=" count-container px-1 border border-1 border-light-gray rounded-0 d-flex">
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/minus.svg" alt="">
 
+                                                    </div>
 
+                                                    <div class="mx-2 count">1</div>
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/plus.svg" alt="">
 
+                                                    </div>
 
+                                                </div>
 
+
 
+                                                <!-- product price -->
 
+                                                <div class="fs-6 pe-3">
 
+                                                    <span class="text-decoration-line-through text-light-gray">৳ 600 </span>
 
+                                                    <span class="ms-3 text-deep-red">৳ 510 </span>
 
+                                                </div>
 
+                                            </div>
 
+
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    
+                                    <!-- discount notice -->
 
+                                    <div class="discount-notice mt-2">
 
+                                        <span class="text-black bg-orange-vivid-light px-2 py-1">VIP: 10% Off</span>
 
+                                        <span class="text-deep-red ms-2 d-none">25% Discount Notice</span>
 
+                                    </div>
 
+
 
+                                    <!-- clear btn -->
 
+                                    <div class="btn clear-btn position-absolute top-0 end-0">
 
+                                        <img  src="./images/icon/cross-icon.svg" alt="">
 
+                                    </div>
 
+
 
+                                </div>
 
+
 
+                                <!-- product -->
 
+                                <div class="product position-relative pt-2 mt-2 border-bottom border-1 border-extralight-black">
 
+
 
+                                    <!-- product details -->
 
+                                    <div class="details row mb-3">
 
+
 
+                                        <!-- product picture -->
 
+                                        <div class="col-3">
 
+                                            <img class="w-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <!-- product details -->
 
+                                        <div class="col-9">
 
+                                            <div class="title w-75 fs-5 text-light-gray">
 
+                                                Clear Men Cool Sport Menthol Shampoo 450ml
 
+                                            </div>
 
+
 
+                                            <!-- count and price -->
 
+                                            <div class="mt-2 d-flex justify-content-between align-items-center">
 
+
 
+                                                <!-- count -->
 
+                                                <div class=" count-container px-1 border border-1 border-light-gray rounded-0 d-flex">
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/minus.svg" alt="">
 
+                                                    </div>
 
+                                                    <div class="mx-2 count">1</div>
 
+                                                    <div class="btn p-1">
 
+                                                        <img class="count-btn" src="./images/icon/plus.svg" alt="">
 
+                                                    </div>
 
+                                                </div>
 
+
 
+                                                <!-- product price -->
 
+                                                <div class="fs-6 pe-3">
 
+                                                    <span class="text-decoration-line-through text-light-gray">৳ 600 </span>
 
+                                                    <span class="ms-3 text-deep-red">৳ 510 </span>
 
+                                                </div>
 
+                                            </div>
 
+
 
+                                        </div>
 
+                                        
+                                    </div>
 
+
 
+
 
+                                    <!-- discount notice -->
 
+                                    <div class="d-none discount-notice mt-2 ">
 
+                                        <span class="text-black bg-orange-vivid-light px-2 py-1">VIP: 10% Off</span>
 
+                                        <span class="text-deep-red ms-2">25% Discount Notice</span>
 
+                                    </div>
 
+
 
+                                    <!-- clear btn -->
 
+                                    <div class="btn clear-btn position-absolute top-0 end-0">
 
+                                        <img  src="./images/icon/cross-icon.svg" alt="">
 
+                                    </div>
 
+
 
+                                </div>
 
+
 
+                            </div>
 
+
 
+                            <!-- cupon -->
 
+                            <form class="cupon mt-3" action="">
 
+                                <div class="d-flex justify-content-between border border-2 border-pink">
 
+                                    <input class="border-0 text-light-gray px-3 fs-4 fw-light flex-fill" type="text">
 
+                                    <button class="btn rounded-0 bg-pink text-white fs-4">Apply</button>
 
+                                </div>
 
+                            </form>
 
+
 
+
 
+                            <!-- price summery -->
 
+                            <div class="price-summery mt-4">
 
+
 
+                                <!-- subtotal -->
 
+                                <div class="mt-3 d-flex justify-content-between align-items-center text-gray fs-5">
 
+                                    <span>Subtotal</span>
 
+                                    <span>৳ 2,040</span>
 
+                                </div>
 
+
 
+                                <!-- Delivery Charge -->
 
+                                <div class="mt-3 d-flex justify-content-between align-items-center text-gray fs-5">
 
+                                    <span>Delivery Charge</span>
 
+                                    <span>৳ 60</span>
 
+                                </div>
 
+
 
+                                <!-- Discount -->
 
+                                <div class="mt-3 d-flex justify-content-between align-items-center text-gray fs-5">
 
+                                    <span>Discount</span>
 
+                                    <span>৳ 850</span>
 
+                                </div>
 
+
 
+                                <!-- Coupon/ Voucher -->
 
+                                <div class="mt-3 d-flex justify-content-between align-items-center text-gray fs-5">
 
+                                    <span>Coupon/ Voucher</span>
 
+                                    <span>৳ 50</span>
 
+                                </div>
 
+
 
+                                <!-- Total -->
 
+                                <div class="mt-3 d-flex justify-content-between align-items-center text-gray fs-5">
 
+                                    <span>Total</span>
 
+                                    <span class="text-black fw-semibold">৳ 2,100</span>
 
+                                </div>
 
+
 
+                            </div>
 
+
 
+                        </div>
 
+                    </div>
 
+
 
+                </div>
 
+
 
+            </div>
 
+        </section>
 
+
 
+    
+    
+        <!-- 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 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 h3 text-center">
 
+                                FOLLOW US ON
 
+                            </div>
 
+
 
+                            <ul class="mt-4 d-flex justify-content-center align-items-center">
 
+                                <li>
 
+                                    <a href="#">
 
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-facebook.svg" alt="">
 
+                                    </a>
 
+                                </li>
 
+                                <li>
 
+                                    <a href="#">
 
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-twitter.svg" alt="">
 
+                                    </a>
 
+                                </li>
 
+                                <li>
 
+                                    <a href="#">
 
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-insta.svg" alt="">
 
+                                    </a>
 
+                                </li>
 
+                                <li>
 
+                                    <a href="#">
 
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-pinterest.svg" alt="">
 
+                                    </a>
 
+                                </li>
 
+                                <li>
 
+                                    <a href="#">
 
+                                        <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-youtube.svg" alt="">
 
+                                    </a>
 
+                                </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-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>
 
+                                    <li class="mb-2"><a href="#">RETUTRNS</a></li>
 
+                                    <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
 
+                                    <li class="mb-2"><a href="#">CUSTOMER SUPPORT</a></li>
 
+                                    <li class="mb-2"><a href="#">VIP PRIVILEGES</a></li>
 
+                                    <li class="mb-2"><a href="#">HOW TO BECOME A VIP</a></li>
 
+                                    <li class="mb-2"><a href="#">THE MALL GLOBAL</a></li>
 
+                                </ul>
 
+                            </div>
 
+
 
+                            <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>
 
+                                    <li class="mb-2"><a href="#">CONTACT US</a></li>
 
+                                    <li class="mb-2"><a href="#">PRIVACY POLICY</a></li>
 
+                                    <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
 
+                                    <li class="mb-2"><a href="#">PAYMENTS</a></li>
 
+                                    <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="copyright mt-4  text-center fw-light">
 
+                    &copy 2022 THE MALL ALL RIGHT RESERVED
 
+                </div>
 
+            </div>
 
+        </section>
 
+        <!-- footer end-->
 
+
 
+    
+    <!-- bootstrap js -->
 
+    <script src="./js/bootstrap.bundle.min.js"></script>
 
+
 
+    <!-- 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>
 
+</html>

+ 434 - 4
css/style.css
View File 

@@ -20,6 +20,7 @@
 
 
 
     --blue-light: #EBF4FF;
 
     --blue-light: #EBF4FF;
 
 
 
+    --green: #038310;
 
     --green-light: #E0FFF0;
 
     --green-light: #E0FFF0;
 
     --green-light-extra: #F0FFE0;
 
     --green-light-extra: #F0FFE0;
 
 
 
@@ -115,15 +116,24 @@ a {
 
 .bg-pink {
 
 .bg-pink {
 
     background-color: var(--pink) !important;
 
     background-color: var(--pink) !important;
 
 }
 
 }
 
+.bg-pink-light {
 
+    background-color: var(--pink-light) !important;
 
+}
 
 .bg-pink-extralight {
 
 .bg-pink-extralight {
 
     background-color: var(--pink-extralight) !important;
 
     background-color: var(--pink-extralight) !important;
 
 }
 
 }
 
+.bg-green {
 
+    background-color: var(--green) !important;
 
+}
 
 .bg-white {
 
 .bg-white {
 
     background-color: var(--white) !important;
 
     background-color: var(--white) !important;
 
 }
 
 }
 
 .bg-violet {
 
 .bg-violet {
 
     background-color: var(--violet) !important;
 
     background-color: var(--violet) !important;
 
 }
 
 }
 
+.bg-orange-vivid-light {
 
+    background-color: var(--orange-vivid-light) !important;
 
+}
 
 
 
 
 
     /* text color */
 
     /* text color */
 
@@ -198,6 +208,9 @@ a {
 
 .border-light-gray {
 
 .border-light-gray {
 
     border-color: var(--gray-light) !important;
 
     border-color: var(--gray-light) !important;
 
 }
 
 }
 
+.border-pink {
 
+    border-color: var(--pink) !important;
 
+}
 
 
 
 .border-extralight-gray {
 
 .border-extralight-gray {
 
     border-color: var(--gray-extralight) !important;
 
     border-color: var(--gray-extralight) !important;
 
@@ -302,6 +315,27 @@ a {
 
 
 
 
 
 /* header */
 
 /* header */
 
+
 
+.header {
 
+    transition: all 2s ease-in-out;
 
+
 
+}
 
+
 
+.header.sticky {
 
+    position: sticky;
 
+    top: 0;
 
+    right: 0;
 
+    left: 0;
 
+    z-index: 20;
 
+    transition: all 5s ease-in-out;
 
+    box-shadow: var(--shadow-product);
 
+}
 
+
 
+#header .burger-menu img  {
 
+    height: 25px;
 
+    width: 25px;
 
+}
 
+
 
 #header .offer  {
 
 #header .offer  {
 
     font-size: 1em !important;
 
     font-size: 1em !important;
 
 }
 
 }
 
@@ -322,6 +356,111 @@ a {
 
     padding-left: 2.5em;
 
     padding-left: 2.5em;
 
     font-size: 1.2em;
 
     font-size: 1.2em;
 
 }
 
 }
 
+
 
+#header .search-btn-mobile img,
 
+#header .user-btn-mobile img {
 
+    height: 30px;
 
+}
 
+
 
+#header .main-nav {
 
+    z-index: 10;
 
+}
 
+
 
+#header .main-nav button {
 
+    white-space: nowrap;
 
+}
 
+
 
+#header .main-nav .burger-close-btn img {
 
+    height: 20px;
 
+    width: 20px;
 
+}
 
+
 
+
 
+
 
+#header .main-nav .megamenu-parrent .menu-items {
 
+    position: absolute;
 
+    top: 100%;
 
+    max-width: 100%;
 
+    background: var(--white);
 
+    color: var(--black);
 
+    padding: 2em;
 
+    display: none;
 
+    z-index: 25;
 
+    box-shadow: var(--shadow-black);
 
+}
 
+
 
+
 
+
 
+#header .main-nav .megamenu-parrent .drop-btn img {
 
+    height: 20px;
 
+}
 
+
 
+
 
+#header .main-nav .megamenu-parrent .menu-items.active {
 
+    display: block;
 
+}
 
+
 
+
 
+@media screen and (max-width: 1199px) {
 
+    #header .search  {
 
+        position: absolute;
 
+        top: 125px;
 
+        width: 100%;
 
+        display: none;
 
+    }
 
+    #header .search.active  {
 
+        display: block;
 
+    }
 
+
 
+    #header .search input {
 
+        border-radius: 0 !important;
 
+    }
 
+
 
+    
+    
+    #header .main-nav  {
 
+        min-width: 300px;
 
+        position: fixed;
 
+        top: 0;
 
+        bottom: 0;
 
+        overflow-y: auto;
 
+        display: none;
 
+        z-index: 20;
 
+    }
 
+
 
+    #header .main-nav::-webkit-scrollbar {
 
+        display: none;
 
+    }  
+    
+    #header .main-nav .megamenu-parrent {
 
+        width: 100%;
 
+    }
 
+    
+    #header .main-nav .megamenu-parrent .collapse-buton {
 
+        width: 100%;
 
+    }
 
+
 
+
 
+    #header .main-nav.active {
 
+        display: block;
 
+    }
 
+
 
+    
+    #header .main-nav .megamenu-parrent .menu-items {
 
+        position: static;
 
+        background: var(--black);
 
+        color: var(--white);
 
+        margin: 0;
 
+        padding-top: 0;
 
+        padding-bottom: 0;
 
+    }
 
+
 
+    
+
 
+#header .main-nav .megamenu-parrent .collapse-buton {
 
+    margin-top: .5rem;
 
+}
 
+}
 
 /* header end*/
 
 /* header end*/
 
 
 
 
 
@@ -351,7 +490,12 @@ a {
 
   }
 
   }
 
 
 
   #footer .social-icon {
 
   #footer .social-icon {
 
-    height: 20px
 
+    height: 20px;
 
+    transition: all .15s ease-in-out;
 
+  }
 
+
 
+  #footer .social-icon:hover {
 
+    transform: scale(1.2);
 
   }
 
   }
 
 
 
   #footer .footer-border-bottom {
 
   #footer .footer-border-bottom {
 
@@ -710,7 +854,6 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
     width: 480px;
 
     width: 480px;
 
     height: 90vh;
 
     height: 90vh;
 
     box-shadow: var(--shadow-black);
 
     box-shadow: var(--shadow-black);
 
-    z-index: 0;
 
     border-radius: 5px 0 0 0;
 
     border-radius: 5px 0 0 0;
 
     display: none;
 
     display: none;
 
     z-index: 99999999;
 
     z-index: 99999999;
 
@@ -769,6 +912,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
     right: 0;
 
     right: 0;
 
     border-radius: 10px 0 0 10px;
 
     border-radius: 10px 0 0 10px;
 
     box-shadow: var(--shadow-product);
 
     box-shadow: var(--shadow-product);
 
+    z-index: 100;
 
 }
 
 }
 
 
 
 
 
@@ -788,13 +932,30 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
 
 
 #checkout-btn-mobile .checkout-mobile {
 
 #checkout-btn-mobile .checkout-mobile {
 
     width: 100vw;
 
     width: 100vw;
 
+    z-index: 10;
 
+}
 
+
 
+#checkout-btn-mobile .checkout-mobile .cart-details {
 
+    background: url(../images/icon/Cart-icon.svg) center center/cover no-repeat ;
 
+    height: 60px !important;
 
+    width: 60px !important;
 
 }
 
 }
 
 
 
 #checkout-btn-mobile .badge {
 
 #checkout-btn-mobile .badge {
 
-    transform: translate(-8px, -12px);
 
+    transform: translate(30px, -5px);
 
     padding: .4em;
 
     padding: .4em;
 
 }
 
 }
 
 
 
+#checkout-btn-mobile .total {
 
+    font-size: .6em;
 
+    font-weight: 600;
 
+    letter-spacing: -.5px;
 
+    bottom: 6px;
 
+    right: 50%;
 
+    transform: translateX(50%);
 
+    white-space: nowrap;
 
+}
 
+
 
 
 
 
 
 
 
@@ -1036,4 +1197,273 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
     #product-details-tab .tab-content  ul li {
 
     #product-details-tab .tab-content  ul li {
 
         list-style: disc !important;
 
         list-style: disc !important;
 
     }
 
     }
 
-/*  product details page  end*/
 
+/*  product details page  end*/
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+/* checkout page */
 
+#checkout-page .checkout-container,
 
+#checkout-page .order-summery {
 
+    box-shadow: var(--shadow-black);
 
+}
 
+
 
+#checkout-page .summery-products .count-container {
 
+    width: fit-content;
 
+}
 
+
 
+#checkout-page .summery-products .count-container .count {
 
+    transform: translateY(8px);
 
+}
 
+
 
+#checkout-page .summery-products .count-container .count-btn {
 
+    width: 10px;
 
+    height: 10px;
 
+    transition: all .15s ease-in-out;
 
+}
 
+
 
+#checkout-page .summery-products .count-container .count-btn:hover {
 
+    transform: scale(1.4);
 
+}
 
+
 
+#checkout-page .summery-products .clear-btn {
 
+    transition: all .15s ease-in-out;
 
+
 
+}
 
+
 
+#checkout-page .summery-products .clear-btn:hover {
 
+    transform: scale(1.2);
 
+}
 
+
 
+#checkout-page .summery-products .clear-btn img {
 
+    height: 15px;
 
+    width: 15px;
 
+}
 
+
 
+
 
+#checkout-page .cupon button {
 
+    outline: none;
 
+    border: none;
 
+}
 
+
 
+#checkout-page .cupon button:focus {
 
+    outline: none;
 
+    border: none;
 
+}
 
+
 
+#checkout-page .cupon input:focus {
 
+    outline: none;
 
+}
 
+
 
+
 
+/* checkout form */
 
+
 
+#checkoutForm .form-header {
 
+    gap: 5px;
 
+    text-align: center;
 
+    font-size: 1em;
 
+}
 
+
 
+#checkoutForm .form-header .stepIndicator {
 
+    position: relative;
 
+    flex: 1;
 
+    padding-top: 55px;
 
+    font-size: 1.3em;
 
+    color: var(--gray);
 
+}
 
+
 
+
 
+#checkoutForm .form-header .stepIndicator::before {
 
+    content: "";
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 0;
 
+    transform: translateX(-50%);
 
+    z-index: 9;
 
+    width: 50px;
 
+    height: 50px;
 
+    background-color: var(--pink-light);
 
+    border-radius: 50%;
 
+}
 
+#checkoutForm .form-header .stepIndicator.active::before {
 
+    background-color: var(--pink);
 
+    /* border: 3px solid #d5f9f6; */
 
+}
 
+#checkoutForm .form-header .stepIndicator.finish::before {
 
+    background-color: var(--pink);
 
+    /* border: 3px solid #b7e1dd; */
 
+}
 
+
 
+#checkoutForm .form-header .stepIndicator::after {
 
+    content: "";
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 24px;
 
+    width: 100%;
 
+    height: 3px;
 
+    background-color: var(--gray-light);
 
+}
 
+#checkoutForm .form-header .stepIndicator.active::after {
 
+    background-color: var(--gray-light);
 
+}
 
+#checkoutForm .form-header .stepIndicator.finish::after {
 
+    background-color: var(--pink);
 
+}
 
+#checkoutForm .form-header .stepIndicator:last-child:after {
 
+    display: none;
 
+}
 
+
 
+
 
+
 
+
 
+#checkoutForm #address {
 
+    max-width: 300px !important;
 
+    /* border:  1px solid #e3e3e3 ; */
 
+    background-color: var(--gray-extralight);
 
+}
 
+
 
+#checkoutForm select {
 
+    padding: 1em 1.4em !important;
 
+    width: 100%;
 
+    font-size: 1em !important;
 
+    border: 1px solid #e3e3e3 !important; 
+}
 
+
 
+#checkoutForm select option {
 
+    font-size: 1em;
 
+}
 
+
 
+
 
+#checkoutForm input {
 
+    padding: 1em 1.2em;
 
+    width: 100%;
 
+    font-size: 1em;
 
+    border: 1px solid #e3e3e3;
 
+    border-radius: 0;
 
+}
 
+
 
+
 
+#checkoutForm textarea {
 
+    padding: 1em 1.2em;
 
+    width: 100%;
 
+    font-size: 1em;
 
+    border: 1px solid #e3e3e3;
 
+    border-radius: 0;
 
+}
 
+
 
+
 
+#checkoutForm select,
 
+#checkoutForm textarea,
 
+#checkoutForm input:focus {
 
+    /* border: 1px solid var(--pink); */
 
+    outline: 0;
 
+}
 
+
 
+#checkoutForm input.invalid {
 
+    border: 1px solid #ffaba5;
 
+}
 
+
 
+#checkoutForm select.invalid {
 
+    border: 1px solid #ffaba5 !important;
 
+}
 
+
 
+#checkoutForm textarea.invalid {
 
+    border: 1px solid #ffaba5 !important;
 
+}
 
+
 
+#checkoutForm .step {
 
+  display: none;
 
+}
 
+
 
+#checkoutForm .form-footer{
 
+    overflow:auto;
 
+    gap: 20px;
 
+}
 
+#checkoutForm .form-footer button{
 
+    background-color: var(--green);
 
+    border: 1px solid var(--green) !important;
 
+    color: #ffffff;
 
+    border: none;
 
+    padding: 13px 30px;
 
+    font-size: 1em;
 
+    cursor: pointer;
 
+    border-radius: 5px;
 
+    flex: 1;
 
+    margin-top: 5px;
 
+    width: fit-content;
 
+}
 
+#checkoutForm .form-footer button:hover {
 
+  opacity: 0.8;
 
+}
 
+
 
+#checkoutForm .form-footer #prevBtn {
 
+    background-color: #fff;
 
+    color: var(--green);
 
+}
 
+
 
+#checkoutForm .delivery-method {
 
+    box-shadow: var(--shadow-black);
 
+}
 
+
 
+#checkoutForm .delivery-method .selected {
 
+    position: absolute;
 
+    top: 10px !important;
 
+    right: 10px !important;
 
+    display: none;
 
+}
 
+
 
+#checkoutForm .delivery-method .selected img {
 
+    height: 25px;
 
+    width: 25px;
 
+}
 
+
 
+#checkoutForm .delivery-method input[type=radio]:checked ~ .selected {
 
+    display: block;
 
+}
 
+
 
+#checkoutForm .delivery-method .icon img {
 
+    height: 75px;
 
+}
 
+
 
+#checkoutForm .delivery-method input {
 
+    display: none !important;
 
+}
 
+
 
+#checkoutForm .payment-type {
 
+    box-shadow: var(--shadow-black);
 
+}
 
+
 
+#checkoutForm .payment-type label {
 
+    min-width: 280px;
 
+}
 
+
 
+
 
+#checkoutForm .payment-type .selected {
 
+    position: absolute;
 
+    top: 12px !important;
 
+    right: 5px !important;
 
+    display: none;
 
+}
 
+
 
+#checkoutForm .payment-type .selected img {
 
+    height: 20px;
 
+    width: 20px;
 
+}
 
+
 
+#checkoutForm .payment-type input[type=radio]:checked ~ .selected {
 
+    display: block;
 
+}
 
+
 
+#checkoutForm .payment-type input {
 
+    display: none !important;
 
+}
 
+
 
+#checkoutForm .payment-type .icon img {
 
+    height: 75px;
 
+}

File diff suppressed because it is too large
+ 0 - 3
images/icon/Cart-icon.svg


+ 3 - 0
images/icon/arrow-down-solid.svg
View File 

@@ -0,0 +1,3 @@
 
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M19 10L12 17L5 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

File diff suppressed because it is too large
+ 6 - 0
images/icon/bkash.svg


+ 5 - 0
images/icon/burger-menu.svg
View File 

@@ -0,0 +1,5 @@
 
+<svg width="37" height="41" viewBox="0 0 37 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<rect x="5.06055" y="12.2421" width="26.5176" height="2.04614" rx="1.02307" fill="#B31F23"/>
 
+<rect x="5.06055" y="19.8934" width="26.5176" height="2.04614" rx="1.02307" fill="#B31F23"/>
 
+<rect x="5.06055" y="27.5448" width="26.5176" height="2.04614" rx="1.02307" fill="#B31F23"/>
 
+</svg>

+ 4 - 0
images/icon/money-hand.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M29.6662 19.3485C29.0589 18.7978 28.1119 18.8339 27.4737 19.3485L22.7183 23.1518C22.1346 23.6201 21.4081 23.8744 20.6597 23.8723H14.5729C14.3545 23.8723 14.145 23.7856 13.9906 23.6312C13.8362 23.4767 13.7494 23.2673 13.7494 23.0489C13.7494 22.8305 13.8362 22.621 13.9906 22.4666C14.145 22.3122 14.3545 22.2254 14.5729 22.2254H18.6021C19.4204 22.2254 20.1826 21.6645 20.3133 20.8565C20.3294 20.7637 20.3374 20.6696 20.337 20.5755C20.3362 20.1392 20.1623 19.7211 19.8535 19.4129C19.5448 19.1047 19.1263 18.9316 18.6901 18.9316H10.4556C9.06686 18.932 7.72045 19.4097 6.64201 20.2847L4.24886 22.2254H1.39767C1.17928 22.2254 0.969828 22.3122 0.815401 22.4666C0.660975 22.621 0.574219 22.8305 0.574219 23.0489L0.574219 27.9896C0.574219 28.208 0.660975 28.4174 0.815401 28.5718C0.969828 28.7263 1.17928 28.813 1.39767 28.813H19.759C20.5072 28.8136 21.2332 28.5595 21.8177 28.0925L29.6008 21.8652C29.788 21.7154 29.9403 21.5266 30.047 21.3119C30.1537 21.0972 30.2122 20.8618 30.2185 20.6221C30.2247 20.3825 30.1786 20.1443 30.0833 19.9244C29.988 19.7044 29.8453 19.5078 29.6662 19.3485Z" fill="#B21F25"/>
 
+<path d="M17.747 6.968V8.728H12.499V12.376C12.499 12.6747 12.5417 12.8987 12.627 13.048C12.7123 13.1867 12.9043 13.256 13.203 13.256C13.4483 13.256 13.6883 13.2187 13.923 13.144C14.1577 13.0587 14.371 12.952 14.563 12.824C14.755 12.6853 14.9097 12.5253 15.027 12.344C15.1443 12.1627 15.203 11.976 15.203 11.784C15.203 11.688 15.1603 11.5973 15.075 11.512C14.9897 11.4267 14.8243 11.384 14.579 11.384C14.387 11.384 14.2163 11.4 14.067 11.432L13.811 9.8C14.003 9.74667 14.2163 9.70933 14.451 9.688C14.6963 9.66667 14.947 9.656 15.203 9.656C15.8323 9.656 16.339 9.8 16.723 10.088C17.107 10.376 17.299 10.824 17.299 11.432C17.299 12.008 17.1657 12.52 16.899 12.968C16.6323 13.416 16.2803 13.7893 15.843 14.088C15.4057 14.3867 14.9257 14.616 14.403 14.776C13.891 14.9253 13.3897 15 12.899 15C12.451 15 12.0723 14.9467 11.763 14.84C11.4643 14.7333 11.2243 14.5947 11.043 14.424C10.9257 14.3067 10.8137 14.1733 10.707 14.024C10.611 13.8747 10.531 13.6667 10.467 13.4C10.4137 13.1333 10.387 12.776 10.387 12.328V8.728H9.043V6.968H17.747ZM10.227 3.016C10.579 3.016 10.8883 3.05867 11.155 3.144C11.4217 3.22933 11.6457 3.36267 11.827 3.544C12.0403 3.74667 12.2057 4.02933 12.323 4.392C12.4403 4.75467 12.499 5.26667 12.499 5.928V7.032H10.387V6.008C10.387 5.74133 10.3657 5.51733 10.323 5.336C10.2803 5.15467 10.195 5.02133 10.067 4.936C9.939 4.84 9.747 4.792 9.491 4.792C9.35233 4.792 9.203 4.808 9.043 4.84C8.89367 4.872 8.739 4.92 8.579 4.984L7.971 3.448C8.387 3.29867 8.76033 3.192 9.091 3.128C9.42167 3.05333 9.80033 3.016 10.227 3.016Z" fill="#B21F25"/>
 
+</svg>

+ 22 - 0
images/icon/regular delivery.svg
View File 

@@ -0,0 +1,22 @@
 
+<svg width="48" height="29" viewBox="0 0 48 29" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M11.918 19.0879H8.79297C6.2041 19.0879 4.10547 21.1865 4.10547 23.7754C4.10547 26.3643 6.2041 28.4629 8.79297 28.4629H11.918C14.5068 28.4629 16.6055 26.3643 16.6055 23.7754C16.6055 21.1865 14.5067 19.0879 11.918 19.0879Z" fill="#32283C"/>
 
+<path d="M35.0938 22.2129V1.90039C35.0938 1.0374 34.3942 0.337891 33.5312 0.337891H17.9062C18.7692 0.337891 19.4688 1.0374 19.4688 1.90039V22.2129C19.4688 23.0759 18.7692 23.7754 17.9062 23.7754H33.5312C34.3942 23.7754 35.0938 23.0759 35.0938 22.2129Z" fill="#CD3232"/>
 
+<path d="M17.9062 0.337891H2.28125C1.41826 0.337891 0.71875 1.0374 0.71875 1.90039V22.2129C0.71875 23.0759 1.41826 23.7754 2.28125 23.7754H17.9062C18.7692 23.7754 19.4688 23.0759 19.4688 22.2129V1.90039C19.4688 1.0374 18.7692 0.337891 17.9062 0.337891Z" fill="#FF4646"/>
 
+<path d="M4.75391 18.3066C4.10674 18.3066 3.58203 17.7819 3.58203 17.1348V4.63477C3.58203 3.9876 4.10674 3.46289 4.75391 3.46289C5.40107 3.46289 5.92578 3.9876 5.92578 4.63477V17.1348C5.92578 17.7819 5.40117 18.3066 4.75391 18.3066Z" fill="#CD3232"/>
 
+<path d="M9.96094 18.3066C9.31377 18.3066 8.78906 17.7819 8.78906 17.1348V4.63477C8.78906 3.9876 9.31377 3.46289 9.96094 3.46289C10.6081 3.46289 11.1328 3.9876 11.1328 4.63477V17.1348C11.1328 17.7819 10.6081 18.3066 9.96094 18.3066Z" fill="#CD3232"/>
 
+<path d="M15.1719 18.3066C14.5247 18.3066 14 17.7819 14 17.1348V4.63477C14 3.9876 14.5247 3.46289 15.1719 3.46289C15.819 3.46289 16.3438 3.9876 16.3438 4.63477V17.1348C16.3438 17.7819 15.819 18.3066 15.1719 18.3066Z" fill="#CD3232"/>
 
+<path d="M41.3438 19.0879H38.2188C35.6299 19.0879 33.5312 21.1865 33.5312 23.7754C33.5312 26.3643 35.6299 28.4629 38.2188 28.4629H41.3438C43.9326 28.4629 46.0312 26.3643 46.0312 23.7754C46.0312 21.1865 43.9326 19.0879 41.3438 19.0879Z" fill="#32283C"/>
 
+<path d="M28.8438 19.0879H25.7188C23.1299 19.0879 21.0312 21.1865 21.0312 23.7754C21.0312 26.3643 23.1299 28.4629 25.7188 28.4629H28.8438C31.4326 28.4629 33.5312 26.3643 33.5312 23.7754C33.5312 21.1865 31.4326 19.0879 28.8438 19.0879Z" fill="#32283C"/>
 
+<path d="M46.0312 23.7754H21.0312C20.1683 23.7754 19.4688 23.0759 19.4688 22.2129V14.4004H47.5938V22.2129C47.5938 23.0759 46.8942 23.7754 46.0312 23.7754Z" fill="#A5C3DC"/>
 
+<path d="M41.0512 4.24414H21.8125C20.5181 4.24414 19.4688 5.29346 19.4688 6.58789V14.4004H47.5938C47.5938 13.3751 47.3365 12.3662 46.8455 11.4662L43.7945 5.87275C43.247 4.86875 42.1947 4.24414 41.0512 4.24414Z" fill="#32283C"/>
 
+<path d="M25.4262 4.24414H21.8125C20.5181 4.24414 19.4688 5.29346 19.4688 6.58789V14.4004H31.9688C31.9688 13.3751 31.7115 12.3662 31.2205 11.4662L28.1695 5.87275C27.622 4.86875 26.5697 4.24414 25.4262 4.24414Z" fill="#463C4B"/>
 
+<path d="M30.4062 23.7754H21.0312C20.1683 23.7754 19.4688 23.0759 19.4688 22.2129V14.4004H31.9688V22.2129C31.9688 23.0759 31.2692 23.7754 30.4062 23.7754Z" fill="#E6E6EB"/>
 
+<path d="M36.6562 21.4316C37.5192 21.4316 38.2188 20.7321 38.2188 19.8691C38.2188 19.0062 37.5192 18.3066 36.6562 18.3066C35.7933 18.3066 35.0938 19.0062 35.0938 19.8691C35.0938 20.7321 35.7933 21.4316 36.6562 21.4316Z" fill="#E6E6EB"/>
 
+<path d="M42.9062 21.4316C43.7692 21.4316 44.4688 20.7321 44.4688 19.8691C44.4688 19.0062 43.7692 18.3066 42.9062 18.3066C42.0433 18.3066 41.3438 19.0062 41.3438 19.8691C41.3438 20.7321 42.0433 21.4316 42.9062 21.4316Z" fill="#E6E6EB"/>
 
+<path d="M25.7188 28.4629C28.3076 28.4629 30.4062 26.3642 30.4062 23.7754C30.4062 21.1866 28.3076 19.0879 25.7188 19.0879C23.1299 19.0879 21.0312 21.1866 21.0312 23.7754C21.0312 26.3642 23.1299 28.4629 25.7188 28.4629Z" fill="#463C4B"/>
 
+<path d="M25.7188 25.3379C26.5817 25.3379 27.2812 24.6383 27.2812 23.7754C27.2812 22.9124 26.5817 22.2129 25.7188 22.2129C24.8558 22.2129 24.1562 22.9124 24.1562 23.7754C24.1562 24.6383 24.8558 25.3379 25.7188 25.3379Z" fill="#E6E6EB"/>
 
+<path d="M8.79297 28.4629C11.3818 28.4629 13.4805 26.3642 13.4805 23.7754C13.4805 21.1866 11.3818 19.0879 8.79297 19.0879C6.20413 19.0879 4.10547 21.1866 4.10547 23.7754C4.10547 26.3642 6.20413 28.4629 8.79297 28.4629Z" fill="#463C4B"/>
 
+<path d="M8.79297 25.3379C9.65591 25.3379 10.3555 24.6383 10.3555 23.7754C10.3555 22.9124 9.65591 22.2129 8.79297 22.2129C7.93002 22.2129 7.23047 22.9124 7.23047 23.7754C7.23047 24.6383 7.93002 25.3379 8.79297 25.3379Z" fill="#E6E6EB"/>
 
+<path d="M44.1847 6.58789L43.7946 5.87275C43.247 4.86885 42.1947 4.24414 41.0512 4.24414H21.8125C20.5181 4.24414 19.4688 5.29346 19.4688 6.58789H44.1847Z" fill="#A5C3DC"/>
 
+<path d="M19.4688 6.58789H28.5597L28.1696 5.87275C27.622 4.86885 26.5697 4.24414 25.4262 4.24414H21.8125C20.5181 4.24414 19.4688 5.29346 19.4688 6.58789Z" fill="#E6E6EB"/>
 
+</svg>

+ 4 - 0
images/icon/selected.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<circle cx="14.7149" cy="15.0059" r="14.3946" fill="#059C2F"/>
 
+<path d="M22.5977 9.58496L11.7561 20.4265L6.82812 15.4985" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 26 - 0
images/icon/the mall delivery.svg
View File 

@@ -0,0 +1,26 @@
 
+<svg width="48" height="41" viewBox="0 0 48 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M35.0938 34.0723V14.541H3.84375V34.0723C3.84375 34.9353 4.54326 35.6348 5.40625 35.6348H33.5312C34.3942 35.6348 35.0938 34.9353 35.0938 34.0723Z" fill="#CD3232"/>
 
+<path d="M13.2188 30.9473H10.0938C7.50488 30.9473 5.40625 33.0459 5.40625 35.6348C5.40625 38.2236 7.50488 40.3223 10.0938 40.3223H13.2188C15.8076 40.3223 17.9062 38.2236 17.9062 35.6348C17.9062 33.0459 15.8076 30.9473 13.2188 30.9473Z" fill="#32283C"/>
 
+<path d="M41.3438 30.9473H38.2188C35.6299 30.9473 33.5312 33.0459 33.5312 35.6348C33.5312 38.2236 35.6299 40.3223 38.2188 40.3223H41.3438C43.9326 40.3223 46.0312 38.2236 46.0312 35.6348C46.0312 33.0459 43.9326 30.9473 41.3438 30.9473Z" fill="#32283C"/>
 
+<path d="M28.8438 30.9473H25.7188C23.1299 30.9473 21.0312 33.0459 21.0312 35.6348C21.0312 38.2236 23.1299 40.3223 25.7188 40.3223H28.8438C31.4326 40.3223 33.5312 38.2236 33.5312 35.6348C33.5312 33.0459 31.4326 30.9473 28.8438 30.9473Z" fill="#32283C"/>
 
+<path d="M46.0312 35.6348H21.0312C20.1683 35.6348 19.4688 34.9353 19.4688 34.0723V26.2598H47.5938V34.0723C47.5938 34.9353 46.8942 35.6348 46.0312 35.6348Z" fill="#A5C3DC"/>
 
+<path d="M31.1875 0.478516H23.375C21.9306 0.478516 20.5876 0.916797 19.4695 1.6667C18.3515 0.916797 17.0069 0.478516 15.5625 0.478516H7.75C5.59609 0.478516 3.84375 2.23086 3.84375 4.38477C3.84375 6.53867 5.59609 8.29102 7.75 8.29102H12.4375C12.8689 8.29102 13.2188 7.94121 13.2188 7.50977C13.2188 7.07832 12.8689 6.72852 12.4375 6.72852C11.1452 6.72852 10.0938 5.67715 10.0938 4.38477C10.0938 3.30635 10.8297 2.39522 11.823 2.12324C14.3897 2.57217 16.3438 4.8165 16.3438 7.50977C16.3438 7.94121 16.6936 8.29102 17.125 8.29102H21.8125C22.2439 8.29102 22.5938 7.94121 22.5938 7.50977C22.5938 4.8165 24.5513 2.57324 27.1181 2.12432C28.1113 2.39629 28.8438 3.30635 28.8438 4.38477C28.8438 5.67715 27.7923 6.72852 26.5 6.72852C26.0686 6.72852 25.7188 7.07832 25.7188 7.50977C25.7188 7.94121 26.0686 8.29102 26.5 8.29102H31.1875C33.3414 8.29102 35.0938 6.53867 35.0938 4.38477C35.0938 2.23086 33.3414 0.478516 31.1875 0.478516Z" fill="#32283C"/>
 
+<path d="M36.6562 8.29102H2.28125C1.41826 8.29102 0.71875 8.99053 0.71875 9.85352V12.9785C0.71875 13.8415 1.41826 14.541 2.28125 14.541H36.6562C37.5192 14.541 38.2188 13.8415 38.2188 12.9785V9.85352C38.2188 8.99053 37.5192 8.29102 36.6562 8.29102Z" fill="#CD3232"/>
 
+<path d="M17.9062 35.6348H5.40625C4.54326 35.6348 3.84375 34.9353 3.84375 34.0723V14.541H19.4688V34.0723C19.4688 34.9353 18.7692 35.6348 17.9062 35.6348Z" fill="#FF4646"/>
 
+<path d="M19.4688 8.29102H2.28125C1.41826 8.29102 0.71875 8.99053 0.71875 9.85352V12.9785C0.71875 13.8415 1.41826 14.541 2.28125 14.541H19.4688C20.3317 14.541 21.0312 13.8415 21.0312 12.9785V9.85352C21.0312 8.99053 20.3317 8.29102 19.4688 8.29102Z" fill="#FF4646"/>
 
+<path d="M19.4688 14.541H3.84375V18.4473H19.4688V14.541Z" fill="#CD3232"/>
 
+<path d="M11.6562 12.9785C11.6562 13.8415 12.3558 14.541 13.2188 14.541H8.53125C7.66826 14.541 6.96875 13.8415 6.96875 12.9785V9.85352C6.96875 8.99053 7.66826 8.29102 8.53125 8.29102H13.2188C12.3558 8.29102 11.6562 8.99053 11.6562 9.85352V12.9785Z" fill="#463C4B"/>
 
+<path d="M27.2812 12.9785C27.2812 13.8415 26.5817 14.541 25.7188 14.541H30.4062C31.2692 14.541 31.9688 13.8415 31.9688 12.9785V9.85352C31.9688 8.99053 31.2692 8.29102 30.4062 8.29102H25.7188C26.5817 8.29102 27.2812 8.99053 27.2812 9.85352V12.9785Z" fill="#32283C"/>
 
+<path d="M26.5 0.478516H23.375C20.6561 0.478516 18.2943 2.03086 17.125 4.29482C15.9557 2.03086 13.5939 0.478516 10.875 0.478516H7.75C5.59609 0.478516 3.84375 2.23086 3.84375 4.38477C3.84375 6.53867 5.59609 8.29102 7.75 8.29102H26.5C28.6539 8.29102 30.4062 6.53867 30.4062 4.38477C30.4062 2.23086 28.6539 0.478516 26.5 0.478516ZM7.75 6.72852C6.45771 6.72852 5.40625 5.67715 5.40625 4.38477C5.40625 3.09238 6.45771 2.04102 7.75 2.04102H10.875C13.6253 2.04102 15.9078 4.08174 16.2882 6.72852H7.75ZM26.5 6.72852H17.9618C18.3422 4.08174 20.6247 2.04102 23.375 2.04102H26.5C27.7923 2.04102 28.8438 3.09238 28.8438 4.38477C28.8438 5.67715 27.7923 6.72852 26.5 6.72852Z" fill="#463C4B"/>
 
+<path d="M41.0512 16.1035H21.8125C20.5181 16.1035 19.4688 17.1528 19.4688 18.4473V26.2598H47.5938C47.5938 25.2345 47.3365 24.2256 46.8455 23.3256L43.7945 17.7321C43.247 16.7281 42.1947 16.1035 41.0512 16.1035Z" fill="#32283C"/>
 
+<path d="M25.4262 16.1035H21.8125C20.5181 16.1035 19.4688 17.1528 19.4688 18.4473V26.2598H31.9688C31.9688 25.2345 31.7115 24.2256 31.2205 23.3256L28.1695 17.7321C27.622 16.7281 26.5697 16.1035 25.4262 16.1035Z" fill="#463C4B"/>
 
+<path d="M30.4062 35.6348H21.0312C20.1683 35.6348 19.4688 34.9353 19.4688 34.0723V26.2598H31.9688V34.0723C31.9688 34.9353 31.2692 35.6348 30.4062 35.6348Z" fill="#E6E6EB"/>
 
+<path d="M36.6562 33.291C37.5192 33.291 38.2188 32.5915 38.2188 31.7285C38.2188 30.8656 37.5192 30.166 36.6562 30.166C35.7933 30.166 35.0938 30.8656 35.0938 31.7285C35.0938 32.5915 35.7933 33.291 36.6562 33.291Z" fill="#E6E6EB"/>
 
+<path d="M42.9062 33.291C43.7692 33.291 44.4688 32.5915 44.4688 31.7285C44.4688 30.8656 43.7692 30.166 42.9062 30.166C42.0433 30.166 41.3438 30.8656 41.3438 31.7285C41.3438 32.5915 42.0433 33.291 42.9062 33.291Z" fill="#E6E6EB"/>
 
+<path d="M44.1847 18.4473L43.7946 17.7321C43.247 16.7282 42.1947 16.1035 41.0512 16.1035H21.8125C20.5181 16.1035 19.4688 17.1528 19.4688 18.4473H44.1847Z" fill="#A5C3DC"/>
 
+<path d="M19.4688 18.4473H28.5597L28.1696 17.7321C27.622 16.7282 26.5697 16.1035 25.4262 16.1035H21.8125C20.5181 16.1035 19.4688 17.1528 19.4688 18.4473Z" fill="#E6E6EB"/>
 
+<path d="M25.7188 40.3223C28.3076 40.3223 30.4062 38.2236 30.4062 35.6348C30.4062 33.0459 28.3076 30.9473 25.7188 30.9473C23.1299 30.9473 21.0312 33.0459 21.0312 35.6348C21.0312 38.2236 23.1299 40.3223 25.7188 40.3223Z" fill="#463C4B"/>
 
+<path d="M25.7188 37.1973C26.5817 37.1973 27.2812 36.4977 27.2812 35.6348C27.2812 34.7718 26.5817 34.0723 25.7188 34.0723C24.8558 34.0723 24.1562 34.7718 24.1562 35.6348C24.1562 36.4977 24.8558 37.1973 25.7188 37.1973Z" fill="#E6E6EB"/>
 
+<path d="M10.0938 40.3223C12.6826 40.3223 14.7812 38.2236 14.7812 35.6348C14.7812 33.0459 12.6826 30.9473 10.0938 30.9473C7.50492 30.9473 5.40625 33.0459 5.40625 35.6348C5.40625 38.2236 7.50492 40.3223 10.0938 40.3223Z" fill="#463C4B"/>
 
+<path d="M10.0938 37.1973C10.9567 37.1973 11.6562 36.4977 11.6562 35.6348C11.6562 34.7718 10.9567 34.0723 10.0938 34.0723C9.23081 34.0723 8.53125 34.7718 8.53125 35.6348C8.53125 36.4977 9.23081 37.1973 10.0938 37.1973Z" fill="#E6E6EB"/>
 
+</svg>

+ 10 - 0
images/icon/user.svg
View File 

@@ -0,0 +1,10 @@
 
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_27_2398)">
 
+<path d="M13.9219 6.4165C13.9219 5.95688 13.8313 5.50175 13.6555 5.07711C13.4796 4.65247 13.2218 4.26663 12.8967 3.94163C12.5717 3.61662 12.1859 3.35882 11.7613 3.18293C11.3366 3.00703 10.8815 2.9165 10.4219 2.9165C9.96225 2.9165 9.50712 3.00703 9.08248 3.18293C8.65784 3.35882 8.27201 3.61662 7.947 3.94163C7.622 4.26663 7.36419 4.65247 7.1883 5.07711C7.01241 5.50175 6.92188 5.95688 6.92188 6.4165C6.92188 7.34476 7.29062 8.235 7.947 8.89138C8.60338 9.54775 9.49362 9.9165 10.4219 9.9165C11.3501 9.9165 12.2404 9.54775 12.8967 8.89138C13.5531 8.235 13.9219 7.34476 13.9219 6.4165ZM14.9219 6.4165C14.9219 7.00745 14.8055 7.59261 14.5793 8.13858C14.3532 8.68454 14.0217 9.18062 13.6039 9.59848C13.186 10.0163 12.6899 10.3478 12.144 10.574C11.598 10.8001 11.0128 10.9165 10.4219 10.9165C9.83093 10.9165 9.24576 10.8001 8.6998 10.574C8.15383 10.3478 7.65776 10.0163 7.23989 9.59848C6.82203 9.18062 6.49056 8.68454 6.26442 8.13858C6.03827 7.59261 5.92188 7.00745 5.92188 6.4165C5.92188 5.22303 6.39598 4.07844 7.23989 3.23452C8.08381 2.39061 9.2284 1.9165 10.4219 1.9165C11.6153 1.9165 12.7599 2.39061 13.6039 3.23452C14.4478 4.07844 14.9219 5.22303 14.9219 6.4165ZM10.4219 11.9165C14.2969 11.9165 17.4219 15.2825 17.4219 19.4165V20.9165H3.42188V19.4165C3.42188 15.2825 6.54688 11.9165 10.4219 11.9165ZM16.4219 19.9165V19.4165C16.4219 15.8185 13.7269 12.9165 10.4219 12.9165C7.11687 12.9165 4.42188 15.8185 4.42188 19.4165V19.9165H16.4219Z" fill="#626262"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_27_2398">
 
+<rect width="20" height="20" fill="white" transform="translate(0.421875 0.916504)"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

File diff suppressed because it is too large
+ 6 - 0
images/icon/visa.svg


+ 2454 - 1696
index.html
View File 

@@ -31,1959 +31,2717 @@
 
 <body>
 
 <body>
 
     
     
     <!-- nav header -->
 
     <!-- nav header -->
 
+    <section id="header" class="header">
 
     
     
+        <!-- offrer -->
 
+        <div class="offer bg-pink text-white py-1">
 
+            <div class="container">
 
+                <p class="text-center px-2 py-1">
 
+                    free delivery over dhaka over 999 Delivery policy (Inside Dhaka delivery within 24hrs, Outside Dhaka delivery within 72hrs)
 
+                </p>
 
+            </div>
 
+        </div>
 
 
 
+        <!-- upper nav -->
 
+        <div id="uper-nav" class="bg-white">
 
+            <div class="container-xl px-2  py-1">
 
+                <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
 
 
 
-    <!-- hero sectiion -->
 
-    <section id="hero">
 
+                    <!-- burger menu logo -->
 
+                    <button class="burger-menu btn me-auto d-block d-xl-none">
 
+                        <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
 
+                    </button>
 
 
 
-        <div class="banner-carousel">
 
-              <div class="swiper bannerSlider">
 
-                <div class="swiper-wrapper">
 
-                    <div class="swiper-slide">
 
-                        <img src="./images/home_page/home-banner.png" alt="">
 
-                    </div>
 
-                    <div class="swiper-slide">
 
-                        <img src="./images/home_page/home-banner.png" alt="">
 
-                    </div>
 
-                    <div class="swiper-slide">
 
-                        <img src="./images/home_page/home-banner.png" alt="">
 
+                    <!-- brand logo -->
 
+                    <a class="brand-logo mx-auto mx-xl-0" href="#">
 
+                        <img src="./images/navbar/brand-logo.svg" alt="">
 
+                    </a>
 
+
 
+
 
+                    <!-- search box -->
 
+                    <div class="search  flex-fill px-5">
 
+                        <form action="">
 
+                            <div class="  form-group position-relative ">
 
+                                <label for="search-box" class="search-icon position-absolute">
 
+                                    <img src="./images/icon/search.svg" alt="">
 
+                                </label>
 
+                                <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
 
+                            </div>
 
+                        </form>
 
                     </div>
 
                     </div>
 
-                    <div class="swiper-slide">
 
-                        <img src="./images/home_page/home-banner.png" alt="">
 
+
 
+
 
+
 
+                    <!-- link  -->
 
+                    <div class="link-box d-flex align-items-center">
 
+
 
+
 
+                         <!-- group -->
 
+                         <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
 
+                            <img class="link-icon" src="./images/navbar/group.png" alt="">
 
+                        </a>
 
+
 
+                        <!-- vip points -->
 
+                        <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
 
+                            <img class="link-icon" src="./images/navbar/face.png" alt="">
 
+                            <div>
 
+                                <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
 
+                                <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
 
+                            </div>
 
+                        </a>
 
                     </div>
 
                     </div>
 
-                    <div class="swiper-slide">
 
-                        <img src="./images/home_page/home-banner.png" alt="">
 
+                    
+
 
+                    <!-- link  -->
 
+                    <div class="link-box d-flex align-items-center ">
 
+
 
+                       
+                        <!-- search btn for mobile -->
 
+                        <button class="btn d-block d-xl-none search-btn-mobile">
 
+                            <img src="./images/icon/search.svg" alt="">
 
+                        </button>
 
+
 
+                        <!-- message -->
 
+                        <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
 
+                            <img class="link-icon" src="./images/navbar/message.png" alt="">
 
+                        </a>
 
+
 
+                        <!-- wishlist -->
 
+                        <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
 
+                            <img class="link-icon" src="./images/navbar/heart.png" alt="">
 
+                        </a>
 
+
 
+                        <!-- shoping basket -->
 
+                        <a href="./checkout.html" class="link d-none d-xl-flex align-items-center  mx-0 mx-lg-1" >
 
+                            <img class="link-icon" src="./images/navbar/bascket.png" alt="">
 
+                        </a>
 
+
 
+                        <button class="btn user-btn-mobile d-block d-xl-none">
 
+                            <img src="./images/icon/user.svg" alt="">
 
+                        </button>
 
                     </div>
 
                     </div>
 
+
 
+
 
                 </div>
 
                 </div>
 
-              </div>
 
+            </div>
 
         </div>
 
         </div>
 
 
 
-    </section>
 
+        <!-- main navigation -->
 
+        <div class="main-nav  bg-black text-white">
 
+            <div class="container-fluid py-2">
 
 
 
+                <button class="btn d-block d-xl-none ms-auto burger-close-btn">
 
+                    <img src="./images/icon/cross-icon.svg" alt="">
 
+                </button>
 
 
 
-    <!-- home category slider -->
 
-    <section id="home-category" class="mt-3 py-3">
 
-        <div class="container">
 
-            <div class="position-relative">
 
-                <div class="swiper categorySlider">
 
-                    <div class="swiper-wrapper">
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-1.png" alt="">
 
-                          </a>
 
+                <ul class="position-relative d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center px-1">
 
+                    <li class="megamenu-parrent">
 
+                        <button class=" btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
 
+                            <span>
 
+                                Makeup
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-2.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Skincare
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-3.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                K beauty
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-4.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Heir
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-5.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Man
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-6.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Baby
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-1.png" alt="">
 
-                          </a>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center" >
 
+                            <span>
 
+                                Fragnance
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Healthcare
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Lifestyle
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Pet
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Gifts
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Brands
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
                         </div>
 
                         </div>
 
+                    </li>
 
+                    <li class="megamenu-parrent">
 
+                        <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center">
 
+                            <span>
 
+                                Makeup
 
+                            </span>
 
+                            <span class="drop-btn d-block d-xl-none ms-auto">
 
+                                <img src="./images/icon/arrow-down-solid.svg" alt="">
 
+                            </span>
 
+                        </button>
 
+                        <div class=" menu-items">
 
+                            <ul>
 
+                                <li>Skincare</li>
 
+                                <li>K beauty</li>
 
+                                <li>Heir</li>
 
+                                <li>Man</li>
 
+                                <li>Baby</li>
 
+                            </ul>
 
+                        </div>
 
+                    </li>
 
+                    <li>
 
+                        <button class=" btn btn-sm btn-pink  mt-xl-0 mx-1 px-2">Blog</button>
 
+                    </li>
 
+                    <li>
 
+                        <button class="btn btn-sm btn-orange-vivid  mt-3 mt-xl-0  mx-2 px-2 ">Buy 1 Get 1</button>
 
+                    </li>
 
+                    <li>
 
+                        <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0  mx-2 px-2">Sale</button>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+
 
+    </section>
 
+
 
+    
+    <div class="position-relative">
 
+        <!-- hero sectiion -->
 
+        <section id="hero">
 
+    
+            <div class="banner-carousel">
 
+                  <div class="swiper bannerSlider">
 
+                    <div class="swiper-wrapper">
 
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-2.png" alt="">
 
-                          </a>
 
+                            <img src="./images/home_page/home-banner.png" alt="">
 
                         </div>
 
                         </div>
 
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-3.png" alt="">
 
-                          </a>
 
+                            <img src="./images/home_page/home-banner.png" alt="">
 
                         </div>
 
                         </div>
 
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-4.png" alt="">
 
-                          </a>
 
+                            <img src="./images/home_page/home-banner.png" alt="">
 
                         </div>
 
                         </div>
 
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-5.png" alt="">
 
-                          </a>
 
+                            <img src="./images/home_page/home-banner.png" alt="">
 
                         </div>
 
                         </div>
 
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/people-6.png" alt="">
 
-                          </a>
 
+                            <img src="./images/home_page/home-banner.png" alt="">
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-                <div class="swiper-button-next"></div>
 
-                <div class="swiper-button-prev"></div>
 
+                  </div>
 
             </div>
 
             </div>
 
-        </div>
 
-    </section>
 
-
 
-
 
-    <!-- skin care -->
 
-    <section id="skin-care" class="mt-5 py-3">
 
-        <div class="container text-center">
 
-
 
-            <!-- title -->
 
-            <div class="section-title fw-normal">
 
-                START YOUR SKINCARE JOURNEY
 
+    
+        </section>
 
+    
+    
+        <!-- home category slider -->
 
+        <section id="home-category" class="mt-3 py-3">
 
+            <div class="container">
 
+                <div class="position-relative">
 
+                    <div class="swiper categorySlider">
 
+                        <div class="swiper-wrapper">
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-1.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-2.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-3.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-4.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-5.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-6.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-1.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-2.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-3.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-4.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-5.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/people-6.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="swiper-button-next"></div>
 
+                    <div class="swiper-button-prev"></div>
 
+                </div>
 
             </div>
 
             </div>
 
-            <!-- subtitle -->
 
-            <p class="mt-3 text-gray fs-4">
 
-                Skincare is an evolving personal journey and we're here
 
-                <br>
 
-                to guide you along the way.
 
-            </p>
 
-
 
-
 
-            <!-- shop tabs -->
 
-            <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  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  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  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
 
+        </section>
 
+    
+    
+        <!-- skin care -->
 
+        <section id="skin-care" class="mt-5 py-3">
 
+            <div class="container text-center">
 
+    
+                <!-- title -->
 
+                <div class="section-title fw-normal">
 
+                    START YOUR SKINCARE JOURNEY
 
+                </div>
 
+                <!-- subtitle -->
 
+                <p class="mt-3 text-gray fs-4">
 
+                    Skincare is an evolving personal journey and we're here
 
+                    <br>
 
+                    to guide you along the way.
 
+                </p>
 
+    
+    
+                <!-- shop tabs -->
 
+                <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  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>
 
                     </button>
 
-                </li>
 
-              </ul>
 
-              
-              <!-- tab content -->
 
-              <div class="tab-content mt-5" id="pills-tabContent">
 
-
 
-                <!-- SHOP BY BEST SELLERS -->
 
-                <div class="tab-pane fade show active" id="shop-by-best-sellers" role="tabpanel" aria-labelledby="shop-by-best-sellers-tab">
 
-
 
-                    <!-- product list container -->
 
-                    <div class="d-flex flex-wrap">
 
-
 
-                        <div class="product-single p-1 p-md-2 ">
 
-                            <div class=" product rounded-1 px-3 py-3 text-start">
 
+                    </li>
 
     
     
-                                <!-- product image -->
 
-                                <a href="./product-details.html">
 
-                                    <div class="image-container text-center">
 
-                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                    </div>
 
-                                </a>
 
-        
-                                <!-- product brand and ratting -->
 
-                                <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                    <!-- SHOP BY SKIN TYPE -->
 
+                    <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  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>
 
+                    </li>
 
+                  </ul>
 
+                  
+                  <!-- tab content -->
 
+                  <div class="tab-content mt-5" id="pills-tabContent">
 
+    
+                    <!-- SHOP BY BEST SELLERS -->
 
+                    <div class="tab-pane fade show active" id="shop-by-best-sellers" role="tabpanel" aria-labelledby="shop-by-best-sellers-tab">
 
+    
+                        <!-- product list container -->
 
+                        <div class="d-flex flex-wrap">
 
+    
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
         
         
-                                    <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+            
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+            
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+            
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                    <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
+            
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+            
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+            
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
-        
-                                <!-- product name -->
 
-                                <a href="./product-details.html" class="title text-gray  ">
 
-                                    Clear Kind to skin refreshing
 
-                                    shampoo
 
-                                </a>
 
-                                
-                                <!-- offer -->
 
-                                <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                    Buy 2 Get 1 free
 
-                                </p>
 
-        
-                                <!-- product price -->
 
-                                <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                    <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                    <span class="ms-3 fw-semibold">৳510 </span>
 
-                                </div>
 
-        
-                                <!-- product price in app -->
 
-                                <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                    <span class="fw-semibold">App Price : </span>
 
-                                    <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                                </div>
 
-        
-                                <!-- add to cart -->
 
-                                <div class="text-center pt-2 pt-lg-3">
 
-                                    <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                        <span>
 
-                                            <img src="./images/icon/Cart_white.svg" alt="">
 
-                                        </span>
 
-                                        <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                    </button>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <div class="product-single p-1 p-md-2 ">
 
-                            <div class=" product rounded-1 px-3 py-3 text-start">
 
     
     
-                                <!-- product image -->
 
-                                <a href="./product-details.html">
 
-                                    <div class="image-container text-center">
 
-                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                    </div>
 
-                                </a>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
         
         
-                                <!-- product brand and ratting -->
 
-                                <div class="my-2 d-flex flex-wrap align-items-center ">
 
-        
-                                    <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+            
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+            
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+            
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                    <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
+            
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+            
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+            
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
-        
-                                <!-- product name -->
 
-                                <a href="./product-details.html" class="title text-gray  ">
 
-                                    Clear Kind to skin refreshing
 
-                                    shampoo
 
-                                </a>
 
-                                
-                                <!-- offer -->
 
-                                <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                    Buy 2 Get 1 free
 
-                                </p>
 
-        
-                                <!-- product price -->
 
-                                <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                    <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                    <span class="ms-3 fw-semibold">৳510 </span>
 
-                                </div>
 
-        
-                                <!-- product price in app -->
 
-                                <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                    <span class="fw-semibold">App Price : </span>
 
-                                    <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                                </div>
 
-        
-                                <!-- add to cart -->
 
-                                <div class="text-center pt-2 pt-lg-3">
 
-                                    <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                        <span>
 
-                                            <img src="./images/icon/Cart_white.svg" alt="">
 
-                                        </span>
 
-                                        <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                    </button>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <div class="product-single p-1 p-md-2 ">
 
-                            <div class=" product rounded-1 px-3 py-3 text-start">
 
     
     
-                                <!-- product image -->
 
-                                <a href="./product-details.html">
 
-                                    <div class="image-container text-center">
 
-                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                    </div>
 
-                                </a>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
         
         
-                                <!-- product brand and ratting -->
 
-                                <div class="my-2 d-flex flex-wrap align-items-center ">
 
-        
-                                    <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+            
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+            
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+            
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                    <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
+            
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+            
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+            
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
-        
-                                <!-- product name -->
 
-                                <a href="./product-details.html" class="title text-gray  ">
 
-                                    Clear Kind to skin refreshing
 
-                                    shampoo
 
-                                </a>
 
-                                
-                                <!-- offer -->
 
-                                <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                    Buy 2 Get 1 free
 
-                                </p>
 
-        
-                                <!-- product price -->
 
-                                <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                    <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                    <span class="ms-3 fw-semibold">৳510 </span>
 
-                                </div>
 
-        
-                                <!-- product price in app -->
 
-                                <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                    <span class="fw-semibold">App Price : </span>
 
-                                    <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                                </div>
 
-        
-                                <!-- add to cart -->
 
-                                <div class="text-center pt-2 pt-lg-3">
 
-                                    <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                        <span>
 
-                                            <img src="./images/icon/Cart_white.svg" alt="">
 
-                                        </span>
 
-                                        <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                    </button>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <div class="product-single p-1 p-md-2 ">
 
-                            <div class=" product rounded-1 px-3 py-3 text-start">
 
     
     
-                                <!-- product image -->
 
-                                <a href="./product-details.html">
 
-                                    <div class="image-container text-center">
 
-                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                    </div>
 
-                                </a>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
         
         
-                                <!-- product brand and ratting -->
 
-                                <div class="my-2 d-flex flex-wrap align-items-center ">
 
-        
-                                    <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+            
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+            
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+            
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                    <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
+            
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+            
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+            
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
-        
-                                <!-- product name -->
 
-                                <a href="./product-details.html" class="title text-gray  ">
 
-                                    Clear Kind to skin refreshing
 
-                                    shampoo
 
-                                </a>
 
-                                
-                                <!-- offer -->
 
-                                <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                    Buy 2 Get 1 free
 
-                                </p>
 
-        
-                                <!-- product price -->
 
-                                <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                    <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                    <span class="ms-3 fw-semibold">৳510 </span>
 
-                                </div>
 
-        
-                                <!-- product price in app -->
 
-                                <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                    <span class="fw-semibold">App Price : </span>
 
-                                    <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                                </div>
 
-        
-                                <!-- add to cart -->
 
-                                <div class="text-center pt-2 pt-lg-3">
 
-                                    <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                        <span>
 
-                                            <img src="./images/icon/Cart_white.svg" alt="">
 
-                                        </span>
 
-                                        <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                    </button>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
-                            <div class=" product rounded-1 px-3 py-3 text-start">
 
     
     
-                                <!-- product image -->
 
-                                <a href="./product-details.html">
 
-                                    <div class="image-container text-center">
 
-                                        <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                    </div>
 
-                                </a>
 
+                            <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
         
         
-                                <!-- product brand and ratting -->
 
-                                <div class="my-2 d-flex flex-wrap align-items-center ">
 
-        
-                                    <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+            
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+            
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+            
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                    <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
+            
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+            
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+            
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
-        
-                                <!-- product name -->
 
-                                <a href="./product-details.html" class="title text-gray  ">
 
-                                    Clear Kind to skin refreshing
 
-                                    shampoo
 
-                                </a>
 
-                                
-                                <!-- offer -->
 
-                                <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                    Buy 2 Get 1 free
 
-                                </p>
 
-        
-                                <!-- product price -->
 
-                                <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                    <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                    <span class="ms-3 fw-semibold">৳510 </span>
 
-                                </div>
 
-        
-                                <!-- product price in app -->
 
-                                <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                    <span class="fw-semibold">App Price : </span>
 
-                                    <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                                </div>
 
-        
-                                <!-- add to cart -->
 
-                                <div class="text-center pt-2 pt-lg-3">
 
-                                    <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                        <span>
 
-                                            <img src="./images/icon/Cart_white.svg" alt="">
 
-                                        </span>
 
-                                        <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                    </button>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
+    
                         </div>
 
                         </div>
 
-
 
+    
+    
                     </div>
 
                     </div>
 
-
 
-
 
-                </div>
 
-
 
-                <!-- SHOP BY SKIN TYPE -->
 
-                <div class="tab-pane fade" id="shop-by-skin" role="tabpanel" aria-labelledby="shop-by-skin-type-tab">
 
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit fuga illum ducimus nobis recusandae fugit facere nisi explicabo, modi eius quibusdam animi illo similique aliquid nulla qui quidem. Provident inventore nulla ad, itaque aspernatur odit sapiente officiis saepe maiores fugit, eveniet officia eos veniam! Nulla maxime ut culpa? Rem.
 
-                </div>
 
-
 
-                <!-- SHOP BY BRAND -->
 
-                <div class="tab-pane fade" id="shop-by-band" role="tabpanel" aria-labelledby="shop-by-band-tab">
 
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam delectus quidem veritatis eligendi. Sequi eum ullam iste praesentium, eius consectetur vitae nihil itaque rem a necessitatibus quidem quam officiis provident error quaerat dolore id iure. Dolore, quis. Ipsam est maxime dolorem, provident libero magnam saepe ullam culpa eum, earum nobis.
 
-                </div>
 
-              </div>
 
-
 
-
 
-        </div>
 
-    </section>
 
-
 
-
 
-
 
-    <!-- discover more -->
 
-    <section id="discover-more" class="my-3">
 
-        <div class="container">
 
-            <div class="row align-items-center p-1 p-lg-3 border border-1">
 
-                <div class="col-12 col-lg-5">
 
-                    <img class="w-100" src="./images/home_page/looking-for-product.png" alt="">
 
-                </div>
 
-                <div class="col-12 col-lg-7 mt-3 mt-lg-0 px-3">
 
-                    <div class="title">
 
-                        LOOKING FOR PRODUCTS TO PROTECT YOUR SKIN FROM THE SUN THIS SUMMER?
 
+    
+                    <!-- SHOP BY SKIN TYPE -->
 
+                    <div class="tab-pane fade" id="shop-by-skin" role="tabpanel" aria-labelledby="shop-by-skin-type-tab">
 
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit fuga illum ducimus nobis recusandae fugit facere nisi explicabo, modi eius quibusdam animi illo similique aliquid nulla qui quidem. Provident inventore nulla ad, itaque aspernatur odit sapiente officiis saepe maiores fugit, eveniet officia eos veniam! Nulla maxime ut culpa? Rem.
 
                     </div>
 
                     </div>
 
-                    <div class="mt-2 border-image"></div>
 
-                    <p class="details mt-3 text-light-gray">
 
-                        We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
 
-                    </p>
 
-                    <div class="mt-5 text-center pb-4 ">
 
-                        <a href="#" class="discover-more btn-black px-4 py-3 px-lg-5 py-lg-3 ">
 
-                            DISCOVER MORE
 
-                        </a>
 
+    
+                    <!-- SHOP BY BRAND -->
 
+                    <div class="tab-pane fade" id="shop-by-band" role="tabpanel" aria-labelledby="shop-by-band-tab">
 
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam delectus quidem veritatis eligendi. Sequi eum ullam iste praesentium, eius consectetur vitae nihil itaque rem a necessitatibus quidem quam officiis provident error quaerat dolore id iure. Dolore, quis. Ipsam est maxime dolorem, provident libero magnam saepe ullam culpa eum, earum nobis.
 
                     </div>
 
                     </div>
 
+                  </div>
 
+    
+    
             </div>
 
             </div>
 
-        </div>
 
-    </section>
 
-
 
-
 
-    <!-- new arrivals -->
 
-    <section id="new-arrivals" class="my-5 ">
 
-        <div class="container mt-5 position-relative">
 
-            <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
-                <div class="flex-fill">
 
-                    <div class="text-center section-title fw-semibold">NEW ARRIVALS</div>
 
-                    <div class="mt-2 mx-auto border-image"></div>
 
-                </div>
 
-                <div class="view-more ">
 
-                    <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
+        </section>
 
+    
+    
+    
+        <!-- discover more -->
 
+        <section id="discover-more" class="my-3">
 
+            <div class="container">
 
+                <div class="row align-items-center p-1 p-lg-3 border border-1">
 
+                    <div class="col-12 col-lg-5">
 
+                        <img class="w-100" src="./images/home_page/looking-for-product.png" alt="">
 
+                    </div>
 
+                    <div class="col-12 col-lg-7 mt-3 mt-lg-0 px-3">
 
+                        <div class="title">
 
+                            LOOKING FOR PRODUCTS TO PROTECT YOUR SKIN FROM THE SUN THIS SUMMER?
 
+                        </div>
 
+                        <div class="mt-2 border-image"></div>
 
+                        <p class="details mt-3 text-light-gray">
 
+                            We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
 
+                        </p>
 
+                        <div class="mt-5 text-center pb-4 ">
 
+                            <a href="#" class="discover-more btn-black px-4 py-3 px-lg-5 py-lg-3 ">
 
+                                DISCOVER MORE
 
+                            </a>
 
+                        </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-
 
-            <div class="d-flex flex-wrap mt-5 pb-5 pb-lg-0">
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <!-- product image -->
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+        </section>
 
+    
+    
+        <!-- new arrivals -->
 
+        <section id="new-arrivals" class="my-5 ">
 
+            <div class="container mt-5 position-relative">
 
+                <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
+                    <div class="flex-fill">
 
+                        <div class="text-center section-title fw-semibold">NEW ARRIVALS</div>
 
+                        <div class="mt-2 mx-auto border-image"></div>
 
+                    </div>
 
+                    <div class="view-more ">
 
+                        <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
+                    </div>
 
+                </div>
 
+    
+                <div class="d-flex flex-wrap mt-5 pb-5 pb-lg-0">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- product image -->
 
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
                             
                             
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <!-- product image -->
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- product image -->
 
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
                             
                             
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <!-- product image -->
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- product image -->
 
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
                             
                             
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <!-- product image -->
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- product image -->
 
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
                             
                             
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <!-- product image -->
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- product image -->
 
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
                             
                             
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
+    
                 </div>
 
                 </div>
 
-
 
-            </div>
 
-
 
-        </div>
 
-    </section>
 
-
 
-
 
-    <!-- whats happening -->
 
-    <section id="whats-happening" class="mt-5 ">
 
-        <div class="container">
 
-            <div class="section-title  fw-semibold text-center mt-5">
 
-                HERE’S WHATS HAPPENING LIVE
 
+    
             </div>
 
             </div>
 
-            <div class="mt-2 mx-auto border-image"></div>
 
-            <p class="mt-3 section-subtitle text-gray text-center ">
 
-                Our experts and professionals are here to provide you with hot tips and knowledge to keep you on top Of your beauty and self care game.
 
-            </p>
 
-
 
-
 
-            <div class="mt-2 mt-lg-5 row justify-content-between">
 
-
 
-                <div class="col-12 col-lg-6 mt-4 mt-lg-0">
 
-
 
-                    <div class="border border-1 border-light-gray p-3 d-flex">
 
-                        <div class="row align-items-center justify-content-center">
 
-                            <div class="col-12 col-md-4">
 
-                                <div class="picture w-100">
 
-                                    <img class="w-100" src="./images/home_page/whats-happening-1.png" alt="">
 
+        </section>
 
+    
+    
+        <!-- whats happening -->
 
+        <section id="whats-happening" class="mt-5 ">
 
+            <div class="container">
 
+                <div class="section-title  fw-semibold text-center mt-5">
 
+                    HERE’S WHATS HAPPENING LIVE
 
+                </div>
 
+                <div class="mt-2 mx-auto border-image"></div>
 
+                <p class="mt-3 section-subtitle text-gray text-center ">
 
+                    Our experts and professionals are here to provide you with hot tips and knowledge to keep you on top Of your beauty and self care game.
 
+                </p>
 
+    
+    
+                <div class="mt-2 mt-lg-5 row justify-content-between">
 
+    
+                    <div class="col-12 col-lg-6 mt-4 mt-lg-0">
 
+    
+                        <div class="border border-1 border-light-gray p-3 d-flex">
 
+                            <div class="row align-items-center justify-content-center">
 
+                                <div class="col-12 col-md-4">
 
+                                    <div class="picture w-100">
 
+                                        <img class="w-100" src="./images/home_page/whats-happening-1.png" alt="">
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
-                            <div class="col-12 col-md-8">
 
-                                <div class="content px-4 py-2">
 
-                                    <div class="fs-3 fw-semibold text-center">FACEBOOK LIVE</div>
 
-                                    <div class="mt-2 mx-auto border-image"></div>
 
-                                    <p class="mt-2  text-center text-gray">
 
-                                        Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
 
-                                    </p>
 
-                                    <div class="mt-5 text-center">
 
-                                        <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
 
-                                            DISCOVER MORE
 
-                                        </a>
 
+                                <div class="col-12 col-md-8">
 
+                                    <div class="content px-4 py-2">
 
+                                        <div class="fs-3 fw-semibold text-center">FACEBOOK LIVE</div>
 
+                                        <div class="mt-2 mx-auto border-image"></div>
 
+                                        <p class="mt-2  text-center text-gray">
 
+                                            Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
 
+                                        </p>
 
+                                        <div class="mt-5 text-center">
 
+                                            <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
 
+                                                DISCOVER MORE
 
+                                            </a>
 
+                                        </div>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
+    
                     </div>
 
                     </div>
 
-
 
-                </div>
 
-
 
-                <div class="col-12 col-lg-6  mt-4 mt-lg-0">
 
-
 
-                    <div class="border border-1 border-light-gray p-3 d-flex">
 
-                        <div class="row align-items-center justify-content-center">
 
-                            <div class="col-12 col-md-4">
 
-                                <div class="picture w-100">     
-                                    <img class="w-100" src="./images/home_page/whats-happening-2.png" alt="">
 
+    
+                    <div class="col-12 col-lg-6  mt-4 mt-lg-0">
 
+    
+                        <div class="border border-1 border-light-gray p-3 d-flex">
 
+                            <div class="row align-items-center justify-content-center">
 
+                                <div class="col-12 col-md-4">
 
+                                    <div class="picture w-100">     
+                                        <img class="w-100" src="./images/home_page/whats-happening-2.png" alt="">
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
-                            <div class="col-12 col-md-8">
 
-                                <div class="content px-4 py-2">
 
-                                    <div class="fs-3 fw-semibold text-center">WINTER SALE</div>
 
-                                    <div class="mt-2 mx-auto border-image"></div>
 
-                                    <p class="mt-2  text-center text-gray">
 
-                                        Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
 
-                                    </p>
 
-                                    <div class="mt-5 text-center">
 
-                                        <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
 
-                                            DISCOVER MORE
 
-                                        </a>
 
+                                <div class="col-12 col-md-8">
 
+                                    <div class="content px-4 py-2">
 
+                                        <div class="fs-3 fw-semibold text-center">WINTER SALE</div>
 
+                                        <div class="mt-2 mx-auto border-image"></div>
 
+                                        <p class="mt-2  text-center text-gray">
 
+                                            Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
 
+                                        </p>
 
+                                        <div class="mt-5 text-center">
 
+                                            <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
 
+                                                DISCOVER MORE
 
+                                            </a>
 
+                                        </div>
 
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
+    
                     </div>
 
                     </div>
 
-
 
                 </div>
 
                 </div>
 
+    
             </div>
 
             </div>
 
-
 
-        </div>
 
-    </section>
 
-
 
-    <!-- REWARD BAZAAR -->
 
-    <section id="REWARD-BAZAAR" class="my-5 ">
 
-        <div class="container mt-5 pb-5 pb-lg-0 position-relative">
 
-            <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
-                <div class="flex-fill">
 
-                    <div class="text-center section-title fw-semibold">REWARD BAZAAR</div>
 
-                    <div class="mt-2 mx-auto border-image"></div>
 
-                </div>
 
-                <div class="view-more">
 
-                    <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
+        </section>
 
+    
+        <!-- REWARD BAZAAR -->
 
+        <section id="REWARD-BAZAAR" class="my-5 ">
 
+            <div class="container mt-5 pb-5 pb-lg-0 position-relative">
 
+                <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
+                    <div class="flex-fill">
 
+                        <div class="text-center section-title fw-semibold">REWARD BAZAAR</div>
 
+                        <div class="mt-2 mx-auto border-image"></div>
 
+                    </div>
 
+                    <div class="view-more">
 
+                        <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
+                    </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
-
 
-            <div class="d-flex flex-wrap mt-5">
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                <div class="d-flex flex-wrap mt-5">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+    
+                            <a href="./product-details.html" class="title text-gray fs-6 ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+    
+                            <p class="mt-3 text-deep-red small">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class="mt-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <div class="text-center mt-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <a href="./product-details.html" class="title text-gray fs-6 ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-
 
-                        <p class="mt-3 text-deep-red small">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class="mt-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <div class="text-center mt-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+    
+                            <a href="./product-details.html" class="title text-gray fs-6 ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+    
+                            <p class="mt-3 text-deep-red small">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class="mt-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <div class="text-center mt-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <a href="./product-details.html" class="title text-gray fs-6 ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-
 
-                        <p class="mt-3 text-deep-red small">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class="mt-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <div class="text-center mt-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+    
+                            <a href="./product-details.html" class="title text-gray fs-6 ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+    
+                            <p class="mt-3 text-deep-red small">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class="mt-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <div class="text-center mt-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <a href="./product-details.html" class="title text-gray fs-6 ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-
 
-                        <p class="mt-3 text-deep-red small">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class="mt-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <div class="text-center mt-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+    
+                            <a href="./product-details.html" class="title text-gray fs-6 ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+    
+                            <p class="mt-3 text-deep-red small">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class="mt-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <div class="text-center mt-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-
 
-                        <a href="./product-details.html" class="title text-gray fs-6 ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-
 
-                        <p class="mt-3 text-deep-red small">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class="mt-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <div class="text-center mt-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-
 
-                <div class="product-single p-1 p-md-2  d-none d-xl-block">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
-
 
-                        <a href="./product-details.html">
 
-                            <div class="image-container text-center">
 
-                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+    
+                    <div class="product-single p-1 p-md-2  d-none d-xl-block">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <a href="./product-details.html">
 
+                                <div class="image-container text-center">
 
+                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                </div>
 
+                            </a>
 
+    
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
-                        </a>
 
-
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
-
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-md-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+    
+                            <a href="./product-details.html" class="title text-gray fs-6 ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+    
+                            <p class="mt-3 text-deep-red small">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class="mt-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <div class="text-center mt-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
-
 
-                        <a href="./product-details.html" class="title text-gray fs-6 ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-
 
-                        <p class="mt-3 text-deep-red small">
 
-                            Buy 2 Get 1 free
 
+                    </div>
 
+                </div>
 
+    
+            </div>
 
+        </section>
 
+    
+        <!-- heir shine -->
 
+        <section id="heir-shine" class="mt-5 ">
 
+            <div class="container">
 
+                <div class="row align-items-center p-1 p-lg-3 pb-3 border border-1">
 
+                    <div class="col-12 col-lg-6 order-1 mt-3 mt-lg-0 order-lg-0">
 
+                        <h2>
 
+                            HAIRCARE PRODUCTS TO MAKE YOUR HAIR SHINE THIS SEASON
 
+                        </h2>
 
+                        <div class="mt-2 border-image"></div>
 
+                        <p class="mt-3 text-light-gray">
 
+                            We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
 
                         </p>
 
                         </p>
 
-
 
-                        <!-- product price -->
 
-                        <div class="mt-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
-
 
-                        <!-- product price in app -->
 
-                        <div class="mt-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
-
 
-                        <div class="text-center mt-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
+                        <div class="mt-3 mt-lg-5 text-center">
 
+                            <a href="#" class="discover-more btn-black py-2 px-3 py-lg-3 px-lg-4">
 
+                                DISCOVER MORE
 
+                            </a>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
+                    <div class="col-12 col-lg-6 order-0 order-lg-1  px-3">
 
+                        <img class="w-100" src="./images/home_page/heir-shine.png" alt="">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-
 
-        </div>
 
-    </section>
 
-
 
-    <!-- heir shine -->
 
-    <section id="heir-shine" class="mt-5 ">
 
-        <div class="container">
 
-            <div class="row align-items-center p-1 p-lg-3 pb-3 border border-1">
 
-                <div class="col-12 col-lg-6 order-1 mt-3 mt-lg-0 order-lg-0">
 
-                    <h2>
 
-                        HAIRCARE PRODUCTS TO MAKE YOUR HAIR SHINE THIS SEASON
 
-                    </h2>
 
-                    <div class="mt-2 border-image"></div>
 
-                    <p class="mt-3 text-light-gray">
 
-                        We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
 
-                    </p>
 
-                    <div class="mt-3 mt-lg-5 text-center">
 
-                        <a href="#" class="discover-more btn-black py-2 px-3 py-lg-3 px-lg-4">
 
-                            DISCOVER MORE
 
-                        </a>
 
+        </section>
 
+    
+    
+        <!-- only for you -->
 
+        <section id="only-for-you" class="my-5 ">
 
+            <div class="container mt-5">
 
+                <div class="d-flex align-items-start justify-content-center">
 
+                    <div class="flex-fill">
 
+                        <div class="text-center section-title fw-semibold">ONLY FOR YOU</div>
 
+                        <div class="mt-2 mx-auto border-image"></div>
 
+                        <div class="mt-4 text-center section-subtitle text-deep-red">SPECIAL OFFERS</div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                <div class="col-12 col-lg-6 order-0 order-lg-1  px-3">
 
-                    <img class="w-100" src="./images/home_page/heir-shine.png" alt="">
 
-            </div>
 
-        </div>
 
-    </section>
 
-
 
-
 
-    <!-- only for you -->
 
-    <section id="only-for-you" class="my-5 ">
 
-        <div class="container mt-5">
 
-            <div class="d-flex align-items-start justify-content-center">
 
-                <div class="flex-fill">
 
-                    <div class="text-center section-title fw-semibold">ONLY FOR YOU</div>
 
-                    <div class="mt-2 mx-auto border-image"></div>
 
-                    <div class="mt-4 text-center section-subtitle text-deep-red">SPECIAL OFFERS</div>
 
+    
+                <div class="row py-3">
 
+                    <div class="col-4">
 
+                        <img class="w-100" src="./images/home_page/only-for-you-1.png" alt="">
 
+                    </div>
 
+                    <div class="col-4">
 
+                        <img class="w-100" src="./images/home_page/only-for-you-2.png" alt="">
 
+                    </div>
 
+                    <div class="col-4">
 
+                        <img class="w-100" src="./images/home_page/only-for-you-3.png" alt="">
 
+                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-
 
-            <div class="row py-3">
 
-                <div class="col-4">
 
-                    <img class="w-100" src="./images/home_page/only-for-you-1.png" alt="">
 
-                </div>
 
-                <div class="col-4">
 
-                    <img class="w-100" src="./images/home_page/only-for-you-2.png" alt="">
 
-                </div>
 
-                <div class="col-4">
 
-                    <img class="w-100" src="./images/home_page/only-for-you-3.png" alt="">
 
+        </section>
 
+    
+        <!-- featured brands sliders -->
 
+        <section id="featured-brands" class="mt-3 py-3">
 
+            <div class="container">
 
+    
+                <div class="text-center section-title fw-semibold">FEATURED BRANDS</div>
 
+                <div class="mt-1 mx-auto border-image"></div>
 
+    
+                <div class="mt-4 position-relative">
 
+                    <div class="swiper featuredBrands">
 
+                        <div class="swiper-wrapper">
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-1.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-2.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-3.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-4.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-1.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-2.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-3.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                            <div class="swiper-slide">
 
+                              <a href="#">
 
+                                  <img src="./images/home_page/feature-brands-4.png" alt="">
 
+                              </a>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-        </div>
 
-    </section>
 
-
 
-    <!-- featured brands sliders -->
 
-    <section id="featured-brands" class="mt-3 py-3">
 
-        <div class="container">
 
-
 
-            <div class="text-center section-title fw-semibold">FEATURED BRANDS</div>
 
-            <div class="mt-1 mx-auto border-image"></div>
 
-
 
-            <div class="mt-4 position-relative">
 
-                <div class="swiper featuredBrands">
 
+        </section>
 
+    
+        <!-- trending stories -->
 
+        <section id="trending-stories" class="mt-5 ">
 
+            <div class="container mt-5">
 
+                <div class="text-center section-title fw-semibold">TRENDING STORIES</div>
 
+                <div class="mt-1 mx-auto border-image"></div>
 
+                <div class="mt-2 text-center fs-4 text-gray">ON THE BLOG</div>
 
+    
+                <div class="swiper trendingStories">
 
                     <div class="swiper-wrapper">
 
                     <div class="swiper-wrapper">
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-1.png" alt="">
 
-                          </a>
 
-                        </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-2.png" alt="">
 
-                          </a>
 
-                        </div>
 
-                        <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-3.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-3">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-1.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-4.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-2">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-2.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-1.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-2">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-3.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-2.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-2">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-1.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-3.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-2">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-2.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                         <div class="swiper-slide">
 
                         <div class="swiper-slide">
 
-                          <a href="#">
 
-                              <img src="./images/home_page/feature-brands-4.png" alt="">
 
-                          </a>
 
+                            <div class="trending-container p-2">
 
+                                <div class="image-container">
 
+                                    <a href="#">
 
+                                        <img class="w-100" src="./images/home_page/trending-3.png" alt="">
 
+                                    </a>
 
+                                </div>
 
+                                <div class="content-details text-start px-2 py-4">
 
+                                    <div class="category-link">
 
+                                        <a class="text-deep-red" href="#">Lifestyle</a>
 
+                                    </div>
 
+                                    <div class="blog-link mt-3">
 
+                                        <a class="mt-3 text-gray fs-4" href="#">
 
+                                            USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
+                                        </a>
 
+                                    </div>
 
+                                    <p class="mt-3 text-light-gray fs-6">
 
+                                        নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
+                                    </p>
 
+                                    <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
+                                    <div class="mt-3 read-more">
 
+                                        <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
                         </div>
 
                         </div>
 
+    
                     </div>
 
                     </div>
 
+                    <!-- <div class="swiper-button-next"></div>
 
+                    <div class="swiper-button-prev"></div> -->
 
                 </div>
 
                 </div>
 
+    
+    
             </div>
 
             </div>
 
-        </div>
 
-    </section>
 
-
 
-    <!-- trending stories -->
 
-    <section id="trending-stories" class="mt-5 ">
 
-        <div class="container mt-5">
 
-            <div class="text-center section-title fw-semibold">TRENDING STORIES</div>
 
-            <div class="mt-1 mx-auto border-image"></div>
 
-            <div class="mt-2 text-center fs-4 text-gray">ON THE BLOG</div>
 
-
 
-            <div class="swiper trendingStories">
 
-                <div class="swiper-wrapper">
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-3">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-1.png" alt="">
 
-                                </a>
 
-                            </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
+        </section>
 
+    
+        <!-- find on instagram -->
 
+        <section id="find-on-instagram" class="my-2 pb-3">
 
+            <div class="container ">
 
+                <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">
 
+                    <img class="w-100" src="./images/home_page/find-on instragram.png" alt="">
 
+                </div>
 
+    
+                
+            </div>
 
+        </section>
 
+    
+        
+        <!-- recently viewed -->
 
+        <section id="recently-viewed" class="my-5 ">
 
+            <div class="container mt-5 pb-5 pb-lg-0 position-relative">
 
+                <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
+                    <div class="flex-fill">
 
+                        <div class="text-center section-title fw-semibold">RECENTLY VIEWED</div>
 
+                        <div class="mt-2 mx-auto border-image"></div>
 
+                    </div>
 
+                    <div class="view-more">
 
+                        <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
+                    </div>
 
+                </div>
 
+    
+                <div class="d-flex flex-wrap mt-5">
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- 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="">
 
                                 </div>
 
                                 </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-                    </div>
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-2">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-2.png" alt="">
 
-                                </a>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+                            
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
                             </div>
 
                             </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
-                                </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
-                                </div>
 
+    
+                            <!--  add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-2">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-3.png" alt="">
 
-                                </a>
 
-                            </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- 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="">
 
                                 </div>
 
                                 </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+                            
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-2">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-1.png" alt="">
 
-                                </a>
 
-                            </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- 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="">
 
                                 </div>
 
                                 </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+                            
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-2">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-2.png" alt="">
 
-                                </a>
 
-                            </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
+    
+                    <div class="product-single p-1 p-md-2 ">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- 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="">
 
                                 </div>
 
                                 </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+                            
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-
 
-                    <div class="swiper-slide">
 
-                        <div class="trending-container p-2">
 
-                            <div class="image-container">
 
-                                <a href="#">
 
-                                    <img class="w-100" src="./images/home_page/trending-3.png" alt="">
 
-                                </a>
 
-                            </div>
 
-                            <div class="content-details text-start px-2 py-4">
 
-                                <div class="category-link">
 
-                                    <a class="text-deep-red" href="#">Lifestyle</a>
 
-                                </div>
 
-                                <div class="blog-link mt-3">
 
-                                    <a class="mt-3 text-gray fs-4" href="#">
 
-                                        USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
 
-                                    </a>
 
+    
+                    <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
+                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+    
+                            <!-- 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="">
 
                                 </div>
 
                                 </div>
 
-                                <p class="mt-3 text-light-gray fs-6">
 
-                                    নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
 
-                                </p>
 
-                                <p class="date text-light-gray mt-3">26 Nov 2022</p>
 
-                                <div class="mt-3 read-more">
 
-                                    <a class="text-deep-red fs-4" href="#">Read More </a>
 
+                            </a>
 
+    
+                            <!-- product brand and ratting -->
 
+                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+    
+                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                
+                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
+    
+                            <!-- product name -->
 
+                            <a href="./product-details.html" class="title text-gray  ">
 
+                                Clear Kind to skin refreshing
 
+                                shampoo
 
+                            </a>
 
+                            
+                            <!-- offer -->
 
+                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                Buy 2 Get 1 free
 
+                            </p>
 
+    
+                            <!-- product price -->
 
+                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            </div>
 
+    
+                            <!-- product price in app -->
 
+                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                <span class="fw-semibold">App Price : </span>
 
+                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                            </div>
 
+    
+                            <!-- add to cart -->
 
+                            <div class="text-center pt-2 pt-lg-3">
 
+                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                    <span>
 
+                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                                    </span>
 
+                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                </button>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
-
 
+    
+                </div>
 
+    
+            </div>
 
+        </section>
 
+    
+    
+        <!-- show off -->
 
+        <section id="show-off">
 
+            <img class="w-100" src="./images/home_page/show-off.jpg" alt="">
 
+        </section>
 
+    
+    
+        <!-- All Links -->
 
+        <section id="all-link" class="mt-5 py-5">
 
+            <div class="container">
 
+                
+                <div class="link-group mt-2">
 
+                    <h4 class="title text-center text-deep-red fw-normal">MAKEUP</h4>
 
+                    <div class="links mt-3 px-3">
 
+                        <nav aria-label="breadcrumb">
 
+                            <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                            </ol>
 
+                          </nav>
 
+                          
+                    </div>
 
+                </div>
 
+    
+                <div class="link-group mt-4">
 
+                    <h4 class="title text-center text-deep-red fw-normal">SKIN</h4>
 
+                    <div class="links mt-3 px-3">
 
+                        <nav aria-label="breadcrumb">
 
+                            <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                            </ol>
 
+                          </nav>
 
+                          
+                    </div>
 
+                </div>
 
+                
+                <div class="link-group mt-4">
 
+                    <h4 class="title text-center text-deep-red fw-normal">WELLNESS</h4>
 
+                    <div class="links mt-3 px-3">
 
+                        <nav aria-label="breadcrumb">
 
+                            <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                            </ol>
 
+                          </nav>
 
+                          
+                    </div>
 
+                </div>
 
+    
+                <div class="link-group mt-4">
 
+                    <h4 class="title text-center text-deep-red fw-normal">COLLECTION</h4>
 
+                    <div class="links mt-3 px-3">
 
+                        <nav aria-label="breadcrumb">
 
+                            <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                                <li class="breadcrumb-item"><a href="#">Library</a></li>
 
+                            </ol>
 
+                          </nav>
 
+                          
+                    </div>
 
                 </div>
 
                 </div>
 
-                <!-- <div class="swiper-button-next"></div>
 
-                <div class="swiper-button-prev"></div> -->
 
             </div>
 
             </div>
 
+        </section>
 
+                
 
 
+            <!-- checkout  sidebar-->
 
+            <section id="checkout" class="pt-2 ">
 
 
 
-        </div>
 
-    </section>
 
+                <div class="checkout-container position-fixed bg-white pb-5">
 
 
 
-    <!-- find on instagram -->
 
-    <section id="find-on-instagram" class="my-2 pb-3">
 
-        <div class="container ">
 
-            <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">
 
-                <img class="w-100" src="./images/home_page/find-on instragram.png" alt="">
 
-            </div>
 
+                    <div class="cart-product-container px-3 pt-2 pb-5">
 
 
 
-            
-        </div>
 
-    </section>
 
+                        <!-- cart header -->
 
+                        <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
 
+                            <h4 >CART</h4>
 
+                            <button class="cross-btn btn">
 
+                                <img src="./images/icon/cross-icon.svg" alt="">
 
+                            </button>
 
+                        </div>
 
 
 
-    
-    <!-- recently viewed -->
 
-    <section id="recently-viewed" class="my-5 ">
 
-        <div class="container mt-5 pb-5 pb-lg-0 position-relative">
 
-            <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
 
-                <div class="flex-fill">
 
-                    <div class="text-center section-title fw-semibold">RECENTLY VIEWED</div>
 
-                    <div class="mt-2 mx-auto border-image"></div>
 
-                </div>
 
-                <div class="view-more">
 
-                    <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
 
-                </div>
 
-            </div>
 
 
 
-            <div class="d-flex flex-wrap mt-5">
 
+                        <!-- cart item -->
 
+                        <div class="cart-items mt-3">
 
 
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                        <!-- 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="">
 
-                            </div>
 
-                        </a>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
 
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
+
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
 
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
 
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
 
 
-                        <!--  add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
 
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
 
 
-                        <!-- 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="">
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </a>
 
 
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+
 
+
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
+
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
 
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
 
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
 
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
 
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
 
 
-                        <!-- 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="">
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </a>
 
 
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+
 
+
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
+
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
 
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
 
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
 
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
 
 
-                <div class="product-single p-1 p-md-2 ">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
 
 
-                        <!-- 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="">
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </a>
 
 
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+
 
+
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
+
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
 
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
 
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
 
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
 
 
-                <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
-                    <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
 
 
-                        <!-- 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="">
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
-                        </a>
 
 
 
-                        <!-- product brand and ratting -->
 
-                        <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                            <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                            
-                            <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                <div class="d-flex justify-content-between">
 
+                                    <div class="item-details d-flex">
 
+                                        <div class="img-container">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+
 
+                                        <div class="pt-2 ">
 
+                                            <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                            <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                        </div>
 
+                                        
+                                    </div>
 
+                                    <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                        <div class=" quantity text-center" >
 
+                                            <div class="title text-gray small">QTY</div>
 
+                                            <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+
 
+
 
+                                <div class="price text-end mt-3 fs-5">
 
+                                    <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                    <span class="ms-3 text-gray">৳ 440</span>
 
+                                </div>
 
+
 
+                                <button class="btn delete-btn position-absolute">
 
+                                    <img src="./images/icon/delete-icon.svg" alt="">
 
+                                </button>
 
                             </div>
 
                             </div>
 
+
 
                         </div>
 
                         </div>
 
 
 
-                        <!-- product name -->
 
-                        <a href="./product-details.html" class="title text-gray  ">
 
-                            Clear Kind to skin refreshing
 
-                            shampoo
 
-                        </a>
 
-                        
-                        <!-- offer -->
 
-                        <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                            Buy 2 Get 1 free
 
-                        </p>
 
+                    </div>
 
 
 
-                        <!-- product price -->
 
-                        <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                            <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                            <span class="ms-3 fw-semibold">৳510 </span>
 
-                        </div>
 
 
 
-                        <!-- product price in app -->
 
-                        <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                            <span class="fw-semibold">App Price : </span>
 
-                            <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                        </div>
 
 
 
-                        <!-- add to cart -->
 
-                        <div class="text-center pt-2 pt-lg-3">
 
-                            <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                <span>
 
-                                    <img src="./images/icon/Cart_white.svg" alt="">
 
-                                </span>
 
-                                <span class="add-cart-text ms-2">Add to Cart</span>
 
-                            </button>
 
+                    <!-- proced button and utility -->
 
+                    <div class="content position-relative w-100">
 
+
 
+                        <div class="proceed-button-container position-fixed bg-white  bottom-0  px-2 py-3 d-flex align-items-center justify-content-between">
 
+
 
+                            <div class="text-center w-50">
 
+                                <div class="fw-normal">SUBTOTAL</div>
 
+                                <div class="fw-semibold">৳1,550</div>
 
+                            </div>
 
+
 
+                            <div class="text-center w-50">
 
+                                <a href="./checkout.html" class="btn  rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
 
+                                    PROCEED 
+                                </a>
 
+                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
+
 
                 </div>
 
                 </div>
 
 
 
-            </div>
 
+            
+            </section>
 
+        
+            <!-- checkout sidebar navigation button -->
 
+            <div id="checkout-button"  >
 
+                <!-- checkout navigation button for desktop -->
 
+                <button id="checkout-btn-desktop" class="checkout-product-btn-desktop position-fixed d-none d-xl-flex flex-lg-column justify-content-lg-center align-items-lg-center bg-white border-0 text-white p-2">
 
+                    <img class="checkout-icon" src="./images/icon/shoping bag.svg" alt="">
 
+                    <!-- items count -->
 
+                    <p class="count mt-2 text-black small">
 
+                        <span>5</span>
 
+                        <span>items</span>
 
+                    </p>
 
+                    <!-- price -->
 
+                    <p class="price text-black text-deep-red">4540</p>
 
+                </button>
 
 
 
-        </div>
 
-    </section>
 
+                <!-- checkout navigation button for mobile -->
 
+                <div id="checkout-btn-mobile" class="d-block">
 
+                    <div class="checkout-mobile d-flex position-fixed bottom-0 start-0  d-block d-lg-none shadow-sm" >
 
 
 
+                        <div class="border-0 py-2 bg-pink-extralight w-50 text-center">
 
 
 
-    <!-- show off -->
 
-    <section id="show-off">
 
-        <img class="w-100" src="./images/home_page/show-off.jpg" alt="">
 
-    </section>
 
+                            <div class="cart-details position-relative mx-auto">
 
 
 
+                                <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
 
+    
+                                <!-- total -->
 
+                                <span class="total position-absolute text-deep-red">
 
+                                    500000 ৳ 
+                                </span>
 
+                            </div>
 
+                        </div>
 
 
 
-    <!-- All Links -->
 
-    <section id="all-link" class="mt-5 py-5">
 
-        <div class="container">
 
-            
-            <div class="link-group mt-2">
 
-                <h4 class="title text-center text-deep-red fw-normal">MAKEUP</h4>
 
-                <div class="links mt-3 px-3">
 
-                    <nav aria-label="breadcrumb">
 
-                        <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
-                            <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                        </ol>
 
-                      </nav>
 
-                      
+                        <!-- checkout nav button -->
 
+                        <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
 
+                            Go To Checkout 
+                        </button>
 
+                    </div>
 
                 </div>
 
                 </div>
 
-            </div>
 
 
 
-            <div class="link-group mt-4">
 
-                <h4 class="title text-center text-deep-red fw-normal">SKIN</h4>
 
-                <div class="links mt-3 px-3">
 
-                    <nav aria-label="breadcrumb">
 
-                        <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
-                            <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                        </ol>
 
-                      </nav>
 
-                      
-                </div>
 
-            </div>
 
-            
-            <div class="link-group mt-4">
 
-                <h4 class="title text-center text-deep-red fw-normal">WELLNESS</h4>
 
-                <div class="links mt-3 px-3">
 
-                    <nav aria-label="breadcrumb">
 
-                        <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
-                            <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                        </ol>
 
-                      </nav>
 
-                      
-                </div>
 
             </div>
 
             </div>
 
 
 
-            <div class="link-group mt-4">
 
-                <h4 class="title text-center text-deep-red fw-normal">COLLECTION</h4>
 
-                <div class="links mt-3 px-3">
 
-                    <nav aria-label="breadcrumb">
 
-                        <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
 
-                            <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                            <li class="breadcrumb-item"><a href="#">Library</a></li>
 
-                        </ol>
 
-                      </nav>
 
-                      
-                </div>
 
-            </div>
 
-        </div>
 
-    </section>
 
+
 
+    </div>
 
+
 
 
 
 
 
     <!-- footer -->
 
     <!-- footer -->

+ 192 - 62
js/app.js
View File 

@@ -1,61 +1,73 @@
 
 
 
-// lightbox
 
-// let gallery =  new SimpleLightbox('.gallery a', {});
 
-// gallery.on('show.simplelightbox', function () {
 
-//   // do something…
 
-// });
 
-
 
-// lightbox end
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-    // product details carousel
 
-    // var galleryThumbs = new Swiper('.gallery-thumbs', {
 
-    //     loop: true,
 
-    //     loopedSlides: 1,
 
-    //     spaceBetween: 10,
 
-    //     slidesPerView: 2,
 
-    //     direction: 'vertical',
 
-    //     // centeredSlides: true,
 
-
 
-    //     freeMode: true,
 
-    //     breakpoints: { 
-    //         0: { 
-    //           direction: 'horizontal', 
-    //           spaceBetween: 5,
 
-    //           slidesPerView: 4,
 
-    //           centeredSlides: true,
 
-    //         },
 
-    //         993: { 
-    //           direction: 'vertical', 
-    //           spaceBetween: 15,
 
-    //           slidesPerView: 4,
 
-
 
-    //         }
 
-    //       }
 
-    //   });
 
-
 
-    // var galleryTop = new Swiper('.gallery-main', {
 
-    //     loop: true,
 
-    //     spaceBetween: 10,
 
-    //     loopedSlides: 1,
 
-    //     centeredSlides: true,
 
-    //     freeMode: true,
 
-    //     navigation: {
 
-    //       nextEl: '.swiper-button-next',
 
-    //       prevEl: '.swiper-button-prev',
 
-    //     },
 
-    //     thumbs: {
 
-    //       swiper: galleryThumbs,
 
-    //     },
 
-    //   });
 
-    // product details carousel end
 
-  
+// header on scroll sticky
 
+
 
+window.addEventListener('scroll', function(){
 
+  var header = document.querySelector('.header');
 
+  header.classList.toggle("sticky", window.scrollY > 400);
 
+})
 
+
 
+
 
+// header search btn for mobile screen
 
+
 
+const searchBar = document.querySelector(".search")
 
+
 
+const searchButton = document.querySelector(".search-btn-mobile")
 
+
 
+  if ( searchBar && searchButton) {
 
+    searchButton.addEventListener("click", () => {
 
+      searchBar.classList.toggle("active")
 
+    })
 
+  }
 
+
 
+
 
+  // header mega menu
 
+
 
+  const megaMenuContainer = document.querySelectorAll(".megamenu-parrent");
 
+
 
+  const menuItemsAll = document.querySelectorAll(".menu-items");
 
+
 
+
 
+  if(megaMenuContainer) {
 
+    megaMenuContainer.forEach(container => {
 
+
 
+      const megaButton = container.querySelector(".collapse-buton");
 
+
 
+      const menuItems = container.querySelector(".menu-items")
 
+
 
+      if(megaButton && menuItems) {
 
+        megaButton.addEventListener("click", () => {
 
+          menuItems.classList.toggle("active");
 
+
 
+          menuItemsAll.forEach(item => {
 
+            if (item !== menuItems) {
 
+              item.classList.remove("active")
 
+            }
 
+          })
 
+        })
 
+      }
 
+    })
 
+  }
 
+
 
+
 
+  // burger menu function
 
+  const burgerMenu = document.querySelector(".burger-menu");
 
+  const burgerMenuClose = document.querySelector(".burger-close-btn");
 
+
 
+  const mainNav = document.querySelector(".main-nav")
 
+        
+  // open menu
 
+  if(burgerMenu && mainNav) {
 
+    burgerMenu.addEventListener("click", () => {
 
+      mainNav.classList.add("active")
 
+    })
 
+  }
 
+  // close menu
 
+  if(burgerMenuClose && mainNav) {
 
+    burgerMenuClose.addEventListener("click", () => {
 
+      mainNav.classList.remove("active")
 
+    })
 
+  }
 
+
 
 
 
 
 
 // fileter sidebar function
 
 // fileter sidebar function
 
@@ -101,12 +113,16 @@
 
   const checkoutContainer = document.querySelector('.checkout-container')
 
   const checkoutContainer = document.querySelector('.checkout-container')
 
 
 
 
 
+
 
+
 
           // checkout open function for desktop
 
           // checkout open function for desktop
 
-      if(checkoutProductBtnDesktop && checkoutContainer && filterContainer) {
 
+      if(checkoutProductBtnDesktop && checkoutContainer) {
 
         checkoutProductBtnDesktop.addEventListener('click', () => {
 
         checkoutProductBtnDesktop.addEventListener('click', () => {
 
 
 
           // hide fillter sidebar if open
 
           // hide fillter sidebar if open
 
-          filterContainer.classList.remove("active")
 
+          if (filterContainer) {
 
+            filterContainer.classList.remove("active")
 
+          }
 
 
 
           // open checkout sidebar
 
           // open checkout sidebar
 
           checkoutContainer.style.display = "block";
 
           checkoutContainer.style.display = "block";
 
@@ -115,11 +131,13 @@
 
       };
 
       };
 
 
 
               // checkout open function for mobile
 
               // checkout open function for mobile
 
-      if(checkoutProductBtnMobile && checkoutContainer && filterContainer) {
 
+      if(checkoutProductBtnMobile && checkoutContainer ) {
 
         checkoutProductBtnMobile.addEventListener('click', () => {
 
         checkoutProductBtnMobile.addEventListener('click', () => {
 
           
           
           // hide fillter sidebar if open
 
           // hide fillter sidebar if open
 
-          filterContainer.classList.remove("active");
 
+          if (filterContainer) {
 
+            filterContainer.classList.remove("active")
 
+          }
 
 
 
           // open checkout sidebar
 
           // open checkout sidebar
 
           checkoutContainer.style.display = "block";
 
           checkoutContainer.style.display = "block";
 
@@ -161,7 +179,9 @@
 
         loopedSlides: 1,
 
         loopedSlides: 1,
 
         breakpoints: { 
         breakpoints: { 
           0: { 
           0: { 
-            slidesPerView: 3,
 
+            slidesPerView: 5,
 
+          spaceBetween: 10,
 
+
 
           },
 
           },
 
           576: { 
           576: { 
             slidesPerView: 4,
 
             slidesPerView: 4,
 
@@ -302,3 +322,113 @@
 
         // do something…
 
         // do something…
 
     });
 
     });
 
   }
 
   }
 
+
 
+
 
+
 
+
 
+
 
+
 
+  // checkout page stepper
 
+
 
+  const step = document.getElementsByClassName("step");
 
+
 
+  if (step) {
 
+
 
+    var currentTab = 0; // Current tab is set to be the first tab (0)
 
+    showTab(currentTab); // Display the current tab
 
+    
+    function showTab(n) {
 
+        // This function will display the specified tab of the form...
 
+        var x = document.getElementsByClassName("step");
 
+        x[n].style.display = "block";
 
+        //... and fix the Previous/Next buttons:
 
+        if (n == 0) {
 
+          document.getElementById("prevBtn").style.display = "none";
 
+        } else {
 
+          document.getElementById("prevBtn").style.display = "inline";
 
+        }
 
+        if (n == (x.length - 1)) {
 
+          document.getElementById("nextBtn").innerHTML = "Submit";
 
+        } else {
 
+          document.getElementById("nextBtn").innerHTML = "Next";
 
+        }
 
+        //... and run a function that will display the correct step indicator:
 
+        fixStepIndicator(n)
 
+    }
 
+    
+    function nextPrev(n) {
 
+        // This function will figure out which tab to display
 
+        var x = document.getElementsByClassName("step");
 
+        // Exit the function if any field in the current tab is invalid:
 
+        if (n == 1 && !validateForm()) return false;
 
+        // Hide the current tab:
 
+        x[currentTab].style.display = "none";
 
+        // Increase or decrease the current tab by 1:
 
+        currentTab = currentTab + n;
 
+        // if you have reached the end of the form...
 
+        if (currentTab >= x.length) {
 
+          // ... the form gets submitted:
 
+          document.getElementById("checkoutForm").submit();
 
+          return false;
 
+        }
 
+        // Otherwise, display the correct tab:
 
+        showTab(currentTab);
 
+    }
 
+    
+    function validateForm() {
 
+        // This function deals with validation of the form fields
 
+        var x, y, z, w, i, valid = true;
 
+        x = document.getElementsByClassName("step");
 
+        y = x[currentTab].getElementsByTagName("input");
 
+        z = x[currentTab].getElementsByTagName("select");
 
+        w = x[currentTab].getElementsByTagName("textarea");
 
+        // A loop that checks every input field in the current tab:
 
+        for (i = 0; i < y.length; i++) {
 
+          // If a field is empty...
 
+          if (y[i].value == "") {
 
+            // add an "invalid" class to the field:
 
+            y[i].className += " invalid";
 
+            // and set the current valid status to false
 
+            valid = false;
 
+          }
 
+        }
 
+
 
+        for (i = 0; i < z.length; i++) {
 
+          // If a field is empty...
 
+          if (z[i].value == "") {
 
+            // add an "invalid" class to the field:
 
+            z[i].className += " invalid";
 
+            // and set the current valid status to false
 
+            valid = false;
 
+          }
 
+        }
 
+
 
+        for (i = 0; i < w.length; i++) {
 
+          // If a field is empty...
 
+          if (w[i].value == "") {
 
+            // add an "invalid" class to the field:
 
+            w[i].className += " invalid";
 
+            // and set the current valid status to false
 
+            valid = false;
 
+          }
 
+        }
 
+        // If the valid status is true, mark the step as finished and valid:
 
+        if (valid) {
 
+          document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
 
+        }
 
+        return valid; // return the valid status
 
+    }
 
+    
+    function fixStepIndicator(n) {
 
+        // This function removes the "active" class of all steps...
 
+        var i, x = document.getElementsByClassName("stepIndicator");
 
+        for (i = 0; i < x.length; i++) {
 
+          x[i].className = x[i].className.replace(" active", "");
 
+        }
 
+        //... and adds the "active" class on the current step:
 
+        x[n].className += " active";
 
+    }
 
+
 
+  }
 
+
 
+

+ 1176 - 779
product-details.html
View File 

@@ -124,982 +124,1379 @@
 
 
 
         </section>
 
         </section>
 
 
 
+        <div class="position-relative">
 
 
 
-        <!-- top add -->
 
-        <section id="top-add" class="mt-3">
 
-            <div class="container">
 
-                <div class="row justify-content-between">
 
-                    <div class="add-container col-12 col-lg-8 mb-4">
 
-                        <div class="add text-center fs-3 p-2 h-100">Add</div>
 
-                    </div>
 
-                    <div class="add-container col-12 col-lg-4 mb-4">
 
-                        <div class="add text-center fs-3 p-2 h-100">Add</div>
 
+                    <!-- top add -->
 
+                <section id="top-add" class="mt-3">
 
+                    <div class="container">
 
+                        <div class="row justify-content-between">
 
+                            <div class="add-container col-12 col-lg-8 mb-4">
 
+                                <div class="add text-center fs-3 p-2 h-100">Add</div>
 
+                            </div>
 
+                            <div class="add-container col-12 col-lg-4 mb-4">
 
+                                <div class="add text-center fs-3 p-2 h-100">Add</div>
 
+                            </div>
 
+                        </div>
 
                     </div>
 
                     </div>
 
-                </div>
 
-            </div>
 
-        </section>
 
+                </section>
 
+
 
+                <!-- product details -->
 
+                <section id="product-details">
 
+                    <div class="container">
 
+                        <div class="row">
 
+
 
+                            <!-- product carousel -->
 
+                            <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 -->
 
+                                    <div class="thumb-container border-lg-end border-lg-2 border-extralight-black order-1 order-lg-0">
 
+                                        <div class="swiper productThumb px-2">
 
+                                            <div class="swiper-wrapper">
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product image.png" />
 
+                                                </div>
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product.jpg" />
 
+                                                </div>
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product image.png" />
 
+                                                </div>
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product.jpg" />
 
+                                                </div>
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product image.png" />
 
+                                                </div>
 
+                                                
+                                                <div class="swiper-slide ">
 
+                                                    <img src="./images/product_details/product.jpg" />
 
+                                                </div>
 
 
 
-        <!-- product details -->
 
-        <section id="product-details">
 
-            <div class="container">
 
-                <div class="row">
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                    <!-- product carousel -->
 
-                    <div class="col-12 col-lg-7 col-xl-7 ">
 
-                        <div class="product-carousel d-flex flex-column flex-lg-row align-items-center">
 
+                                    <!-- main slider -->
 
+                                    <div class="main-carousel flex-fill w-100 px-3 order-0 order-lg-1" >
 
+                                        <div class="swiper productSlider h-100">
 
+                                            <div class="swiper-wrapper gallery ">
 
 
 
-                            <!-- thumb slider -->
 
-                            <div class="thumb-container border-lg-end border-lg-2 border-extralight-black order-1 order-lg-0">
 
-                                <div class="swiper productThumb px-2">
 
-                                    <div class="swiper-wrapper">
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product image.png" />
 
-                                        </div>
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product.jpg" />
 
-                                        </div>
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product image.png" />
 
-                                        </div>
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product.jpg" />
 
-                                        </div>
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product image.png" />
 
-                                        </div>
 
-                                        
-                                        <div class="swiper-slide ">
 
-                                            <img src="./images/product_details/product.jpg" />
 
-                                        </div>
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+                                                <div class="swiper-slide">
 
+                                                    <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                                </div>
 
+
 
+
 
+                                                <div class="clear"></div>
 
 
 
+                                                
+                                            </div>
 
+                                            <div class="swiper-button-next "></div>
 
+                                            <div class="swiper-button-prev"></div>
 
+                                        </div>    
                                     </div>
 
                                     </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- main slider -->
 
-                            <div class="main-carousel flex-fill w-100 px-3 order-0 order-lg-1" >
 
-                                <div class="swiper productSlider h-100">
 
-                                    <div class="swiper-wrapper gallery ">
 
+                            <!-- product detail -->
 
+                            <div class="product-details-contaioner col-12 col-lg-5 col-xl-4">
 
+                                <div class="details px-2  px-md-3 py-4 rounded-1 mb-4">
 
+
 
+                                    <!-- product rattings -->
 
+                                    <div class="d-flex justify-content-between align-items-center w-100">
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
-                                        </div>
 
+                                        <div class="d-flex align-items-center w-100">
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                            <div class="title fw-bold fs-5">Clear</div>
 
+                                            
+                                            <div class="ms-2 rating d-flex align-items-start">
 
+                                                <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                                <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                                <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                                <div class="ms-1">(15)</div>
 
+                                            </div>
 
                                         </div>
 
                                         </div>
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
+
 
+                                        <div class="social d-flex align-items-center">
 
+                                            <a class="ms-2" href="#">
 
+                                                <img class="social-icon" src="./images/icon/instragram.svg" alt="">
 
+                                            </a>
 
+                                            <a class="ms-2" href="#">
 
+                                                <img class="social-icon" src="./images/icon/massenger.svg" alt="">
 
+                                            </a>
 
+                                            <a class="ms-2" href="#">
 
+                                                <img class="social-icon" src="./images/icon/whats app.svg" alt="">
 
+                                            </a>
 
+                                            <a class="ms-2" href="#">
 
+                                                <img class="social-icon" src="./images/icon/link.svg" alt="">
 
+                                            </a>
 
                                         </div>
 
                                         </div>
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                    </div>
 
+
 
+                                    <!-- product titile -->
 
+                                    <div class="mt-2 title-full fs-5">
 
+                                        Clear Men Cool Sport Menthol Shampoo 450ml
 
+                                    </div>
 
+
 
+                                    <!-- product price -->
 
+                                    <div class="mt-2 price fs-5">
 
+                                        <span class="text-decoration-line-through">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
+
 
+                                    <!-- product price in app -->
 
+                                    <div class="mt-2 app-price fs-5 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    
+                                    <!-- product count size color -->
 
+                                    <div class="mt-2 row align-items-center justify-content-between flex-wrap w-100">
 
+
 
+                                        <!-- product count -->
 
+                                        <div class="col-12 col-md-6 col-lg-4 count-container ">
 
+
 
+                                            <div class="d-flex align-items-center border border-1">
 
+                                                <div class="btn border-0 outline-0">
 
+                                                    <img class="count-btn-icon" src="./images/icon/minus.svg" alt="">
 
+                                                </div>
 
+                                                <div class="mx-1 count">1</div>
 
+                                                <div class="btn border-0 outline-0">
 
+                                                    <img class="count-btn-icon" src="./images/icon/plus.svg" alt="">
 
+                                                </div>
 
+                                            </div>
 
+                                            
                                         </div>
 
                                         </div>
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product image.png"><img src="./images/product_details/product image.png" alt="" title=""/></a>
 
+                                        <!-- product color -->
 
+                                        <div class="col-12 col-md-6 col-lg-4 color-container">
 
+                                            <div class="sm text-center">Color</div>
 
+
 
+                                            <form class="color-btn-container d-flex justify-content-center align-items-center">
 
+
 
+                                                <div class="form-check ">
 
+                                                    <input class="form-check-input color-btn" type="radio" name="flexRadioDefault"  style="background-color: red;">
 
+                                                    </div>
 
+
 
+                                                <div class="form-check ms-1">
 
+                                                    <input class="form-check-input color-btn" type="radio" name="flexRadioDefault" checked style="background-color: green;">
 
+                                                </div>
 
+
 
+                                                <div class="form-check ms-1">
 
+                                                    <input class="form-check-input color-btn" type="radio" name="flexRadioDefault"  style="background-color: yellow;">
 
+                                                </div>
 
+
 
+                                                <div class="form-check ms-1">
 
+                                                    <input class="form-check-input color-btn" type="radio" name="flexRadioDefault" style="background-color: blue;">
 
+                                                </div>
 
+                                                    
+                                            </form>
 
                                         </div>
 
                                         </div>
 
 
 
-                                        <div class="swiper-slide">
 
-                                            <a href="./images/product_details/product.jpg"><img src="./images/product_details/product.jpg" alt="" title=""/></a>
 
+                                        <!-- product size -->
 
+                                        <div class="col-12 col-md-6 col-lg-4  size-container">
 
+                                            <div class="sm text-center">Size</div>
 
+
 
+                                            <form class="d-flex justify-content-center align-items-center">
 
+
 
+                                                <div class="ms-1">
 
+                                                    <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
 
+                                                    <label class="btn btn-outline-dark size-btn fw-semibold" for="option1">36</label>
 
+                                                </div>
 
+                                                <div class="ms-1">
 
+                                                    <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" checked>
 
+                                                    <label class="btn btn-outline-dark size-btn fw-semibold" for="option2">38</label>
 
+                                                </div>
 
+                                                <div class="ms-1">
 
+                                                    <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" checked>
 
+                                                    <label class="btn btn-outline-dark size-btn fw-semibold" for="option3">40</label>
 
+                                                </div>
 
+                                                <div class="ms-1">
 
+                                                    <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off" checked>
 
+                                                    <label class="btn btn-outline-dark size-btn fw-semibold" for="option4">42</label>
 
+                                                </div>
 
+
 
+                                                    
+                                            </form>
 
                                         </div>
 
                                         </div>
 
 
 
+                                    </div>
 
 
 
-                                        <div class="clear"></div>
 
+                                    <!-- discount offer and voucher -->
 
+                                    <div class="mt-3 d-flex px-2">
 
+                                        <!-- offer -->
 
+                                        <div class="offer bg-violet text-white text-center py-2 px-3">
 
+                                            <div class="title">FREE Gift & DELIVERY </div>
 
+                                            <div class="details">on min order tk 1500</div>
 
+                                        </div>
 
+                                        <!-- voucher -->
 
+                                        <div class="voucher mt-3 mt-md-0 ms-0 ms-md-3">
 
+                                            <img  src="./images/product_details/Voucher.png" alt="">
 
+                                        </div>
 
+                                    </div>
 
 
 
+                                    <!-- add cart and love button -->
 
+                                    <div class="mt-3 d-flex">
 
                                         
                                         
+                                        <button class="flex-grow-1 btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="ms-3 fs-5">Add to Cart</span>
 
+                                        </button>
 
+
 
+                                        <button class="ms-3 btn border-dark rounded-0">
 
+                                            <img class="bg-light" src="./images/icon/heart_hollow.svg" alt="">
 
+                                        </button>
 
                                     </div>
 
                                     </div>
 
-                                    <div class="swiper-button-next "></div>
 
-                                    <div class="swiper-button-prev"></div>
 
-                                </div>    
+
 
+                                    <!-- product detail -->
 
+                                    <div class="mt-3 text-gray fw-light">       
+                                        <p>
 
+                                            This is the ultimate anti-dandruff shampoo made specially for men.
 
+                                            Clear Cool Sport Menthol comes with Icy Menthol Blast, provides intense cooling power...
 
+                                        </p>
 
+                                    </div>
 
+            
+                                </div>
 
+                            </div>
 
+
 
+                            <!-- side add -->
 
+                            <div class="d-none d-xl-block col-xl-1">
 
+                                <div class="add text-center fs-3 p-2 h-100">Add</div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
+                </section>
 
+
 
+
 
+                <!-- product details tab -->
 
+                <section id="product-details-tab" class="mt-4"> 
+                    <div class="container">
 
+
 
+                        <!-- tab button -->
 
+                        <ul class="nav nav-tabs" id="myTab" role="tablist" >
 
+                            <li class="nav-item" role="presentation">
 
+                                <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3 active" id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail" type="button" role="tab" aria-controls="detail" aria-selected="true">Detail</button>
 
+                            </li>
 
+                            <li class="nav-item" role="presentation">
 
+                                <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3" id="video-tab" data-bs-toggle="tab" data-bs-target="#video" type="button" role="tab" aria-controls="video" aria-selected="false">Video</button>
 
+                            </li>
 
+                            <li class="nav-item" role="presentation">
 
+                                <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false">Review</button>
 
+                            </li>
 
+                            </ul>
 
 
 
-                    <!-- product detail -->
 
-                    <div class="product-details-contaioner col-12 col-lg-5 col-xl-4">
 
-                        <div class="details px-2  px-md-3 py-4 rounded-1 mb-4">
 
-
 
-                            <!-- product rattings -->
 
-                            <div class="d-flex justify-content-between align-items-center w-100">
 
 
 
-                                <div class="d-flex align-items-center w-100">
 
+                            <!-- tab container -->
 
+                            <div class="tab-content py-3 " id="myTabContent">
 
+                            <!-- details -->
 
+                            <div class="details tab-pane fade show active" id="detail" role="tabpanel" aria-labelledby="detail-tab">
 
+                                <div class="px-3 py-4 shadow-black text-gray">
 
+                                    <div class="sm fs-5 fw-bold">
 
+                                        How To Use :
 
+                                    </div>
 
 
 
-                                    <div class="title fw-bold fs-5">Clear</div>
 
-                                    
-                                    <div class="ms-2 rating d-flex align-items-start">
 
-                                        <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                        <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                        <div class="ms-1">(15)</div>
 
+                                    <ul class="mt-3 ps-4 fs-5 fw-light text-gray ">
 
+                                        <li>
 
+                                            <p>
 
+                                                Massage onto wet hair & scalp and rinse thoroughly.
 
+                                            </p>
 
+                                        </li>
 
+                                        <li>
 
+                                            <p>
 
+                                                For best results, apply twice in every wash and use daily.
 
+                                            </p>
 
+                                        </li>
 
+                                    </ul>
 
+
 
+                                    <div class="mt-4 fs-5 fw-semibold">
 
+                                        Warning: Avoid contact with eyes. If eye contact occurs, rinse immediately.
 
                                     </div>
 
                                     </div>
 
-                                </div>
 
 
 
+                                    <div class="mt-4 fs-5 fw-bold">
 
+                                        Ingredients :
 
+                                    </div>
 
 
 
-                                <div class="social d-flex align-items-center">
 
-                                    <a class="ms-2" href="#">
 
-                                        <img class="social-icon" src="./images/icon/instragram.svg" alt="">
 
-                                    </a>
 
-                                    <a class="ms-2" href="#">
 
-                                        <img class="social-icon" src="./images/icon/massenger.svg" alt="">
 
-                                    </a>
 
-                                    <a class="ms-2" href="#">
 
-                                        <img class="social-icon" src="./images/icon/whats app.svg" alt="">
 
-                                    </a>
 
-                                    <a class="ms-2" href="#">
 
-                                        <img class="social-icon" src="./images/icon/link.svg" alt="">
 
-                                    </a>
 
+                                    <div class="mt-4 mb-5 fs-5 fw-light text-gray">
 
+                                        Water, Sodium Laureth Sulfate, Cocamidopropyl Betaine, Dimethiconol and TEA-Dodecylbenzenesulfonate, Zinc Pyrithione, Propylene Glycol, Dimethicone, Laureth-4, Laureth-23 and Poloxamer 407, Perfume, Carbomer, Climbazole, Sodium Chloride, Phenoxyethanol, Menthol, Sodium Hydroxide, Sodium Salicylate, Guar Hydroxypropyltrimonium Chloride, Zinc Sulfate, Citric Acid, Glycerin, PEG-45M, PPG-9, Helianthus Annuus (Sunflower) Seed Oil, Lysine MonoHydrochloride, Panthenol, Tocopheryl Acetate, Pyridoxine Hydrochloride, Sodium Ascorbyl Phosphate, Panax Ginseng Root Extract, Tea Tree Oil, Peppermint Leaf Extract, CI 42051, CI 60730.
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
-
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product titile -->
 
-                            <div class="mt-2 title-full fs-5">
 
-                                Clear Men Cool Sport Menthol Shampoo 450ml
 
+                            <!-- video -->
 
+                            <div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab">
 
+                                <div class="p-3 shadow-black">video</div>
 
+                                
                             </div>
 
                             </div>
 
 
 
-                            <!-- product price -->
 
-                            <div class="mt-2 price fs-5">
 
-                                <span class="text-decoration-line-through">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                            <!-- review -->
 
+                            <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
 
+                                <div class="p-3 shadow-black">review</div>
 
                             </div>
 
                             </div>
 
-
 
-                            <!-- product price in app -->
 
-                            <div class="mt-2 app-price fs-5 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
                             </div>
 
                             </div>
 
 
 
-                            
-                            <!-- product count size color -->
 
-                            <div class="mt-2 row align-items-center justify-content-between flex-wrap w-100">
 
+                    </div>
 
+                </section>
 
+                <!-- product details tab end -->
 
+
 
 
 
-                                <!-- product count -->
 
-                                <div class="col-12 col-md-6 col-lg-4 count-container ">
 
+                <!-- related product -->
 
+                <section id="related-product" class="my-4">
 
+                    <div class="container">
 
 
 
-                                    <div class="d-flex align-items-center border border-1">
 
-                                        <div class="btn border-0 outline-0">
 
-                                            <img class="count-btn-icon" src="./images/icon/minus.svg" alt="">
 
+                        <div class="display-6 border-bottom border-1 py-3 text-black-light">Related Products</div>
 
+
 
+                        <!-- products -->
 
+                        <div class="d-flex flex-wrap mt-5">
 
+
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
+
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
                                         </div>
 
                                         </div>
 
-                                        <div class="mx-1 count">1</div>
 
-                                        <div class="btn border-0 outline-0">
 
-                                            <img class="count-btn-icon" src="./images/icon/plus.svg" alt="">
 
+                                    </a>
 
+
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                         </div>
 
                                         </div>
 
                                     </div>
 
                                     </div>
 
+
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
                                     
                                     
-                                </div>
 
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                                <!-- product color -->
 
-                                <div class="col-12 col-md-6 col-lg-4 color-container">
 
-                                    <div class="sm text-center">Color</div>
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                    <form class="color-btn-container d-flex justify-content-center align-items-center">
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
 
 
-                                        <div class="form-check ">
 
-                                            <input class="form-check-input color-btn" type="radio" name="flexRadioDefault"  style="background-color: red;">
 
-                                            </div>
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
 
 
-                                        <div class="form-check ms-1">
 
-                                            <input class="form-check-input color-btn" type="radio" name="flexRadioDefault" checked style="background-color: green;">
 
-                                        </div>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                                        <div class="form-check ms-1">
 
-                                            <input class="form-check-input color-btn" type="radio" name="flexRadioDefault"  style="background-color: yellow;">
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
                                         </div>
 
                                         </div>
 
+                                    </a>
 
 
 
-                                        <div class="form-check ms-1">
 
-                                            <input class="form-check-input color-btn" type="radio" name="flexRadioDefault" style="background-color: blue;">
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                         </div>
 
                                         </div>
 
-                                            
-                                    </form>
 
-                                </div>
 
+                                    </div>
 
+
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                                <!-- product size -->
 
-                                <div class="col-12 col-md-6 col-lg-4  size-container">
 
-                                    <div class="sm text-center">Size</div>
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                    <form class="d-flex justify-content-center align-items-center">
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
 
 
-                                        <div class="ms-1">
 
-                                            <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
 
-                                            <label class="btn btn-outline-dark size-btn fw-semibold" for="option1">36</label>
 
-                                        </div>
 
-                                        <div class="ms-1">
 
-                                            <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" checked>
 
-                                            <label class="btn btn-outline-dark size-btn fw-semibold" for="option2">38</label>
 
-                                        </div>
 
-                                        <div class="ms-1">
 
-                                            <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" checked>
 
-                                            <label class="btn btn-outline-dark size-btn fw-semibold" for="option3">40</label>
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
+
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
                                         </div>
 
                                         </div>
 
-                                        <div class="ms-1">
 
-                                            <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off" checked>
 
-                                            <label class="btn btn-outline-dark size-btn fw-semibold" for="option4">42</label>
 
+                                    </a>
 
+
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
                                         </div>
 
                                         </div>
 
+                                    </div>
 
 
 
-                                            
-                                    </form>
 
-                                </div>
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            </div>
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                            <!-- discount offer and voucher -->
 
-                            <div class="mt-3 d-flex px-2">
 
-                                <!-- offer -->
 
-                                <div class="offer bg-violet text-white text-center py-2 px-3">
 
-                                    <div class="title">FREE Gift & DELIVERY </div>
 
-                                    <div class="details">on min order tk 1500</div>
 
-                                </div>
 
-                                <!-- voucher -->
 
-                                <div class="voucher mt-3 mt-md-0 ms-0 ms-md-3">
 
-                                    <img  src="./images/product_details/Voucher.png" alt="">
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- add cart and love button -->
 
-                            <div class="mt-3 d-flex">
 
-                                
-                                <button class="flex-grow-1 btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="ms-3 fs-5">Add to Cart</span>
 
-                                </button>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                                <button class="ms-3 btn border-dark rounded-0">
 
-                                    <img class="bg-light" src="./images/icon/heart_hollow.svg" alt="">
 
-                                </button>
 
-                            </div>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- product detail -->
 
-                            <div class="mt-3 text-gray fw-light">       
-                                <p>
 
-                                    This is the ultimate anti-dandruff shampoo made specially for men.
 
-                                    Clear Cool Sport Menthol comes with Icy Menthol Blast, provides intense cooling power...
 
-                                </p>
 
-                            </div>
 
-    
-                        </div>
 
-                    </div>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                    <!-- side add -->
 
-                    <div class="d-none d-xl-block col-xl-1">
 
-                        <div class="add text-center fs-3 p-2 h-100">Add</div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </section>
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
 
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-        <!-- product details tab -->
 
-        <section id="product-details-tab" class="mt-4"> 
-            <div class="container">
 
-
 
-                <!-- tab button -->
 
-                <ul class="nav nav-tabs" id="myTab" role="tablist" >
 
-                    <li class="nav-item" role="presentation">
 
-                        <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3 active" id="detail-tab" data-bs-toggle="tab" data-bs-target="#detail" type="button" role="tab" aria-controls="detail" aria-selected="true">Detail</button>
 
-                    </li>
 
-                    <li class="nav-item" role="presentation">
 
-                        <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3" id="video-tab" data-bs-toggle="tab" data-bs-target="#video" type="button" role="tab" aria-controls="video" aria-selected="false">Video</button>
 
-                    </li>
 
-                    <li class="nav-item" role="presentation">
 
-                        <button class="btn rounded-0 border-0 fs-5 fw-normal me-2 me-md-5 py-3 px-3" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="false">Review</button>
 
-                    </li>
 
-                    </ul>
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
 
 
-                    <!-- tab container -->
 
-                    <div class="tab-content py-3 " id="myTabContent">
 
-                    <!-- details -->
 
-                    <div class="details tab-pane fade show active" id="detail" role="tabpanel" aria-labelledby="detail-tab">
 
-                        <div class="px-3 py-4 shadow-black text-gray">
 
-                            <div class="sm fs-5 fw-bold">
 
-                                How To Use :
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <ul class="mt-3 ps-4 fs-5 fw-light text-gray ">
 
-                                <li>
 
-                                    <p>
 
-                                        Massage onto wet hair & scalp and rinse thoroughly.
 
-                                    </p>
 
-                                </li>
 
-                                <li>
 
-                                    <p>
 
-                                        For best results, apply twice in every wash and use daily.
 
+                            <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
+
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                        </div>
 
+                                    </a>
 
+
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
                                     </p>
 
                                     </p>
 
-                                </li>
 
-                            </ul>
 
 
 
-                            <div class="mt-4 fs-5 fw-semibold">
 
-                                Warning: Avoid contact with eyes. If eye contact occurs, rinse immediately.
 
-                            </div>
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                            <div class="mt-4 fs-5 fw-bold">
 
-                                Ingredients :
 
-                            </div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
 
 
-                            <div class="mt-4 mb-5 fs-5 fw-light text-gray">
 
-                                Water, Sodium Laureth Sulfate, Cocamidopropyl Betaine, Dimethiconol and TEA-Dodecylbenzenesulfonate, Zinc Pyrithione, Propylene Glycol, Dimethicone, Laureth-4, Laureth-23 and Poloxamer 407, Perfume, Carbomer, Climbazole, Sodium Chloride, Phenoxyethanol, Menthol, Sodium Hydroxide, Sodium Salicylate, Guar Hydroxypropyltrimonium Chloride, Zinc Sulfate, Citric Acid, Glycerin, PEG-45M, PPG-9, Helianthus Annuus (Sunflower) Seed Oil, Lysine MonoHydrochloride, Panthenol, Tocopheryl Acetate, Pyridoxine Hydrochloride, Sodium Ascorbyl Phosphate, Panax Ginseng Root Extract, Tea Tree Oil, Peppermint Leaf Extract, CI 42051, CI 60730.
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
+                                </div>
 
                             </div>
 
                             </div>
 
+
 
                         </div>
 
                         </div>
 
-                    </div>
 
 
 
-                    <!-- video -->
 
-                    <div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab">
 
-                        <div class="p-3 shadow-black">video</div>
 
-                        
                     </div>
 
                     </div>
 
+                </section>
 
+                <!-- related product end -->
 
 
 
-                    <!-- review -->
 
-                    <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
 
-                        <div class="p-3 shadow-black">review</div>
 
-                    </div>
 
-                    </div>
 
 
 
-            </div>
 
-        </section>
 
-        <!-- product details tab end -->
 
+                <!-- also like this product -->
 
+                <section id="also-like-product" class="my-4">
 
+                    <div class="container">
 
 
 
+                        <div class="display-6 border-bottom border-1 py-3 text-black-light">You May Also like this</div>
 
 
 
-        <!-- related product -->
 
-        <section id="related-product" class="my-4">
 
-            <div class="container">
 
 
 
-                <div class="display-6 border-bottom border-1 py-3 text-black-light">Related Products</div>
 
+                        <!-- products -->
 
+                        <div class="d-flex flex-wrap mt-5">
 
 
 
-                <!-- products -->
 
-                <div class="d-flex flex-wrap mt-5">
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                </div>
 
-                            </a>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
+
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                </div>
 
-                            </a>
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                </div>
 
-                            </a>
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                            <div class="product-single p-1 p-md-2 ">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                </div>
 
-                            </a>
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                            <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
+                                <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <!-- product image -->
 
+                                    <a href="./product-details.html">
 
+                                        <div class="image-container text-center">
 
+                                            <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                        </div>
 
+                                    </a>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
+                                    <!-- product brand and ratting -->
 
+                                    <div class="my-2 d-flex flex-wrap align-items-center ">
 
 
 
-                    <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                        <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
+                                        
+                                        <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
+                                            <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
+                                            <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
+                                            <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product image.png" alt="">
 
-                                </div>
 
-                            </a>
 
+                                    <!-- product name -->
 
+                                    <a href="./product-details.html" class="title text-gray  ">
 
+                                        Clear Kind to skin refreshing
 
+                                        shampoo
 
+                                    </a>
 
+                                    
+                                    <!-- offer -->
 
+                                    <p class="offer pt-2 pt-xl-3 text-deep-red">
 
+                                        Buy 2 Get 1 free
 
+                                    </p>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                    <!-- product price -->
 
+                                    <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
+                                        <span class="text-decoration-line-through text-light-gray">৳600</span>
 
+                                        <span class="ms-3 fw-semibold">৳510 </span>
 
+                                    </div>
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <!-- product price in app -->
 
+                                    <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
+                                        <span class="fw-semibold">App Price : </span>
 
+                                        <span class="ms-3 fw-semibold">৳ 484 </span>
 
+                                    </div>
 
+
 
+                                    <!-- add to cart -->
 
+                                    <div class="text-center pt-2 pt-lg-3">
 
+                                        <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
+                                            <span>
 
+                                                <img src="./images/icon/Cart_white.svg" alt="">
 
+                                            </span>
 
+                                            <span class="add-cart-text ms-2">Add to Cart</span>
 
+                                        </button>
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                        </div>
 
+                    </div>
 
+                </section>
 
+                <!-- also like this product end -->
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
+                
+                <!-- checkout  sidebar-->
 
+                <section id="checkout" class="pt-2 ">
 
+
 
+                    <div class="checkout-container position-fixed bg-white pb-5">
 
+
 
+                        
+
 
+                        <div class="cart-product-container px-3 pt-2 pb-5">
 
+
 
+                            <!-- cart header -->
 
+                            <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
 
+                                <h4 >CART</h4>
 
+                                <button class="cross-btn btn">
 
+                                    <img src="./images/icon/cross-icon.svg" alt="">
 
                                 </button>
 
                                 </button>
 
                             </div>
 
                             </div>
 
-                        </div>
 
-                    </div>
 
 
 
-                </div>
 
-
 
-            </div>
 
-        </section>
 
-        <!-- related product end -->
 
 
 
+                            <!-- cart item -->
 
+                            <div class="cart-items mt-3">
 
 
 
-        <!-- also like this product -->
 
-        <section id="also-like-product" class="my-4">
 
-            <div class="container">
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                <div class="display-6 border-bottom border-1 py-3 text-black-light">You May Also like this</div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
 
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                <!-- products -->
 
-                <div class="d-flex flex-wrap mt-5">
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </a>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </a>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </a>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
 
 
-                    <div class="product-single p-1 p-md-2 ">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </a>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
-                            </div>
 
+                                <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                                    <div class="d-flex justify-content-between">
 
+                                        <div class="item-details d-flex">
 
+                                            <div class="img-container">
 
+                                                <img class="h-100" src="./images/product_details/product image.png" alt="">
 
+                                            </div>
 
+
 
+                                            <div class="pt-2 ">
 
+                                                <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
 
+                                                <div class="product-details mt-2  text-gray">Sunsilk Lusciously Thick...</div>
 
+                                            </div>
 
+                                            
+                                        </div>
 
+                                        <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
 
+                                            <div class=" quantity text-center" >
 
+                                                <div class="title text-gray small">QTY</div>
 
+                                                <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+
 
+
 
+                                    <div class="price text-end mt-3 fs-5">
 
+                                        <span class="text-gray text-decoration-line-through">৳ 550</span>
 
+                                        <span class="ms-3 text-gray">৳ 440</span>
 
+                                    </div>
 
+
 
+                                    <button class="btn delete-btn position-absolute">
 
+                                        <img src="./images/icon/delete-icon.svg" alt="">
 
+                                    </button>
 
+                                </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
-                                    </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
                             </div>
 
                             </div>
 
+
 
                         </div>
 
                         </div>
 
-                    </div>
 
 
 
-                    <div class="product-single p-1 p-md-2 d-none d-xl-block">
 
-                        <div class=" product rounded-1 px-3 py-3 text-start">
 
 
 
-                            <!-- product image -->
 
-                            <a href="./product-details.html">
 
-                                <div class="image-container text-center">
 
-                                    <img class="h-100" src="./images/product_details/product.jpg" alt="">
 
-                                </div>
 
-                            </a>
 
 
 
-                            <!-- product brand and ratting -->
 
-                            <div class="my-2 d-flex flex-wrap align-items-center ">
 
+                        <!-- proced button and utility -->
 
+                        <div class="content position-relative w-100">
 
 
 
-                                <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
 
-                                
-                                <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
 
-                                    <img class="ms-0 rating-icon"  src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
 
-                                    <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
 
-                                    <div class="rating-count ms-1 ms-md-2">(15)</div>
 
+                            <div class="proceed-button-container position-fixed bg-white  bottom-0  px-2 py-3 d-flex align-items-center justify-content-between">
 
+
 
+                                <div class="text-center w-50">
 
+                                    <div class="fw-normal">SUBTOTAL</div>
 
+                                    <div class="fw-semibold">৳1,550</div>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
 
 
-                            <!-- product name -->
 
-                            <a href="./product-details.html" class="title text-gray  ">
 
-                                Clear Kind to skin refreshing
 
-                                shampoo
 
-                            </a>
 
-                            
-                            <!-- offer -->
 
-                            <p class="offer pt-2 pt-xl-3 text-deep-red">
 
-                                Buy 2 Get 1 free
 
-                            </p>
 
-
 
-                            <!-- product price -->
 
-                            <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
 
-                                <span class="text-decoration-line-through text-light-gray">৳600</span>
 
-                                <span class="ms-3 fw-semibold">৳510 </span>
 
+                                <div class="text-center w-50">
 
+                                    <a href="./checkout.html" class="btn  rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
 
+                                        PROCEED 
+                                    </a>
 
+                                </div>
 
                             </div>
 
                             </div>
 
+                        </div>
 
 
 
-                            <!-- product price in app -->
 
-                            <div class=" pt-md-2 pt-xl-3 app-price  text-center fs-6 text-deep-red">
 
-                                <span class="fw-semibold">App Price : </span>
 
-                                <span class="ms-3 fw-semibold">৳ 484 </span>
 
-                            </div>
 
+                    </div>
 
 
 
-                            <!-- add to cart -->
 
-                            <div class="text-center pt-2 pt-lg-3">
 
-                                <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
 
-                                    <span>
 
-                                        <img src="./images/icon/Cart_white.svg" alt="">
 
+                
+                </section>
 
+            
+                <!-- checkout sidebar navigation button -->
 
+                <div id="checkout-button"  >
 
+                    <!-- checkout navigation button for desktop -->
 
+                    <button id="checkout-btn-desktop" class="checkout-product-btn-desktop position-fixed d-none d-lg-flex flex-lg-column justify-content-lg-center align-items-lg-center bg-white border-0 text-white p-2">
 
+                        <img class="checkout-icon" src="./images/icon/shoping bag.svg" alt="">
 
+                        <!-- items count -->
 
+                        <p class="count mt-2 text-black small">
 
+                            <span>5</span>
 
+                            <span>items</span>
 
+                        </p>
 
+                        <!-- price -->
 
+                        <p class="price text-black text-deep-red">4540</p>
 
+                    </button>
 
+
 
+                    <!-- checkout navigation button for mobile -->
 
+                    <div id="checkout-btn-mobile" class="d-block">
 
+                        <div class="checkout-mobile d-flex position-fixed bottom-0 start-0  d-block d-lg-none shadow-sm" >
 
+
 
+                            <div class="border-0 py-2 bg-pink-extralight w-50 text-center">
 
+
 
+                                <div class="cart-details position-relative mx-auto">
 
+
 
+                                    <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
 
+        
+                                    <!-- total -->
 
+                                    <span class="total position-absolute text-deep-red">
 
+                                        500000 ৳ 
                                     </span>
 
                                     </span>
 
-                                    <span class="add-cart-text ms-2">Add to Cart</span>
 
-                                </button>
 
+                                </div>
 
                             </div>
 
                             </div>
 
+
 
+                            <!-- checkout nav button -->
 
+                            <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
 
+                                Go To Checkout 
+                            </button>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
 
 
                 </div>
 
                 </div>
 
-            </div>
 
-        </section>
 
-        <!-- also like this product end -->
 
+
 
+
 
+
 
+        </div>
 
+
 
+
 
+
 
     
     
     
     
         <!-- footer -->
 
         <!-- footer -->

Some files were not shown because too many files changed in this diff