Merge pull request #88 from HarshitGourlariya/master

Issue with Duplicate Scripts ,no opening section , Missing Scroll Top…

Author: Varshitha713

index.html

@@ -179,6 +179,19 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
         </form>
         <div id="form-status" style="text-align: center; margin-top: 30px; font-size: 1.2rem; display: none;">✅ Message sent successfully!</div>
       </div>
+
+        
+    </main>
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 CodeCanvas. Open source project for the developer community.</p>
+            <p>Built with ❤️ for showcasing amazing front-end projects</p>
+        </div>
+    </footer>
+    <button id="scrollToTopBtn" title="Go to top">↑</button>
+   
+    
     </section>
 
     <div id="message-overlay">
@@ -188,29 +201,7 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
       </div>
     </div>
   </main>
-
-  <footer class="footer">
-    <div class="container">
-      <p>&copy; 2025 CodeCanvas. Open source project for the developer community.</p>
-      <p>Built with ❤️ for showcasing amazing front-end projects</p>
-    </div>
-  </footer>
-
-  <button id="scrollToTopBtn" title="Go to top">↑</button>
-
-  <script src="script.js"></script>
-  <script>
-    const toggle = document.getElementById('darkModeToggle');
-    const body = document.body;
-    const icon = document.getElementById('themeIcon');
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
-      body.classList.add('dark-theme');
-      icon.textContent = '☀️';
-    } else {
-      icon.textContent = '🌙';
-    }
-  </script>
   <script src="script.js"></script>
+
 </body>
 </html>

script.js

@@ -1,4 +1,5 @@
 
+
 const sampleProjects = [
   {
     id: 1,
@@ -422,4 +423,18 @@ const sampleProjects = [
                 grabCursor: true,
                 speed: 600,
         });
-            
+    //Scroll to top button functionality
+    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+
+// Show button when user scrolls down
+window.addEventListener("scroll", () => {
+    scrollToTopBtn.style.display = window.scrollY > 300 ? "block" : "none";
+});
+
+// Scroll to top smoothly
+scrollToTopBtn.addEventListener("click", () => {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});

style.css

@@ -1202,3 +1202,25 @@ body.dark-theme button:hover {
 }
 
 
+        #scrollToTopBtn {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 999;
+    background-color: #667eea;
+    color: white;
+    border: none;
+    outline: none;
+    padding: 0.75rem 1rem;
+    border-radius: 50%;
+    font-size: 1.25rem;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    display: none;
+    transition: background 0.3s ease, transform 0.3s ease;
+}
+
+#scrollToTopBtn:hover {
+    background-color: #5a67d8;
+    transform: scale(1.1);
+}