From 5dfe1725ed9233f863ac3648e78c04bf262420aa Mon Sep 17 00:00:00 2001
From: Alan Francis <alan.prime567@gmail.com>
Date: Thu, 24 Oct 2024 21:52:32 +0530
Subject: [PATCH] feat:updated upcoming events

---
 index.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index d0b88d3..e5dd67c 100644
--- a/index.html
+++ b/index.html
@@ -118,7 +118,7 @@
             background-position: center; /* Center background image */
         }
 
-        .hero h1 {
+        .hero h1{
         font-size: 3.5rem;
         margin-bottom: 0.5rem;
         position: relative;
@@ -195,7 +195,24 @@
             position: relative; /* Position for overlay */
             transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Smooth transition for hover effects */
         }
-
+        #events .container{
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .event-image{
+            height: 65vh;
+            background-image: url('s1.jpg');
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            border-radius: 10px;
+        }
+        
         /* Simple hover effect */
         .gallery img:hover {
             transform: scale(1.05); /* Grows 5% on hover */
@@ -500,9 +517,19 @@ <h2 class="section-title">About HR Evolve</h2>
 </section>
 
 <!-- Upcoming Events Section -->
-<section id="events" class="content-section events-section">
+
+<section id="events" class="content-section events-section">>
     <div class="container">
         <h2 class="section-title">Upcoming Events</h2>
+        <div class="event-image">
+            <div class="" style="background-image: url('s1.jpg');"></div>
+            <div style="display: flex;justify-content: center; flex-direction: column; align-items: center; position: absolute; bottom: 100px;">
+                <p style="font-size: 2.5rem; font-weight: 500; text-transform: capitalize;">
+                    join us for our Upcoming Events
+                </p>
+                <a href="https://makemypass.com/elevate-2024" class="cta-button">Register Now</a>
+            </div>
+        </div>
         <p class="section-text">
             Set aside time every <strong>third Thursday</strong> of the month for dynamic conversations and networking opportunities with fellow HR professionals. Our events bring fresh insights into key HR issues, offering practical takeaways that you can implement in your work.
         </p>
@@ -519,6 +546,7 @@ <h2 class="section-title">Upcoming Events</h2>
     <!-- Past programs section -->
     <section id="past-programs" class="content-section">
         <div class="container">
+            <div></div>
             <h2>Past Programs</h2>
             <p>Take a look at some of our previous events and the topics we've covered.</p>
             <div class="gallery">