some issue fixed

all-product.html

@@ -82,6 +82,7 @@
                             <!-- 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="">
+                                <div class="ms-2 fs-4 fw-bold text-nowrap text-black">Group</div>
                             </a>
 
                             <!-- vip points -->
@@ -89,7 +90,7 @@
                                 <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>
+                                    <h5 class="fw-bold text-no-wrap text-black">Vip: 99 points</h5>
                                 </div>
                             </a>
                         </div>
@@ -5769,7 +5770,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -5829,7 +5830,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -5889,7 +5890,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -5949,7 +5950,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6009,7 +6010,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6069,7 +6070,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6129,7 +6130,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6189,7 +6190,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6249,7 +6250,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6309,7 +6310,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6369,7 +6370,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6429,7 +6430,7 @@
                                         </div>
                 
                                         <!-- product name -->
-                                        <a href="./product-details.html" class="title text-gray  ">
+                                        <a href="./product-details.html" class="title">
                                             Clear Kind to skin refreshing
                                             shampoo
                                         </a>
@@ -6809,7 +6810,7 @@
                             </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">
+                                <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
                                     PROCEED 
                                 </a>
                             </div>
@@ -6824,7 +6825,7 @@
             <!-- 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">
+                <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">
@@ -6839,7 +6840,7 @@
                 <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">
+                        <a class="border-0 py-2 bg-pink-extralight w-50 text-center" href="./checkout.html">
 
                             <div class="cart-details position-relative mx-auto">
 
@@ -6850,7 +6851,7 @@
                                     500000 ৳ 
                                 </span>
                             </div>
-                        </div>
+                        </a>
 
                         <!-- checkout nav button -->
                         <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">

checkout.html

@@ -78,6 +78,7 @@
                             <!-- 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="">
+                                <div class="ms-2 fs-4 fw-bold text-nowrap text-black">Group</div>
                             </a>
 
                             <!-- vip points -->
@@ -85,7 +86,7 @@
                                 <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>
+                                    <h5 class="fw-bold text-no-wrap text-black">Vip: 99 points</h5>
                                 </div>
                             </a>
                         </div>
@@ -5410,7 +5411,7 @@
         </section>
 
 
-        <!-- checkpot  -->
+        <!-- checkout  -->
 
         <section id="checkout-page">
             <div class="container py-4">

css/style.css

@@ -333,6 +333,7 @@ a {
     z-index: 20;
     transition: all 5s ease-in-out;
     box-shadow: var(--shadow-product);
+    z-index: 120;
 }
 
 
@@ -683,10 +684,15 @@ a {
     max-width: 100%;
   }
 
-  .product-single .product .brand-title,
-  .product-single .product .title {
+  .product-single .product .brand-title  {
     font-size: 1em;
   }
+  
+  .product-single .product .title {
+    font-size: 1.02em;
+    font-weight: 400;
+    color: var(--gray-light) !important;
+  }
 
   .product-single .product .brand-title:hover  {
     color: var(--red-deep);
@@ -970,16 +976,28 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
     bottom: 0;
     right: 0;
     width: 480px;
-    height: 90vh;
+    height: 80vh;
     box-shadow: var(--shadow-black);
     border-radius: 5px 0 0 0;
     display: none;
     z-index: 100;
-    overflow-y: auto;
 }
 
+#checkout .checkout-container .cart-product-container {
+    height: 100%;
+}
+
+#checkout .checkout-container .title-container {
+    height: 3.5rem;
+}
 
-#checkout .checkout-container::-webkit-scrollbar {
+#checkout .checkout-container .cart-items {
+    padding-bottom: 2rem;
+    height: calc(100% - 3rem);
+    overflow-y: auto;
+}
+
+#checkout .checkout-container .cart-items::-webkit-scrollbar {
     display: none;
 }
 
@@ -1050,7 +1068,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
 
 #checkout-btn-mobile .checkout-mobile {
     width: 100vw;
-    z-index: 10;
+    z-index: 120;
 }
 
 #checkout-btn-mobile .checkout-mobile .cart-details {
@@ -1141,7 +1159,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
         width: 100vw;
         height: 100%;
         box-shadow: var(--shadow-black);
