From 7a2b45952ff64a38115b4e3b1dd61c2196c5894e Mon Sep 17 00:00:00 2001
From: Surabhi <150716736+Speedysays01@users.noreply.github.com>
Date: Thu, 3 Oct 2024 19:49:13 +0530
Subject: [PATCH] Added a mouse follower

---
 index.html |  6 +++++-
 script.js  | 12 +++++++++++-
 style.css  | 16 ++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 0b82ed1..79d3cb6 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,8 @@
             </ul>
         </div>
     </nav>
-    
+
+    <div class="mouse-follower" id="mouseFollower"> </div>
     <div class="hero">
         <video autoplay muted loop id="background-video">
             <source src="assets/videos/bg.mp4" type="video/mp4">
@@ -117,6 +118,9 @@ <h2>Register Now</h2>
             </form>
         </div>
     </section>
+
+
+    
     
     <footer>
         <p>&copy; 2024 College Club. All rights reserved.</p>
diff --git a/script.js b/script.js
index 66e6a18..14f74dd 100644
--- a/script.js
+++ b/script.js
@@ -74,4 +74,14 @@ document.getElementById('registration-form').addEventListener('submit', function
       const target = this.getAttribute('href'); // Get the target section ID
       smoothScroll(target); // Call the smooth scroll function
     });
-  });
\ No newline at end of file
+  });
+
+
+  document.addEventListener("mousemove", function (e) {
+    const follower = document.getElementById("mouseFollower");
+    
+    // Move the follower div to the mouse position
+    follower.style.left = `${e.clientX}px`;
+    follower.style.top = `${e.clientY}px`;
+  });
+  
\ No newline at end of file
diff --git a/style.css b/style.css
index 5fc5f3d..f4556a1 100644
--- a/style.css
+++ b/style.css
@@ -577,6 +577,22 @@ footer {
 }
 
 
+/* Mouse follower*/
+/* Make the mouse follower element */
+.mouse-follower {
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(190, 190, 190, 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 9999;
+    transition: transform 0.1s ease;
+  }
+  
+
+
 /* Animations */
 @keyframes fadeIn {
     from {