From 73a0b311dab0c5872cd49ab21c22df3bc9e6a330 Mon Sep 17 00:00:00 2001
From: KRISHkg31 <krish.gupta_cs.da21@gla.ac.in>
Date: Sun, 10 Nov 2024 00:50:16 +0530
Subject: [PATCH 1/9] Update and Enhancement of UI

---
 Style/about.css |   2 +-
 about.html      | 319 ++++++++++++++++++++++++++----------------------
 contact.html    |   6 +-
 features.html   |   6 +-
 index.html      |  29 ++---
 style.css       |  13 +-
 styles.css      |   2 +-
 7 files changed, 200 insertions(+), 177 deletions(-)

diff --git a/Style/about.css b/Style/about.css
index adc1218..5d40421 100644
--- a/Style/about.css
+++ b/Style/about.css
@@ -196,4 +196,4 @@ h3 {
   opacity: 90%;
   box-shadow: 0 0 15px 15px rgba(136, 136, 136, 0.5);
 }
-}
\ No newline at end of file
+}
diff --git a/about.html b/about.html
index 5c13715..763ba69 100644
--- a/about.html
+++ b/about.html
@@ -497,10 +497,10 @@
     <nav class="utils">
         <ul class="nav-links">
           <li>
-            <button class="mode-toggle" id="modeToggle">
+            <!-- <button class="mode-toggle" id="modeToggle">
                 <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
                 <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-              </button>
+              </button> -->
             </li>
             <li class="nav-link">
                 <i class="fa-solid fa-cart-shopping" id='cart-icon'></i>
@@ -516,6 +516,7 @@
             </li>
         </ul>
     </nav>
+    
 </header>
 
 
@@ -828,6 +829,15 @@ <h2>Subscription Successful!</h2>
       }
     });
   </script>
+  <script>
+
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
   <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <script>
@@ -855,152 +865,163 @@ <h2>Subscription Successful!</h2>
           }
       });
     </script>