-        z-index: 100;
+        z-index: 150;
     }
     
     #checkout .checkout-container .proceed-button-container {

index.html

@@ -79,6 +79,7 @@
                          <!-- 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="">
+                            <div class="ms-2 fs-4 fw-bold text-nowrap text-black">Group</div>
                         </a>
 
                         <!-- vip points -->
@@ -5952,7 +5953,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6012,7 +6013,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6072,7 +6073,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6132,7 +6133,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6192,7 +6193,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6344,7 +6345,7 @@
                                 </div>
                             </div>
     
-                            <a href="./product-details.html" class="title text-gray fs-6 ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6399,7 +6400,7 @@
                                 </div>
                             </div>
     
-                            <a href="./product-details.html" class="title text-gray fs-6 ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6454,7 +6455,7 @@
                                 </div>
                             </div>
     
-                            <a href="./product-details.html" class="title text-gray fs-6 ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6509,7 +6510,7 @@
                                 </div>
                             </div>
     
-                            <a href="./product-details.html" class="title text-gray fs-6 ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6564,7 +6565,7 @@
                                 </div>
                             </div>
     
-                            <a href="./product-details.html" class="title text-gray fs-6 ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -6943,7 +6944,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -7003,7 +7004,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -7063,7 +7064,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -7123,7 +7124,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -7183,7 +7184,7 @@
                             </div>
     
                             <!-- product name -->
-                            <a href="./product-details.html" class="title text-gray  ">
+                            <a href="./product-details.html" class="title">
                                 Clear Kind to skin refreshing
                                 shampoo
                             </a>
@@ -7700,7 +7701,7 @@
                             </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">
+                                <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
                                     PROCEED 
                                 </a>
                             </div>
@@ -7730,7 +7731,7 @@
                 <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">
+                        <a class="border-0 py-2 bg-pink-extralight w-50 text-center" href="./checkout.html">
 
                             <div class="cart-details position-relative mx-auto">
 
@@ -7741,7 +7742,7 @@
                                     500000 ৳ 
                                 </span>
                             </div>
-                        </div>
+                        </a>
 
                         <!-- checkout nav button -->
                         <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">

js/app.js

@@ -3,7 +3,7 @@
 
 window.addEventListener('scroll', function(){
   var header = document.querySelector('.header');
-  header.classList.toggle("sticky", window.scrollY > 400);
+  header.classList.toggle("sticky", window.scrollY > 220);
 })
 
 

product-details.html

@@ -82,6 +82,7 @@
                             <!-- 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="">
+                                <div class="ms-2 fs-4 fw-bold text-nowrap text-black">Group</div>
                             </a>
 
                             <!-- vip points -->
@@ -89,7 +90,7 @@
                                 <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>
+                                    <h5 class="fw-bold text-no-wrap text-black">Vip: 99 points</h5>
                                 </div>
                             </a>
                         </div>
@@ -5795,7 +5796,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -5855,7 +5856,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -5915,7 +5916,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -5975,7 +5976,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6035,7 +6036,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6112,7 +6113,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6172,7 +6173,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6232,7 +6233,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6292,7 +6293,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6352,7 +6353,7 @@
                                     </div>
 
                                     <!-- product name -->
-                                    <a href="./product-details.html" class="title text-gray  ">
+                                    <a href="./product-details.html" class="title">
                                         Clear Kind to skin refreshing
                                         shampoo
                                     </a>
@@ -6717,23 +6718,23 @@
 
 
 
-                        <!-- proced button and utility -->
-                        <div class="content position-relative w-100">
+                    <!-- 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="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">
+                                <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 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>
 
@@ -6743,7 +6744,7 @@
                 <!-- 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">
+                    <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">
@@ -6758,7 +6759,7 @@
                     <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">
+                            <a class="border-0 py-2 bg-pink-extralight w-50 text-center" href="./checkout.html">
 
                                 <div class="cart-details position-relative mx-auto">
 
@@ -6769,7 +6770,7 @@
                                         500000 ৳ 
                                     </span>
                                 </div>
-                            </div>
+                            </a>
 
                             <!-- checkout nav button -->
                             <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">