From 29fb70202049835daf5887f9521434e7cc2189e2 Mon Sep 17 00:00:00 2001
From: Reina128 <114252439+Reina128@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:45:44 -0700
Subject: [PATCH] Changed Events Page

---
 layouts/_default/events.html | 82 +++++++++++++++---------------------
 1 file changed, 34 insertions(+), 48 deletions(-)

diff --git a/layouts/_default/events.html b/layouts/_default/events.html
index a8a5580..3d0b221 100644
--- a/layouts/_default/events.html
+++ b/layouts/_default/events.html
@@ -1,61 +1,47 @@
 {{ define "main" }}
 
-<article class="pb-24 relative"> 
-    <div class="orange-bubble">
-        Calendar
-    </div>
-    <div class="gray-bubble">
-        <p>Check out our upcoming events!</p>
-    </div>
-    <hr>
-    <div class = "calendar">
-        <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCALWzutNFb1WWktBxmlvQjkmhTHXycwB2ysGFP8mOjunsBbn7_bjWBeeOpAupIuH3SIGTNsh-xonp/pubhtml?gid=1316858529&amp;single=true&amp;widget=true&amp;headers=false" width="1000" height="600" frameborder="0"></iframe>
-    </div>
-    
-
+<article class="pb-24 relative">
+    <div class="relative flex flex-col justify-between bg-black-200">
+        <div class="flex flex-col md:flex-row mb-8 mt-24">
+          <!-- Events section -->
+          <div class="max-w-md mx-auto"> <!-- Center the events section -->
+            <div class="event-center">
+                <span class="block text-h2 font-bold font-display shadow leading-none" style="padding-top:20px;">Events</span>
+                <p class="mt-4 text-lg">
+                  Checkout our past and future events!
+                </p>
+            </div>
+            
+            <div>
+                <img class="event-image" src="/images/flyers/kickoff.png" alt="Event Flyer"/>
+            </div>
+          </div>
+        </div>
+      </div>
 </article>
 
 <style>
-    .orange-bubble, .gray-bubble {
-        display: inline-block;
-        padding: 20px;
-        color: white;
-        margin-bottom: 20px;
-        border-radius: 50%; 
-        background-color: rgba(249, 115, 22, 0.8); 
-    }
-    .orange-bubble {
-        display: inline-block;
-        margin-top: 100px;
-        padding: 10px 20px;
-        font-size: 35px;
-        background-color: #F97316;
-        color: white;
-        border-radius: 20px 0 0 20px;
-        margin-bottom: 20px;
+    .event-image {
+        width: 300px; 
+        margin: 30px auto; 
+        transition: transform 0.3s ease; 
     }
 
-    .gray-bubble {
-        display: inline-block;
-        padding: 10px 20px;
-        background-color: #ababab;
-        border-radius: 0 20px 20px 0;
-        margin-bottom: 20px;
+    .event-center {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
     }
 
-    .calendar {
-        position: relative;
-        height: 0;
-        padding-bottom: 70%;
-        overflow: hidden;
+    .event-image:hover {
+        transform: scale(1.1); 
     }
 
-    .calendar iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+    .max-w-md {
+        padding-left: 20px;
+        padding-right: 20px;
     }
 </style>
-{{ end}}
\ No newline at end of file
+{{ end }}