-    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
-      <div class="scroll-top-icon">
-          <i class="fa-solid fa-arrow-up"></i>
-      </div>
-      <svg class="progress-ring" width="60" height="60">
-          <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-              cy="30"></circle>
-      </svg>
-  </button>
-  <style>
-      .scroll-top {
-          position: fixed;
-          right: 1.6%;
-          background: linear-gradient(100deg, #1ca6f0, #3c7aff, #05deff);
-          color: white;
-          width: 60px;
-          height: 60px;
-          border-radius: 50%;
-          border: none;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 24px;
-          opacity: 0;
-          visibility: hidden;
-          transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
-          box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-          overflow: visible;
-          z-index: 10;
-          bottom: 15px;
-          /* Ensure button is on top */
-      }
-      .scroll-top.show {
-          opacity: 1;
-          visibility: visible;
-      }
-  
-      .scroll-top:hover {
-          transform: scale(1.1);
-          /* Subtle scaling instead of expanding */
-          box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
-          /* Slightly larger shadow */
-      }
-  
-      .scroll-top:active {
-          transform: scale(1.05);
-          /* Minor scale reduction on click */
-      }
-  
-      .scroll-top-icon {
-          position: relative;
-          z-index: 2;
-          transition: transform 0.3s ease;
-      }
-  
-      .scroll-top:hover .scroll-top-icon {
-          transform: translateY(-3px);
-      }
-  
-      /* Progress Ring Styling */
-      .progress-ring {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform: rotate(-90deg);
-          /* To start from the top */
-      }
-  
-      .progress-ring__circle {
-          transition: stroke-dashoffset 0.35s;
-          transform-origin: 50% 50%;
-      }
-  
-      /* Pulse Animation */
-      @keyframes pulse {
-          0% {
-              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-          }
-  
-          50% {
-              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
-          }
-  
-          100% {
-              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-          }
-      }
-  
-      .scroll-top:hover {
-          animation: pulse 1.5s infinite;
-      }
-  
-      .scroll-top.show {
-          animation: none;
-          /* No animation when showing the button */
-      }
-  
-      .scroll-top.show:hover {
-          animation: pulse 1.5s infinite;
-          /* Pulse on hover */
-      }
-  </style>
-  <script>
-      // Get the button
-      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-      const progressCircle = document.querySelector(".progress-ring__circle");
-      const radius = progressCircle.r.baseVal.value;
-      const circumference = 2 * Math.PI * radius;
-  
-      // Set the circle progress properties
-      progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-      progressCircle.style.strokeDashoffset = circumference;
-  
-      // Function to show or hide the button based on scroll position
-      function toggleScrollButton() {
-          if (window.scrollY > 100) {
-              scrollToTopBtn.classList.add("show");
-          } else {
-              scrollToTopBtn.classList.remove("show");
-          }
-      }
-  
-      // Function to set the scroll progress on the button ring
-      function setProgress(percent) {
-          const offset = circumference - (percent / 100) * circumference;
-          progressCircle.style.strokeDashoffset = offset;
-      }
-  
-      // Listen for scroll events to update button visibility and progress
-      window.addEventListener("scroll", () => {
-          toggleScrollButton();
-          const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-          setProgress(scrollPercent);
-      });
-  
-      // Smooth scroll to top when the button is clicked
-      scrollToTopBtn.addEventListener("click", () => {
-          window.scrollTo({
-              top: 0,
-              behavior: "smooth"
-          });
-      });
-    </script>
+    <script>
+
+window.addEventListener('scroll', function() {
+    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrolled = (winScroll / height) * 100;
+    document.getElementById('progress-bar').style.width = scrolled + '%';
+});
+</script>
+    
+    <script src="./script/popup.js"></script>
+<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+    <div class="scroll-top-icon">
+        <i class="fa-solid fa-arrow-up"></i>
+    </div>
+    <svg class="progress-ring" width="60" height="60">
+        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+            cy="30"></circle>
+    </svg>
+</button>
+<style>
+    .scroll-top {
+        position: fixed;
+        right: 1.6%;
+        background: linear-gradient(100deg, #1ca6f0, #3c7aff, #05deff);
+        color: white;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+        box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+        overflow: visible;
+        z-index: 10;
+        bottom: 15px;
+        /* Ensure button is on top */
+    }
+
+    .scroll-top.show {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .scroll-top:hover {
+        transform: scale(1.1);
+        /* Subtle scaling instead of expanding */
+        box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
+        /* Slightly larger shadow */
+    }
+
+    .scroll-top:active {
+        transform: scale(1.05);
+        /* Minor scale reduction on click */
+    }
+
+    .scroll-top-icon {
+        position: relative;
+        z-index: 2;
+        transition: transform 0.3s ease;
+    }
+
+    .scroll-top:hover .scroll-top-icon {
+        transform: translateY(-3px);
+    }
+
+    /* Progress Ring Styling */
+    .progress-ring {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform: rotate(-90deg);
+        /* To start from the top */
+    }
+
+    .progress-ring__circle {
+        transition: stroke-dashoffset 0.35s;
+        transform-origin: 50% 50%;
+    }
+
+    /* Pulse Animation */
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+        }
+        50% {
+            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
+        }
+
+        100% {
+            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+        }
+    }
+
+    .scroll-top:hover {
+        animation: pulse 1.5s infinite;
+    }
+
+    .scroll-top.show {
+        animation: none;
+        /* No animation when showing the button */
+    }
+
+    .scroll-top.show:hover {
+        animation: pulse 1.5s infinite;
+        /* Pulse on hover */
+    }
+</style>
+<script>
+    // Get the button
+    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+    const progressCircle = document.querySelector(".progress-ring__circle");
+    const radius = progressCircle.r.baseVal.value;
+    const circumference = 2 * Math.PI * radius;
+
+    // Set the circle progress properties
+    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
+    progressCircle.style.strokeDashoffset = circumference;
+
+    // Function to show or hide the button based on scroll position
+    function toggleScrollButton() {
+        if (window.scrollY > 100) {
+            scrollToTopBtn.classList.add("show");
+        } else {
+            scrollToTopBtn.classList.remove("show");
+        }
+    }
+
+    // Function to set the scroll progress on the button ring
+    function setProgress(percent) {
+        const offset = circumference - (percent / 100) * circumference;
+        progressCircle.style.strokeDashoffset = offset;
+    }
+
+    // Listen for scroll events to update button visibility and progress
+    window.addEventListener("scroll", () => {
+        toggleScrollButton();
+        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+        setProgress(scrollPercent);
+    });
+
+    // Smooth scroll to top when the button is clicked
+    scrollToTopBtn.addEventListener("click", () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    });
+  })
+  </script>
   </body>
 </html>
-
diff --git a/contact.html b/contact.html
index d6f3f83..72f2691 100644
--- a/contact.html
+++ b/contact.html
@@ -103,10 +103,10 @@
             <ul class="nav-links">
                 <li class="nav-link">
                     <li>
-                        <button class="mode-toggle" id="modeToggle">
+                        <!-- <button class="mode-toggle" id="modeToggle">
                             <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
                             <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-                          </button>
