From 6ab995b2e38fe1a44194b0dbc71bb7dee70250dc Mon Sep 17 00:00:00 2001
From: Siddheya Kulkarni <siddheyakul@gmail.com>
Date: Mon, 5 Aug 2024 17:58:45 +0530
Subject: [PATCH 1/2] added event page and some minor fixes

---
 events.css  | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 events.html | 117 ++++++++++++++++++++++++++++++
 index.html  |   1 +
 styles.css  |  16 +++--
 4 files changed, 328 insertions(+), 6 deletions(-)
 create mode 100644 events.css
 create mode 100644 events.html

diff --git a/events.css b/events.css
new file mode 100644
index 00000000..c87a7b3c
--- /dev/null
+++ b/events.css
@@ -0,0 +1,200 @@
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 0;
+}
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: #333;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+}
+
+.timeline-item {
+    padding: 10px 40px;
+    position: relative;
+    width: calc(50% - 40px);
+    box-sizing: border-box;
+}
+
+.timeline-item::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    background-color: #333;
+    border: 4px solid #555;
+    border-radius: 50%;
+    z-index: 1;
+    top: 20px;
+}
+
+.timeline-item:nth-child(odd) {
+    left: 0;
+    width: calc(50%);
+}
+
+.timeline-item:nth-child(even) {
+    left: 50%;
+    width: calc(50%);
+}
+
+.timeline-item:nth-child(odd)::after {
+    right: -17px;
+}
+
+.timeline-item:nth-child(even)::after {
+    left: -17px;
+}
+
+.timeline-content {
+    padding: 20px 30px;
+    background-color: #fff;
+    position: relative;
+    border-radius: 6px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.timeline-item:nth-child(odd) .timeline-content::after {
+    content: '';
+    position: absolute;
+    top: 15px;
+    right: -15px;
+    width: 0;
+    height: 0;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-left: 15px solid #fff;
+}
+
+.timeline-item:nth-child(even) .timeline-content::after {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: -15px;
+    width: 0;
+    height: 0;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-right: 15px solid #fff;
+}
+
+.event-title {
+    color: #333;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.event-date {
+    font-style: italic;
+    color: #888;
+    margin-bottom: 10px;
+}
+
+.event-description {
+    margin-bottom: 15px;
+}
+
+.event-link {
+    display: inline-block;
+    background-color: #333;
+    color: #fff;
+    padding: 8px 15px;
+    border-radius: 4px;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+
+.event-link:hover {
+    background-color: #555;
+}
+
+/* Dark mode styles */
+body.dark-mode .timeline::after{
+    background-color: #f0f0f0;
+}
+
+body.dark-mode .timeline-item::after{
+    background-color: #ccc;
+    border: 4px solid #999;
+}
+
+body.dark-mode .timeline-content {
+    background-color: #444;
+    color: #f0f0f0;
+}
+
+body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after {
+    border-left-color: #444;
+}
+
+body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
+    border-right-color: #444;
+}
+
+body.dark-mode .event-title {
+    color: #f0f0f0;
+}
+
+body.dark-mode .event-date {
+    color: #ccc;
+}
+
+body.dark-mode .event-link {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+body.dark-mode .event-link:hover {
+    background-color: #ccc;
+}
+
+
+/* Responsive design */
+@media screen and (max-width: 768px) {
+    .timeline::after {
+        left: 31px;
+    }
+
+    .timeline-item {
+        width: 100%;
+        padding-left: 70px;
+        padding-right: 25px;
+    }
+
+    .timeline-item::after {
+        left: 15px;
+    }
+
+    .timeline-item:nth-child(odd) {
+        width: 100%;
+    }
+
+    .timeline-item:nth-child(even) {
+        left: 0;
+        width: 100%;
+    }
+
+    .timeline-item:nth-child(odd)::after,
+    .timeline-item:nth-child(even)::after {
+        left: 15px;
+    }
+
+    .timeline-item:nth-child(odd) .timeline-content::after,
+    .timeline-item:nth-child(even) .timeline-content::after {
+        left: -15px;
+        border-right: 15px solid #fff;
+        border-left: none;
+    }
+
+    body.dark-mode .timeline-item:nth-child(odd) .timeline-content::after,
+    body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
+        border-right-color: #444;
+    }
+}
\ No newline at end of file
diff --git a/events.html b/events.html
new file mode 100644
index 00000000..c4b5b908
--- /dev/null
+++ b/events.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events | Recode Hive</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="events.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar">
+        <a href="index.html" style="text-decoration: none; color: #333;">
+        <div class="navbar-left">
+            <img src="assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+             <span class="navbar-text">Recode Hive</span>
+        </div>
+        </a>
+        <div class="navbar-right">
+            <a href="#" class="navbar-link">Events</a>
+            <a href="link-to-blog" class="navbar-link">Blog</a>
+            <div class="toggle-switch">
+                <input type="checkbox" id="theme-toggle">
+                <label for="theme-toggle">
+                  <div class="switch-button">
+                    <span class="material-icons sun-icon">wb_sunny</span>
+                    <span class="material-icons moon-icon">brightness_2</span>
+                  </div>
+                </label>
+              </div>
+        </div>
+    </nav>
+
+    <div class="container">
+        <h1 class="main-heading">Events Timeline</h1>
+        
+        <div class="timeline">
+            <!-- Event 1 -->
+            <div class="timeline-item">
+                <div class="timeline-content">
+                    <h2 class="event-title">Event Title 1</h2>
+                    <p class="event-date">Date: TBA</p>
+                    <p class="event-description">Description of the event goes here.</p>
+                    <a href="#" class="event-link">Learn More</a>
+                </div>
+            </div>
+
+            <!-- Event 2 -->
+            <div class="timeline-item">
+                <div class="timeline-content">
+                    <h2 class="event-title">Event Title 2</h2>
+                    <p class="event-date">Date: TBA</p>
+                    <p class="event-description">Description of the event goes here.</p>
+                    <a href="#" class="event-link">Learn More</a>
+                </div>
+            </div>
+
+            <!-- Event 3 -->
+            <div class="timeline-item">
+                <div class="timeline-content">
+                    <h2 class="event-title">Event Title 3</h2>
+                    <p class="event-date">Date: TBA</p>
+                    <p class="event-description">Description of the event goes here.</p>
+                    <a href="#" class="event-link">Learn More</a>
+                </div>
+            </div>
+
+            <!-- Add more event containers as needed -->
+        </div>
+    </div>
+
+    <footer id="Contact" class="footer-2">
+        <div class="footer-container">
+          <div class="footer-content">
+            <div class="footer-info">
+              <img src="assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
+            </div>
+      
+            <div class="footer-links">
+              <div class="footer-section">
+               <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
+               <div>
+                <a href="#" class="footer-link">Contact Us</a>
+                <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
+               </div>
+              </div>
+              <div class="footer-section">
+                <h6 class="footer-heading">GET INVOLVED</h6>
+                <div>
+                  <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
+                  <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
+                </div>
+              </div>
+            </div>
+      
+            <div class="footer-description">
+              <h5>
+                We focus on quality content for the right people at the right time⏱️. What we are trying to do is help you to brand personal skills through GitHub readme.md, So we listing the best profiles & opportunity to list your profile to the world 🌎.
+              </h5>
+              <a href="https://www.linkedin.com/company/recodehive/" class="footer-button">Explore</a>
+            </div>
+          </div>
+        </div>
+      
+        <div class="footer-bottom">
+          <div class="footer-container">
+            <p class="footer-copyright">
+              &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+
+    <script src="script.js"></script>
+    <script src="dark-mode.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e139ac88..70d0949c 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
         <span class="navbar-text">Recode Hive</span>
       </div>
       <div class="navbar-right">
+        <a href="events.html" class="navbar-link">Events</a>
         <a href="link-to-blog" class="navbar-link">Blog</a>
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
diff --git a/styles.css b/styles.css
index b4a5b426..6ef81a26 100644
--- a/styles.css
+++ b/styles.css
@@ -268,7 +268,7 @@ body {
     padding: 5px 10px;
     border-radius: 5px;
     transition: background-color 0.3s ease;
-    margin-right: 15px;
+    margin-right: 5px;
   }
   
   .navbar-link:hover {
@@ -426,10 +426,14 @@ body {
   .footer-content {
     flex-direction: column;
   }
-.footer-links{
-  gap: 0px !important;
-}
-  .footer-info, .footer-links, .footer-description {
+  .footer-links{
+    gap: 0px !important;
+  }
+  .footer-info{
+    width: 250px;
+    margin-bottom: 2rem;
+  }
+  .footer-links, .footer-description {
     width: 100%;
     margin-bottom: 2rem;
   }
@@ -531,4 +535,4 @@ body.dark-mode .side-icons .icons:hover{
 
 body.dark-mode .side-icons  a{
   color: white !important;
-}
\ No newline at end of file
+}

From 65c117f07ce744235fccbc205516c36b86fdd3d9 Mon Sep 17 00:00:00 2001
From: Siddheya Kulkarni <siddheyakul@gmail.com>
Date: Mon, 5 Aug 2024 19:15:04 +0530
Subject: [PATCH 2/2] fixed logo in dark mode

---
 events.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/events.css b/events.css
index c87a7b3c..e05f98d3 100644
--- a/events.css
+++ b/events.css
@@ -155,6 +155,10 @@ body.dark-mode .event-link:hover {
     background-color: #ccc;
 }
 
+body.dark-mode .navbar-text{
+    color: #fff;
+}
+
 
 /* Responsive design */
 @media screen and (max-width: 768px) {