Merge pull request #245 from kossiitkgp/responsive24

Fixed styling for KWoC'24 website

Author: premagarwals

src/components/Testimonials.tsx

@@ -20,7 +20,7 @@ function Testimonials() {
   return (
     <div className="testimonials-container">
       <section className="testimonials-header">
-        <h1 className="testimonials-title  center mb-12 text-4xl font-extrabold leading-none tracking-tight md:text-5xl mt-12 lg:text-8xl lg:mb-36" style={{color:"#ffe336",fontSize:"4rem",  fontWeight:"900", fontStyle:"italic"}}>
+        <h1 className="testimonials-title">
           <em >What Past Participants Say</em>
         </h1>
         <p className="testimonials-subtitle" style={{color:"white", fontSize: "2rem", fontWeight: "600" }}>

src/styles/About.css

@@ -8,18 +8,31 @@
 }
 
 .about-text {
-  padding: 8rem;
+  padding: 1rem;
   background-color: #fff;
 }
 
 .about-container h1 {
   margin: 0;
-  font-size: 6rem;
+  font-size: 4rem;
 }
 
 .about-container p {
   text-align: left;
-  font-size: 2rem;
+  font-size: 1.2rem;
+}
+
+@media (min-width: 768px) {
+  .about-text {
+    padding: 8rem;
+  }
+  .about-container h1 {
+    font-size: 6rem;
+  }
+  
+  .about-container p {
+    font-size: 2rem;
+  }
 }
 
 .about-container img {

src/styles/App.css

@@ -6,6 +6,7 @@ body {
   justify-content: center;
   height: 100%;
   width: 100%;
+  overflow-x: hidden;
 }
 
 #root {

src/styles/Footer.css

@@ -1,6 +1,7 @@
 .footer {
     text-align: center;
     color: #1a1a1a;
+    margin-top: -400px;
     font-family: Arial, sans-serif;
   }
 
@@ -14,9 +15,10 @@
 
   .footer-columns {
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
-    align-items: flex-start;
-    padding: 250px 0 100px; 
+    align-items: center;
+    padding: 500px 0 100px; 
     background-image: url('../assets/Group-16.png'); 
     background-size: cover;
     background-repeat: no-repeat;
@@ -27,17 +29,46 @@
   }
 
   .footer-column {
-    background-color: #ffffff;
     padding: 40px 0;
-    margin-top: 180px;
+    margin-top: 10px;
     margin-bottom: -100px;
     text-align: center;
-    font-size: large;
+    font-size: medium;
     color: #000000;
     max-width: 200px;
     height: 10%;
   }
 
+  @media (min-width: 768px) {
+    .footer {
+      margin-top: 0px;
+    }
+    .footer-columns {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: flex-start;
+      padding: 250px 0 100px; 
+      background-image: url('../assets/Group-16.png'); 
+      background-size: cover;
+      background-repeat: no-repeat;
+      margin-bottom: -40px;
+      background-position: center 135px; 
+      position: relative;
+      color: #fff;
+    }
+    
+    .footer-column {
+      padding: 40px 0;
+      margin-top: 180px;
+      margin-bottom: -100px;
+      text-align: center;
+      font-size: large;
+      color: #000000;
+      max-width: 200px;
+      height: 10%;
+    }
+  }
   .footer-column h2 {
     font-weight: bold;
     margin-bottom: 10px;

src/styles/Header.css

@@ -1,8 +1,31 @@
 .header-container {
+  width: 100vw;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   margin-top: 0;
-  padding: 2rem;
+  padding: 2rem 0 1rem 0;
+}
+
+.nav-bar {
+  float: right;
+  display: flex;
+  align-content: baseline;
+  padding: 0.5rem;
+}
+
+.nav-element {
+  padding: 0.5rem 3rem;
+  color: #fff;
+  text-decoration: none;
+  transition: scale 300ms, text-decoration 300ms;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nav-element:hover {
+  scale: 1.25;
+  color: #ffe336;
+  text-decoration: underline;
 }

src/styles/Hero.css

@@ -24,13 +24,19 @@
 }
 
 .hero-title h1 {
-  font-size: 5rem;
+  font-size: 3rem;
   color: #d9d9d9;
   padding: 0;
   margin-top: 1rem;
   margin-bottom: 4rem;
 }
 
+@media (min-width: 768px) {
+  .hero-title h1 {
+    font-size: 5rem;
+  }
+}
+
 .yellow-text {
   color: #ffe336;
 }

src/styles/Navbar.css

@@ -1,8 +1,10 @@
 .navbar {
     display: flex;
-    width: 90vw;
+    width: 100vw;
+    padding: 0 1rem;
     margin: auto;
     justify-content: space-between;
+    position: relative;
 }
 
 .logo {
@@ -17,17 +19,17 @@
     font-size: 1.3rem;
     flex-direction: column;
     justify-content: start;
-    padding: 50px;
+    padding: 6vw;
     padding-top: 100px;
     align-items: center;
-    gap: 30px;
+    gap: 0.7rem;
     position: absolute;
-    width: 450px;
+    width: 70vw;
     max-width: 80vw;
     border-radius: 10px;
     top: 1vh;
-    right: -110%;
-    bottom: 1vh;
+    right: -150vw;
+    height: 50vh;
     background-color: aquamarine;
     list-style: none;
     background: rgba(255, 255, 255, 0.1);
@@ -47,12 +49,13 @@
 
 .burger {
     position: absolute;
-    right: 40px;
-    font-size: 1.6rem;
+    right: 1rem;
+    font-size: 1.3rem;
     cursor: pointer;
-    top: 60px;
-    height: 70px;
-    width: 70px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 40px;
+    width: 40px;
     background-color: #242424;
     color: #393939;
     display: flex;
@@ -83,6 +86,8 @@
         box-shadow: none;
         border: none;
         right: 0;
+        height: auto;
+        margin-right: 3rem;
     }
 
     .burger {
@@ -91,7 +96,7 @@
 }
 
 .link-container.open {
-    right: 30px;
+    right: 9vw;
 }
 
 .link {