+                          </button> -->
                         </li>
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
                 </li>
@@ -234,7 +234,7 @@ <h1>Subscribe to Newsletter</h1>
         </div>
     </footer>
 
-    <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
+    <!-- <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a> -->
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <script>
   AOS.init();
diff --git a/features.html b/features.html
index 7f5e868..8029209 100644
--- a/features.html
+++ b/features.html
@@ -115,10 +115,10 @@
             <ul class=" nav-links ">
                 <li class="nav-link">
                     <li>
-                        <button class="mode-toggle" id="modeToggle">
+                        <!-- <button class="mode-toggle" id="modeToggle">
                             <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
                             <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-                          </button>
+                          </button> -->
                         </li>
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
                 </li>
@@ -299,7 +299,7 @@ <h2>Subscription Successful!</h2>
     window.location.href = "cart.html";
 });
     </script>
-    <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
+    <!-- <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a> -->
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
   <script>
     AOS.init();
diff --git a/index.html b/index.html
index 7cde9e5..d3c15f5 100644
--- a/index.html
+++ b/index.html
@@ -80,10 +80,10 @@
         <nav class="utils">
             <ul class="nav-links">
                 <li>
-                    <button class="mode-toggle" id="modeToggle">
+                    <!-- <button class="mode-toggle" id="modeToggle">
                         <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
                         <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-                      </button>
+                      </button> -->
                     </li>
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
@@ -98,6 +98,19 @@
                 </li>
             </ul>
         </nav>
+        <!-- <script>
+            const modeToggle = document.getElementById("modeToggle");
+            const sunIcon = document.querySelector(".sun-icon");
+            const moonIcon = document.querySelector(".moon-icon");
+    
+            modeToggle.addEventListener("click", () => {
+                document.body.classList.toggle("dark-mode");
+    
+                // Toggle visibility of sun and moon icons
+                sunIcon.style.display = sunIcon.style.display === "none" ? "inline" : "none";
+                moonIcon.style.display = moonIcon.style.display === "none" ? "inline" : "none";
+            });
+        </script> -->
     </header>
     <!-- Search Bar -->
     <div id="search-bar">
@@ -1001,18 +1014,6 @@ <h2>Subscription Successful!</h2>
         });
     });
   </script>
-
- <script>
-    if (isDarkMode) {
-        sunIcon.style.display = "none";
-        moonIcon.style.display = "inline-block";
-        localStorage.setItem("theme", "dark");
-    } else {
-        sunIcon.style.display = "inline-block";
-        moonIcon.style.display = "none";
-        localStorage.setItem("theme", "light");
-    };
-  </script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
index a366cd7..45b3f93 100644
--- a/style.css
+++ b/style.css
@@ -849,15 +849,16 @@ html {
   position: absolute;
   background-color: #000000;
   color: rgb(255, 255, 255);
-  top: 3618px;
-  padding: 10px 20px;
-  border-radius: 19px;
+  top: 3658px; /* Adjusted value to move it down */
+  padding: 10px 10px;
+  border-radius: 18px;
   display: inline-flex;
   align-items: center;
   font-family: Arial, sans-serif;
   margin-left: 0px;
-  z-index: 10; /* Ensure it stays on top of the border */
+  z-index: 20; /* Ensure it stays on top of the border */
 }  
