updated and done necessary changes for About Us page (#78)

MAVRICK-1 · May 12, 2024 · fef333b · fef333b
1 parent b874a70
commit fef333b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 43 deletions.
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
@@ -26,13 +26,16 @@ function Tes() {
       <h1 className="contributor-text">Our Contributors</h1>
       <Grid className="container-grid">
         {contributors.map((contributor) => (
-          <Grid  item key={contributor.id}>
+          <Grid item key={contributor.id}>
             <Card className="card">
               {window.innerWidth < 580 ? (
-                <a href={contributor.html_url} className="cardLink" target="_blank">
+                <a
+                  href={contributor.html_url}
+                  className="cardLink"
+                  target="_blank"
+                >
                   <CardMedia
                     component="img"
-                    height="250"
                     image={contributor.avatar_url}
                     alt={contributor.login}
                     className="img"
@@ -41,14 +44,15 @@ function Tes() {
               ) : (
                 <CardMedia
                   component="img"
-                  height="250"
                   image={contributor.avatar_url}
                   alt={contributor.login}
                   className="img"
                 />
               )}
               <CardContent>
-                <Typography variant="h6">{contributor.login}</Typography>
+                <Typography className="card-name" variant="h4">
+                  {contributor.login}
+                </Typography>
               </CardContent>
               <CardContent>
                 <Typography className="card-bottom">
@@ -60,6 +64,7 @@ function Tes() {
                   >
                     View Git Profile
                   </a>
+                  <span className="temp"> | </span>
                   <a
                     href={contributor.html_url}
                     target="_blank"

diff --git a/src/pages/About/style.css b/src/pages/About/style.css
@@ -1,32 +1,32 @@
 * {
   text-decoration: none;
   list-style: none;
+  align-items: center;
+  justify-content: center;
 }
 
-.about-container{
-  width: 100vw;
-  height: 50%;
-  margin-top: 2vw;
-  margin-left: 2vw;
+.about-container {
+  width: 100%;
+  height: 100%;
   margin-bottom: 2vw;
   padding-top: 2vw;
-  overflow: scroll;
-  scrollbar-width: none;
+  overflow: hidden;
 }
 
 .container-grid {
   padding-top: 1vw;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 40px;
 }
 
 .contributor-text {
   text-transform: capitalize;
-  font-size: 1vw;
+  font-size: 40px;
   color: #008080;
   font-weight: 500;
+  margin-bottom: 30px;
 }
 
 .text-color {
@@ -35,99 +35,127 @@
 }
 
 .img {
+  padding: 10px;
   display: flex;
   align-items: center;
+  border-radius: 100vmax;
+  width: 50%;
+  height: 50%;
 }
 
 .card {
   display: flex;
-  gap: 10px;
-  width: 300px;
-  border-radius: 2px;
+  width: 500px;
+  border: 0.5px solid #008080;
+  transition: box-shadow 1s;
+}
+
+.card:hover {
+  box-shadow: 10px 10px #008080;
 }
 
 .card-bottom {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
+}
+
+.card-name {
+  font-size: 40px;
+  color: #008080;
+}
+
+.temp {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 30px;
+  color: #008080;
 }
 
 @media (max-width: 586px) {
   .about-container {
     width: 100%;
-    height: 80%;
+    height: 100%;
     padding: 5vw;
   }
 
   .contributor-text {
     text-transform: capitalize;
-    font-size: 6vw;
+    font-size: 40px;
     color: #008080;
+    text-align: center;
+    justify-content: center;
   }
   .img {
-    width: 100px;
-    height: 180px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .text-color {
-    font-size: 2.5vw;
+    font-size: 20px;
   }
 
   .card {
-    width: 300px;
-    height: 350px;
+    width: 500px;
   }
 }
 @media (min-width: 600px) {
   .about-container {
     width: 100%;
     height: 50%;
     padding: 5vw;
-    margin-top: 5vw;
   }
 
   .contributor-text {
     text-transform: capitalize;
-    font-size: 4vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
     color: #008080;
   }
-  
-  .text-color{
-    font-size: 1.7vw;
-    color:#008080;
+
+  .text-color {
+    font-size: 24px;
+    color: #008080;
   }
 
   .card {
-    width: 300px;
+    width: 500px;
   }
 }
 
 @media (min-width: 600px) and (max-width: 1024px) {
   .about-container {
     width: 100%;
-    height: 50%;
+    height: 100%;
     padding: 3vw;
     margin-top: 3.5vw;
   }
 
   .contributor-text {
     text-transform: capitalize;
-    font-size: 3vw;
+    font-size: 40px;
     color: #008080;
   }
-  .contributor-text {
-    font-size: 2.4vw;
-  }
-
-  .text-color{
-    font-size: 1.7vw;
-    color:#008080;
+
+  .text-color {
+    font-size: 20px;
+    color: #008080;
   }
 
   .card {
-    width: 300px;
+    width: 500px;
+    height: 50%;
   }
 }
+
+.css-o69gx8-MuiCardMedia-root {
+  display: block !important;
+  -webkit-background-size: cover !important;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  -webkit-background-position: center !important;
+  background-position: center !important;
+  width: 50% !important;
+  object-fit: cover !important;
+}