enhance: Learn more Button and smooth hover effect (#1388)

* enhance: Learn more Button and smooth hover effect

* update light mode

Co-Authored-By: Sanjay Viswanathan <[email protected]>

---------

Co-authored-by: Sanjay Viswanathan <[email protected]>

Author: codewithdhruba01

pages/events.html

@@ -76,14 +76,14 @@ <h1 class="main-heading">Events Timeline</h1>
               allowfullscreen></iframe>
           </div>
 
-          <h2 class="event-title">GitHub Profile Review Live Session</h2>
+          <h2 class="event-title">GitHub Profile Review Live Session : 1</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>
+          <a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
         </div>
         <div class="line line--left scroll-animate " id="scroll1"></div>
 
@@ -95,12 +95,12 @@ <h2 class="event-title">GitHub Profile Review Live Session</h2>
             <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>
+          <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>
+          <a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
         </div>
         <div class="line line--right scroll-animate" id="scroll2"></div>
 
@@ -113,12 +113,12 @@ <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
             <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>
+          <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>
+          <a href="https://youtube.com/@recodehive?si=ZcOHiLlFBaO_N6nH" class="event-link">Learn More</a>
         </div>
         <div class="line line--left scroll-animate" id="scroll3"></div>
 

styles/events.css

@@ -60,7 +60,7 @@
   padding: 20px 30px;
   background-color: #fff;
   position: relative;
-  border-radius: 6px;
+  border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -105,17 +105,43 @@
 }
 
 .event-link {
-  display: inline-block;
-  background-color: #333;
-  color: #fff;
-  padding: 8px 15px;
-  border-radius: 4px;
+  background-color: #222121;
+  color: #fcfcfc;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 100px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   text-decoration: none;
-  transition: background-color 0.3s;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.event-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(120deg, #ff416c, #ff4b2b);
+  transition: all 0.3s ease;
+  z-index: -1;
+  border: none;
+}
+
+.event-link:hover::before {
+  left: 0;
 }
 
 .event-link:hover {
-  background-color: #555;
+  color: #ffffff;
+  transform: scale(1.05);
 }
 
 /* Dark mode styles */
@@ -150,12 +176,12 @@ body.dark-mode .event-date {
 }
 
 body.dark-mode .event-link {
-  background-color: #f0f0f0;
-  color: #333;
+  background-color: #e7e9eb;
+  color: #201f1f;
 }
 
 body.dark-mode .event-link:hover {
-  background-color: #ccc;
+  background-color: #ffffff;
 }
 
 body.dark-mode .navbar-text {