+ 
 
 .visitor-counter .icon {
   margin-right: 10px;
@@ -1780,7 +1781,7 @@ body {
 }
 
 body.dark-mode {
-  background-color: #121212;
+  background-color: #828593;
   color: #ffffff;
 }
 
@@ -1807,7 +1808,7 @@ header.dark-mode {
 }
 
 body.dark-mode .navbar {
-  background-color: #333;
+  background-color: #5a4343;
 }
 
 body.dark-mode .navbar a:hover {
diff --git a/styles.css b/styles.css
index 75697ba..c300ffe 100644
--- a/styles.css
+++ b/styles.css
@@ -197,7 +197,7 @@ h2 {
     font-family: 'futura';
     display: flex;
     justify-content: space-between;
-    color: #1d1d1d;
+    color: #000000;
 
 }
 

From 5d382f94d5fef680b28eab4dc4f63518a431c80e Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:40:55 +0530
Subject: [PATCH 2/9] about.html

---
 about.html | 611 +++++++++++++++++++++--------------------------------
 1 file changed, 246 insertions(+), 365 deletions(-)

diff --git a/about.html b/about.html
index 763ba69..6570dbe 100644
--- a/about.html
+++ b/about.html
@@ -421,7 +421,9 @@
   background-color: #121212;
   color: #080707;
 }
-
+.footer-section{
+width:500px;
+}
 
   </style>
 
@@ -429,10 +431,7 @@
 <head>
 <body>
 
-  <!-- scroll to top button  -->
-  <button class="go-top-btn">
-    <img   width="25px" src="arrow_upper.png" alt="go top">
-</button>
+ 
   <!-- preloader -->
   <div id="preloader">
     <div class="wrapper">
@@ -497,10 +496,10 @@
     <nav class="utils">
         <ul class="nav-links">
           <li>
-            <!-- <button class="mode-toggle" id="modeToggle">
+            <button class="mode-toggle" id="modeToggle">
                 <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
                 <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-              </button> -->
+              </button>
             </li>
             <li class="nav-link">
                 <i class="fa-solid fa-cart-shopping" id='cart-icon'></i>
@@ -516,7 +515,6 @@
             </li>
         </ul>
     </nav>
-    
 </header>
 
 
@@ -581,217 +579,97 @@ <h3>Welcome to TrendTrove</h3>
         </p>
       </div>
     </section>
+  </header>
 
-    <!-- Footer Section -->
-    <footer class="footer">
-      <div class="footer-section">
-        <h1>Contact Us</h1>
-        <ul class="footer-list">
+ <!-- Footer -->
+ <footer class="footer">
+  <div class="footer-section">
+      <h1>Contact Us</h1>
+      <ul class="footer-list">
+          <li>trendtrove1004@gmail.com</li>
           <li>
-            <a href="mailto:trendtrove1004@gmail.com"
-              >trendtrove1004@gmail.com</a
-            >
+              2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India
           </li>
-          <li>2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</li>
-          <li><a href="tel:+91xxxxxxxx2020">+91 xxxxxx2020</a></li>
-          <li class="border-list"></li>
-          <li class="socials">
-            <a
-              href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin"target="_blank"
-            >
-              <i class="fa-brands fa-linkedin"></i>
-            </a>
-            <a href="https://github.com/Tejashri-Taral" id="github" target="_blank">
-              <i class="fa-brands fa-github"></i>
-            </a>
-            <a
-              href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08" id="twitter" target="_blank"
-            >
-              <i class="fa-brands fa-x-twitter"></i>
-            </a>
-            <a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
-              <i class="fa-brands fa-instagram"></i>
-            </a>
+          <li>+91 xxxxxx2020</li>
+
+          <li class="border-list">
           </li>
-        </ul>
-      </div>
+          <li class=" socials ">
+              <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin" target="_blank">
+                  <i class="fa-brands fa-linkedin"></i>
+              </a>
+              <a href="https://github.com/Tejashri-Taral" id="github" target="_blank">
+                  <i class="fa-brands fa-github"></i>
+              </a>
+              <a href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08" id="twitter" target="_blank">
+                  <i class="fa-brands fa-x-twitter"></i>
+              </a>
+              <a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
+                  <i class="fa-brands fa-instagram"></i>
+              </a>
+          </li>
+      </ul>
+  </div>
 
-      <div class="footer-section">
-        <h1>Quick Links</h1>
-        <ul class="footer-list">
+  <div class="footer-section quick-links">
+      <h1>Quick Links</h1>
+      <ul class=" footer-list ">
           <li><a href="about.html">About Us</a></li>
-          <li><a href="contributors.html">Our Contributors</a></li>
           <li><a href="terms-conditions.html">Terms & Conditions</a></li>
           <li><a href="return-policy.html">Return Policy</a></li>
-          <li>
-            <a
-              href="https://github.com/Tejashri-Taral/TrendTrove-Ecommerce"
-              target="_blank"
-              >Star Us</a
-            >
-
-          </li>
+          <li><a href="https://github.com/Tejashri-Taral/TrendTrove-Ecommerce" target="_blank">Star Us</a></li>
           <li><a href="contact.html">Contact Us</a></li>
-        </ul>
-      </div>
+      </ul>
+  </div>
 
-      <div class="footer-section">
-        <h1>Subscribe to Newsletter</h1>
-        <ul class="footer-list">
-          <li>
-            Be the first to know about exclusive deals and new arrivals straight
-            to your inbox.
-          </li>
+  <div class="footer-section">
+      <h1>Subscribe to Newsletter</h1>
+      <ul class="footer-list">
+          <li>Be the first to know about exclusive deals and new arrivals straight to your inbox.</li>
           <li>Join our fashion community today!</li>
           <li class="sub">
-            <input
-              type="email"
-              placeholder="Enter your email here"
-              id="email-input"
-            />
-            <button class="btn" id="open-btn">Subscribe</button>
+              <input type="email" placeholder="Enter your email here" id="email-input">
+              <button class="btn" id="open-btn">Subscribe</button>
           </li>
-        </ul>
-      </div>
-    </footer>
+      </ul>
+  </div>
 
-    <div class="footer-copyright">
+</footer>
+  
+  <div class="footer-copyright">
       <div id="copyright">&copy; 2024 TrendTrove. All Rights Reserved.</div>
-    </div>
-
-    <div class="modal-box" id="modalbox" style="display: none">
+  </div>
+  
+  <div class="modal-box" id="modalbox" style="display: none;">
       <div class="modal" id="modal">
-        <div id="close-btn">&times;</div>
-        <div class="modal-content">
-          <img src="images\confirmation.png" alt="" height="100px" />
-          <h2>Subscription Successful!</h2>
-          <p>Thank you for subscribing.</p>
-          <p>You will receive notifications & updates via email.</p>
-        </div>
-        <div class="social">
-          <li class="socials">
-            <a
-              href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/"
-              id="linkedin"
-              target="_blank"
-            >
-              <i class="fa-brands fa-linkedin"></i>
-            </a>
-            <a
-              href="https://github.com/Tejashri-Taral"
-              id="github"
-              target="_blank"
-            >
-              <i class="fa-brands fa-github"></i>
-            </a>
-            <a
-              href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08"
-              id="twitter"
-              target="_blank"
-            >
-              <i class="fa-brands fa-x-twitter"></i>
-            </a>
-            <a
-              href="https://www.instagram.com/your_instagram"
-              id="instagram"
-              target="_blank"
-            >
-              <i class="fa-brands fa-instagram"></i>
-            </a>
-          </li>
-          <li class="tab" style="margin-left: 15px">
-            <a href="contact.html">Contact Us</a>
-            <div class="cursor"></div>
-
-          </li>
-        </ul>
-      </div>
-    </nav>
-
-    <nav class="utils">
-      <ul class="nav-links">
-        <li class="nav-link">
-          <i class="fa-solid fa-cart-shopping"></i>
-        </li>
-        <li class="nav-link">
-          <i class="fa-solid fa-user"></i>
-        </li>
-        <li class="nav-link">
-          <i class="fa-solid fa-magnifying-glass"></i>
-        </li>
-      </ul>
-    </nav>
-  </header>
-
-  <!-- About Us Section -->
-  <section class="about-section">
-    <h2 class="about-title">About Us</h2>
-
-    <div class="about-container">
-      <!-- First part: Image left, text right -->
-      <div class="about-content-first">
-        <div class="about-text">
-          <div class="leftabout">
-            <h3>Welcome to TrendTrove</h3>
-            <p class="slogan">Elevate Your Style, Embrace Your Confidence!</p>
-            <p class="aboutus-body">
-              Your Ultimate Destination for fashion-forward apparel,
-              accessories, and lifestyle products. We believe in celebrating
-              individuality and empowering every customer to express their
-              unique style with confidence. Whether you're looking for
-              everyday essentials or statement pieces, we source high-quality,
-              sustainable, and stylish items to elevate your wardrobe.
-            </p>
+          <div id="close-btn">&times;</div>
+          <div class="modal-content">
+              <img src="images\confirmation.png" alt="" height="100px" >
+              <h2>Subscription Successful!</h2>
+              <p>Thank you for subscribing.</p>
+              <p> You will receive notifications & updates via email.</p>
           </div>
-        </div>
-        <div class="about-images">
-          <img class="about3" src="images/about3.jpg" alt="Fashion Collection" />
-        </div>
-      </div>
-
-      <!-- Second part: Image right, text left -->
-      <div class="about-content-second">
-        <div class="about-text">
-          <div class="rightabout">
-            <p class="aboutus-body" id="div2">
-              Our Mission is to empower individuals
-            </p>
-            <p class="aboutus-body">
-              At the heart of TrendTrove is a passion for style and a
-              commitment to customer satisfaction. Our mission is to offer a
-              seamless shopping experience with exceptional service, fast
-              shipping, and an easy return process. We stay ahead of the
-              fashion curve so you can step out feeling your best, whatever
-              the occasion.
-            </p>
-            <p class="aboutus-body" id="div3">
-              Discover your style with TrendTrove — where fashion meets
-              confidence!
-            </p>
+          <div class="social">
+              <li class="socials">
+                  <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin" target="_blank">
+                      <i class="fa-brands fa-linkedin"></i>
+                  </a>
+                  <a href="https://github.com/Tejashri-Taral" id="github" target="_blank">
+                      <i class="fa-brands fa-github"></i>
+                  </a>
+                  <a href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08" id="twitter" target="_blank">
+                      <i class="fa-brands fa-x-twitter"></i>
+                  </a>
+                  <a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
+                      <i class="fa-brands fa-instagram"></i>
+                  </a>
+              </li>
           </div>
-        </div>
-        <div class="about-images">
-          <img class="about4" src="images/about4.jpg" alt="Accessories Collection" />
-        </div>
       </div>
-    </div>
-  </section>
-
-<div class="modal-box" id="modalbox" style="display: none">
-  <div class="modal" id="modal">
-    <div id="close-btn">&times;</div>
-    <div class="modal-content">
-      <img src="images/confirmation.png" alt="" height="100px" />
-      <h2>Subscription Successful!</h2>
-      <p>Thank you for subscribing.</p>
-      <p>You will receive notifications & updates via email.</p>
-    </div>
   </div>
-</div>
-
   <script src="preloader.js"></script>
 
-  <script>
+<script>
     document.getElementById("cart-icon").addEventListener("click", function() {
     window.location.href = "cart.html";
 });
@@ -829,16 +707,6 @@ <h2>Subscription Successful!</h2>
       }
     });
   </script>
