Fixed Alumni page

MicrosoftStudentChapter · Oct 13, 2024 · 5f05449 · 5f05449
1 parent d5f678a
commit 5f05449
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 43 deletions.
diff --git a/components/NavbarI/NavbarI.jsx b/components/NavbarI/NavbarI.jsx
@@ -42,9 +42,9 @@ const NavbarI = () => {
             <Link data-tooltip-content="About" className={`my-anchor-element ${location.pathname === "/about" && 'active'}`} to={'/about'}>
                 <AiOutlineInfoCircle size={25} />
             </Link>
-            {/* <Link data-tooltip-content="Community" className={`my-anchor-element ${location.pathname === "/community" && 'active'}`} to={'/community'}>
+            <Link data-tooltip-content="Community" className={`my-anchor-element ${location.pathname === "/community" && 'active'}`} to={'/community'}>
                 <RiCommunityLine size={25} />
-            </Link> */}
+            </Link>
             <a className='show-on-phone dropup' ref={closeRef} href="#">
                 <div id="drop-up-icon">
                     <IoIosArrowDropup onClick={checkClosingDropUp} size={25} />

diff --git a/src/App.jsx b/src/App.jsx
@@ -2,7 +2,7 @@ import Events from "./Pages/Events";
 import Gallery from "./Pages/Gallery";
 import LandingPage from "./Pages/LandingPage";
 import OurTeam from "./Pages/OurTeam";
-// import Alumni from "./Pages/Alumni";
+import Alumni from "./Pages/Alumni";
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import AboutUs from "./Pages/AboutUs";
@@ -19,7 +19,7 @@ function App() {
         <Route exact path="/" element={<LandingPage />} />
         <Route path="/events" element={<Events />} />
 				<Route path="/gallery" element={<Gallery />} />
-				{/* <Route path="/alumni" element={<Alumni />} /> */}
+				<Route path="/alumni" element={<Alumni />} />
         <Route path="/team" element={<OurTeam />} />
         <Route path="/about" element={<AboutUs />} />
         <Route path="/sponsors" element={<Sponsors/>} />

diff --git a/src/Components/NavbarI/NavbarI.jsx b/src/Components/NavbarI/NavbarI.jsx
@@ -42,9 +42,9 @@ const NavbarI = () => {
             <Link data-tooltip-content="About" className={`my-anchor-element ${location.pathname === "/about" && 'active'}`} to={'/about'}>
                 <AiOutlineInfoCircle size={25} />
             </Link>
-            {/* <Link data-tooltip-content="Alumni" className={`my-anchor-element ${location.pathname === "/alumni" && 'active'}`} to={'/alumni'}>
+            <Link data-tooltip-content="Alumni" className={`my-anchor-element ${location.pathname === "/alumni" && 'active'}`} to={'/alumni'}>
                 <RiCommunityLine size={25} />
-            </Link> */}
+            </Link>
             <a className='show-on-phone dropup' ref={closeRef} href="#">
                 <div id="drop-up-icon">
                     <IoIosArrowDropup onClick={checkClosingDropUp} size={25} />

diff --git a/src/Pages/Alumni/Assets/2.png b/src/Pages/Alumni/Assets/2.png
diff --git a/src/Pages/Alumni/Components/ScrollCenter.jsx b/src/Pages/Alumni/Components/ScrollCenter.jsx
@@ -3,7 +3,7 @@ import styles from "../Style/scroll.module.css";
 import ProfileCards from './ProfileCards';
 import YearSelector from './YearSelector';
 import AlumniSvg from "../Assets/alumni_vector.svg";
-import MeetVector from "../Assets/meet_vector.svg";
+import MeetVector from "../Assets/2.png";
 
 const imageData = [
   {

diff --git a/src/Pages/Alumni/Style/card.module.css b/src/Pages/Alumni/Style/card.module.css
@@ -23,9 +23,9 @@
 
 .box {
   position: relative;
-  width: 30rem;
-  height: 40rem;
-  margin: 4rem;
+  width: 20rem;
+  height: 27rem;
+  margin: 3rem;
   /* font-size: 62.5%; */
 
 }
@@ -49,8 +49,8 @@
 }
 
 .imgBox img {
-  width: 30rem;
-  height: 40rem;
+  width: 20rem;
+  height: 27rem;
   object-fit: cover;
   resize: both;
 }
@@ -61,7 +61,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  padding: 1.5rem;
+  padding: 1rem;
   display: flex;
   justify-content: center;
   background-color: #fff;
@@ -75,7 +75,7 @@
 
 .content h2 {
   display: block;
-  font-size: 2rem;
+  font-size: 1.3rem;
   color: #111;
   font-weight: 1000;
   line-height: 2rem;
@@ -84,7 +84,7 @@
 
 .content span {
   color: #555;
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 300;
   letter-spacing: 2px;
 }
@@ -112,14 +112,14 @@
 @media (max-width: 1500px) {
   .content span {
     color: #555;
-    font-size: 1rem;
+    font-size: 0.6rem;
     font-weight: 300;
     letter-spacing: 2px;
   }
 
   .content h2 {
     display: block;
-    font-size: 1.5rem;
+    font-size: 1rem;
     color: #111;
     font-weight: 1000;
     line-height: 2rem;
@@ -139,9 +139,9 @@
 
   .box {
     position: relative;
-    width: 25rem;
-    height: 35rem;
-    margin: 4rem;
+    width: 17rem;
+    height: 23rem;
+    margin: 3rem;
   }
 
   .box:hover .imgBox {
@@ -163,8 +163,8 @@
   }
 
   .imgBox img {
-    width: 25rem;
-    height: 35rem;
+    width: 17rem;
+    height: 23rem;
     object-fit: cover;
     resize: both;
   }
@@ -192,7 +192,7 @@
 @media (max-width: 1200px) {
   .content span {
     color: #555;
-    font-size: 1rem;
+    font-size: 0.6rem;
     font-weight: 200;
     letter-spacing: 2px;
   }
@@ -203,15 +203,15 @@
 
   .content span {
     color: #555;
-    font-size: 1rem;
+    font-size: 0.6rem;
     font-weight: 200;
     letter-spacing: 2px;
   }
 
 
   .content h2 {
     display: block;
-    font-size: 1.2rem;
+    font-size: 0.8rem;
     color: #111;
     font-weight: 1000;
     line-height: 2rem;
@@ -242,9 +242,9 @@
 
   .box {
     position: relative;
-    width: 25rem;
-    height: 35rem;
-    margin: 4rem;
+    width: 17rem;
+    height: 23rem;
+    margin: 3rem;
   }
 
   .box:hover .imgBox {
@@ -266,8 +266,8 @@
   }
 
   .imgBox img {
-    width: 25rem;
-    height: 35rem;
+    width: 17rem;
+    height: 23rem;
     object-fit: cover;
     resize: both;
   }
@@ -276,8 +276,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 25rem;
-    height: 35rem;
+    width: 17rem;
+    height: 23rem;
     padding: 1.5rem;
     display: flex;
     justify-content: center;
@@ -294,14 +294,14 @@
 @media (max-width: 400px) {
   .content span {
     color: #555;
-    font-size: 0.7rem;
+    font-size: 0.45rem;
     font-weight: 200;
     letter-spacing: 2px;
   }
 
   .content h2 {
     display: block;
-    font-size: 1rem;
+    font-size: 0.6rem;
     color: #111;
     font-weight: 1000;
     line-height: 2rem;
@@ -332,9 +332,9 @@
 
   .box {
     position: relative;
-    width: 20rem;
-    height: 30rem;
-    margin: 4rem;
+    width: 13rem;
+    height: 20rem;
+    margin: 3rem;
   }
 
   .box:hover .imgBox {
@@ -356,8 +356,8 @@
   }
 
   .imgBox img {
-    width: 20rem;
-    height: 30rem;
+    width: 13rem;
+    height: 20rem;
     object-fit: cover;
     resize: both;
   }
@@ -366,8 +366,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 20rem;
-    height: 30rem;
+    width: 13rem;
+    height: 20rem;
     padding: 1.5rem;
     display: flex;
     justify-content: center;

diff --git a/src/Pages/Alumni/Style/index.module.css b/src/Pages/Alumni/Style/index.module.css
@@ -1,7 +1,7 @@
-.mainalumni{
+/* html{
   font-size: 62.5%;
 
-}
+} */
 .AlumniContainer{
     width: 100vw;
     min-height: 100vh;

diff --git a/src/Pages/Alumni/Style/scroll.module.css b/src/Pages/Alumni/Style/scroll.module.css
@@ -254,4 +254,20 @@
         width: 25vw;
     }
 
+   }
+   @media (max-width: 800px) {
+    .meetAlumni{
+        margin-top: 2.5%; 
+        margin-bottom: 8%; 
+        margin-left: 5%; 
+        max-width: 40vw;
+        max-height: 10vh;
+    }
+
+    .meetAlumni img{ 
+        max-width: 100%;
+        max-height: 100%;
+        position: relative;
+        left:50%;
+    }
    }