From 26cbaf2e48049eb43420b8e0ae290141e44659ed Mon Sep 17 00:00:00 2001
From: syedmaazsaeed <syedmaazsaeed@gmail.com>
Date: Wed, 9 Oct 2024 21:37:50 +0500
Subject: [PATCH] Implement full mobile responsiveness across the site.

---
 Website/HomePage.css | 339 ++++++++++++++++++++++++-------------------
 1 file changed, 190 insertions(+), 149 deletions(-)

diff --git a/Website/HomePage.css b/Website/HomePage.css
index b8158ce..3cf6d49 100644
--- a/Website/HomePage.css
+++ b/Website/HomePage.css
@@ -1,150 +1,191 @@
 * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      scroll-behavior: smooth;
-    }
-
-    body {
-    
-      font-family: 'Arial', sans-serif;
-      background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
-            background-size: 300% 300%;
-            animation: gradientMove 10s ease infinite;
-            color: white;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-    }
-
-    /* Navbar styling */
-    nav{
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-    }
-    .nav-links {
-      position: fixed;
-      width: 100%;
-      margin-right: 10000px;
-
-      top: 0;
-      background-color: #007acc;
-      padding: 10px 0;
-      z-index: 1000;
-      
-    }
-    .nav-links{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #8E44AD;
-        padding: 20px 15px;
-        border-radius: 12px;
-        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-      }
-      .nav-links li{
-        list-style: none;
-        margin: 0 12px; 
-      }
-      .nav-links li a{
-        position: relative;
-        color: #FAFAFA;
-        font-size: 20px;
-        font-weight: 500;
-        padding: 6px 0;
-        text-decoration: none;
-      }
-      .nav-links li a:before{
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 3px;
-        width: 0%;
-        background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
-        background-size: 100% 100%;
-        animation: gradientMove 1s ease infinite;
-        border-radius: 12px;
-        transition: all 0.4s ease;
-      }
-      .nav-links li a:hover:before{
-        width: 100%;
-      }
-      .nav-links li.center a:before{
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .nav-links li.upward a:before{
-        width: 100%;
-        bottom: -5px;
-        opacity: 0;
-      }
-      .nav-links li.upward a:hover:before{
-        bottom: 0px;
-        opacity: 1;
-      }
-      .nav-links li.forward a:before{
-        width: 100%;
-        transform: scaleX(0);
-        transform-origin: right;
-        transition: transform 0.4s ease;
-      }
-      .nav-links li.forward a:hover:before{
-        transform: scaleX(1);
-        transform-origin: left;
-      }
-
-    /* Section styling */
-    section {
-      padding: 80px 0;
-      text-align: center;
-    }
-
-    h2 {
-      font-size: 36px;
-      color: white;
-      margin-bottom: 20px;
-    }
-
-    .contributor-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 20px;
-      padding: 20px;
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-
-    .contributor {
-      background-color: #8E44AD;
-      border-radius: 10px;
-      padding: 20px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-
-    .contributor:hover {
-      transform: scale(1.05);
-    }
-
-    .contributor img {
-      width: 100%;
-      height: 200px;
-      object-fit: cover;
-      border-radius: 10px;
-    }
-
-    .contributor a {
-      text-decoration: none;
-      color: white;
-      font-size: 18px;
-      font-weight: bold;
-      margin-top: 10px;
-      display: block;
-    }
-
-    /* Smooth animation when scrolling */
-    html {
-      scroll-behavior: smooth;
-    }
\ No newline at end of file
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
+  background-size: 300% 300%;
+  animation: gradientMove 10s ease infinite;
+  color: white;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+
+nav {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.nav-links {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background-color: #007acc;
+  padding: 10px 0;
+  z-index: 1000;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #8E44AD;
+  padding: 20px 15px;
+  border-radius: 12px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.nav-links li {
+  list-style: none;
+  margin: 0 12px;
+}
+
+.nav-links li a {
+  position: relative;
+  color: #FAFAFA;
+  font-size: 20px;
+  font-weight: 500;
+  padding: 6px 0;
+  text-decoration: none;
+}
+
+.nav-links li a:before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  width: 0%;
+  background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
+  background-size: 100% 100%;
+  animation: gradientMove 1s ease infinite;
+  border-radius: 12px;
+  transition: all 0.4s ease;
+}
+
+.nav-links li a:hover:before {
+  width: 100%;
+}
+
+section {
+  padding: 80px 0;
+  text-align: center;
+}
+
+h2 {
+  font-size: 36px;
+  color: white;
+  margin-bottom: 20px;
+}
+
+.contributor-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.contributor {
+  background-color: #8E44AD;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.contributor:hover {
+  transform: scale(1.05);
+}
+
+.contributor img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.contributor a {
+  text-decoration: none;
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 10px;
+  display: block;
+}
+
+/* Responsive Media Queries */
+@media (max-width: 768px) {
+  /* Navbar */
+  .nav-links {
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  .nav-links li {
+    margin: 10px 0;
+  }
+
+
+  .contributor-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 15px;
+    padding: 10px;
+  }
+
+  
+  section {
+    padding: 50px 20px;
+  }
+
+  
+  h2 {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Navbar */
+  .nav-links {
+    flex-direction: column;
+    padding: 8px;
+  }
+
+  .nav-links li {
+    margin: 8px 0;
+  }
+
+
+  .contributor-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+    padding: 5px;
+  }
+
+  
+  section {
+    padding: 40px 15px;
+  }
+
+ 
+  h2 {
+    font-size: 24px;
+  }
+
+
+  .contributor img {
+    height: 150px;
+  }
+
+  .contributor a {
+    font-size: 16px;
+  }
+}