-  <script>
-
-    window.addEventListener('scroll', function() {
-        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        const scrolled = (winScroll / height) * 100;
-        document.getElementById('progress-bar').style.width = scrolled + '%';
-    });
-    </script>
-  <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <script>
   AOS.init();
@@ -865,163 +733,176 @@ <h2>Subscription Successful!</h2>
           }
       });
     </script>
-    <script>
-
-window.addEventListener('scroll', function() {
-    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-    const scrolled = (winScroll / height) * 100;
-    document.getElementById('progress-bar').style.width = scrolled + '%';
-});
-</script>
-    
-    <script src="./script/popup.js"></script>
-<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
-    <div class="scroll-top-icon">
-        <i class="fa-solid fa-arrow-up"></i>
-    </div>
-    <svg class="progress-ring" width="60" height="60">
-        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
-            cy="30"></circle>
-    </svg>
-</button>
-<style>
-    .scroll-top {
-        position: fixed;
-        right: 1.6%;
-        background: linear-gradient(100deg, #1ca6f0, #3c7aff, #05deff);
-        color: white;
-        width: 60px;
-        height: 60px;
-        border-radius: 50%;
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
-        box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-        overflow: visible;
-        z-index: 10;
-        bottom: 15px;
-        /* Ensure button is on top */
-    }
-
-    .scroll-top.show {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .scroll-top:hover {
-        transform: scale(1.1);
-        /* Subtle scaling instead of expanding */
-        box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
-        /* Slightly larger shadow */
-    }
-
-    .scroll-top:active {
-        transform: scale(1.05);
-        /* Minor scale reduction on click */
-    }
-
-    .scroll-top-icon {
-        position: relative;
-        z-index: 2;
-        transition: transform 0.3s ease;
-    }
-
-    .scroll-top:hover .scroll-top-icon {
-        transform: translateY(-3px);
-    }
-
-    /* Progress Ring Styling */
-    .progress-ring {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        transform: rotate(-90deg);
-        /* To start from the top */
-    }
-
-    .progress-ring__circle {
-        transition: stroke-dashoffset 0.35s;
-        transform-origin: 50% 50%;
-    }
-
-    /* Pulse Animation */
-    @keyframes pulse {
-        0% {
-            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-        }
-        50% {
-            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
-        }
-
-        100% {
-            box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
-        }
-    }
-
-    .scroll-top:hover {
-        animation: pulse 1.5s infinite;
-    }
-
-    .scroll-top.show {
-        animation: none;
-        /* No animation when showing the button */
-    }
-
-    .scroll-top.show:hover {
-        animation: pulse 1.5s infinite;
-        /* Pulse on hover */
-    }
-</style>
-<script>
-    // Get the button
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
-    const progressCircle = document.querySelector(".progress-ring__circle");
-    const radius = progressCircle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-
-    // Set the circle progress properties
-    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
-    progressCircle.style.strokeDashoffset = circumference;
-
-    // Function to show or hide the button based on scroll position
-    function toggleScrollButton() {
-        if (window.scrollY > 100) {
-            scrollToTopBtn.classList.add("show");
-        } else {
-            scrollToTopBtn.classList.remove("show");
-        }
-    }
-
-    // Function to set the scroll progress on the button ring
-    function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        progressCircle.style.strokeDashoffset = offset;
-    }
-
-    // Listen for scroll events to update button visibility and progress
-    window.addEventListener("scroll", () => {
-        toggleScrollButton();
-        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
-        setProgress(scrollPercent);
-    });
-
-    // Smooth scroll to top when the button is clicked
-    scrollToTopBtn.addEventListener("click", () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    });
-  })
-  </script>
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
+      <div class="scroll-top-icon">
+          <i class="fa-solid fa-arrow-up"></i>
+      </div>
+      <svg class="progress-ring" width="60" height="60">
+          <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+              cy="30"></circle>
+      </svg>
+  </button>
+  <style>
+      .scroll-top {
+          position: fixed;
+          right: 1.6%;
+          background: linear-gradient(100deg, #1ca6f0, #3c7aff, #05deff);
+          color: white;
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+          box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+          overflow: visible;
+          z-index: 10;
+          bottom: 15px;
+          /* Ensure button is on top */
+      }
+      .scroll-top.show {
+          opacity: 1;
+          visibility: visible;
+      }
+  
+      .scroll-top:hover {
+          transform: scale(1.1);
+          /* Subtle scaling instead of expanding */
+          box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
+          /* Slightly larger shadow */
+      }
+  
+      .scroll-top:active {
+          transform: scale(1.05);
+          /* Minor scale reduction on click */
+      }
+  
+      .scroll-top-icon {
+          position: relative;
+          z-index: 2;
+          transition: transform 0.3s ease;
+      }
+  
+      .scroll-top:hover .scroll-top-icon {
+          transform: translateY(-3px);
+      }
+  
+      /* Progress Ring Styling */
+      .progress-ring {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform: rotate(-90deg);
+          /* To start from the top */
+      }
+  
+      .progress-ring__circle {
+          transition: stroke-dashoffset 0.35s;
+          transform-origin: 50% 50%;
+      }
+  
+      /* Pulse Animation */
+      @keyframes pulse {
+          0% {
+              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+          }
+  
+          50% {
+              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
+          }
+  
+          100% {
+              box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+          }
+      }
+  
+      .scroll-top:hover {
+          animation: pulse 1.5s infinite;
+      }
+  
+      .scroll-top.show {
+          animation: none;
+          /* No animation when showing the button */
+      }
+  
+      .scroll-top.show:hover {
+          animation: pulse 1.5s infinite;
+          /* Pulse on hover */
+      }
+      @media (max-width: 768px) {
+          .about-content-first {
+            display: flex;
+            flex-direction: column-reverse;
+            gap: 20px;
+            margin-bottom: 0;
+          }
+          .about-content-second {
+            display: flex;
+            flex-direction: column-reverse;
+            gap: 20px;
+            text-align: center;
+          }
+          #div2{
+            margin-left: 0;
+            margin-bottom: 12px;
+          }
+          #div3{
+            margin-bottom: 15px;
+          }
+          .about-images img {
+            height: 320px;
+            width: 320px;
+          }
+          }
+  </style>
+  <script>
+      // Get the button
+      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+      const progressCircle = document.querySelector(".progress-ring__circle");
+      const radius = progressCircle.r.baseVal.value;
+      const circumference = 2 * Math.PI * radius;
+  
+      // Set the circle progress properties
+      progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
+      progressCircle.style.strokeDashoffset = circumference;
+  
+      // Function to show or hide the button based on scroll position
+      function toggleScrollButton() {
+          if (window.scrollY > 100) {
+              scrollToTopBtn.classList.add("show");
+          } else {
+              scrollToTopBtn.classList.remove("show");
+          }
+      }
+  
+      // Function to set the scroll progress on the button ring
+      function setProgress(percent) {
+          const offset = circumference - (percent / 100) * circumference;
+          progressCircle.style.strokeDashoffset = offset;
+      }
+  
+      // Listen for scroll events to update button visibility and progress
+      window.addEventListener("scroll", () => {
+          toggleScrollButton();
+          const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+          setProgress(scrollPercent);
+      });
+  
+      // Smooth scroll to top when the button is clicked
+      scrollToTopBtn.addEventListener("click", () => {
+          window.scrollTo({
+              top: 0,
+              behavior: "smooth"
+          });
+      });
+    </script>
   </body>
 </html>

