Merge pull request #201 from Apoorv012/main

Added event section

css/events.css

@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+
+#events {
+  margin-bottom: 30px;
+}
+#events-div {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding-top: 50px;
+}
+#events-div h1 {
+  color: #00cf90;
+  font-family: "Kufam", sans-serif;
+  font-weight: 400;
+  font-size: 40px;
+  margin-top: 50px;
+}
+#events-wrapper {
+  margin: 0 30px;
+  margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.event-card {
+  background-color: rgba(217, 217, 217, 0.2);
+  backdrop-filter: blur(10px);
+  width: 360px;
+  margin: 25px 25px;
+  justify-content: center;
+  text-align: center;
+  transition: 0.3s ease;
+  height: 30rem;
+  border-radius: 10px;
+  position: relative;
+  padding: 4px 10px;
+  font-family: 'Inter', sans-serif !important;
+}
+.event-card:hover {
+  box-shadow: 0px 40px 56px rgba(8, 157, 60, 0.1);
+  transition: 0.3s;
+}
+.event-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: white;
+  width: fit-content;
+  border-radius: 10px;
+}
+
+.event-image {
+  max-width: 80px;
+}
+.event-name h3 {
+  margin-top: 25px;
+  font-size: 30px;
+  font-family: "Kufam", sans-serif;
+  color: #00cf90;
+  font-weight: 700;
+}
+.about-event {
+  font-size: 14px;
+  margin-bottom: 25px;
+  font-weight: 400;
+  color: #b7e7d9;
+  word-break: break-all;
+}
+.event-time {
+  background-color: rgba(255, 255, 255, 0.2);
+  margin: 10px;
+  border-radius: 5px;
+  padding: 5px 0;
+  margin-bottom: 30px;
+}
+.event-time h4 {
+  color: #b7e7d9;
+}
+.platform-text {
+  color: #00cf90;
+}
+.center {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.space {
+  margin-bottom: 30px;
+}
+.event-name {
+  color: rgba(255, 255, 255, 1);
+  font-weight: 100;
+}
+
+.setter-div h4 {
+  color: #b7e7d9;
+  font-weight: 400;
+}
+.github-event {
+  font-size: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: absolute;
+  bottom: 0px;
+  /* left: 40%; */
+}
+.github-event a {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  background-color: rgba(79, 210, 105, 0.117);
+  margin-bottom: 10px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 50%;
+  color: #00cf90;
+  transition: all 0.5s ease;
+  vertical-align: bottom;
+}
+.github-event a:hover {
+  color: rgb(255, 255, 255);
+  background-color: #00cf90;
+}
+
+@media screen and (max-width: 625px) {
+  .card {
+    margin: 25px 15px;
+  }
+  #container {
+    justify-content: space-between;
+  }
+  #events-div p {
+    font-size: 15px;
+    width: 304px;
+  }
+}
+@media screen and (min-width: 350px) and (max-width: 580px) {
+  #container {
+    justify-content: center;
+  }
+  .card {
+    width: 200px;
+    margin: 25px 20px;
+  }
+}
+@media screen and (min-width: 350px) and (max-width: 545px) {
+  #container {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+  .card {
+    width: 250px;
+    padding-left: 0px;
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+}
+@media screen and (min-width: 454px) and (max-width: 540px) {
+  .card {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}

data/events.json

@@ -0,0 +1,26 @@
+[
+  {
+    "name": "CYBERGEEK",
+    "time": "5 DEC to 7 JAN",
+    "description": "CTF COMPETITION",
+    "platform": "images/CTFd.png",
+    "repo-url": "https://ctf.geekhaven.in/register",
+    "problem_setters": ["Sushant", "Koshal", "Devam", "Rakim"]
+  },
+  {
+    "name": "DATA-BLITZ",
+    "time": "30 DEC to 10 JAN",
+    "description": "KAGGLE COMPETITION",
+    "platform": "images/kaggle.png",
+    "repo-url": "https://www.kaggle.com/t/b7c617621d204bd4ba4e048904afc742",
+    "problem_setters": ["Vamsi", "Devendra"]
+  },
+  {
+    "name": "CODEGUERRA",
+    "time": "22 DEC, 8:00 PM to 10:00 PM",
+    "description": "COMPETITIVE CODING CONTEST",
+    "platform": "images/codeforces.jpeg",
+    "repo-url": "https://codeforces.com/contestInvitation/fbbb2bf3110f360b249aaa9225bd8348ba2e9d26",
+    "problem_setters": ["Srijan", "Agrim", "Pavitra", "Nirbhay", "Himanshu"]
+  }
+]

index.html

@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="css/index.css" />
     <title>OpenCode</title>
     <link rel="stylesheet" href="css/project.css" />
+    <link rel="stylesheet" href="css/events.css" />
     <link rel="stylesheet" href="css/footer.css" />
     <link rel="stylesheet" href="css/hero-section.css" />
     <link rel="stylesheet" href="css/about-section.css" />
@@ -60,6 +61,7 @@
     <script src="js/navbar.js" defer></script>
     <script src="js/projects.js" defer></script>
     <script src="js/organizers.js" defer></script>
+    <script src="js/events.js" defer></script>
     <script src="js/background.js" defer></script>
     <script src="js/leaderboard.js" defer></script>
     <script src="js/mentors.js" defer></script>
@@ -84,6 +86,7 @@
           <li><a href="#leaderboard">LEADERBOARD</a></li>
           <li><a href="#projects">PROJECTS</a></li>
           <li><a href="#organizers">ORGANIZERS</a></li>
+          <li><a href="#events">EVENTS</a></li>
           <li><a href="#mentors">MENTORS</a></li>
           <li><a href="#footer">CONTACT US</a></li>
         </ul>
@@ -197,7 +200,12 @@ <h1>Organizers</h1>
     <!-- Speaker section ends -->
 
     <!-- Events section starts  -->
-    <section></section>
+    <section id="events">
+      <div id="events-div">
+        <h1>EVENTS</h1>
+      </div>
+      <div id="events-wrapper"></div>
+    </section>
     <!-- Events section ends -->
 
     <!-- Scroll to top button -->

js/events.js

@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const eventsSection = document.getElementById('events-wrapper');
+
+    fetch('data/events.json')
+        .then(response => response.json())
+        .then(data => {
+
+            data.forEach(event => {
+                const eventElement = createEventElement(event);
+                eventsSection.appendChild(eventElement);
+            });
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+
+
+    function createEventElement(event) {
+        const eventElement = document.createElement('div');
+        eventElement.classList.add('event-card');
+
+        eventElement.innerHTML = `
+            <div class="event-name">
+                <h3>${event.name}</h3>
+            </div>
+            <div>
+                <h4 class="about-event">${event.description}</h4>
+            </div>
+            <div class="event-time">
+                <h4>${event.time}</h4>
+            </div>
+            <h5 class="platform-text">PLATFORM:</h5>
+            <div class="center space">
+                <div class="event-image-wrapper">
+                    <img src="${event.platform}" class="event-image" alt="${event.name}">
+                </div>
+            </div>
+            
+            <h5 class="platform-text">PROBLEM SETTERS:</h5>
+            <div class="setter-div">
+                ${event.problem_setters.map(setter => `<h4>${setter}</h4>`).join('')}
+            </div>
+            <div class="center">
+                <div class="github-event">
+                    <a href="${event['repo-url']}" target="_blank"><i class="fab fa-github"></i></a>
+                </div>
+            </div>
+            
+        `;
+
+        return eventElement;
+    }
+});