Merge pull request #159 from Manikant69/main

Minimize the team grid card to look better UI
mdazfar2 · Jun 4, 2024 · d8b3604 · d8b3604
2 parents 2dd3c7b + 0ada0ac
commit d8b3604
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 31 deletions.
diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
@@ -109,7 +109,7 @@ <h1>Our Team</h1>
         <div id="team-grid">
           <div class="team-member">
             <div class="card1">
-              <div class="image-div1">
+              <div class="image-div">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
               </div>
               <div class="info-div">
@@ -126,8 +126,8 @@ <h2>Azfar Alam</h2>
           </div>
           <div class="team-member">
             <div class="card2">
-              <div class="image-div1">
-                <img src="Screenshot (250).png" alt="Azfar Alam" />
+              <div class="image-div">
+                <img src="Screenshot (250).png" alt="Anurag Pandey" />
               </div>
               <div class="info-div">
                 <span class="badge founder">Maintainer</span>

diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
@@ -222,10 +222,7 @@ width: 40px;
 }
 
 .intro {
-  margin-top: 24px;
-  margin-bottom: 24px;
-  margin-left:24px;
-  margin-right:24px;
+  margin:24px;
 }
 
 /* .intro h1 {
@@ -239,11 +236,12 @@ width: 40px;
 } */
 
 #team-grid {
+  margin-left: 2rem;
+  margin-right: 2rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-  gap: 20px;
-  height: 400px;
-
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 5rem;
+  height: 300px;
 }
 
 .team-member {
@@ -265,39 +263,28 @@ width: 40px;
 .team-member:hover{
   transform: scale(1.07);
 }
-.card {
-  background-color: #ceedff;
-  padding: 20px;
-  border-radius: 20px;
-  border-color: #3498db;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 200px;
-  align-items: center;
-  position: relative;
-}
+
 .card1 {
   background-color: #fff0f0;
-  padding: 20px;
-  border-radius: 20px;
+  padding: 2rem;
+  border-radius: 2rem;
   border-color: #3498db;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 300px;
+  height: 200px;
   align-items: center;
   position: relative;
 }
 .card2 {
   background-color: #fcedfe;
-  padding: 20px;
+  padding: 2rem;
   border-radius: 20px;
   border-color: #3498db;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 300px;
+  height: 200px;
   align-items: center;
   position: relative;
 }
@@ -308,13 +295,12 @@ width: 40px;
 
 .image-div img {
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
+  width: 8%;
 }
 
 .info-div {
   text-align: center;
-  margin-top: 15px;
+  margin-top: 5px;
 }
 
 .info-div h2 {