From 5c701fd70809b4711addf1ab644c0209eca8d923 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:44:50 +0530
Subject: [PATCH 3/9] index.html

---
 index.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/index.html b/index.html
index d3c15f5..09c4ead 100644
--- a/index.html
+++ b/index.html
@@ -79,12 +79,7 @@
         
         <nav class="utils">
             <ul class="nav-links">
-                <li>
-                    <!-- <button class="mode-toggle" id="modeToggle">
-                        <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
-                        <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
-                      </button> -->
-                    </li>
+               
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
                 </li>

From e3b5f7d712ec6eb47646c96847f0aee6b19f381a Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:46:19 +0530
Subject: [PATCH 4/9] index.html

---
 index.html | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/index.html b/index.html
index 09c4ead..3bf9550 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,6 @@
         
         <nav class="utils">
             <ul class="nav-links">
-               
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
                 </li>
@@ -93,19 +92,6 @@
                 </li>
             </ul>
         </nav>
-        <!-- <script>
-            const modeToggle = document.getElementById("modeToggle");
-            const sunIcon = document.querySelector(".sun-icon");
-            const moonIcon = document.querySelector(".moon-icon");
-    
-            modeToggle.addEventListener("click", () => {
-                document.body.classList.toggle("dark-mode");
-    
-                // Toggle visibility of sun and moon icons
-                sunIcon.style.display = sunIcon.style.display === "none" ? "inline" : "none";
-                moonIcon.style.display = moonIcon.style.display === "none" ? "inline" : "none";
-            });
-        </script> -->
     </header>
     <!-- Search Bar -->
     <div id="search-bar">

