From 329ff549b8afc0028b5de6833cdb598d283079c3 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Thu, 8 Aug 2024 19:14:49 +0530
Subject: [PATCH 01/13] Addec ompare

---
 index.html             |   2 +
 pages/blog.html        |   2 +
 pages/compare.html     | 175 +++++++++++++++++++++++++++++++++++++++++
 pages/exploremore.html |   2 +
 pages/help.html        |   2 +
 scripts/compare.js     |  80 +++++++++++++++++++
 styles/compare.css     | 118 +++++++++++++++++++++++++++
 7 files changed, 381 insertions(+)
 create mode 100644 pages/compare.html
 create mode 100644 scripts/compare.js
 create mode 100644 styles/compare.css
diff --git a/index.html b/index.html
index 6484c80e..70fb47d3 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,8 @@
         <a href="#" class="navbar-link">Tools</a>
         <a href="pages/events.html" class="navbar-link">Events</a>
         <a href="pages/blog.html" class="navbar-link">Learn</a>
+        <a href="./pages/compare.html" class="navbar-link">Compare</a>
+
         <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="navbar-link">Add Profile</a>
         <div class="toggle-switch">
diff --git a/pages/blog.html b/pages/blog.html
index 841728e4..be4f74e2 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -29,6 +29,8 @@
 			<a href="#" class="navbar-link">Learn</a>
             <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="navbar-link">Add Profile</a>
+			<a href="compare.html" class="navbar-link">Compare</a>
+
             <div class="toggle-switch">
                 <input type="checkbox" id="theme-toggle">
                 <label for="theme-toggle">
diff --git a/pages/compare.html b/pages/compare.html
new file mode 100644
index 00000000..f7b91eca
--- /dev/null
+++ b/pages/compare.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Awesome GitHub Profile READMEs</title>
+    <link rel="shortcut icon" href="assets/recode-hive.png" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="../styles/styles.css" />
+    <link rel="stylesheet" href="../styles/compare.css" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+  </head>
+  <body>
+    <nav class="navbar">
+      <div class="navbar-left" onclick="window.location.href=`index.html`">
+        <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+        <span class="navbar-text">Recode Hive</span>
+      </div>
+      <div class="navbar-right">
+        <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+        <a href="#" class="navbar-link">Tools</a>
+        <a href="events.html" class="navbar-link">Events</a>
+        <a href="blog.html" class="navbar-link">Blog</a>
+        <a href="#" class="navbar-link">Add Profile</a>
+        <a href="blog.html" class="navbar-link">Learn</a>
+        <a href="compare.html" class="navbar-link">Compare</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>GitHub Contributor Comparison</h1>
+        
+        <div class="form-group">
+            <label for="contributorSelect1">Contributor 1:</label>
+            <select id="contributorSelect1" class="select">
+                <option value="">Select Contributor 1</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label for="contributorSelect2">Contributor 2:</label>
+            <select id="contributorSelect2" class="select">
+                <option value="">Select Contributor 2</option>
+            </select>
+        </div>
+
+        <button id="submitBtn" class="button">Submit</button>
+
+        <div id="comparisonTable" class="comparison hidden">
+            <h2>Contributor Comparison</h2>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Attribute</th>
+                        <th>Contributor 1</th>
+                        <th>Contributor 2</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Login</td>
+                        <td id="login1"></td>
+                        <td id="login2"></td>
+                    </tr>
+                    <tr>
+                        <td>Name</td>
+                        <td id="name1"></td>
+                        <td id="name2"></td>
+                    </tr>
+                    <tr>
+                        <td>Bio</td>
+                        <td id="bio1"></td>
+                        <td id="bio2"></td>
+                    </tr>
+                    <tr>
+                        <td>Location</td>
+                        <td id="location1"></td>
+                        <td id="location2"></td>
+                    </tr>
+                    <tr>
+                        <td>Public Repos</td>
+                        <td id="repos1"></td>
+                        <td id="repos2"></td>
+                    </tr>
+                    <tr>
+                        <td>Followers</td>
+                        <td id="followers1"></td>
+                        <td id="followers2"></td>
+                    </tr>
+                    <tr>
+                        <td>Following</td>
+                        <td id="following1"></td>
+                        <td id="following2"></td>
+                    </tr>
+                </tbody>
+            </table>
+        </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="help.html" 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="exploremore.html" 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>
+
+    <!-- Scroll to top -->
+    <button id="scrollToTop" aria-label="Scroll to top">
+      <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
+        <path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/>
+      </svg>
+    </button>
+
+
+    
+    <script src="../scripts/ScrollToTop.js"></script>
+    <script src="../scripts/dark-mode.js"></script>
+    <script src="../scripts/compare.js"></script>
+
+
+  </body>
+</html>
diff --git a/pages/exploremore.html b/pages/exploremore.html
index 7db21e71..38a481b5 100644
--- a/pages/exploremore.html
+++ b/pages/exploremore.html
@@ -30,6 +30,8 @@
           <a href="blog.html" class="navbar-link">Learn</a>
           <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="navbar-link">Add Profile</a>
+          <a href="compare.html" class="navbar-link">Compare</a>
+
           <div class="toggle-switch">
             <input type="checkbox" id="theme-toggle">
             <label for="theme-toggle">
diff --git a/pages/help.html b/pages/help.html
index 30cbabeb..e6f783b2 100644
--- a/pages/help.html
+++ b/pages/help.html
@@ -30,6 +30,8 @@
         <a href="blog.html" class="navbar-link">Learn</a>
         <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="navbar-link">Add Profile</a>
