From 5a90491c72d953b3b5b30b87a597a3b05c2375a4 Mon Sep 17 00:00:00 2001
From: Adil-Khan-N <adilkhann724@gmail.com>
Date: Sat, 12 Oct 2024 06:21:36 +0530
Subject: [PATCH] Added Event's Page

---
 index.html | 56 +++++++++++++++++++++++++++++++++++
 style.css  | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a0d102cf..dfd48be3 100644
--- a/index.html
+++ b/index.html
@@ -1153,6 +1153,62 @@ <h3 class="title-lg card-title">Emily Johnson</h3>
       
       </section>
       
+      <section id="events" class="section events" aria-labelledby="events-label">
+        <div class="container">
+          <p class="title-sm text-center section-subtitle" id="events-label">Upcoming Workshops</p>
+      
+          <h2 class="headline-md text-center section-title" data-aos="fade-down">
+            Join Our Skill Development <span class="span has-after">Events</span>
+          </h2>
+      
+          <div class="event-list">
+            <!-- Event 1 -->
+            <div class="event-item" data-aos="fade-right">
+              <div class="event-date-box">
+                <p class="event-month">Oct</p>
+                <p class="event-day">20</p>
+              </div>
+              <div class="event-details">
+                <h3 class="event-title">Web Development Bootcamp</h3>
+                <p class="event-description">Join our intensive bootcamp to learn HTML, CSS, and JavaScript in just one week!</p>
+              </div>
+              <a href="#" class="event-button">View Event</a>
+            </div>
+      
+            <!-- Event 2 -->
+            <div class="event-item" data-aos="fade-right">
+              <div class="event-date-box">
+                <p class="event-month">Nov</p>
+                <p class="event-day">05</p>
+              </div>
+              <div class="event-details">
+                <h3 class="event-title">Data Science Workshop</h3>
+                <p class="event-description">Discover the world of data science with hands-on projects and expert guidance.</p>
+              </div>
+              <a href="#" class="event-button">View Event</a>
+            </div>
+      
+            <!-- Event 3 -->
+            <div class="event-item" data-aos="fade-right">
+              <div class="event-date-box">
+                <p class="event-month">Dec</p>
+                <p class="event-day">15</p>
+              </div>
+              <div class="event-details">
+                <h3 class="event-title">Creative Design Thinking</h3>
+                <p class="event-description">Learn innovative design principles and enhance your creative problem-solving skills.</p>
+              </div>
+              <a href="#" class="event-button">View Event</a>
+            </div>
+          </div>
+      
+          <a href="./pages/events.html" class="btn btn-primary see-all" data-aos="zoom-in">View All Workshops</a>
+        </div>
+      </section>
+      
+      
+      
+      
 
     </article>
   </main>
diff --git a/style.css b/style.css
index 600c6ec1..4aa0da87 100644
--- a/style.css
+++ b/style.css
@@ -82,4 +82,88 @@
     outline: none; 
     box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); 
   }
-  
+ /* Container for the events */
+.event-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px; /* Adds more space between the event items */
+  margin-bottom: 20px;
+}
+
+/* Individual event item */
+.event-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px; /* Increased padding for more space */
+  border: 2px solid var(--roman-silver); /* Border matching roman silver */
+  border-radius: 12px; /* Slightly more rounded corners */
+  background-color: var(--roman-silver_10); /* Light transparent background */
+  color: var(--roman-silver); /* Text color using roman silver */
+  transition: background-color 0.3s ease;
+  font-size: 1.4rem; /* Bigger font size for better readability */
+}
+
+/* Event date box styling */
+.event-date-box {
+  background-color: var(--light-coral); /* Light coral background for date box */
+  padding: 15px; /* Increased padding for a larger box */
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 90px; /* Slightly larger date box */
+}
+
+.event-month {
+  font-size: 1.8rem; /* Bigger size for the month */
+  font-weight: bold;
+  color: var(--oxford-blue); /* Oxford blue text color */
+}
+
+.event-day {
+  font-size: 3.2rem; /* Bigger size for the day */
+  font-weight: bold;
+  color: var(--oxford-blue); /* Oxford blue text */
+}
+
+/* Event details styling */
+.event-details {
+  flex-grow: 1;
+  margin-left: 30px; /* More space between date and details */
+}
+
+.event-title {
+  font-size: 2rem; /* Larger font size for titles */
+  font-weight: 700; /* Bolder font for event titles */
+  color: var(--light-coral); /* Light coral for event titles */
+}
+
+.event-description {
+  font-size: 1.4rem; /* Larger description font size */
+  color: var(--oxford-blue); /* Roman silver for descriptions */
+}
+
+/* Event button */
+.event-button {
+  background-color: transparent;
+  border: 2px solid var(--keppei); /* Keppei color for button borders */
+  padding: 16px 28px; /* Bigger padding for a larger button */
+  border-radius: 10px;
+  font-size: 1.4rem; /* Larger font size for buttons */
+  color: var(--keppei); /* Keppei color for the text */
+  text-decoration: none;
+  font-weight: bold; /* Bolder button text */
+  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
+
+.event-button:hover {
+  background-color: var(--keppei); /* Keppei background on hover */
+  color: var(--oxford-blue); /* Oxford blue text on hover */
+  transform: scale(1.1); /* Slightly bigger button on hover */
+}
+
+/* Hover effect for event items */
+.event-item:hover {
+  transform: scale(1.03); /* Slightly enlarges the event item on hover */
+}