From aec85fcf79a29c0ac3fe2118f2704e691b3c32b8 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:51:19 +0530
Subject: [PATCH 5/9] index.html

---
 index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/index.html b/index.html
index 3bf9550..ae4bd50 100644
--- a/index.html
+++ b/index.html
@@ -79,6 +79,12 @@
         
         <nav class="utils">
             <ul class="nav-links">
+                <li>
+                    <button class="mode-toggle" id="modeToggle">                                                                                                                                                                                 
+                        <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
+                        <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
+                      </button>
+                    </li>
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping" id="cart-icon"></i>
                 </li>

From 01043ed218d9348db8d24af2161395355c9929b0 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:53:41 +0530
Subject: [PATCH 6/9] style.css

---
 style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 45b3f93..479d1a3 100644
--- a/style.css
+++ b/style.css
@@ -849,14 +849,14 @@ html {
   position: absolute;
   background-color: #000000;
   color: rgb(255, 255, 255);
-  top: 3658px; /* Adjusted value to move it down */
+  top: 3658px;
   padding: 10px 10px;
   border-radius: 18px;
   display: inline-flex;
   align-items: center;
   font-family: Arial, sans-serif;
   margin-left: 0px;
-  z-index: 20; /* Ensure it stays on top of the border */
+  z-index: 20; 
 }  
  
 