+        <a href="compare.html" class="navbar-link">Compare</a>
+
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
diff --git a/scripts/compare.js b/scripts/compare.js
new file mode 100644
index 00000000..62a171ad
--- /dev/null
+++ b/scripts/compare.js
@@ -0,0 +1,80 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let contributors = [];
+    let map = new Map();
+    
+    
+    fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
+        .then((response) => response.json())
+        .then((data) => {
+            contributors = data.contributors;
+            
+            // Populate dropdowns with contributor names
+            const select1 = document.getElementById('contributorSelect1');
+            const select2 = document.getElementById('contributorSelect2');
+            
+            contributors.forEach((da) => {
+                const option = document.createElement('option');
+                option.value = da.login;
+                option.textContent = da.name || da.login;
+                
+                select1.appendChild(option.cloneNode(true));
+                select2.appendChild(option.cloneNode(true));
+            });
+            
+            // Fetch contributor details
+            contributors.forEach((da) => {
+                fetch(`https://api.github.com/users/${da.login}`, {
+                    method: "GET"
+                })
+                .then(response => response.json())
+                .then(res => {
+                    map.set(da.login, { ...res });
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+            });
+        });
+    
+    document.getElementById('submitBtn').addEventListener('click', function () {
+        const login1 = document.getElementById('contributorSelect1').value;
+        const login2 = document.getElementById('contributorSelect2').value;
+
+        if (login1 && login2 && login1 !== login2) {
+
+            const data1 = map.get(login1);
+            const data2 = map.get(login2);
+            console.log(data1,login1,login2,data2,map)
+            if (data1 && data2) {
+                // Show the table
+                document.getElementById('comparisonTable').classList.remove('hidden');
+
+                // Fill the table with data
+                document.getElementById('login1').textContent = data1.login;
+                document.getElementById('login2').textContent = data2.login;
+
+                document.getElementById('name1').textContent = data1.name || 'N/A';
+                document.getElementById('name2').textContent = data2.name || 'N/A';
+
+                document.getElementById('bio1').textContent = data1.bio || 'N/A';
+                document.getElementById('bio2').textContent = data2.bio || 'N/A';
+
+                document.getElementById('location1').textContent = data1.location || 'N/A';
+                document.getElementById('location2').textContent = data2.location || 'N/A';
+
+                document.getElementById('repos1').textContent = data1.public_repos || 'N/A';
+                document.getElementById('repos2').textContent = data2.public_repos || 'N/A';
+
+                document.getElementById('followers1').textContent = data1.followers || 'N/A';
+                document.getElementById('followers2').textContent = data2.followers || 'N/A';
+
+                document.getElementById('following1').textContent = data1.following || 'N/A';
+                document.getElementById('following2').textContent = data2.following || 'N/A';
+            } else {
+                console.error('Contributor data not found.');
+            }
+        } else {
+            alert('Please select two different contributors.');
+        }
+    });
+});
diff --git a/styles/compare.css b/styles/compare.css
new file mode 100644
index 00000000..fc2afc6d
--- /dev/null
+++ b/styles/compare.css
@@ -0,0 +1,118 @@
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 41vh !important;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+}
+label{
+    font-size: 20px;
+}
+.form-group {
+    margin-bottom: 15px;
+}
+
+.label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+.button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.button:hover {
+    background-color: #45a049;
+}
+
+.comparison {
+    margin-top: 20px;
+}
+
+.comparison h2 {
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th, td {
+    padding: 12px;
+    text-align: center;
+    border: 1px solid #ddd;
+}
+
+th {
+    background-color: #4CAF50;
+    color: white;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+.dark-mode tr:nth-child(even) {
+    background-color: #1a1717;
+}
+.hidden {
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+
+    .button {
+        font-size: 14px;
+    }
+}
+select{
+    background: transparent;
+  outline: none;
+  border: none;
+  border: solid 1px gray;
+  padding: 10px;
+  font-size: 20px;
+}
+.dark-mode select{
+    color: white;
+    background-color: black;
+}
\ No newline at end of file

From eab875e96787e4671e8d2c38c54d02b1b7a75583 Mon Sep 17 00:00:00 2001
From: Anurag Vishwakarma <anuraga2005@gmail.com>
Date: Thu, 8 Aug 2024 22:51:53 +0530
Subject: [PATCH 02/13] Made the blog page & github badges page responsive.

---
 pages/githubbadge.html | 5 ++++-
 styles/blog.css        | 7 +++++++
 styles/styles.css      | 2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/pages/githubbadge.html b/pages/githubbadge.html
index 9a58b860..8dafa72b 100644
--- a/pages/githubbadge.html
+++ b/pages/githubbadge.html
@@ -231,7 +231,7 @@
   }
 
 
-  @media (max-width: 768px) {
+  @media screen and (max-width: 768px) {
     .navbar-right {
       display: none !important;
     }
@@ -245,6 +245,9 @@
         margin-top: 35px;
     }
 
+    .ways-content {
+        padding: 0 !important;
+    }
   }
   </style>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
diff --git a/styles/blog.css b/styles/blog.css
index eeebcc78..4eb1b591 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -5,6 +5,10 @@ body {
     padding: 0;
 }
 
+body img {
+    max-width: 100vw !important;
+}
+
 .blog-container {
     display: flex;
     flex-wrap: wrap;
@@ -107,6 +111,9 @@ body.dark-mode .blog-card .excerpt {
     .blog-card{
         width: 100%;
     }
+    .ways-content {
+        padding: 0 !important;
+    }
 }
 
 
diff --git a/styles/styles.css b/styles/styles.css
index 9d47c1c1..7a1d9041 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -579,7 +579,7 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-logo {
-  max-width: 100%;
+  max-width: 100% !important;
   height: auto;
   cursor: pointer;
 }

From 78f2ba44050b9a6873be7378f71fb42b1be6d2e5 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Fri, 9 Aug 2024 09:56:02 +0530
Subject: [PATCH 03/13] fixed

---
 index.html             | 11 ++++----
 pages/blog.html        | 55 +++++++++++++++++++--------------------
 pages/compare.html     | 24 +++++++++++++----
 pages/events.html      | 59 +++++++++++++++++++++---------------------
 pages/exploremore.html | 57 ++++++++++++++++++++--------------------
 pages/githubbadge.html | 27 ++++++++++---------
 pages/help.html        | 22 +++++++++++++---
 styles/hamburger.css   |  6 ++++-
 8 files changed, 149 insertions(+), 112 deletions(-)

diff --git a/index.html b/index.html
index 70fb47d3..4d2e2d18 100644
--- a/index.html
+++ b/index.html
@@ -25,13 +25,14 @@
       </div>
       <div class="navbar-right">
         <a href="pages/githubbadge.html" class="navbar-link">Github-Badge</a>
+        <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="navbar-link">Add Profile</a>
         <a href="#" class="navbar-link">Tools</a>
-        <a href="pages/events.html" class="navbar-link">Events</a>
+        <a href="./pages/events.html" class="navbar-link">Events</a>
         <a href="pages/blog.html" class="navbar-link">Learn</a>
         <a href="./pages/compare.html" class="navbar-link">Compare</a>
 
-        <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="navbar-link">Add Profile</a>
+       
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
@@ -52,9 +53,9 @@
     <div class="mobile-menu" id="mobile-menu">
       <a href="pages/githubbadge.html" class="navbar-links">Github-Badge</a>
       <a href="#" class="navbar-links">Tools</a>
-      <a href="pages/events.html" class="navbar-links">Events</a>
+      <a href="/events.html" class="navbar-links">Events</a>
       <a href="pages/blog.html" class="navbar-links">Blog</a>
-      <a href="#" class="navbar-links">Add Profile</a>
+      <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="navbar-links">Add Profile</a>
       <a href="pages/blog.html" class="navbar-links">Learn</a>
   </div>
 
diff --git a/pages/blog.html b/pages/blog.html
index be4f74e2..f4f44da5 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -15,38 +15,37 @@
 </head>
 <body>
     <!-- Navbar -->
-    <nav class="navbar">
-        <a href="../index.html" style="text-decoration: none; color: #333;">
-          <div class="navbar-left" onclick="window.location.href=`../index.html`">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-             <span class="navbar-text">Recode Hive</span>
+	<nav class="navbar">
+        <div class="navbar-left" onclick="window.location.href=`/index.html`">
+          <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="githubbadge.html" class="navbar-link">Github-Badge</a>
-            <a href="#" class="navbar-link">Tools</a>
-            <a href="events.html" class="navbar-link">Events</a>
-			<a href="#" class="navbar-link">Learn</a>
-            <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="navbar-link">Add Profile</a>
-			<a href="compare.html" class="navbar-link">Compare</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>
+          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+          <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="navbar-link">Add Profile</a>
+          <a href="#" class="navbar-link">Tools</a>
+          <a href="events.html" class="navbar-link">Events</a>
+          <a href="blog.html" class="navbar-link">Learn</a>
+          <a href="compare.html" class="navbar-link">Compare</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>
+        <div class="hamburger" id="hamburger">
+          <div></div>
+          <div></div>
+          <div></div>
         </div>
-		<div class="hamburger" id="hamburger">
-			<div></div>
-			<div></div>
-			<div></div>
-		  </div>
-    </nav>
+      </nav> 
 	<div class="mobile-menu" id="mobile-menu">
 		<a href="events.html" class="navbar-links">Events</a>
             <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
diff --git a/pages/compare.html b/pages/compare.html
index f7b91eca..6594ae4f 100644
--- a/pages/compare.html
+++ b/pages/compare.html
@@ -12,25 +12,27 @@
     />
     <link rel="stylesheet" href="../styles/styles.css" />
     <link rel="stylesheet" href="../styles/compare.css" />
+    <link rel="stylesheet" href="../styles/hamburger.css" />
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
   </head>
   <body>
     <nav class="navbar">
-      <div class="navbar-left" onclick="window.location.href=`index.html`">
+      <div class="navbar-left" onclick="window.location.href=`/index.html`">
         <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
         <span class="navbar-text">Recode Hive</span>
       </div>
       <div class="navbar-right">
         <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+        <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="navbar-link">Add Profile</a>
         <a href="#" class="navbar-link">Tools</a>
         <a href="events.html" class="navbar-link">Events</a>
-        <a href="blog.html" class="navbar-link">Blog</a>
-        <a href="#" class="navbar-link">Add Profile</a>
         <a href="blog.html" class="navbar-link">Learn</a>
         <a href="compare.html" class="navbar-link">Compare</a>
 
+       
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
@@ -41,9 +43,21 @@
           </label>
         </div>
       </div>
-
+      <div class="hamburger" id="hamburger">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </nav> 
-   
+    <div class="mobile-menu" id="mobile-menu">
+      <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
+        <a href="#" class="navbar-links">Tools</a>
+        <a href="events.html" class="navbar-links">Events</a>
+        <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
+        <a href="blog.html" class="navbar-links">Learn</a>
+        <a href="blog.html" class="navbar-links">Blog</a>
+        <a href="#" class="navbar-links">Add Profile</a>
+    </div>
 
     <div class="container">
         <h1>GitHub Contributor Comparison</h1>
diff --git a/pages/events.html b/pages/events.html
index a3b6834d..0c4835c6 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -11,36 +11,37 @@
     <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" onclick="window.location.href=`../index.html`">
-            <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="githubbadge.html" class="navbar-link">Github-Badge</a>
-          <a href="#" class="navbar-link">Tools</a>
-          <a href="#" class="navbar-link">Events</a>
-          <a href="blog.html" class="navbar-link">Learn</a>
-          <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="navbar-link">Add Profile</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>
-        <div class="hamburger" id="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
+  <nav class="navbar">
+    <div class="navbar-left" onclick="window.location.href=`/index.html`">
+      <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+      <span class="navbar-text">Recode Hive</span>
+    </div>
+    <div class="navbar-right">
+      <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+      <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="navbar-link">Add Profile</a>
+      <a href="#" class="navbar-link">Tools</a>
+      <a href="events.html" class="navbar-link">Events</a>
+      <a href="blog.html" class="navbar-link">Learn</a>
+      <a href="compare.html" class="navbar-link">Compare</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>
-    </nav>
+    </div>
+    <div class="hamburger" id="hamburger">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </nav>  
     <div class="mobile-menu" id="mobile-menu">
 		<a href="githubbadge.html" class="navbar-links">Github-Badge</a>
 		<a href="#" class="navbar-links">Tools</a>
diff --git a/pages/exploremore.html b/pages/exploremore.html
index 38a481b5..7f7fddd9 100644
--- a/pages/exploremore.html
+++ b/pages/exploremore.html
@@ -18,36 +18,37 @@
 </head>
 
 <body>
-    <nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`../index.html`">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-          <span class="navbar-text">Recode Hive</span>
-        </div>
-        <div class="navbar-right">
-          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-          <a href="#" class="navbar-link">Tools</a>
-          <a href="events.html" class="navbar-link">Events</a>
-          <a href="blog.html" class="navbar-link">Learn</a>
-          <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="navbar-link">Add Profile</a>
-          <a href="compare.html" class="navbar-link">Compare</a>
+  <nav class="navbar">
+    <div class="navbar-left" onclick="window.location.href=`/index.html`">
+      <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+      <span class="navbar-text">Recode Hive</span>
+    </div>
+    <div class="navbar-right">
+      <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+      <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="navbar-link">Add Profile</a>
+      <a href="#" class="navbar-link">Tools</a>
+      <a href="events.html" class="navbar-link">Events</a>
+      <a href="blog.html" class="navbar-link">Learn</a>
+      <a href="compare.html" class="navbar-link">Compare</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>
-        <div class="hamburger" id="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
+     
+      <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>
-      </nav>
+        </label>
+      </div>
+    </div>
+    <div class="hamburger" id="hamburger">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </nav> 
       <div class="mobile-menu" id="mobile-menu">
         <a href="githubbadge.html" class="navbar-links">Github-Badge</a>
           <a href="#" class="navbar-links">Tools</a>
diff --git a/pages/githubbadge.html b/pages/githubbadge.html
index 8dafa72b..aaa69bee 100644
--- a/pages/githubbadge.html
+++ b/pages/githubbadge.html
@@ -262,17 +262,20 @@
 </head>
 <body>
     <nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`../index.html`">
-            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+        <div class="navbar-left" onclick="window.location.href=`/index.html`">
+          <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
           <span class="navbar-text">Recode Hive</span>
         </div>
         <div class="navbar-right">
-          <a href="#" class="navbar-link">Github-Badge</a>
+          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+          <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="navbar-link">Add Profile</a>
           <a href="#" class="navbar-link">Tools</a>
-        <a href="events.html" class="navbar-link">Events</a>
-        <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="navbar-link">Add Profile</a>
-        <a href="blog.html" class="navbar-link">Learn</a>
+          <a href="events.html" class="navbar-link">Events</a>
+          <a href="blog.html" class="navbar-link">Learn</a>
+          <a href="compare.html" class="navbar-link">Compare</a>
+  
+         
           <div class="toggle-switch">
             <input type="checkbox" id="theme-toggle">
             <label for="theme-toggle">
@@ -284,17 +287,17 @@
           </div>
         </div>
         <div class="hamburger" id="hamburger">
-            <div></div>
-            <div></div>
-            <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
         </div>
-      </nav>
+      </nav> 
       <div class="mobile-menu" id="mobile-menu">
 		<a href="#" class="navbar-links">Github-Badge</a>
           <a href="#" class="navbar-links">Tools</a>
         <a href="events.html" class="navbar-links">Events</a>
         <a href="blog.html" class="navbar-links">Blog</a>
-        <a href="#" class="navbar-links">Add Profile</a>
+        <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="navbar-links">Add Profile</a>
         <a href="blog.html" class="navbar-links">Learn</a>
 	</div>
     
diff --git a/pages/help.html b/pages/help.html
index e6f783b2..37934bd9 100644
--- a/pages/help.html
+++ b/pages/help.html
@@ -12,6 +12,7 @@
     />
     <link rel="stylesheet" href="../styles/styles.css" />
     <link rel="stylesheet" href="../styles/help.css" />
+    <link rel="stylesheet" href="../styles/hamburger.css" />
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
@@ -19,19 +20,20 @@
   </head>
   <body>
     <nav class="navbar">
-      <div class="navbar-left" onclick="window.location.href=`../index.html`">
+      <div class="navbar-left" onclick="window.location.href=`index.html`">
         <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
         <span class="navbar-text">Recode Hive</span>
       </div>
       <div class="navbar-right">
         <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+        <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="navbar-link">Add Profile</a>
         <a href="#" class="navbar-link">Tools</a>
         <a href="events.html" class="navbar-link">Events</a>
         <a href="blog.html" class="navbar-link">Learn</a>
-        <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="navbar-link">Add Profile</a>
         <a href="compare.html" class="navbar-link">Compare</a>
 
+       
         <div class="toggle-switch">
           <input type="checkbox" id="theme-toggle">
           <label for="theme-toggle">
@@ -42,8 +44,20 @@
           </label>
         </div>
       </div>
-
+      <div class="hamburger" id="hamburger">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </nav> 
+    <div class="mobile-menu" id="mobile-menu">
+      <a href="#" class="navbar-links">Github-Badge</a>
+            <a href="#" class="navbar-links">Tools</a>
+          <a href="events.html" class="navbar-links">Events</a>
+          <a href="blog.html" class="navbar-links">Blog</a>
+          <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="navbar-links">Add Profile</a>
+          <a href="blog.html" class="navbar-links">Learn</a>
+    </div>
 
     <h1 style="font-size: 40px;text-align: center;">Help</h1>
    <div class="main-container">
diff --git a/styles/hamburger.css b/styles/hamburger.css
index 21ad085c..7d25a16f 100644
--- a/styles/hamburger.css
+++ b/styles/hamburger.css
@@ -5,13 +5,14 @@
   }
 
   .hamburger {
-    display: none;
+    display: none !important;
     flex-direction: column;
     cursor: pointer;
     transition: transform 0.6s ease;
   }
 
   .hamburger div {
+    display: none !important;
     width: 25px;
     height: 2px;
     background-color: #000000;
@@ -82,6 +83,9 @@
 
 
   @media (max-width: 768px) {
+    .hamburger div {
+      display: block;
+    }
     .navbar-right {
       display: none;
     }

From aadce6f5e6d65e7b884d6e2818d6b8fccdc75bf0 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:02:58 +0530
Subject: [PATCH 04/13] fixed

---
 pages/compare.html   | 2 +-
 pages/events.html    | 1 +
 styles/hamburger.css | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/pages/compare.html b/pages/compare.html
index 6594ae4f..f651fd1e 100644
--- a/pages/compare.html
+++ b/pages/compare.html
@@ -183,7 +183,7 @@ <h5>
     <script src="../scripts/ScrollToTop.js"></script>
     <script src="../scripts/dark-mode.js"></script>
     <script src="../scripts/compare.js"></script>
-
+    <script src="../scripts/hamburger.js"></script>
 
   </body>
 </html>
diff --git a/pages/events.html b/pages/events.html
index 0c4835c6..dc4f2511 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -11,6 +11,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
+
   <nav class="navbar">
     <div class="navbar-left" onclick="window.location.href=`/index.html`">
       <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
diff --git a/styles/hamburger.css b/styles/hamburger.css
index 7d25a16f..6d571a6b 100644
--- a/styles/hamburger.css
+++ b/styles/hamburger.css
@@ -5,14 +5,14 @@
   }
 
   .hamburger {
-    display: none !important;
+    display: none ;
     flex-direction: column;
     cursor: pointer;
     transition: transform 0.6s ease;
   }
 
   .hamburger div {
-    display: none !important;
+
     width: 25px;
     height: 2px;
     background-color: #000000;

From 65821dc0de2379fc6a7c5e0bfa6ed8134def4dd3 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Fri, 9 Aug 2024 10:23:56 +0530
Subject: [PATCH 05/13] Scroll removed

---
 styles/blog.css | 212 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 139 insertions(+), 73 deletions(-)

diff --git a/styles/blog.css b/styles/blog.css
index eeebcc78..3789893f 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -20,21 +20,25 @@ body {
     padding: 20px;
     overflow: hidden;
     cursor: pointer;
-    width:27%;
+    width: 27%;
     transition: transform 0.2s;
 }
-body.dark-mode .blog-card{
+
+body.dark-mode .blog-card {
     background-color: #333;
 }
+
 body.dark-mode .blog-card .excerpt {
     color: white;
 }
- .blog-card .image-wrapper{
+
+.blog-card .image-wrapper {
     width: 100%;
     height: auto;
     overflow: hidden;
     border-radius: 12px;
- }
+}
+
 /* .blog-card:hover {
     transform: scale(1.15);
 } */
@@ -45,7 +49,8 @@ body.dark-mode .blog-card .excerpt {
     height: 100%;
     transition: 0.3s ease-in-out;
 }
-.blog-card img:hover{
+
+.blog-card img:hover {
     scale: 1;
 }
 
@@ -66,7 +71,8 @@ body.dark-mode .blog-card .excerpt {
     margin: 10px 0;
     transition: 0.5s ease-in-out;
 }
-.blog-card .blogtitle:hover{
+
+.blog-card .blogtitle:hover {
     color: #ff4383;
 }
 
@@ -98,25 +104,28 @@ body.dark-mode .blog-card .excerpt {
 .blog-card .read-more:hover {
     background-color: #0056b3;
 }
+
 @media (max-width:976px) {
-    .blog-card{
+    .blog-card {
         width: 40%;
     }
 }
+
 @media (max-width:768px) {
-    .blog-card{
+    .blog-card {
         width: 100%;
     }
 }
 
 
-.certificate{
-   width: 100%;
-   justify-content: center;
+.certificate {
+    width: 100%;
+    justify-content: center;
     display: flex;
     flex-wrap: wrap;
 }
-.certificate-left{
+
+.certificate-left {
     width: 40%;
     display: flex;
     justify-content: center;
@@ -124,34 +133,40 @@ body.dark-mode .blog-card .excerpt {
     align-items: center;
 }
 
-.ways{
+.ways {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-  
+
 }
-.ways-content{
+
+.ways-content {
     padding: 60px;
     padding-top: 30px;
 }
-.ways-content h1{
+
+.ways-content h1 {
     font-size: 50px !important;
 }
-.ways-content p{
+
+.ways-content p {
     font-size: 20px !important;
 }
-.ways img{
+
+.ways img {
     border-radius: 20px;
 }
-.ways1{
+
+.ways1 {
     width: 80%;
     display: flex;
     /* flex-wrap: wrap; */
     margin-top: 20px;
     margin-bottom: 20px !important;
 }
-.ways2{
+
+.ways2 {
     width: 80%;
     display: flex;
     flex-direction: row-reverse;
@@ -159,44 +174,59 @@ body.dark-mode .blog-card .excerpt {
     /* flex-wrap: wrap; */
     margin-bottom: 30px !important;
 }
-@media only screen and (max-width:1400px){
-    .certificate-left{
+
+@media only screen and (max-width:1400px) {
+    .certificate-left {
         width: 80%;
-    }.certificate-right{
+    }
+
+    .certificate-right {
         width: 100%;
         height: auto;
     }
-    .ways1,.ways2{
+
+    .ways1,
+    .ways2 {
         justify-content: center;
         flex-wrap: wrap;
     }
-    .ways1,.ways2{
+
+    .ways1,
+    .ways2 {
         padding: 0px !important;
         text-align: center;
     }
 }
+
 @media only screen and (max-width:600px) {
-    .ways img{
-        scale: 0.60 !important;}
- }
-.ways a:hover{
+    .ways img {
+        scale: 0.60 !important;
+    }
+}
+
+.ways a:hover {
     text-decoration: underline;
 }
-.ways a{
+
+.ways a {
     font-size: 30px;
     text-decoration: none;
-    color: black ;
+    color: black;
     font-weight: 600;
 }
-.certificate-left h1{
+
+.certificate-left h1 {
     font-size: 30px;
     text-align: start;
 }
-.certificate-left p{
-    font-size: 20px;    text-align: start;
+
+.certificate-left p {
+    font-size: 20px;
+    text-align: start;
 
 }
-.certificate-right{
+
+.certificate-right {
     width: 40%;
     height: 400px;
 }
@@ -205,34 +235,42 @@ body.dark-mode .blog-card .excerpt {
 
 /* Popup container */
 .popup {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1000; /* Sit on top */
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 1000;
+    /* Sit on top */
     left: 0;
     top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    /* Full height */
+    background-color: rgba(0, 0, 0, 0.75);
+    /* Black with opacity */
 }
 
 /* Popup content */
 .popup-content {
     background-color: #fefefe;
     display: flex;
-max-width: 700px;
-    margin: 15% auto; /* 15% from the top and centered */
-   
-    border: 1px solid #888;
-    width: 80%; /* Could be more or less, depending on screen size */
+    justify-content: center;
+    /* Align items horizontally */
+    align-items: center;
+    /* Align items vertically */
+    max-width: 700px;
     position: relative;
+    margin: 10% auto;
     border-radius: 20px;
 }
-.line{
+
+.line {
     width: 100px;
-    border-right: solid  1px black;
+    border-right: solid 1px black;
     border-right-style: dashed;
 }
+
 /* Close button */
 .popup-close {
     color: #aaa;
@@ -253,7 +291,8 @@ max-width: 700px;
 
 /* Button inside popup */
 .popup-button {
-    background-color: #4CAF50; /* Green */
+    background-color: #4CAF50;
+    /* Green */
     border: none;
     color: white;
     padding: 10px 20px;
@@ -267,17 +306,20 @@ max-width: 700px;
 .popup-button:hover {
     background-color: #45a049;
 }
-.main-popup-content{
+
+.main-popup-content {
     padding-left: 20px;
     padding-top: 20px;
     width: 500px;
     height: 417px;
 
 }
-.main-popup-content h1{
+
+.main-popup-content h1 {
     margin-bottom: 40px;
 }
-.call{
+
+.call {
     display: flex;
     height: 70px;
     align-items: center;
@@ -286,16 +328,19 @@ max-width: 700px;
     font-size: 20px;
     color: black;
 }
-.card-footer{
+
+.card-footer {
     height: 80px;
     padding-bottom: 20px;
     font-size: 20px;
 }
-.card-footer a{
+
+.card-footer a {
     text-decoration: none;
-    color: black ;
+    color: black;
 }
-.side-content{
+
+.side-content {
     height: 100%;
     display: flex;
     width: 300px;
@@ -305,38 +350,59 @@ max-width: 700px;
     height: 417px;
 }
 
-.side-content svg{
+.side-content svg {
     position: relative;
-    top:70px;
+    top: 70px;
 }
 
-@media only screen and (max-width:700px){
-    .side-content{
-        height: auto ;
+@media only screen and (max-width:700px) {
+    .line {
+        grid-area: line;
+    }
+
+    .side-content {
+        height: auto;
+        grid-area: side;
     }
-    .main-popup-content{
-        height: auto ;
+
+    .main-popup-content {
+        height: auto;
+        grid-area: main;
     }
-    .main-popup-content h1{
+
+    .main-popup-content h1 {
         font-size: 30px !important;
         margin-bottom: 10px;
     }
-    .main-popup-content p{
+
+    .main-popup-content p {
         margin-bottom: 4px;
     }
-    .call{
+
+    .call {
         flex-direction: column;
-        gap:10px;
+        gap: 10px;
         align-items: start;
     }
-    .popup-content{
-        margin: 15% auto;
-        width: 95vw;
+
+    .popup-content {
+        margin: 10% auto;
+        display: grid;
+        grid-template-areas:
+            "line side"
+            "line main";
+        gap: 10px;
+    }
+
+    .side-content svg {
+        top: 5%;
     }
 }
-.dark-mode .main-popup-content h1{
+
+.dark-mode .main-popup-content h1 {
     color: black !important;
 }
-.dark-mode .card-footer p{
+
+.dark-mode .card-footer p {
     color: black !important;
 }
\ No newline at end of file

From 00843b3340b1ba50289bf21ad6c6e228fa53f72c Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:31:43 +0530
Subject: [PATCH 06/13] fixed

---
 styles/blog.css        | 2 ++
 styles/githubbadge.css | 1 +
 2 files changed, 3 insertions(+)

diff --git a/styles/blog.css b/styles/blog.css
index 4eb1b591..236d6a3f 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -149,6 +149,7 @@ body.dark-mode .blog-card .excerpt {
     font-size: 20px !important;
 }
 .ways img{
+    object-fit: contain !important;
     border-radius: 20px;
 }
 .ways1{
@@ -184,6 +185,7 @@ body.dark-mode .blog-card .excerpt {
 }
 @media only screen and (max-width:600px) {
     .ways img{
+        object-fit: inherit;
         scale: 0.60 !important;}
  }
 .ways a:hover{
diff --git a/styles/githubbadge.css b/styles/githubbadge.css
index 960672ed..1f1ab941 100644
--- a/styles/githubbadge.css
+++ b/styles/githubbadge.css
@@ -220,6 +220,7 @@ body.theme-dark .center {
    font-size: 20px !important;
 }
 .ways img{
+  object-fit: contain;
    border-radius: 20px;
 }
 .ways1{

From ad485b5152dc1828aef6bc35f6c5db11547d3e99 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Fri, 9 Aug 2024 10:37:05 +0530
Subject: [PATCH 07/13] Responsive fixed

---
 styles/blog.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/styles/blog.css b/styles/blog.css
index cd268dc7..c6f64232 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -119,6 +119,7 @@ body.dark-mode .blog-card .excerpt {
     .blog-card {
         width: 100%;
     }
+
     .ways-content {
         padding: 0 !important;
     }
@@ -364,21 +365,26 @@ body.dark-mode .blog-card .excerpt {
 
 @media only screen and (max-width:700px) {
     .line {
+        width: auto;
         grid-area: line;
     }
 
     .side-content {
+        padding: 0.5rem;
         height: auto;
+        width: auto;
         grid-area: side;
     }
 
     .main-popup-content {
+        width: auto;
         height: auto;
         grid-area: main;
+        padding: 0.5rem;
     }
 
     .main-popup-content h1 {
-        font-size: 30px !important;
+        font-size: 1.5rem !important;
         margin-bottom: 10px;
     }
 
@@ -393,8 +399,10 @@ body.dark-mode .blog-card .excerpt {
     }
 
     .popup-content {
-        margin: 10% auto;
+        width: 90%;
+        margin: 7% auto;
         display: grid;
+        grid-template-columns: 1fr 4fr;
         grid-template-areas:
             "line side"
             "line main";

From 96e3c96e6d9f7d34bf2803ed8059f874135edd54 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:53:40 +0530
Subject: [PATCH 08/13] fixed

---
 scripts/compare.js | 49 ++++++++++++++++++++++------------------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/scripts/compare.js b/scripts/compare.js
index 62a171ad..0c48e365 100644
--- a/scripts/compare.js
+++ b/scripts/compare.js
@@ -1,8 +1,9 @@
+// this is  code which runs with pat and is more optimized because it is fetching api of 2 people at a time only
+
 document.addEventListener("DOMContentLoaded", function () {
     let contributors = [];
-    let map = new Map();
-    
-    
+    const token = ''; // Replace with your GitHub PAT
+
     fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
         .then((response) => response.json())
         .then((data) => {
@@ -20,32 +21,26 @@ document.addEventListener("DOMContentLoaded", function () {
                 select1.appendChild(option.cloneNode(true));
                 select2.appendChild(option.cloneNode(true));
             });
-            
-            // Fetch contributor details
-            contributors.forEach((da) => {
-                fetch(`https://api.github.com/users/${da.login}`, {
-                    method: "GET"
-                })
-                .then(response => response.json())
-                .then(res => {
-                    map.set(da.login, { ...res });
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                });
-            });
         });
-    
+
     document.getElementById('submitBtn').addEventListener('click', function () {
         const login1 = document.getElementById('contributorSelect1').value;
         const login2 = document.getElementById('contributorSelect2').value;
 
         if (login1 && login2 && login1 !== login2) {
-
-            const data1 = map.get(login1);
-            const data2 = map.get(login2);
-            console.log(data1,login1,login2,data2,map)
-            if (data1 && data2) {
+            Promise.all([
+                fetch(`https://api.github.com/users/${login1}`, {
+                    headers: {
+                        'Authorization': `token ${token}`
+                    }
+                }).then(response => response.json()),
+                fetch(`https://api.github.com/users/${login2}`, {
+                    headers: {
+                        'Authorization': `token ${token}`
+                    }
+                }).then(response => response.json())
+            ])
+            .then(([data1, data2]) => {
                 // Show the table
                 document.getElementById('comparisonTable').classList.remove('hidden');
 
@@ -70,11 +65,13 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 document.getElementById('following1').textContent = data1.following || 'N/A';
                 document.getElementById('following2').textContent = data2.following || 'N/A';
-            } else {
-                console.error('Contributor data not found.');
-            }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
         } else {
             alert('Please select two different contributors.');
         }
     });
 });
+

From 12a484cf6b457a1ec8b5ecfd0c906b8fa0404696 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Fri, 9 Aug 2024 10:56:43 +0530
Subject: [PATCH 09/13] visibility fixed

---
 pages/githubbadge.html | 1058 +++++++++++++++++++++++-----------------
 styles/styles.css      | 1000 ++++++++++++++++++++-----------------
 2 files changed, 1164 insertions(+), 894 deletions(-)

diff --git a/pages/githubbadge.html b/pages/githubbadge.html
index aaa69bee..3f063488 100644
--- a/pages/githubbadge.html
+++ b/pages/githubbadge.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,49 +15,67 @@
             background-color: #f4f4f4;
             color: #333;
         }
+
         .container {
             max-width: 1200px;
             margin: auto;
             padding: 20px;
             /* background: #fff; */
             border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
-        h1, h2 {
+
+        h1,
+        h2 {
             color: #333;
         }
+
         table {
             width: 100%;
             border-collapse: collapse;
             margin-bottom: 20px;
         }
-        table, th, td {
+
+        table,
+        th,
+        td {
             border: 1px solid #ddd;
         }
-        th, td {
+
+        th,
+        td {
             padding: 10px;
             text-align: center;
         }
+
         img {
             max-width: 100%;
             height: auto;
         }
+
         .center {
             text-align: center;
         }
+
         @media (max-width: 768px) {
             .table-wrapper {
                 overflow-x: auto;
                 display: block;
             }
-            table, th, td {
+
+            table,
+            th,
+            td {
                 display: block;
                 width: 100%;
             }
-            th, td {
+
+            th,
+            td {
                 box-sizing: border-box;
                 padding: 10px;
             }
+
             td {
                 border: none;
                 border-bottom: 1px solid #ddd;
@@ -64,6 +83,7 @@
                 padding-left: 50%;
                 text-align: right;
             }
+
             td::before {
                 content: attr(data-label);
                 position: absolute;
@@ -75,240 +95,245 @@
             }
         }
 
-        
-    #scrollToTop {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      background-color: black;
-      color: white;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-      transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    #scrollToTop:hover{
-      background-color: rgb(62, 62, 62);
-    }
-
-    #scrollToTop.show {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    #scrollToTop .arrow-icon {
-      fill: white;
-      width: 24px;
-      height: 24px;
-      transition: transform 0.3s;
-    }
-
-    #scrollToTop:hover {
-      transform: translateY(-5px); /* Move button up on hover */
-    }
-
-    #scrollToTop:hover .arrow-icon {
-      transform: translateY(-2px); /* Move arrow up on hover */
-    }
-
-    body.dark-mode #scrollToTop {
-      background-color: white;
-      color: black;
-    }
-
-    body.dark-mode #scrollToTop:hover {
-      background-color: rgba(182, 182, 182, 0.999);
-    }
-
-    body.dark-mode #scrollToTop .arrow-icon {
-      fill: black;
-    }
-
-    html {
-      scroll-behavior: smooth;
-    }
-
-    .navbar-links {
-    margin-left: 20px;
-    text-decoration: none;
-    color: #fff;
-  }
-
-  .hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-    transition: transform 0.6s ease;
-  }
-
-  .hamburger div {
-    width: 25px;
-    height: 2px;
-    background-color: #000000;
-    margin: 4px;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-  }
-
-  .hamburger.active div:nth-child(1) {
-    transform: translateY(6px) rotate(45deg);
-  }
-
-  .hamburger.active div:nth-child(2) {
-      opacity: 0;
-  }
-
-  .hamburger.active div:nth-child(3) {
-      transform: translateY(-6px) rotate(-45deg);
-  }
-
-  .mobile-menu {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    background-color: #ffffff;
-    width: 100%;
-    position: absolute;
-    top: 52px;
-    left: 0;
-    opacity: 0;
-    z-index: 999;
-    transform: translateY(-20px);
-    transition: transform 0.5s ease, opacity 0.3s ease;
-  }
-
-
-  .mobile-menu a {
-    padding: 10px;
-    width: 100%;
-    text-align: center;
-    /* border-bottom: 1px solid #444; */
-    color: #000000;
-    text-decoration: none;
-  }
-
-  .mobile-menu.show {
-    display: flex;
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .mobile-menu a:hover {
-    text-decoration: underline;
-  }
-
-  
-  body.dark-mode .hamburger div {
-    background-color: white;
-  }
-
-  body.dark-mode .mobile-menu a {
-    color: white;
-  }
-
-  body:not(.dark-mode) .badges-icons-light {
-    display: none !important;
-  }
-  body.dark-mode .badges-icons-dark {
-    /* color: white; */
-    display: none !important;
-  }
-  body:not(.dark-mode) .badges-icons-dark {
-    display: inline !important;
-  }
-
-  body.dark-mode .mobile-menu {
-    background-color: #333;
-    color: #f0f0f0;
-  }
-
-
-  @media screen and (max-width: 768px) {
-    .navbar-right {
-      display: none !important;
-    }
-
-    .hamburger {
-      display: flex;
-    }
-
-    .side-icons {
-        flex-direction: column;
-        margin-top: 35px;
-    }
-
-    .ways-content {
-        padding: 0 !important;
-    }
-  }
-  </style>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
-    rel="stylesheet"
-  />
-
-  <link rel="stylesheet" href="../styles/styles.css">
-  <link rel="stylesheet" href="../styles/githubbadge.css" />
+
+        #scrollToTop {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background-color: black;
+            color: white;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            transition: background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        #scrollToTop:hover {
+            background-color: rgb(62, 62, 62);
+        }
+
+        #scrollToTop.show {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        #scrollToTop .arrow-icon {
+            fill: white;
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s;
+        }
+
+        #scrollToTop:hover {
+            transform: translateY(-5px);
+            /* Move button up on hover */
+        }
+
+        #scrollToTop:hover .arrow-icon {
+            transform: translateY(-2px);
+            /* Move arrow up on hover */
+        }
+
+        body.dark-mode #scrollToTop {
+            background-color: white;
+            color: black;
+        }
+
+        body.dark-mode #scrollToTop:hover {
+            background-color: rgba(182, 182, 182, 0.999);
+        }
+
+        body.dark-mode #scrollToTop .arrow-icon {
+            fill: black;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
+        .navbar-links {
+            margin-left: 20px;
+            text-decoration: none;
+            color: #fff;
+        }
+
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            cursor: pointer;
+            transition: transform 0.6s ease;
+        }
+
+        .hamburger div {
+            width: 25px;
+            height: 2px;
+            background-color: #000000;
+            margin: 4px;
+            transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+
+        .hamburger.active div:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+        }
+
+        .hamburger.active div:nth-child(2) {
+            opacity: 0;
+        }
+
+        .hamburger.active div:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+        }
+
+        .mobile-menu {
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            background-color: #ffffff;
+            width: 100%;
+            position: absolute;
+            top: 52px;
+            left: 0;
+            opacity: 0;
+            z-index: 999;
+            transform: translateY(-20px);
+            transition: transform 0.5s ease, opacity 0.3s ease;
+        }
+
+
+        .mobile-menu a {
+            padding: 10px;
+            width: 100%;
+            text-align: center;
+            /* border-bottom: 1px solid #444; */
+            color: #000000;
+            text-decoration: none;
+        }
+
+        .mobile-menu.show {
+            display: flex;
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .mobile-menu a:hover {
+            text-decoration: underline;
+        }
+
+
+        body.dark-mode .hamburger div {
+            background-color: white;
+        }
+
+        body.dark-mode .mobile-menu a {
+            color: white;
+        }
+
+        body:not(.dark-mode) .badges-icons-light {
+            display: none !important;
+        }
+
+        body.dark-mode .badges-icons-dark {
+            /* color: white; */
+            display: none !important;
+        }
+
+        body:not(.dark-mode) .badges-icons-dark {
+            display: inline !important;
+        }
+
+        body.dark-mode .mobile-menu {
+            background-color: #333;
+            color: #f0f0f0;
+        }
+
+
+        @media screen and (max-width: 768px) {
+            .navbar-right {
+                display: none !important;
+            }
+
+            .hamburger {
+                display: flex;
+            }
+
+            .side-icons {
+                flex-direction: column;
+                margin-top: 35px;
+            }
+
+            .ways-content {
+                padding: 0 !important;
+            }
+        }
+    </style>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+
+    <link rel="stylesheet" href="../styles/styles.css">
+    <link rel="stylesheet" href="../styles/githubbadge.css" />
 
 </head>
+
 <body>
     <nav class="navbar">
         <div class="navbar-left" onclick="window.location.href=`/index.html`">
-          <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-          <span class="navbar-text">Recode Hive</span>
+            <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+            <span class="navbar-text">Recode Hive</span>
         </div>
         <div class="navbar-right">
-          <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-          <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="navbar-link">Add Profile</a>
-          <a href="#" class="navbar-link">Tools</a>
-          <a href="events.html" class="navbar-link">Events</a>
-          <a href="blog.html" class="navbar-link">Learn</a>
-          <a href="compare.html" class="navbar-link">Compare</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>
+            <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
+            <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="navbar-link">Add Profile</a>
+            <a href="#" class="navbar-link">Tools</a>
+            <a href="events.html" class="navbar-link">Events</a>
+            <a href="blog.html" class="navbar-link">Learn</a>
+            <a href="compare.html" class="navbar-link">Compare</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>
         <div class="hamburger" id="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
         </div>
-      </nav> 
-      <div class="mobile-menu" id="mobile-menu">
-		<a href="#" class="navbar-links">Github-Badge</a>
-          <a href="#" class="navbar-links">Tools</a>
+    </nav>
+    <div class="mobile-menu" id="mobile-menu">
+        <a href="#" class="navbar-links">Github-Badge</a>
+        <a href="#" class="navbar-links">Tools</a>
         <a href="events.html" class="navbar-links">Events</a>
         <a href="blog.html" class="navbar-links">Blog</a>
-        <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="navbar-links">Add Profile</a>
+        <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="navbar-links">Add Profile</a>
         <a href="blog.html" class="navbar-links">Learn</a>
-	</div>
-    
+    </div>
+
     <div class="container">
         <div class="center">
             <div style="display: flex;flex-direction: column;align-items: center;">
 
                 <h1>🏆 GitHub Achievements 🏆</h1>
-                <img src="https://user-images.githubusercontent.com/65187002/172940015-d9d072e7-c47d-4ddd-83f6-8e7717a721b8.png" class="lightmodeimg" height="100" width="100" alt="Achievements Banner">
-                <img src="https://user-images.githubusercontent.com/65187002/172940773-7ef23b63-3356-4634-9e52-34f2676e2854.png" height="100" class="darkmodeimg" width="100" alt="Achievements Preview">
-                <h1 >Github</h1>
+                <img src="https://user-images.githubusercontent.com/65187002/172940015-d9d072e7-c47d-4ddd-83f6-8e7717a721b8.png"
+                    class="lightmodeimg" height="100" width="100" alt="Achievements Banner">
+                <img src="https://user-images.githubusercontent.com/65187002/172940773-7ef23b63-3356-4634-9e52-34f2676e2854.png"
+                    height="100" class="darkmodeimg" width="100" alt="Achievements Preview">
+                <h1>Github</h1>
             </div>
         </div>
 
@@ -325,7 +350,8 @@ <h2>📃 Achievement List 📃</h2>
             </thead>
             <tbody>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60px" alt="Starstruck"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                            width="60px" alt="Starstruck"></td>
                     <td>Starstruck</td>
                     <td>Created a repository that has many stars</td>
                     <td>
@@ -340,10 +366,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60px" alt="Starstruck Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Bronze.png" width="60px" alt="Starstruck Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Silver.png" width="60px" alt="Starstruck Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Gold.png" width="60px" alt="Starstruck Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                            width="60px" alt="Starstruck Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Bronze.png"
+                                            width="60px" alt="Starstruck Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Silver.png"
+                                            width="60px" alt="Starstruck Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/StarStruck_Gold.png"
+                                            width="60px" alt="Starstruck Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>16</td>
@@ -356,7 +386,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                            width="60px" alt="Quickdraw"></td>
                     <td>Quickdraw</td>
                     <td>Gitty up!<br>(closed an issue / pull request within 5 minutes of opening)</td>
                     <td>
@@ -368,7 +399,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                            width="60px" alt="Quickdraw Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -378,9 +410,12 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png" width="60px" alt="Pair Extraordinaire"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
+                            width="60px" alt="Pair Extraordinaire"></td>
                     <td>Pair Extraordinaire</td>
-                    <td><a href="https://docs.github.com/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors">Coauthored</a> commits on merged pull request</td>
+                    <td><a
+                            href="https://docs.github.com/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors">Coauthored</a>
+                        commits on merged pull request</td>
                     <td>
                         <table>
                             <thead>
@@ -393,10 +428,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png" width="60px" alt="Pair Extraordinaire Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png" width="60px" alt="Pair Extraordinaire Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png" width="60px" alt="Pair Extraordinaire Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png" width="60px" alt="Pair Extraordinaire Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
+                                            width="60px" alt="Pair Extraordinaire Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png"
+                                            width="60px" alt="Pair Extraordinaire Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png"
+                                            width="60px" alt="Pair Extraordinaire Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png"
+                                            width="60px" alt="Pair Extraordinaire Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -409,7 +448,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png" width="60px" alt="Pull Shark"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
+                            width="60px" alt="Pull Shark"></td>
                     <td>Pull Shark</td>
                     <td>Opened a pull request that has been merged</td>
                     <td>
@@ -424,10 +464,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png" width="60px" alt="Pull Shark Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png" width="60px" alt="Pull Shark Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png" width="60px" alt="Pull Shark Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png" width="60px" alt="Pull Shark Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
+                                            width="60px" alt="Pull Shark Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png"
+                                            width="60px" alt="Pull Shark Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png"
+                                            width="60px" alt="Pull Shark Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png"
+                                            width="60px" alt="Pull Shark Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>2</td>
@@ -440,7 +484,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png" width="60px" alt="Galaxy Brain"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
+                            width="60px" alt="Galaxy Brain"></td>
                     <td>Galaxy Brain</td>
                     <td>Answered a discussion<br>(got an accepted answer)</td>
                     <td>
@@ -455,10 +500,14 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png" width="60px" alt="Galaxy Brain Default"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png" width="60px" alt="Galaxy Brain Bronze"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png" width="60px" alt="Galaxy Brain Silver"></td>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png" width="60px" alt="Galaxy Brain Gold"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
+                                            width="60px" alt="Galaxy Brain Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png"
+                                            width="60px" alt="Galaxy Brain Bronze"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png"
+                                            width="60px" alt="Galaxy Brain Silver"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png"
+                                            width="60px" alt="Galaxy Brain Gold"></td>
                                 </tr>
                                 <tr>
                                     <td>2</td>
@@ -471,7 +520,8 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png" width="60px" alt="YOLO"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
+                            width="60px" alt="YOLO"></td>
                     <td>YOLO</td>
                     <td>Merged a pull request without a review</td>
                     <td>
@@ -483,7 +533,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png" width="60px" alt="YOLO Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
+                                            width="60px" alt="YOLO Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -493,9 +544,11 @@ <h2>📃 Achievement List 📃</h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png" width="60px" alt="Public Sponsor"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
+                            width="60px" alt="Public Sponsor"></td>
                     <td>Public Sponsor</td>
-                    <td>Sponsored an open source contributor through <a href="https://github.com/sponsors">GitHub Sponsors</a></td>
+                    <td>Sponsored an open source contributor through <a href="https://github.com/sponsors">GitHub
+                            Sponsors</a></td>
                     <td>
                         <table>
                             <thead>
@@ -505,7 +558,8 @@ <h2>📃 Achievement List 📃</h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png" width="60px" alt="Public Sponsor Default"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
+                                            width="60px" alt="Public Sponsor Default"></td>
                                 </tr>
                                 <tr>
                                     <td>1</td>
@@ -517,44 +571,30 @@ <h2>📃 Achievement List 📃</h2>
                 <!-- Repeat similar blocks for other achievements -->
             </tbody>
         </table>
-        
-        
+
+
         <h2>👋 Achievement Skin Tone 👋</h2>
         <p>Some achievements' appearance depends on your Emoji Skin Tone Preference.</p>
-        <p>You can change your preferred Skin Tone by going to <a href="https://github.com/settings/appearance">appearance settings</a>.</p>
-      <div style="width: 100%;overflow-x: scroll;">
-
-        <div class="table-container">
-            <div class="header">
-                <div class="cell" style="flex: 0.4;">Badge</div>
-                <div class="cell">Name</div>
-                <div class="cell">Skin Tone Versions</div>
-            </div>
-            <div class="rows">
-                <div class="row">
-                    <div class="cell" ><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60" alt="Starstruck"></div>
-
-                    <div class="cell">Starstruck</div>
-                    <div class="cell">
-                        <div class="inner-table">
-                            <div class="header"  style="min-width: 100%;">
-                                <div class="cell">👋</div>
-                                <div class="cell">👋🏻</div>
-                                <div class="cell">👋🏼</div>
-                                <div class="cell">👋🏽</div>
-                                <div class="cell">👋🏾</div>
-                                <div class="cell">👋🏿</div>
-                            </div>
-                            <div class="rows">
-                                <div class="row" style="min-width: 100%;">
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png" width="60" alt="Skin Tone 1"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png" width="60" alt="Skin Tone 2"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png" width="60" alt="Skin Tone 3"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png" width="60" alt="Skin Tone 4"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png" width="60" alt="Skin Tone 5"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png" width="60" alt="Skin Tone 6"></div>
-                                </div>
-                                <div class="row"  style="min-width: 100%;">
+        <p>You can change your preferred Skin Tone by going to <a
+                href="https://github.com/settings/appearance">appearance settings</a>.</p>
+        <div style="width: 100%;overflow-x: scroll;">
+
+            <div class="table-container">
+                <div class="header">
+                    <div class="cell" style="flex: 0.4;">Badge</div>
+                    <div class="cell">Name</div>
+                    <div class="cell">Skin Tone Versions</div>
+                </div>
+                <div class="rows">
+                    <div class="row">
+                        <div class="cell"><img
+                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                width="60" alt="Starstruck"></div>
+
+                        <div class="cell">Starstruck</div>
+                        <div class="cell">
+                            <div class="inner-table">
+                                <div class="header" style="min-width: 100%;">
                                     <div class="cell">👋</div>
                                     <div class="cell">👋🏻</div>
                                     <div class="cell">👋🏼</div>
@@ -562,33 +602,47 @@ <h2>👋 Achievement Skin Tone 👋</h2>
                                     <div class="cell">👋🏾</div>
                                     <div class="cell">👋🏿</div>
                                 </div>
+                                <div class="rows">
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone1.png"
+                                                width="60" alt="Skin Tone 1"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
+                                                width="60" alt="Skin Tone 2"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
+                                                width="60" alt="Skin Tone 3"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
+                                                width="60" alt="Skin Tone 4"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
+                                                width="60" alt="Skin Tone 5"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
+                                                width="60" alt="Skin Tone 6"></div>
+                                    </div>
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell">👋</div>
+                                        <div class="cell">👋🏻</div>
+                                        <div class="cell">👋🏼</div>
+                                        <div class="cell">👋🏽</div>
+                                        <div class="cell">👋🏾</div>
+                                        <div class="cell">👋🏿</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="row" >
-                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw"></div>
-                    <div class="cell">Quickdraw</div>
-                    <div class="cell">
-                        <div class="inner-table">
-                            <div class="header"  style="min-width: 100%;">
-                                <div class="cell">👋</div>
-                                <div class="cell">👋🏻</div>
-                                <div class="cell">👋🏼</div>
-                                <div class="cell">👋🏽</div>
-                                <div class="cell">👋🏾</div>
-                                <div class="cell">👋🏿</div>
-                            </div>
-                            <div class="rows">
-                                <div class="row"  style="min-width: 100%;">
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png" width="60px" alt="Quickdraw Skin Tone 1"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png" width="60px" alt="Quickdraw Skin Tone 2"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png" width="60px" alt="Quickdraw Skin Tone 3"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png" width="60px" alt="Quickdraw Skin Tone 4"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png" width="60px" alt="Quickdraw Skin Tone 5"></div>
-                                    <div class="cell"><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png" width="60px" alt="Quickdraw Skin Tone 6"></div>
-                                </div>
-                                <div class="row" style="min-width: 100%;">
+                    <div class="row">
+                        <div class="cell"><img
+                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                width="60px" alt="Quickdraw"></div>
+                        <div class="cell">Quickdraw</div>
+                        <div class="cell">
+                            <div class="inner-table">
+                                <div class="header" style="min-width: 100%;">
                                     <div class="cell">👋</div>
                                     <div class="cell">👋🏻</div>
                                     <div class="cell">👋🏼</div>
@@ -596,18 +650,47 @@ <h2>👋 Achievement Skin Tone 👋</h2>
                                     <div class="cell">👋🏾</div>
                                     <div class="cell">👋🏿</div>
                                 </div>
+                                <div class="rows">
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
+                                                width="60px" alt="Quickdraw Skin Tone 1"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
+                                                width="60px" alt="Quickdraw Skin Tone 2"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
+                                                width="60px" alt="Quickdraw Skin Tone 3"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
+                                                width="60px" alt="Quickdraw Skin Tone 4"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
+                                                width="60px" alt="Quickdraw Skin Tone 5"></div>
+                                        <div class="cell"><img
+                                                src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
+                                                width="60px" alt="Quickdraw Skin Tone 6"></div>
+                                    </div>
+                                    <div class="row" style="min-width: 100%;">
+                                        <div class="cell">👋</div>
+                                        <div class="cell">👋🏻</div>
+                                        <div class="cell">👋🏼</div>
+                                        <div class="cell">👋🏽</div>
+                                        <div class="cell">👋🏾</div>
+                                        <div class="cell">👋🏿</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Repeat similar blocks for other achievements -->
                 </div>
-                <!-- Repeat similar blocks for other achievements -->
             </div>
+
         </div>
-        
-      </div>  
-        
+
         <h2>✨ Highlights Badges ✨</h2>
-        
+
         <table>
             <thead>
                 <tr>
@@ -619,43 +702,59 @@ <h2>✨ Highlights Badges ✨</h2>
             <tbody>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_DarkMode.svg" alt="Pro Dark Mode"  id="pro-dark" class="badges-icons-dark" >
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_LightMode.svg" alt="Pro Light Mode" id="pro-light" class="badges-icons-light" >
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_DarkMode.svg"
+                            alt="Pro Dark Mode" id="pro-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Pro/SVG/GitHub-Pro_LightMode.svg"
+                            alt="Pro Light Mode" id="pro-light" class="badges-icons-light">
                     </td>
                     <td>Pro</td>
-                    <td>Use <a href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-pro">GitHub Pro</a></td>
+                    <td>Use <a
+                            href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-pro">GitHub
+                            Pro</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_DarkMode.svg" alt="Developer Program Member Dark Mode"  id="developer-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_LightMode.svg" alt="Developer Program Member Light Mode" id="developer-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_DarkMode.svg"
+                            alt="Developer Program Member Dark Mode" id="developer-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Developer-Program-Member/SVG/DeveloperProgramMember_LightMode.svg"
+                            alt="Developer Program Member Light Mode" id="developer-light" class="badges-icons-light">
                     </td>
                     <td>Developer Program Member</td>
-                    <td>Be a registered member of the <a href="https://docs.github.com/en/developers/overview/github-developer-program">GitHub Developer Program</a></td>
+                    <td>Be a registered member of the <a
+                            href="https://docs.github.com/en/developers/overview/github-developer-program">GitHub
+                            Developer Program</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_DarkMode.svg" alt="Security Bug Bounty Hunter Dark Mode"  id="security-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_LightMode.svg" alt="Security Bug Bounty Hunter Light Mode" id="security-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_DarkMode.svg"
+                            alt="Security Bug Bounty Hunter Dark Mode" id="security-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Bug-Bounty-Hunter/SVG/Security-Bug-Bounty-Hunter_LightMode.svg"
+                            alt="Security Bug Bounty Hunter Light Mode" id="security-light" class="badges-icons-light">
                     </td>
                     <td>Security Bug Bounty Hunter</td>
-                    <td>Helped out hunting down security vulnerabilities at <a href="https://bounty.github.com/">GitHub Security</a></td>
+                    <td>Helped out hunting down security vulnerabilities at <a href="https://bounty.github.com/">GitHub
+                            Security</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_DarkMode.svg" alt="GitHub Campus Expert Dark Mode"  id="campus-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_LightMode.svg" alt="GitHub Campus Expert Light Mode" id="campus-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_DarkMode.svg"
+                            alt="GitHub Campus Expert Dark Mode" id="campus-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/GitHub-Campus-Expert/SVG/GitHub-Campus-Expert_LightMode.svg"
+                            alt="GitHub Campus Expert Light Mode" id="campus-light" class="badges-icons-light">
                     </td>
                     <td>GitHub Campus Expert</td>
                     <td>Participate in the <a href="https://education.github.com/experts">GitHub Campus Program</a></td>
                 </tr>
                 <tr>
                     <td>
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_DarkMode.svg" alt="Security Advisory Credit Dark Mode"  id="advisory-dark" class="badges-icons-dark">
-                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_LightMode.svg" alt="Security Advisory Credit Light Mode" id="advisory-light" class="badges-icons-light">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_DarkMode.svg"
+                            alt="Security Advisory Credit Dark Mode" id="advisory-dark" class="badges-icons-dark">
+                        <img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Highlights/Security-Advisory-Credit/SVG/Security-Advisory-Credit_LightMode.svg"
+                            alt="Security Advisory Credit Light Mode" id="advisory-light" class="badges-icons-light">
                     </td>
                     <td>Security advisory credit</td>
-                    <td>Have your security advisory submitted to the <a href="https://github.com/advisories">GitHub Advisory Database</a> accepted</td>
+                    <td>Have your security advisory submitted to the <a href="https://github.com/advisories">GitHub
+                            Advisory Database</a> accepted</td>
                 </tr>
             </tbody>
         </table>
@@ -671,9 +770,12 @@ <h2>❌ Badges no longer earnable ❌ </h2>
             </thead>
             <tbody>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png" alt="Mars 2020 Contributor" width="60px"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
+                            alt="Mars 2020 Contributor" width="60px"></td>
                     <td>Mars 2020 Contributor</td>
-                    <td>Contributed code to a repository used in the <a href="https://github.com/readme/featured/nasa-ingenuity-helicopter">Mars 2020 Helicopter Mission</a></td>
+                    <td>Contributed code to a repository used in the <a
+                            href="https://github.com/readme/featured/nasa-ingenuity-helicopter">Mars 2020 Helicopter
+                            Mission</a></td>
                     <td>
                         <table>
                             <thead>
@@ -683,7 +785,8 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png" width="60px" alt="Mars 2020 Contributor Badge"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
+                                            width="60px" alt="Mars 2020 Contributor Badge"></td>
                                 </tr>
                                 <tr>
                                     <td align="center">1</td>
@@ -693,9 +796,11 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                     </td>
                 </tr>
                 <tr>
-                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png" alt="Arctic Code Vault Contributor" width="60px"></td>
+                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
+                            alt="Arctic Code Vault Contributor" width="60px"></td>
                     <td>Arctic Code Vault Contributor</td>
-                    <td>Contributed code to a repository in the <a href="https://archiveprogram.github.com/">2020 GitHub Archive Program</a></td>
+                    <td>Contributed code to a repository in the <a href="https://archiveprogram.github.com/">2020 GitHub
+                            Archive Program</a></td>
                     <td>
                         <table>
                             <thead>
@@ -705,7 +810,8 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                             </thead>
                             <tbody>
                                 <tr>
-                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png" width="60px" alt="Arctic Code Vault Contributor Badge"></td>
+                                    <td><img src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
+                                            width="60px" alt="Arctic Code Vault Contributor Badge"></td>
                                 </tr>
                                 <tr>
                                     <td align="center">1</td>
@@ -716,139 +822,209 @@ <h2>❌ Badges no longer earnable ❌ </h2>
                 </tr>
             </tbody>
         </table>
-       
-    
-        
+
+
+
     </div>
     <h1 style="text-align: center;">ℹ️ More Information ℹ️</h1>
 
-    <h4 style="text-align: center;">You can find more information about GitHub Badges under this <a href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile#displaying-badges-on-your-profile">link</a>.</h4>
+    <h4 style="text-align: center;">You can find more information about GitHub Badges under this <a
+            href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile#displaying-badges-on-your-profile">link</a>.
+    </h4>
 
     <br>
     <div class="certificate">
-        <div class="certificate-left" >
-          <h1 style="font-size: 50px;margin-bottom: 0px !important;">Showcase your expertise with GitHub Certifications</h1>
-          <p>Getting GitHub certified is a resounding endorsement that validates your skills, credibility, trust, and knowledge of the technologies and developer tools that are used by more than 100 million developers worldwide.</p>
+        <div class="certificate-left">
+            <h1 style="font-size: 50px;margin-bottom: 0px !important;">Showcase your expertise with GitHub
+                Certifications</h1>
+            <p>Getting GitHub certified is a resounding endorsement that validates your skills, credibility, trust, and
+                knowledge of the technologies and developer tools that are used by more than 100 million developers
+                worldwide.</p>
         </div>
         <div>
-          <img src="https://images.ctfassets.net/wfutmusr1t3h/6eWM76bx8skN2B4Jpvkcil/3ccdafea4229f02802abbd9fc6634a3b/Certifiedtocat_full__2_.svg?w=1280&q=75">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/6eWM76bx8skN2B4Jpvkcil/3ccdafea4229f02802abbd9fc6634a3b/Certifiedtocat_full__2_.svg?w=1280&q=75">
         </div>
     </div>
     <div class="ways">
-      <div class="ways1">
-          <img src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
-          <div class="ways-content">
-            <h1>GitHub Foundations</h1>
-            <p>Highlight your understanding of the foundational topics and concepts of collaborating, contributing, and working on GitHub. This exam covers collaboration, GitHub products, Git basics, and working within GitHub repositories.</p>
-            <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Foundations exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-          </div>
-      </div>
-      <div class="ways2">
-        <img src="https://images.ctfassets.net/wfutmusr1t3h/7xYtTWmQ24xRlS68Do9qiG/a785c50083a579f2530863c230198e98/actions-river-image__1_.png?w=1280&q=75"></img>
-        <div class="ways-content">
-          <h1>GitHub Actions</h1>
-          <p>Certify your proficiency in automating workflows and accelerating development with GitHub Actions. Test your skills in streamlining workflows, automating tasks, and optimizing software pipelines, including CI/CD—all within customizable workflows.</p>
-          <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Actions exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Foundations</h1>
+                <p>Highlight your understanding of the foundational topics and concepts of collaborating, contributing,
+                    and working on GitHub. This exam covers collaboration, GitHub products, Git basics, and working
+                    within GitHub repositories.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Foundations
+                    exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways2">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/7xYtTWmQ24xRlS68Do9qiG/a785c50083a579f2530863c230198e98/actions-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Actions</h1>
+                <p>Certify your proficiency in automating workflows and accelerating development with GitHub Actions.
+                    Test your skills in streamlining workflows, automating tasks, and optimizing software pipelines,
+                    including CI/CD—all within customizable workflows.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Actions exam
+                    <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Advanced Security</h1>
+                <p>Highlight your code security knowledge with the GitHub Advanced Security certification. Validate your
+                    expertise in vulnerability identification, workflow security, and robust security
+                    implementation—elevating software integrity standards.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Advanced
+                    Security exam <!-- --> <svg aria-hidden="true" role="presentation"
+                        xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+                        viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways2">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/KdVTNopvz0GZy60xzXCq0/86148a36ddf27ea1d22226f0113b8711/admin-river-image__1_.png?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Administration</h1>
+                <p>Certify your ability to optimize and manage a healthy GitHub environment with the GitHub Admin exam.
+                    Highlight your expertise in repository management, workflow optimization, and efficient
+                    collaboration to support successful projects on GitHub.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Administration
+                    exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg"
+                        class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+
+            </div>
+        </div>
+        <div class="ways1">
+            <img
+                src="https://images.ctfassets.net/wfutmusr1t3h/16DNDZjBQxyxijON2ciyMQ/291420cd4a3a38eaaee04c44da6aca80/gh-copilot__1_.jpg?w=1280&q=75"></img>
+            <div class="ways-content">
+                <h1>GitHub Copilot</h1>
+                <p>The GitHub Copilot certification exam evaluates your skill in using the AI-driven code completion
+                    tool in various programming languages, certifying your capability to optimize software development
+                    workflows efficiently.</p>
+                <a href="https://examregistration.github.com/waitlist/copilot"
+                    class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Coming Soon! Join the waitlist now for
+                    priority access<!-- --> <svg aria-hidden="true" role="presentation"
+                        xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
+                        viewBox="0 0 16 16" fill="none">
+                        <path fill="currentColor"
+                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
+                        </path>
+                        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+                    </svg></a>
+            </div>
         </div>
-    </div>
-    <div class="ways1">
-      <img src="https://images.ctfassets.net/wfutmusr1t3h/1GLjOPbAzxSyIZy7Cvu2Do/4220986cedca60a0cb3eaa1ed21ca5fc/foundations-river-image__1_.png?w=1280&q=75"></img>
-      <div class="ways-content">
-        <h1>GitHub Advanced Security</h1>
-        <p>Highlight your code security knowledge with the GitHub Advanced Security certification. Validate your expertise in vulnerability identification, workflow security, and robust security implementation—elevating software integrity standards.</p>
-        <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Advanced Security exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-      </div>
-  </div>
-  <div class="ways2">
-    <img src="https://images.ctfassets.net/wfutmusr1t3h/KdVTNopvz0GZy60xzXCq0/86148a36ddf27ea1d22226f0113b8711/admin-river-image__1_.png?w=1280&q=75"></img>
-    <div class="ways-content">
-      <h1>GitHub Administration</h1>
-      <p>Certify your ability to optimize and manage a healthy GitHub environment with the GitHub Admin exam. Highlight your expertise in repository management, workflow optimization, and efficient collaboration to support successful projects on GitHub.</p>
-      <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Prepare for the GitHub Administration exam <!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-  
-    </div>
-  </div>
-  <div class="ways1">
-    <img src="https://images.ctfassets.net/wfutmusr1t3h/16DNDZjBQxyxijON2ciyMQ/291420cd4a3a38eaaee04c44da6aca80/gh-copilot__1_.jpg?w=1280&q=75"></img>
-    <div class="ways-content">
-      <h1>GitHub Copilot</h1>
-      <p>The GitHub Copilot certification exam evaluates your skill in using the AI-driven code completion tool in various programming languages, certifying your capability to optimize software development workflows efficiently.</p>
-      <a href="https://examregistration.github.com/waitlist/copilot" class="link-mktg color-fg-default text-semibold pt-3 f3-mktg">Coming Soon! Join the waitlist now for priority access<!-- --> <svg aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path><path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
-    </div>
-  </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="help.html" 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 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="help.html" 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 to the right people at the right time⏱️. Recode Hive will help you
+                        with updates on what’s happening in the tech industry💻. We focus on everything starting from
+                        How To’s to Data Science.
+                    </h5>
+                    <a href="exploremore.html" class="footer-button">Explore</a>
                 </div>
-              </div>
-            </div>
-      
-            <div class="footer-description">
-              <h5>
-                We focus on quality content to the right people at the right time⏱️. Recode Hive will help you with updates on what’s happening in the tech industry💻. We focus on everything starting from How To’s to Data Science.
-              </h5>
-              <a href="exploremore.html" 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 class="footer-container">
+                <p class="footer-copyright">
+                    &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+                </p>
+            </div>
         </div>
-      </footer>
+    </footer>
 
-      <!-- Scroll to top -->
+    <!-- Scroll to top -->
     <button id="scrollToTop" aria-label="Scroll to top">
         <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
-          <path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/>
+            <path
+                d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z" />
         </svg>
-      </button>
-  
+    </button>
+
     <script src="../scripts/ScrollToTop.js"></script>
     <script src="../scripts/dark-mode.js"></script>
-      <script>
-        document.addEventListener("DOMContentLoaded", function() {
-    const hamburger = document.getElementById("hamburger");
-    const mobileMenu = document.getElementById("mobile-menu");
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const hamburger = document.getElementById("hamburger");
+            const mobileMenu = document.getElementById("mobile-menu");
 
-    hamburger.addEventListener("click", function() {
-        hamburger.classList.toggle("active");
-        if (mobileMenu.classList.contains("show")) {
-            mobileMenu.classList.remove("show");
-            setTimeout(() => mobileMenu.style.display = "none", 300);
-        } else {
-            mobileMenu.style.display = "flex";
-            setTimeout(() => mobileMenu.classList.add("show"), 10);
-        }
-    });
-});
+            hamburger.addEventListener("click", function () {
+                hamburger.classList.toggle("active");
+                if (mobileMenu.classList.contains("show")) {
+                    mobileMenu.classList.remove("show");
+                    setTimeout(() => mobileMenu.style.display = "none", 300);
+                } else {
+                    mobileMenu.style.display = "flex";
+                    setTimeout(() => mobileMenu.classList.add("show"), 10);
+                }
+            });
+        });
 
 
-      </script>
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index 7a1d9041..b69d69c4 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,205 +1,217 @@
 body {
-    font-family: "Roboto", sans-serif;
-    background-color: #f0f0f0;
-    color: #333;
-    margin: 0;
-    padding: 0;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-  
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    text-align: center;
-  }
-  
-  .main-heading {
-    margin-bottom: 40px;
-  }
-  
-  .tags {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
-  }
-  .views-likes{
-    display: flex;
-    justify-content: space-around;
+  font-family: "Roboto", sans-serif;
+  background-color: #f0f0f0;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+}
+
+.main-heading {
+  margin-bottom: 40px;
 }
-.like-red{
+
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.views-likes {
+  display: flex;
+  justify-content: space-around;
+}
+
+.like-red {
   color: red;
 }
-  .tag {
-    display: inline-block;
-    margin: 5px;
-    padding: 10px 15px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  .tag:hover{
-    background-color: #ebebeb;
-    
-  }
-  .search-bar {
-    margin-bottom: 20px;
-  }
-  
+
+.tag {
+  display: inline-block;
+  margin: 5px;
+  padding: 10px 15px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.tag:hover {
+  background-color: #ebebeb;
+
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
 .search-input {
-    width: 259px;
-    padding: 15px;
-    font-size: 16px;
-    border: 2px solid #ddd;
-    border-radius: 25px;
-    box-shadow: none;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease,all 0.3s;;
-  }
-  .search-input:focus{
-    width: 50%;
-    outline: none;
-    transition: all 0.3s;
-  }
-  
-  .search-input:hover,
-  .search-input:focus {
-    border-color: #aaa;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  
-  .profiles {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  .profile {
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    margin: 10px;
-    width: 250px;
-    padding: 15px;
-    margin-top: 30;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    animation: fadeIn 0.5s ease-out;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .profile:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  }
-  
-  .profile img {
-    max-width: 100%;
-    border-radius: 10px;
-  }
-  
-  .profile p {
-    color: #333;
-  }
-  
-  .grey-banner {
-    display: inline-block;
-    background: linear-gradient(135deg, #f0f0f0, #fff);
-    color: black;
-    padding: 10px 20px;
-    font-size: 16px;
-    border: none;
-    border-radius: 20px; 
-    text-align: center;
-    text-decoration: none;
-    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; 
-    cursor: pointer;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); 
-    margin: 20px auto;
-  }
+  width: 259px;
+  padding: 15px;
+  font-size: 16px;
+  border: 2px solid #ddd;
+  border-radius: 25px;
+  box-shadow: none;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, all 0.3s;
+  ;
+}
 
-  .grey-banner:hover {
-      background: linear-gradient(135deg, #e0e0e0, #f0f0f0); 
-      transform: translateY(-2px);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12); 
-  }
+.search-input:focus {
+  width: 50%;
+  outline: none;
+  transition: all 0.3s;
+}
 
-  .grey-banner:active {
-      transform: translateY(0);
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); 
-  }
+.search-input:hover,
+.search-input:focus {
+  border-color: #aaa;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
 
-  body.dark-mode .grey-banner {
-      background: linear-gradient(135deg, #444, #555);
-      color: #fff;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); 
-  }
+.profiles {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 
-  body.dark-mode .grey-banner:hover {
-      background: linear-gradient(135deg, #333, #444);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5); 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
   }
 
-  body.dark-mode .grey-banner:active {
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
+  to {
+    opacity: 1;
   }
+}
 
-  /* Dark Mode Styles */
-  body.dark-mode {
-    background-color: #000000;
-    color: #f0f0f0;
-  }
-  
-  body.dark-mode .tag {
-    background-color: #555;
-    border-color: #444;
-    color: #fff;
-  }
-  body.dark-mode .tag:hover{
-    background-color: #3f3f3f;
-  }
-  body.dark-mode .search-input {
-    background-color: #555;
-    border-color: #444;
-    color: #fff;
-  }
-  
-  body.dark-mode .profile {
-    background-color: #444;
-    border-color: #555;
-  }
-  
-  body.dark-mode .profile p {
-    color: #f0f0f0;
-  }
-  
-  /* Switch Label */
-  .toggle-switch label {
-    position: relative;
-    top: 0px;
-    left: 7px;
-    width: 55px; /* Adjust width to fit switch button and icons */
-    height: 30px; /* Adjust height if needed */
-    background-color: #ccc;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 5px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: background-color 0.5s ease;
-  }
+.profile {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  margin: 10px;
+  width: 250px;
+  padding: 15px;
+  margin-top: 30;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease-out;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profile:hover {
+  transform: scale(1.05);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.profile img {
+  max-width: 100%;
+  border-radius: 10px;
+}
+
+.profile p {
+  color: #333;
+}
+
+.grey-banner {
+  display: inline-block;
+  background: linear-gradient(135deg, #f0f0f0, #fff);
+  color: black;
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 20px;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin: 20px auto;
+}
+
+.grey-banner:hover {
+  background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
+}
+
+.grey-banner:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+body.dark-mode .grey-banner {
+  background: linear-gradient(135deg, #444, #555);
+  color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .grey-banner:hover {
+  background: linear-gradient(135deg, #333, #444);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+body.dark-mode .grey-banner:active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+/* Dark Mode Styles */
+body.dark-mode {
+  background-color: #000000;
+  color: #f0f0f0;
+}
+
+body.dark-mode .tag {
+  background-color: #555;
+  border-color: #444;
+  color: #fff;
+}
+
+body.dark-mode .tag:hover {
+  background-color: #3f3f3f;
+}
+
+body.dark-mode .search-input {
+  background-color: #555;
+  border-color: #444;
+  color: #fff;
+}
+
+body.dark-mode .profile {
+  background-color: #444;
+  border-color: #555;
+}
+
+body.dark-mode .profile p {
+  color: #f0f0f0;
+}
+
+/* Switch Label */
+.toggle-switch label {
+  position: relative;
+  top: 0px;
+  left: 7px;
+  width: 55px;
+  /* Adjust width to fit switch button and icons */
+  height: 30px;
+  /* Adjust height if needed */
+  background-color: #ccc;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
+}
 
 /* Styling for Vertical Scrollbar */
 
@@ -213,28 +225,28 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #383838; 
-  border-radius: 6px; 
-  border: 0.4px solid #eaeaeb; 
+  background-color: #383838;
+  border-radius: 6px;
+  border: 0.4px solid #eaeaeb;
   transition: background 0.6s ease-in-out;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #545454; 
+  background-color: #545454;
 }
 
 ::-webkit-scrollbar-button {
   background-color: #f1f1f1;
-  background-repeat: no-repeat;   
+  background-repeat: no-repeat;
   background-size: 120%;
 }
 
 ::-webkit-scrollbar-button:decrement {
-  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png");   
+  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-up.png");
 }
 
 ::-webkit-scrollbar-button:increment {
-  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png"); 
+  background-image: url("https://omjsblog.wordpress.com/wp-content/uploads/2024/05/rocket-down.png");
 }
 
 /* Styling for Dark Mode */
@@ -249,14 +261,14 @@ body.dark-mode::-webkit-scrollbar-track {
 }
 
 body.dark-mode::-webkit-scrollbar-thumb {
-  background-color: #ffffff; 
-  border-radius: 6px; 
-  border: 0.4px solid #555; 
+  background-color: #ffffff;
+  border-radius: 6px;
+  border: 0.4px solid #555;
   transition: background 0.6s ease-in-out;
 }
 
 body.dark-mode::-webkit-scrollbar-thumb:hover {
-  background-color: #edfbff; 
+  background-color: #edfbff;
 }
 
 body.dark-mode ::-webkit-scrollbar-button {
@@ -292,10 +304,12 @@ body.dark-mode ::-webkit-scrollbar-button {
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
-.tag:hover{
+
+.tag:hover {
   background-color: #ebebeb;
-  
+
 }
+
 .search-bar {
   margin-bottom: 20px;
 }
@@ -326,6 +340,7 @@ body.dark-mode ::-webkit-scrollbar-button {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -364,14 +379,21 @@ body.dark-mode {
   color: #f0f0f0;
 }
 
+body.dark-mode h1,
+h2 {
+  color: #fff;
+}
+
 body.dark-mode .tag {
   background-color: #555;
   border-color: #444;
   color: #fff;
 }
-body.dark-mode .tag:hover{
+
+body.dark-mode .tag:hover {
   background-color: #3f3f3f;
 }
+
 body.dark-mode .search-input {
   background-color: #555;
   border-color: #444;
@@ -392,8 +414,10 @@ body.dark-mode .profile p {
   position: relative;
   top: 0px;
   left: 7px;
-  width: 55px; /* Adjust width to fit switch button and icons */
-  height: 30px; /* Adjust height if needed */
+  width: 55px;
+  /* Adjust width to fit switch button and icons */
+  height: 30px;
+  /* Adjust height if needed */
   background-color: #ccc;
   border-radius: 20px;
   display: flex;
@@ -430,19 +454,23 @@ body.dark-mode .profile p {
 
 /* Sun Icon */
 .sun-icon {
-    color: #f39c12;
-    left: 1px; /* Position from the left edge */
-    opacity: 1; /* Initially visible */
+  color: #f39c12;
+  left: 1px;
+  /* Position from the left edge */
+  opacity: 1;
+  /* Initially visible */
 }
 
 /* Moon Icon */
 .moon-icon {
-    color: #bdc3c7;
-    right: 1px; /* Position from the right edge */
-    opacity: 0; /* Initially hidden */
+  color: #bdc3c7;
+  right: 1px;
+  /* Position from the right edge */
+  opacity: 0;
+  /* Initially hidden */
 }
 
-/* Hide the checkbox itself */ 
+/* Hide the checkbox itself */
 #theme-toggle {
   opacity: 0;
   position: absolute;
@@ -452,21 +480,24 @@ body.dark-mode .profile p {
 
 
 /* Checkbox Checked State */
-#theme-toggle:checked + label {
-    background-color: #555;
+#theme-toggle:checked+label {
+  background-color: #555;
 }
 
-#theme-toggle:checked + label .sun-icon {
-    opacity: 0; /* Hide sun icon when checked */
+#theme-toggle:checked+label .sun-icon {
+  opacity: 0;
+  /* Hide sun icon when checked */
 }
 
-#theme-toggle:checked + label .moon-icon {
-    opacity: 1; /* Show moon icon when checked */
+#theme-toggle:checked+label .moon-icon {
+  opacity: 1;
+  /* Show moon icon when checked */
 }
 
-#theme-toggle:checked + label .switch-button {
-    transform: translateX(30px); /* Adjust to fit switch width */
-    background-color: black;
+#theme-toggle:checked+label .switch-button {
+  transform: translateX(30px);
+  /* Adjust to fit switch width */
+  background-color: black;
 }
 
 body.dark-mode .toggle-label {
@@ -479,7 +510,7 @@ body.dark-mode .toggle-label {
   align-items: center;
   padding: 10px 20px;
   background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-left {
@@ -542,7 +573,7 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-2 {
-    background-color: #dedede;
+  background-color: #dedede;
   margin-top: 80px;
 }
 
@@ -560,22 +591,22 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-info {
-  flex: 0 1 200px; 
+  flex: 0 1 200px;
   margin-top: 2rem;
-  margin-right: 2rem; 
+  margin-right: 2rem;
 }
 
 .footer-links {
-  flex: 1 1 auto; 
+  flex: 1 1 auto;
   display: flex;
-  justify-content: flex-start; 
-  max-width: 500px; 
+  justify-content: flex-start;
+  max-width: 500px;
   gap: 50px;
 }
 
 .footer-description {
-  flex: 1 1 300px; 
-  max-width: 400px; 
+  flex: 1 1 300px;
+  max-width: 400px;
 }
 
 .footer-logo {
@@ -585,7 +616,7 @@ body.dark-mode .navbar-link:hover {
 }
 
 .footer-section {
-  margin-right: 3rem; 
+  margin-right: 3rem;
 }
 
 .footer-heading {
@@ -612,7 +643,7 @@ body.dark-mode .navbar-link:hover {
   margin-bottom: 1rem;
 }
 
-.footer-link:hover{
+.footer-link:hover {
   display: inline-block;
   text-decoration: underline;
 }
@@ -652,13 +683,13 @@ body.dark-mode .footer-2 {
   background: #333;
 }
 
- body.dark-mode .footer-link{
+body.dark-mode .footer-link {
   color: #fff;
- }
+}
 
-body.dark-mode .footer-info img{
-  filter: brightness(0) invert(1) ;
-} 
+body.dark-mode .footer-info img {
+  filter: brightness(0) invert(1);
+}
 
 body.dark-mode .footer-button {
   background-color: #fff;
@@ -671,339 +702,384 @@ body.dark-mode .footer-button:hover {
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-.footer-content {
-  flex-direction: column;
-}
-.footer-links{
-  gap: 0px !important;
-}
-.footer-info{
-  width: 250px;
-  margin-bottom: 2rem;
-}
-.footer-links, .footer-description {
-  width: 100%;
-  margin-bottom: 2rem;
-}
+  .footer-content {
+    flex-direction: column;
+  }
 
-.footer-links {
-  flex-direction: column;
-  margin-bottom: 10px !important;
-}
+  .footer-links {
+    gap: 0px !important;
+  }
+
+  .footer-info {
+    width: 250px;
+    margin-bottom: 2rem;
+  }
 
+  .footer-links,
+  .footer-description {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
 
-.footer-section {
-  margin-right: 0;
-  /* margin-bottom: 1rem; */
-}
-.footer-heading{margin-top: 25px !important;}
-.footer-info{
-  flex: 0 1;
-  margin-bottom: 10px;
-}.footer-description{
-  flex: 1 1;
-  margin-bottom: 0px !important;
-}
+  .footer-links {
+    flex-direction: column;
+    margin-bottom: 10px !important;
+  }
+
+
+  .footer-section {
+    margin-right: 0;
+    /* margin-bottom: 1rem; */
+  }
+
+  .footer-heading {
+    margin-top: 25px !important;
+  }
+
+  .footer-info {
+    flex: 0 1;
+    margin-bottom: 10px;
+  }
+
+  .footer-description {
+    flex: 1 1;
+    margin-bottom: 0px !important;
+  }
 
 }
 
 .img-container {
-height: 250px; /* Set the height of the container */
-width: 100%; /* Adjust width if necessary */
-overflow: hidden;
-position: relative;
-scrollbar-width: none;
--ms-overflow-style: none;
+  height: 250px;
+  /* Set the height of the container */
+  width: 100%;
+  /* Adjust width if necessary */
+  overflow: hidden;
+  position: relative;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .img-container::-webkit-scrollbar {
-width: 0;
-height: 0;
+  width: 0;
+  height: 0;
 }
 
 .scroll-on-hover {
-height: 250px;
-width: 100%;
-overflow: hidden;
-position: relative;
+  height: 250px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
 }
 
 .scroll-on-hover img {
-transition: transform 1.5s ease-in-out;
+  transition: transform 1.5s ease-in-out;
 }
 
 .side-icons {
-position: fixed;
-right: 20px;
-top: 30%;
-display: flex;
-flex-direction: column;
-gap: 15px;
+  position: fixed;
+  right: 20px;
+  top: 30%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
 .icon-content {
-position: relative;
+  position: relative;
 }
 
 .icon-content a {
-display: flex;
-justify-content: center;
-align-items: center;
-width: 50px;
-height: 50px;
-border-radius: 50%;
-color: #4d4d4d; /* Default icon color */
-background-color: #fff;
-transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-overflow: hidden;
-text-decoration: none;
-position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  color: #4d4d4d;
+  /* Default icon color */
+  background-color: #fff;
+  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  overflow: hidden;
+  text-decoration: none;
+  position: relative;
 }
 
 .icon-content a i {
-font-size: 24px;
-position: relative;
-z-index: 2; /* Icons should be above the background fill */
+  font-size: 24px;
+  position: relative;
+  z-index: 2;
+  /* Icons should be above the background fill */
 }
 
 .icon-content a .filled {
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background-color: #000;
-transition: transform 0.3s ease-in-out;
-transform: scaleY(0); /* Hide the fill initially */
-transform-origin: bottom; /* Start the fill from the bottom */
-z-index: 1; /* Background fill should be below the icons */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  transition: transform 0.3s ease-in-out;
+  transform: scaleY(0);
+  /* Hide the fill initially */
+  transform-origin: bottom;
+  /* Start the fill from the bottom */
+  z-index: 1;
+  /* Background fill should be below the icons */
 }
 
 .icon-content a:hover .filled {
-transform: scaleY(1); /* Scale the fill to full height on hover */
+  transform: scaleY(1);
+  /* Scale the fill to full height on hover */
 }
 
 .icon-content a:hover i {
-color: #fff; /* Change icon color to white on hover */
+  color: #fff;
+  /* Change icon color to white on hover */
 }
 
 .icon-content a[data-social="facebook"] .filled {
-background-color: #3b5998;
+  background-color: #3b5998;
 }
 
 .icon-content a[data-social="linkedin"] .filled {
-background-color: #0077b5;
+  background-color: #0077b5;
 }
 
 .icon-content a[data-social="twitter"] .filled {
-background-color: #1da1f2;
+  background-color: #1da1f2;
 }
 
 .icon-content a[data-social="youtube"] .filled {
-background-color: #ff0000;
+  background-color: #ff0000;
 }
 
 .icon-content a[data-social="github"] .filled {
-background-color: #24292e;
+  background-color: #24292e;
 }
 
 /* Optional: add box-shadow on hover */
 .icon-content a:hover {
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 /* Dark mode styles */
 body.dark-mode .side-icons .icon-content a {
-background-color: #333; /* Dark background for icons in dark mode */
-color: #ddd; /* Light icon color in dark mode */
+  background-color: #333;
+  /* Dark background for icons in dark mode */
+  color: #ddd;
+  /* Light icon color in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a:hover .filled {
-background-color: #444; /* Slightly lighter dark mode background fill */
+  background-color: #444;
+  /* Slightly lighter dark mode background fill */
 }
 
 body.dark-mode .side-icons .icon-content a:hover i {
-color: #fff; /* White icon color on hover in dark mode */
+  color: #fff;
+  /* White icon color on hover in dark mode */
 }
 
 /* Dark mode background colors for different icons */
 body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
-background-color: #3b5998; /* Darker shade for Facebook in dark mode */
+  background-color: #3b5998;
+  /* Darker shade for Facebook in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
-background-color: #0077b5; /* Darker shade for LinkedIn in dark mode */
+  background-color: #0077b5;
+  /* Darker shade for LinkedIn in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
-background-color: #1da1f2; /* Darker shade for Twitter in dark mode */
+  background-color: #1da1f2;
+  /* Darker shade for Twitter in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled {
-background-color: #ff0000; /* Darker shade for YouTube in dark mode */
+  background-color: #ff0000;
+  /* Darker shade for YouTube in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
-background-color: #444c56; /* Darker shade for GitHub in dark mode */
+  background-color: #444c56;
+  /* Darker shade for GitHub in dark mode */
 }
 
 /* Optional: add box-shadow on hover in dark mode */
 body.dark-mode .side-icons .icon-content a:hover {
-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Slightly stronger shadow in dark mode */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  /* Slightly stronger shadow in dark mode */
 }
 
 
 
 /* Base styles */
 body {
-font-family: Arial, sans-serif;
-background-color: #f4f4f4;
-color: #333;
-margin: 0;
-padding: 0;
-line-height: 1.6;
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
 }
 
 .wrapper {
-max-width: 1200px;
-margin: auto;
-padding: 20px;
-background: #fff;
-border-radius: 8px;
-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .title {
-text-align: center;
-font-size: 3em;
-font-weight: bold;
-color: #f67621;
-margin-bottom: 20px;
-text-decoration: underline;
-text-underline-offset: 8px;
+  text-align: center;
+  font-size: 3em;
+  font-weight: bold;
+  color: #f67621;
+  margin-bottom: 20px;
+  text-decoration: underline;
+  text-underline-offset: 8px;
 }
 
 /* Chrono component styles */
 .chrono {
-margin: 0 auto;
-width: 100%;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .event-container {
-display: flex;
-flex-direction: column;
-align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .event {
-background-color: #f67621;
-color: white;
-border-radius: 8px;
-margin: 20px 0;
-padding: 20px;
-max-width: 600px;
-text-align: center;
+  background-color: #f67621;
+  color: white;
+  border-radius: 8px;
+  margin: 20px 0;
+  padding: 20px;
+  max-width: 600px;
+  text-align: center;
 }
 
 .event img {
-width: 100%;
-max-width: 600px;
-height: auto;
-border-radius: 8px;
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
 }
 
 .event figcaption {
-font-size: 2em;
-font-weight: bold;
-margin-top: 10px;
+  font-size: 2em;
+  font-weight: bold;
+  margin-top: 10px;
 }
 
 .event p {
-font-size: 1em;
-margin: 10px 0;
+  font-size: 1em;
+  margin: 10px 0;
 }
 
 .event .link {
-color: #fff;
-font-size: 1.2em;
-font-weight: bold;
-text-decoration: none;
-border-bottom: 2px solid #fff;
+  color: #fff;
+  font-size: 1.2em;
+  font-weight: bold;
+  text-decoration: none;
+  border-bottom: 2px solid #fff;
 }
 
 .event .link:hover {
-text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* Dark mode styles */
 body.theme-dark {
-background-color: #121212;
-color: #e0e0e0;
+  background-color: #121212;
+  color: #e0e0e0;
 }
 
 body.theme-dark .wrapper {
-background: #1e1e1e;
+  background: #1e1e1e;
 }
 
 body.theme-dark .title {
-color: #f67621;
+  color: #f67621;
 }
 
 body.theme-dark .event {
-background-color: #474747;
+  background-color: #474747;
 }
 
 body.theme-dark .event .link {
-color: #f67621;
-border-bottom: 2px solid #f67621;
+  color: #f67621;
+  border-bottom: 2px solid #f67621;
 }
 
-body.theme-dark .container{
-background-color: black !important;
+body.theme-dark .container {
+  background-color: black !important;
 }
+
 body.theme-dark .center {
-background-color: black !important;
+  background-color: black !important;
 }
+
 /* Light Mode Styles */
 .darkmodeimg {
-display: none;
+  display: none;
 }
 
 /* Dark Mode Styles */
 .dark-mode .darkmodeimg {
-display: block !important;
+  display: block !important;
 }
-.lightmodeimg{
-display: block;
+
+.lightmodeimg {
+  display: block;
 }
+
 .dark-mode .lightmodeimg {
-display: none !important;
+  display: none !important;
 }
-.dark-mode .container h1,.dark-mode .container h2{
-color: white !important;
+
+.dark-mode .container h1,
+.dark-mode .container h2 {
+  color: white !important;
 }
+
 .table-container {
-  width: 100% !important; /* Set width to 90% of the viewport width */
-  overflow-x: auto; /* Enable horizontal scrolling */
-  margin: 0 auto; /* Center the container */
+  width: 100% !important;
+  /* Set width to 90% of the viewport width */
+  overflow-x: auto;
+  /* Enable horizontal scrolling */
+  margin: 0 auto;
+  /* Center the container */
 }
 
-.header, .row {
+.header,
+.row {
   display: flex;
 
-  flex-wrap: wrap; /* Prevent wrapping */
+  flex-wrap: wrap;
+  /* Prevent wrapping */
 }
 
 .cell {
-  flex: auto; /* Allow cells to expand and fill the row */
+  flex: auto;
+  /* Allow cells to expand and fill the row */
   padding: 8px;
-  border: 1px solid #ddd; /* Add border */
-  text-align: left; /* Align text to the left */
+  border: 1px solid #ddd;
+  /* Add border */
+  text-align: left;
+  /* Align text to the left */
   /* min-width: 100px; */
 }
 
 .header {
-  background-color: #f2f2f2; /* Light gray background for header */
+  background-color: #f2f2f2;
+  /* Light gray background for header */
   font-weight: bold;
 }
 
@@ -1013,70 +1089,79 @@ color: white !important;
   width: 100%;
 }
 
-.inner-table .header, .inner-table .rows {
+.inner-table .header,
+.inner-table .rows {
   display: flex;
-  flex-wrap: wrap; /* Prevent wrapping */
+  flex-wrap: wrap;
+  /* Prevent wrapping */
 }
 
 .inner-table .header .cell {
   flex: auto !important;
-  background-color: #f2f2f2; /* Light gray background for inner table header */
+  background-color: #f2f2f2;
+  /* Light gray background for inner table header */
 }
 
 .inner-table .rows {
-  overflow-x: auto; /* Allow horizontal scrolling */
+  overflow-x: auto;
+  /* Allow horizontal scrolling */
 }
 
 .inner-table .row {
   display: flex;
-  flex-wrap: nowrap; /* Prevent wrapping */
+  flex-wrap: nowrap;
+  /* Prevent wrapping */
 }
 
 .inner-table .row .cell {
   flex: 1;
-  border: 1px solid #ddd; /* Add border */
+  border: 1px solid #ddd;
+  /* Add border */
 }
-.dark-mode .header,.dark-mode .cell{
-background-color: black !important;
+
+.dark-mode .header,
+.dark-mode .cell {
+  background-color: black !important;
 }
-body.dark-mode .side-icons  a{
-color: white !important;
+
+body.dark-mode .side-icons a {
+  color: white !important;
 }
 
 @media (max-width: 768px) {
-.side-icons {
-  width: 50px;
-  height: auto;
-  padding: 10px 0;
-  gap: 15px;
-}
+  .side-icons {
+    width: 50px;
+    height: auto;
+    padding: 10px 0;
+    gap: 15px;
+  }
 
-.icons {
-  width: 30px;
-  height: 30px;
-}
+  .icons {
+    width: 30px;
+    height: 30px;
+  }
 
-.side-icons a {
-  font-size: 18px;
-}
+  .side-icons a {
+    font-size: 18px;
+  }
 }
 
-@media (max-width: 425px){
-.side-icons {
-  width: 42px;
-  height: auto;
-  padding: 10px 0;
-  gap: 10px;
-}
+@media (max-width: 425px) {
+  .side-icons {
+    width: 42px;
+    height: auto;
+    padding: 10px 0;
+    gap: 10px;
+  }
 
-.icons {
-  width: 25px;
-  height: 25px;
-}
+  .icons {
+    width: 25px;
+    height: 25px;
+  }
 
-.side-icons a {
-  font-size: 16px;
-}
+  .side-icons a {
+    font-size: 16px;
+  }
 }
 
 #scrollToTop {
@@ -1101,7 +1186,7 @@ color: white !important;
 
 }
 
-#scrollToTop:hover{
+#scrollToTop:hover {
   background-color: #3e3e3e;
 }
 
@@ -1118,11 +1203,13 @@ color: white !important;
 }
 
 #scrollToTop:hover {
-  transform: translateY(-5px); /* Move button up on hover */
+  transform: translateY(-5px);
+  /* Move button up on hover */
 }
 
 #scrollToTop:hover .arrow-icon {
-  transform: translateY(-2px); /* Move arrow up on hover */
+  transform: translateY(-2px);
+  /* Move arrow up on hover */
 }
 
 body.dark-mode #scrollToTop {
@@ -1143,23 +1230,29 @@ html {
 }
 
 /* view count */
-a{
+a {
   text-decoration: none;
 }
 
-.dropdown{
+.dropdown {
   cursor: pointer;
   font-size: 1.5rem;
 }
 
 /* Modal Background */
 .modal1 {
-  display: none; /* Hidden by default */
-  position: absolute; /* Positioned relative to the parent */
-  z-index: 1000; /* Make sure it is above other content */
-  top:100px; /* Position below the caret */
-  left: 0; /* Align to the left of the parent */
-  width: 200px; /* Adjust width as needed */
+  display: none;
+  /* Hidden by default */
+  position: absolute;
+  /* Positioned relative to the parent */
+  z-index: 1000;
+  /* Make sure it is above other content */
+  top: 100px;
+  /* Position below the caret */
+  left: 0;
+  /* Align to the left of the parent */
+  width: 200px;
+  /* Adjust width as needed */
 }
 
 /* Modal Content */
@@ -1171,9 +1264,10 @@ a{
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   position: relative;
 }
-.modal-content p{
+
+.modal-content p {
   border-bottom: solid 1px gray;
-  padding-top: 0px ;
+  padding-top: 0px;
   cursor: pointer;
   padding-bottom: 5px;
   margin-top: 0px !important;
@@ -1187,4 +1281,4 @@ a{
   right: 10px;
   font-size: 20px;
   cursor: pointer;
-}
+}
\ No newline at end of file

From cd3ee0da6450620da5bbeeb984bf0912e9132d0a Mon Sep 17 00:00:00 2001
From: Sanjay Viswanathan <sanjay.kanakkot@gmail.com>
Date: Fri, 9 Aug 2024 15:37:44 +1000
Subject: [PATCH 10/13] Revert "Popup Fixed"

---
 styles/blog.css | 223 +++++++++++++++---------------------------------
 1 file changed, 69 insertions(+), 154 deletions(-)

diff --git a/styles/blog.css b/styles/blog.css
index c7d6ff9c..236d6a3f 100644
--- a/styles/blog.css
+++ b/styles/blog.css
@@ -24,25 +24,21 @@ body img {
     padding: 20px;
     overflow: hidden;
     cursor: pointer;
-    width: 27%;
+    width:27%;
     transition: transform 0.2s;
 }
-
-body.dark-mode .blog-card {
+body.dark-mode .blog-card{
     background-color: #333;
 }
-
 body.dark-mode .blog-card .excerpt {
     color: white;
 }
-
-.blog-card .image-wrapper {
+ .blog-card .image-wrapper{
     width: 100%;
     height: auto;
     overflow: hidden;
     border-radius: 12px;
-}
-
+ }
 /* .blog-card:hover {
     transform: scale(1.15);
 } */
@@ -53,8 +49,7 @@ body.dark-mode .blog-card .excerpt {
     height: 100%;
     transition: 0.3s ease-in-out;
 }
-
-.blog-card img:hover {
+.blog-card img:hover{
     scale: 1;
 }
 
@@ -75,8 +70,7 @@ body.dark-mode .blog-card .excerpt {
     margin: 10px 0;
     transition: 0.5s ease-in-out;
 }
-
-.blog-card .blogtitle:hover {
+.blog-card .blogtitle:hover{
     color: #ff4383;
 }
 
@@ -108,32 +102,28 @@ body.dark-mode .blog-card .excerpt {
 .blog-card .read-more:hover {
     background-color: #0056b3;
 }
-
 @media (max-width:976px) {
-    .blog-card {
+    .blog-card{
         width: 40%;
     }
 }
-
 @media (max-width:768px) {
-    .blog-card {
+    .blog-card{
         width: 100%;
     }
-
     .ways-content {
         padding: 0 !important;
     }
 }
 
 
-.certificate {
-    width: 100%;
-    justify-content: center;
+.certificate{
+   width: 100%;
+   justify-content: center;
     display: flex;
     flex-wrap: wrap;
 }
-
-.certificate-left {
+.certificate-left{
     width: 40%;
     display: flex;
     justify-content: center;
@@ -141,45 +131,35 @@ body.dark-mode .blog-card .excerpt {
     align-items: center;
 }
 
-.ways {
+.ways{
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-
+  
 }
-
-.ways-content {
+.ways-content{
     padding: 60px;
     padding-top: 30px;
 }
-
-.ways-content h1 {
+.ways-content h1{
     font-size: 50px !important;
 }
-
-.ways-content p {
+.ways-content p{
     font-size: 20px !important;
 }
-
-
-.ways img {
-
 .ways img{
     object-fit: contain !important;
-
     border-radius: 20px;
 }
-
-.ways1 {
+.ways1{
     width: 80%;
     display: flex;
     /* flex-wrap: wrap; */
     margin-top: 20px;
     margin-bottom: 20px !important;
 }
-
-.ways2 {
+.ways2{
     width: 80%;
     display: flex;
     flex-direction: row-reverse;
@@ -187,67 +167,45 @@ body.dark-mode .blog-card .excerpt {
     /* flex-wrap: wrap; */
     margin-bottom: 30px !important;
 }
-
-@media only screen and (max-width:1400px) {
-    .certificate-left {
+@media only screen and (max-width:1400px){
+    .certificate-left{
         width: 80%;
-    }
-
-    .certificate-right {
+    }.certificate-right{
         width: 100%;
         height: auto;
     }
-
-    .ways1,
-    .ways2 {
+    .ways1,.ways2{
         justify-content: center;
         flex-wrap: wrap;
     }
-
-    .ways1,
-    .ways2 {
+    .ways1,.ways2{
         padding: 0px !important;
         text-align: center;
     }
 }
-
 @media only screen and (max-width:600px) {
-
-    .ways img {
-        scale: 0.60 !important;
-    }
-}
-
-.ways a:hover {
-
     .ways img{
         object-fit: inherit;
         scale: 0.60 !important;}
  }
 .ways a:hover{
-
     text-decoration: underline;
 }
-
-.ways a {
+.ways a{
     font-size: 30px;
     text-decoration: none;
-    color: black;
+    color: black ;
     font-weight: 600;
 }
-
-.certificate-left h1 {
+.certificate-left h1{
     font-size: 30px;
     text-align: start;
 }
-
-.certificate-left p {
-    font-size: 20px;
-    text-align: start;
+.certificate-left p{
+    font-size: 20px;    text-align: start;
 
 }
-
-.certificate-right {
+.certificate-right{
     width: 40%;
     height: 400px;
 }
@@ -256,42 +214,34 @@ body.dark-mode .blog-card .excerpt {
 
 /* Popup container */
 .popup {
-    display: none;
-    /* Hidden by default */
-    position: fixed;
-    /* Stay in place */
-    z-index: 1000;
-    /* Sit on top */
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
     left: 0;
     top: 0;
-    width: 100%;
-    /* Full width */
-    height: 100%;
-    /* Full height */
-    background-color: rgba(0, 0, 0, 0.75);
-    /* Black with opacity */
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
 }
 
 /* Popup content */
 .popup-content {
     background-color: #fefefe;
     display: flex;
-    justify-content: center;
-    /* Align items horizontally */
-    align-items: center;
-    /* Align items vertically */
-    max-width: 700px;
+max-width: 700px;
+    margin: 15% auto; /* 15% from the top and centered */
+   
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
     position: relative;
-    margin: 10% auto;
     border-radius: 20px;
 }
-
-.line {
+.line{
     width: 100px;
-    border-right: solid 1px black;
+    border-right: solid  1px black;
     border-right-style: dashed;
 }
-
 /* Close button */
 .popup-close {
     color: #aaa;
@@ -312,8 +262,7 @@ body.dark-mode .blog-card .excerpt {
 
 /* Button inside popup */
 .popup-button {
-    background-color: #4CAF50;
-    /* Green */
+    background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 10px 20px;
@@ -327,20 +276,17 @@ body.dark-mode .blog-card .excerpt {
 .popup-button:hover {
     background-color: #45a049;
 }
-
-.main-popup-content {
+.main-popup-content{
     padding-left: 20px;
     padding-top: 20px;
     width: 500px;
     height: 417px;
 
 }
-
-.main-popup-content h1 {
+.main-popup-content h1{
     margin-bottom: 40px;
 }
-
-.call {
+.call{
     display: flex;
     height: 70px;
     align-items: center;
@@ -349,19 +295,16 @@ body.dark-mode .blog-card .excerpt {
     font-size: 20px;
     color: black;
 }
-
-.card-footer {
+.card-footer{
     height: 80px;
     padding-bottom: 20px;
     font-size: 20px;
 }
-
-.card-footer a {
+.card-footer a{
     text-decoration: none;
-    color: black;
+    color: black ;
 }
-
-.side-content {
+.side-content{
     height: 100%;
     display: flex;
     width: 300px;
@@ -371,66 +314,38 @@ body.dark-mode .blog-card .excerpt {
     height: 417px;
 }
 
-.side-content svg {
+.side-content svg{
     position: relative;
-    top: 70px;
+    top:70px;
 }
 
-@media only screen and (max-width:700px) {
-    .line {
-        width: auto;
-        grid-area: line;
+@media only screen and (max-width:700px){
+    .side-content{
+        height: auto ;
     }
-
-    .side-content {
-        padding: 0.5rem;
-        height: auto;
-        width: auto;
-        grid-area: side;
-    }
-
-    .main-popup-content {
-        width: auto;
-        height: auto;
-        grid-area: main;
-        padding: 0.5rem;
+    .main-popup-content{
+        height: auto ;
     }
-
-    .main-popup-content h1 {
-        font-size: 1.5rem !important;
+    .main-popup-content h1{
+        font-size: 30px !important;
         margin-bottom: 10px;
     }
-
-    .main-popup-content p {
+    .main-popup-content p{
         margin-bottom: 4px;
     }
-
-    .call {
+    .call{
         flex-direction: column;
-        gap: 10px;
+        gap:10px;
         align-items: start;
     }
-
-    .popup-content {
-        width: 90%;
-        margin: 7% auto;
-        display: grid;
-        grid-template-columns: 1fr 4fr;
-        grid-template-areas:
-            "line side"
-            "line main";
-        gap: 10px;
-    }
-
-    .side-content svg {
-        top: 5%;
+    .popup-content{
+        margin: 15% auto;
+        width: 95vw;
     }
 }
-
-.dark-mode .main-popup-content h1 {
+.dark-mode .main-popup-content h1{
     color: black !important;
 }
-
-.dark-mode .card-footer p {
+.dark-mode .card-footer p{
     color: black !important;
 }
\ No newline at end of file

From d11fcc3caedc4a0cbeb1d22d3e9c286c5ee3810a Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Fri, 9 Aug 2024 11:26:29 +0530
Subject: [PATCH 11/13] Update compare.js

---
 scripts/compare.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/compare.js b/scripts/compare.js
index 0c48e365..a7509457 100644
--- a/scripts/compare.js
+++ b/scripts/compare.js
@@ -2,7 +2,7 @@
 
 document.addEventListener("DOMContentLoaded", function () {
     let contributors = [];
-    const token = ''; // Replace with your GitHub PAT
+    const token = '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'; // Replace with your GitHub PAT
 
     fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
         .then((response) => response.json())

From b190875a7e81efbb792c18226da7dec16d71707d Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Fri, 9 Aug 2024 12:17:56 +0530
Subject: [PATCH 12/13] Added

---
 pages/events.html | 152 +++++++++++++++++++++++++++++++++-------------
 styles/events.css |  39 ++++++++++--
 2 files changed, 142 insertions(+), 49 deletions(-)

diff --git a/pages/events.html b/pages/events.html
index dc4f2511..1b30d58c 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -11,38 +11,36 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-
-  <nav class="navbar">
-    <div class="navbar-left" onclick="window.location.href=`/index.html`">
-      <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
-      <span class="navbar-text">Recode Hive</span>
-    </div>
-    <div class="navbar-right">
-      <a href="githubbadge.html" class="navbar-link">Github-Badge</a>
-      <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="navbar-link">Add Profile</a>
-      <a href="#" class="navbar-link">Tools</a>
-      <a href="events.html" class="navbar-link">Events</a>
-      <a href="blog.html" class="navbar-link">Learn</a>
-      <a href="compare.html" class="navbar-link">Compare</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>
+    <nav class="navbar">
+        <a href="../index.html" style="text-decoration: none; color: #333;">
+          <div class="navbar-left" onclick="window.location.href=`../index.html`">
+            <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="githubbadge.html" class="navbar-link">Github-Badge</a>
+          <a href="#" class="navbar-link">Tools</a>
+          <a href="#" class="navbar-link">Events</a>
+          <a href="blog.html" class="navbar-link">Learn</a>
+          <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="navbar-link">Add Profile</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>
+        <div class="hamburger" id="hamburger">
+          <div></div>
+          <div></div>
+          <div></div>
       </div>
-    </div>
-    <div class="hamburger" id="hamburger">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-  </nav>  
+    </nav>
     <div class="mobile-menu" id="mobile-menu">
 		<a href="githubbadge.html" class="navbar-links">Github-Badge</a>
 		<a href="#" class="navbar-links">Tools</a>
@@ -54,13 +52,13 @@
     <div class="container">
         <h1 class="main-heading">Events Timeline</h1>
         
-        <div class="timeline">
+        <div style="position: relative;" class="timeline">
             <!-- Event 1 -->
-            <div class="timeline-item">
+            <div class="timeline-item" style="position: relative;">
                 <div class="timeline-content">
                   <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/A7PchMiBeN4?si=2WnNqY6FwuCrLjQr" frameborder="0" allowfullscreen></iframe>
-                </div>
+                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/AtoVNe1mVUA?start=792" frameborder="0" allowfullscreen></iframe>
+                  </div>
                 
                     <h2 class="event-title">GitHub Profile Review Live Session</h2>
                     <p class="event-date">Date: 18 Jul 2024</p>
@@ -71,14 +69,15 @@ <h2 class="event-title">GitHub Profile Review Live Session</h2>
                       </p>
                     <a href="#" class="event-link">Learn More</a>
                 </div>
-            </div>
+                <div class="line scroll-animate " id="scroll1"></div>
 
+            </div>
             <!-- Event 2 -->
             <div class="timeline-item">
                 <div class="timeline-content">
                   <div class="banner">
-                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/A7PchMiBeN4?si=2WnNqY6FwuCrLjQr" frameborder="0" allowfullscreen></iframe>
-                </div>
+                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/Rm2lT9j6VxQ?start=522" frameborder="0" allowfullscreen></iframe>
+                  </div>
                     <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
                     <p class="event-date">Date: 21 Jul 2024</p>
                     <p class="event-description">Session Highlights:
@@ -86,16 +85,25 @@ <h2 class="event-title">GitHub Profile Review Live Session : #2</h2>
                       💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
                     <a href="#" class="event-link">Learn More</a>
                 </div>
+                <div class="line1 scroll-animate" id="scroll2"></div>
+
             </div>
 
             <!-- Event 3 -->
             <div class="timeline-item">
-                <div class="timeline-content">
-                    <h2 class="event-title">Upcoming Events</h2>
-                    <p class="event-date">Date: TBA</p>
-                    <p class="event-description">Upcoming Events Will Be Add In Future .</p>
-                    <a href="#" class="event-link">Learn More</a>
+              <div class="timeline-content">
+                <div class="banner">
+                  <iframe width="100%" height="315" src="https://www.youtube.com/embed/rNF66FCLmYM?start=90" frameborder="0" allowfullscreen></iframe>
                 </div>
+                  <h2 class="event-title">GitHub Profile Review Live Session : #3</h2>
+                  <p class="event-date">Date: 7 Aug 2024</p>
+                  <p class="event-description">Session Highlights:
+                    🔍 Live GitHub Profile Reviews: Get feedback on your GitHub profile.
+                    💡 Tips to Enhance Your GitHub: Learn valuable tips and tricks to make your profile stand out.</p>
+                  <a href="#" class="event-link">Learn More</a>
+              </div>
+                <div class="line scroll-animate" id="scroll3"></div>
+
             </div>
 
             <!-- Add more event containers as needed -->
@@ -147,6 +155,64 @@ <h5>
     <script src="../scripts/script.js"></script>
     <script src="../scripts/dark-mode.js"></script>
 	  <script src="../scripts/hamburger.js"></script>
+    <script>
+
+      function active(){
+          const contentDiv = document.getElementById('scroll1');
+          contentDiv.style.height='103%'
+      }
+      function active1(){
+          const contentDiv = document.getElementById('scroll2');
+          contentDiv.style.height='100%'
+      }
+      function active2(){
+          const contentDiv = document.getElementById('scroll3');
+          contentDiv.style.height='108%'
+      }
+      document.addEventListener('DOMContentLoaded', () => {
+        const contentDiv = document.getElementById('scroll1');
+        const contentDiv1 = document.getElementById('scroll2');
+        const contentDiv2 = document.getElementById('scroll3');
+
+        contentDiv.style.height='0%'
 
+          contentDiv1.style.height='0%'
+          contentDiv2.style.height='0%'
+
+        // Function to call when the content div comes into view
+        function handleIntersection(entries, observer) {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              // Call your function here
+              if(entry.target.id=="scroll1"){
+                  active();
+              } if(entry.target.id=="scroll2"){
+                  active1()
+              } if(entry.target.id=="scroll3"){
+                active2()
+              }
+  
+              // Optionally, stop observing after the first intersection
+              observer.unobserve(entry.target);
+            }
+          });
+        }
+  
+        // Create an Intersection Observer instance
+        const observer = new IntersectionObserver(handleIntersection, {
+          root: null, // Use the viewport as the root
+          rootMargin: '-200px',
+          threshold: 0.1 // Trigger when 10% of the target is visible
+        });
+  
+        // Start observing the target element
+        observer.observe(contentDiv);
+        observer.observe(contentDiv1);
+        observer.observe(contentDiv2);
+
+        // Example function to call when content div is in view
+      
+      });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/events.css b/styles/events.css
index e05f98d3..a7ebdc86 100644
--- a/styles/events.css
+++ b/styles/events.css
@@ -10,10 +10,11 @@
     position: absolute;
     width: 6px;
     background-color: #333;
-    top: 0;
+    top: 80px;
     bottom: 0;
     left: 50%;
     margin-left: -3px;
+    z-index: 1;
 }
 
 .timeline-item {
@@ -28,11 +29,12 @@
     position: absolute;
     width: 25px;
     height: 25px;
-    background-color: #333;
-    border: 4px solid #555;
+    background-color: #3b9cdd;
+    border: 4px solid #3b9cdd;
     border-radius: 50%;
-    z-index: 1;
+    z-index: 10000;
     top: 20px;
+
 }
 
 .timeline-item:nth-child(odd) {
@@ -165,7 +167,12 @@ body.dark-mode .navbar-text{
     .timeline::after {
         left: 31px;
     }
-
+    .line{
+left: 28px !important;
+    }
+    .line1{
+        right: 93.5% !important;
+    }
     .timeline-item {
         width: 100%;
         padding-left: 70px;
@@ -201,4 +208,24 @@ body.dark-mode .navbar-text{
     body.dark-mode .timeline-item:nth-child(even) .timeline-content::after {
         border-right-color: #444;
     }
-}
\ No newline at end of file
+}.line{
+    position: absolute;
+  left: 99.5%;
+  background-color: #d55353;
+  width: 6px;
+  top: 20px;
+  z-index: 1000;
+  /* height: 103% !important; */
+}
+.line1{
+    position: absolute;
+  right: 99.5%;
+  background-color: #d55353;
+  top: 25px;
+  width: 6px;
+  z-index: 1000;
+}
+.scroll-animate {
+    transition: all 1.5s ease-out;
+      background-color: #3b9cdd !important;
+  }
\ No newline at end of file

From e248a229a73c53faad1304e745b40dec9da8e428 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Fri, 9 Aug 2024 13:56:52 +0530
Subject: [PATCH 13/13] Fixed navbar issue

---
 pages/blog.html        | 4 ++--
 pages/compare.html     | 4 ++--
 pages/events.html      | 4 +---
 pages/exploremore.html | 4 ++--
 pages/githubbadge.html | 6 +++---
 pages/help.html        | 4 ++--
 6 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/pages/blog.html b/pages/blog.html
index f4f44da5..7feacc9f 100644
--- a/pages/blog.html
+++ b/pages/blog.html
@@ -16,10 +16,10 @@
 <body>
     <!-- Navbar -->
 	<nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`/index.html`">
+        <a class="navbar-left" style="color: #333 !important;text-decoration: none;" href="../index.html">
           <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="githubbadge.html" class="navbar-link">Github-Badge</a>
           <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+" 
diff --git a/pages/compare.html b/pages/compare.html
index f651fd1e..53ccf913 100644
--- a/pages/compare.html
+++ b/pages/compare.html
@@ -19,10 +19,10 @@
   </head>
   <body>
     <nav class="navbar">
-      <div class="navbar-left" onclick="window.location.href=`/index.html`">
+      <a class="navbar-left" style="color: #333 !important;text-decoration: none;" href="../index.html">
         <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="githubbadge.html" class="navbar-link">Github-Badge</a>
         <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+" 
diff --git a/pages/events.html b/pages/events.html
index 1b30d58c..f4eed5d9 100644
--- a/pages/events.html
+++ b/pages/events.html
@@ -12,11 +12,9 @@
 </head>
 <body>
     <nav class="navbar">
-        <a href="../index.html" style="text-decoration: none; color: #333;">
-          <div class="navbar-left" onclick="window.location.href=`../index.html`">
+        <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
             <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="githubbadge.html" class="navbar-link">Github-Badge</a>
diff --git a/pages/exploremore.html b/pages/exploremore.html
index 7f7fddd9..6e24368f 100644
--- a/pages/exploremore.html
+++ b/pages/exploremore.html
@@ -19,10 +19,10 @@
 
 <body>
   <nav class="navbar">
-    <div class="navbar-left" onclick="window.location.href=`/index.html`">
+    <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
       <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="githubbadge.html" class="navbar-link">Github-Badge</a>
       <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+" 
diff --git a/pages/githubbadge.html b/pages/githubbadge.html
index aaa69bee..9ef282f9 100644
--- a/pages/githubbadge.html
+++ b/pages/githubbadge.html
@@ -262,10 +262,10 @@
 </head>
 <body>
     <nav class="navbar">
-        <div class="navbar-left" onclick="window.location.href=`/index.html`">
-          <img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
+        <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
+            <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="githubbadge.html" class="navbar-link">Github-Badge</a>
           <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+" 
diff --git a/pages/help.html b/pages/help.html
index 37934bd9..fab220a9 100644
--- a/pages/help.html
+++ b/pages/help.html
@@ -20,10 +20,10 @@
   </head>
   <body>
     <nav class="navbar">
-      <div class="navbar-left" onclick="window.location.href=`index.html`">
+      <a  class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
         <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="githubbadge.html" class="navbar-link">Github-Badge</a>
         <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+" 
