From c4c4ad11d11588fc6134f882befd146afee28c4d Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Sat, 10 Aug 2024 17:36:03 +0530
Subject: [PATCH] animation fixed

---
 pages/events.html | 391 ++++++++++++++++++++++++----------------------
 styles/events.css |  53 ++++---
 2 files changed, 231 insertions(+), 213 deletions(-)
diff --git a/pages/events.html b/pages/events.html
index f4eed5d9..88976b2a 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -1,216 +1,227 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Events | Recode Hive</title>
-    <link rel="shortcut icon" href="../assets/events.png" type="image/x-icon">
-    <link rel="stylesheet" href="../styles/styles.css">
-    <link rel="stylesheet" href="../styles/events.css">
-	  <link rel="stylesheet" href="../styles/hamburger.css">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Events | Recode Hive</title>
+  <link rel="shortcut icon" href="../assets/events.png" type="image/x-icon">
+  <link rel="stylesheet" href="../styles/styles.css">
+  <link rel="stylesheet" href="../styles/events.css">
+  <link rel="stylesheet" href="../styles/hamburger.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
+
 <body>
-    <nav class="navbar">
-        <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-             <span class="navbar-text">Recode Hive</span>
-        </a>
-        <div class="navbar-right">
-          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-          <a href="#" class="navbar-link">Tools</a>
-          <a href="#" class="navbar-link">Events</a>
-          <a href="blog.html" class="navbar-link">Learn</a>
-          <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
-           class="navbar-link">Add Profile</a>
-            <div class="toggle-switch">
-                <input type="checkbox" id="theme-toggle">
-                <label for="theme-toggle">
-                  <div class="switch-button">
-                    <span class="material-icons sun-icon">wb_sunny</span>
-                    <span class="material-icons moon-icon">brightness_2</span>
-                  </div>
-                </label>
-              </div>
-        </div>
-        <div class="hamburger" id="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
+  <nav class="navbar">
+    <a class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
+      <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+      <span class="navbar-text">Recode Hive</span>
+    </a>
+    <div class="navbar-right">
+      <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+      <a href="#" class="navbar-link">Tools</a>
+      <a href="#" class="navbar-link">Events</a>
+      <a href="blog.html" class="navbar-link">Learn</a>
+      <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
+        class="navbar-link">Add Profile</a>
+      <div class="toggle-switch">
+        <input type="checkbox" id="theme-toggle">
+        <label for="theme-toggle">
+          <div class="switch-button">
+            <span class="material-icons sun-icon">wb_sunny</span>
+            <span class="material-icons moon-icon">brightness_2</span>
+          </div>
+        </label>
       </div>
-    </nav>
-    <div class="mobile-menu" id="mobile-menu">
-		<a href="githubbadge.html" class="navbar-links">Github-Badge</a>
-		<a href="#" class="navbar-links">Tools</a>
-		<a href="" class="navbar-links">Events</a>
-		<a href="blog.html" class="navbar-links">Blog</a>
-		<a href="#" class="navbar-links">Add Profile</a>
-		<a href="blog.html" class="navbar-links">Learn</a>
-	</div>
-    <div class="container">
-        <h1 class="main-heading">Events Timeline</h1>
-        
-        <div style="position: relative;" class="timeline">
-            <!-- Event 1 -->
-            <div class="timeline-item" style="position: relative;">
-                <div class="timeline-content">
-                  <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/AtoVNe1mVUA?start=792" frameborder="0" allowfullscreen></iframe>
-                  </div>
-                
-                    <h2 class="event-title">GitHub Profile Review Live Session</h2>
-                    <p class="event-date">Date: 18 Jul 2024</p>
-                    <p class="event-description">Session Highlights:
-                      🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
-                      💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.
-             
-                      </p>
-                    <a href="#" class="event-link">Learn More</a>
-                </div>
-                <div class="line scroll-animate " id="scroll1"></div>
+    </div>
+    <div class="hamburger" id="hamburger">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </nav>
+  <div class="mobile-menu" id="mobile-menu">
+    <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
+    <a href="#" class="navbar-links">Tools</a>
+    <a href="" class="navbar-links">Events</a>
+    <a href="blog.html" class="navbar-links">Blog</a>
+    <a href="#" class="navbar-links">Add Profile</a>
+    <a href="blog.html" class="navbar-links">Learn</a>
+  </div>
+  <div class="container">
+    <h1 class="main-heading">Events Timeline</h1>
 