From 5ef574a947ec7c3e4e0555884c19c1623a283946 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:57:24 +0530
Subject: [PATCH 7/9] style.css

---
 style.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 479d1a3..5a2c349 100644
--- a/style.css
+++ b/style.css
@@ -850,15 +850,14 @@ html {
   background-color: #000000;
   color: rgb(255, 255, 255);
   top: 3658px;
-  padding: 10px 10px;
-  border-radius: 18px;
+  padding: 10px 20px;
+  border-radius: 19px;
   display: inline-flex;
   align-items: center;
   font-family: Arial, sans-serif;
   margin-left: 0px;
-  z-index: 20; 
+  z-index: 10; /* Ensure it stays on top of the border */
 }  
- 
 
 .visitor-counter .icon {
   margin-right: 10px;

From d5162337605c4849218d9567d894e5ebdc12d3d5 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 14:58:35 +0530
Subject: [PATCH 8/9] style.css

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 5a2c349..3bce9a0 100644
--- a/style.css
+++ b/style.css
@@ -849,7 +849,7 @@ html {
   position: absolute;
   background-color: #000000;
   color: rgb(255, 255, 255);
-  top: 3658px;
+  top: 3650px;
   padding: 10px 20px;
   border-radius: 19px;
   display: inline-flex;

From 7b039d3c767892b3393b7dfb329b3d33bd740035 Mon Sep 17 00:00:00 2001
From: KRISH GUPTA <95969606+KRISHkg31@users.noreply.github.com>
Date: Sun, 10 Nov 2024 15:00:00 +0530
Subject: [PATCH 9/9] styles.css

---
 styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index c300ffe..75697ba 100644
--- a/styles.css
+++ b/styles.css
@@ -197,7 +197,7 @@ h2 {
     font-family: 'futura';
     display: flex;
     justify-content: space-between;
-    color: #000000;
+    color: #1d1d1d;
 
 }