-            </div>
-            <!-- Event 2 -->
-            <div class="timeline-item">
-                <div class="timeline-content">
-                  <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/Rm2lT9j6VxQ?start=522" frameborder="0" allowfullscreen></iframe>
-                  </div>
-                    <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
-                    <p class="event-date">Date: 21 Jul 2024</p>
-                    <p class="event-description">Session Highlights:
-                      🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
-                      💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
-                    <a href="#" class="event-link">Learn More</a>
-                </div>
-                <div class="line1 scroll-animate" id="scroll2"></div>
+    <div style="position: relative;" class="timeline">
+      <!-- Event 1 -->
+      <div class="timeline-item" style="position: relative;">
+        <div class="timeline-content">
+          <div class="banner">
+            <iframe width="100%" height="315" src="https://www.youtube.com/embed/AtoVNe1mVUA?start=792" frameborder="0"
+              allowfullscreen></iframe>
+          </div>
 
-            </div>
+          <h2 class="event-title">GitHub Profile Review Live Session</h2>
+          <p class="event-date">Date: 18 Jul 2024</p>
+          <p class="event-description">Session Highlights:
+            🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
+            💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.
 
-            <!-- Event 3 -->
-            <div class="timeline-item">
-              <div class="timeline-content">
-                <div class="banner">
-                  <iframe width="100%" height="315" src="https://www.youtube.com/embed/rNF66FCLmYM?start=90" frameborder="0" allowfullscreen></iframe>
-                </div>
-                  <h2 class="event-title">GitHub Profile Review Live Session : #3</h2>
-                  <p class="event-date">Date: 7 Aug 2024</p>
-                  <p class="event-description">Session Highlights:
-                    🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
-                    💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
-                  <a href="#" class="event-link">Learn More</a>
-              </div>
-                <div class="line scroll-animate" id="scroll3"></div>
+          </p>
+          <a href="#" class="event-link">Learn More</a>
+        </div>
+        <div class="line scroll-animate " id="scroll1"></div>
 
-            </div>
+      </div>
+      <!-- Event 2 -->
+      <div class="timeline-item">
+        <div class="timeline-content">
+          <div class="banner">
+            <iframe width="100%" height="315" src="https://www.youtube.com/embed/Rm2lT9j6VxQ?start=522" frameborder="0"
+              allowfullscreen></iframe>
+          </div>
+          <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
+          <p class="event-date">Date: 21 Jul 2024</p>
+          <p class="event-description">Session Highlights:
+            🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
+            💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
+          <a href="#" class="event-link">Learn More</a>
+        </div>
+        <div class="line1 scroll-animate" id="scroll2"></div>
 
-            <!-- Add more event containers as needed -->
+      </div>
+
+      <!-- Event 3 -->
+      <div class="timeline-item">
+        <div class="timeline-content">
+          <div class="banner">
+            <iframe width="100%" height="315" src="https://www.youtube.com/embed/rNF66FCLmYM?start=90" frameborder="0"
+              allowfullscreen></iframe>
+          </div>
+          <h2 class="event-title">GitHub Profile Review Live Session : #3</h2>
+          <p class="event-date">Date: 7 Aug 2024</p>
+          <p class="event-description">Session Highlights:
+            🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
+            💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
+          <a href="#" class="event-link">Learn More</a>
         </div>
+        <div class="line scroll-animate" id="scroll3"></div>
+
+      </div>
+
+      <!-- Add more event containers as needed -->
     </div>
+  </div>
 
-    <footer id="Contact" class="footer-2">
-        <div class="footer-container">
-          <div class="footer-content">
-            <div class="footer-info">
-              <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
-            </div>
-      
-            <div class="footer-links">
-              <div class="footer-section">
-               <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
-               <div>
-                <a href="help.html" class="footer-link">Contact Us</a>
-                <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
-               </div>
-              </div>
-              <div class="footer-section">
-                <h6 class="footer-heading">GET INVOLVED</h6>
-                <div>
-                  <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
-                  <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
-                </div>
-              </div>
+  <footer id="Contact" class="footer-2">
+    <div class="footer-container">
+      <div class="footer-content">
+        <div class="footer-info">
+          <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
+        </div>
+
+        <div class="footer-links">
+          <div class="footer-section">
+            <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
+            <div>
+              <a href="help.html" class="footer-link">Contact Us</a>
+              <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md"
+                class="footer-link">Code of Conduct</a>
             </div>
-      
-            <div class="footer-description">
-              <h5>
-                We focus on quality content for the right people at the right time⏱️. What we are trying to do is help you to brand personal skills through GitHub readme.md, So we listing the best profiles & opportunity to list your profile to the world 🌎.
-              </h5>
-              <a href="exploremore.html" class="footer-button">Explore</a>
+          </div>
+          <div class="footer-section">
+            <h6 class="footer-heading">GET INVOLVED</h6>
+            <div>
+              <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
+                class="footer-link">Add Your Profile</a>
+              <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization"
+                class="footer-link">Join the Organization</a>
             </div>
           </div>
         </div>
-      
-        <div class="footer-bottom">
-          <div class="footer-container">
-            <p class="footer-copyright">
-              &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
-            </p>
-          </div>
+
+        <div class="footer-description">
+          <h5>
+            We focus on quality content for the right people at the right time⏱️. What we are trying to do is help you
+            to brand personal skills through GitHub readme.md, So we listing the best profiles & opportunity to list
+            your profile to the world 🌎.
+          </h5>
+          <a href="exploremore.html" class="footer-button">Explore</a>
         </div>
-      </footer>
+      </div>
+    </div>
 
-    <script src="../scripts/script.js"></script>
-    <script src="../scripts/dark-mode.js"></script>
-	  <script src="../scripts/hamburger.js"></script>
-    <script>
+    <div class="footer-bottom">
+      <div class="footer-container">
+        <p class="footer-copyright">
+          &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+        </p>
+      </div>
+    </div>
+  </footer>
 
-      function active(){
-          const contentDiv = document.getElementById('scroll1');
-          contentDiv.style.height='103%'
-      }
-      function active1(){
-          const contentDiv = document.getElementById('scroll2');
-          contentDiv.style.height='100%'
-      }
-      function active2(){
-          const contentDiv = document.getElementById('scroll3');
-          contentDiv.style.height='108%'
-      }
-      document.addEventListener('DOMContentLoaded', () => {
-        const contentDiv = document.getElementById('scroll1');
-        const contentDiv1 = document.getElementById('scroll2');
-        const contentDiv2 = document.getElementById('scroll3');
-
-        contentDiv.style.height='0%'
-
-          contentDiv1.style.height='0%'
-          contentDiv2.style.height='0%'
-
-        // Function to call when the content div comes into view
-        function handleIntersection(entries, observer) {
-          entries.forEach(entry => {
-            if (entry.isIntersecting) {
-              // Call your function here
-              if(entry.target.id=="scroll1"){
-                  active();
-              } if(entry.target.id=="scroll2"){
-                  active1()
-              } if(entry.target.id=="scroll3"){
-                active2()
-              }
-  
-              // Optionally, stop observing after the first intersection
-              observer.unobserve(entry.target);
+  <script src="../scripts/script.js"></script>
+  <script src="../scripts/dark-mode.js"></script>
+  <script src="../scripts/hamburger.js"></script>
+  <script>
+
+    function active() {
+      const contentDiv = document.getElementById('scroll1');
+      contentDiv.style.height = '103%'
+    }
+    function active1() {
+      const contentDiv = document.getElementById('scroll2');
+      contentDiv.style.height = '100%'
+    }
+    function active2() {
+      const contentDiv = document.getElementById('scroll3');
+      contentDiv.style.height = '108%'
+    }
+    document.addEventListener('DOMContentLoaded', () => {
+      const contentDiv = document.getElementById('scroll1');
+      const contentDiv1 = document.getElementById('scroll2');
+      const contentDiv2 = document.getElementById('scroll3');
+
+      contentDiv.style.height = '0%'
+
+      contentDiv1.style.height = '0%'
+      contentDiv2.style.height = '0%'
+
+      // Function to call when the content div comes into view
+      function handleIntersection(entries, observer) {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // Call your function here
+            if (entry.target.id == "scroll1") {
+              active();
+            } if (entry.target.id == "scroll2") {
+              active1()
+            } if (entry.target.id == "scroll3") {
+              active2()
             }
-          });
-        }
-  
-        // Create an Intersection Observer instance
-        const observer = new IntersectionObserver(handleIntersection, {
-          root: null, // Use the viewport as the root
-          rootMargin: '-200px',
-          threshold: 0.1 // Trigger when 10% of the target is visible
+
+            // Optionally, stop observing after the first intersection
+            observer.unobserve(entry.target);
+          }
         });
-  
-        // Start observing the target element
-        observer.observe(contentDiv);
-        observer.observe(contentDiv1);
-        observer.observe(contentDiv2);
-
-        // Example function to call when content div is in view
-      
+      }
+
+      // Create an Intersection Observer instance
+      const observer = new IntersectionObserver(handleIntersection, {
+        root: null, // Use the viewport as the root
+        rootMargin: '-200px',
+        threshold: 0.1 // Trigger when 10% of the target is visible
       });
-    </script>
+
+      // Start observing the target element
+      observer.observe(contentDiv);
+      observer.observe(contentDiv1);
+      observer.observe(contentDiv2);
+
+      // Example function to call when content div is in view
+
+    });
+  </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/styles/events.css b/styles/events.css
index a7ebdc86..6175caa2 100644
--- a/styles/events.css
+++ b/styles/events.css
@@ -60,7 +60,7 @@
     background-color: #fff;
     position: relative;
     border-radius: 6px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .timeline-item:nth-child(odd) .timeline-content::after {
@@ -118,11 +118,11 @@
 }
 
 /* Dark mode styles */
-body.dark-mode .timeline::after{
+body.dark-mode .timeline::after {
     background-color: #f0f0f0;
 }
 
-body.dark-mode .timeline-item::after{
+body.dark-mode .timeline-item::after {
     background-color: #ccc;
     border: 4px solid #999;
 }
@@ -157,7 +157,7 @@ body.dark-mode .event-link:hover {
     background-color: #ccc;
 }
 
-body.dark-mode .navbar-text{
+body.dark-mode .navbar-text {
     color: #fff;
 }
 
@@ -167,12 +167,15 @@ body.dark-mode .navbar-text{
     .timeline::after {
         left: 31px;
     }
-    .line{
-left: 28px !important;
+
+    .line {
+        left: 28px !important;
     }
-    .line1{
+
+    .line1 {
         right: 93.5% !important;
     }
+
     .timeline-item {
         width: 100%;
         padding-left: 70px;
@@ -208,24 +211,28 @@ left: 28px !important;
     body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
         border-right-color: #444;
     }
-}.line{
+}
+
+.line {
     position: absolute;
-  left: 99.5%;
-  background-color: #d55353;
-  width: 6px;
-  top: 20px;
-  z-index: 1000;
-  /* height: 103% !important; */
-}
-.line1{
+    left: 99.5%;
+    background-color: #d55353;
+    width: 6px !important;
+    top: 20px;
+    z-index: 1000;
+    /* height: 103% !important; */
+}
+
+.line1 {
     position: absolute;
-  right: 99.5%;
-  background-color: #d55353;
-  top: 25px;
-  width: 6px;
-  z-index: 1000;
+    right: 99.5%;
+    background-color: #d55353;
+    top: 25px;
+    width: 6px;
+    z-index: 1000;
 }
+
 .scroll-animate {
     transition: all 1.5s ease-out;
-      background-color: #3b9cdd !important;
-  }
\ No newline at end of file
+    background-color: #3b9cdd !important;
+}
\ No newline at end of file
