From 28d54aab4f65043985f669fe72b5d7dacafa1ff1 Mon Sep 17 00:00:00 2001
From: mdazfar2 <mdazfaralam440@gmail.com>
Date: Wed, 5 Jun 2024 13:43:32 +0530
Subject: [PATCH] Minimize the team grid card to look better UI

---
 Official_Website/contributor-index.html | 31 ++++++++---
 Official_Website/contributor-style.css  | 69 ++++---------------------
 2 files changed, 34 insertions(+), 66 deletions(-)

diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
index 456766cb..f5f68d1d 100644
--- a/Official_Website/contributor-index.html
+++ b/Official_Website/contributor-index.html
@@ -20,9 +20,7 @@
     <header class="header">
 
         <div class="logo">
-            <a href="https://helpops-hub.vercel.app/"
-            ><img src="logo.png" alt="HelpOps-Hub Logo"
-          /></a>
+            <img src="logo.png" alt="HelpOps-Hub Logo">
         </div>
         <div>
 
@@ -74,6 +72,15 @@ <h1>HelpOps-Hub</h1>
                 <li class="nav__item">
                     <a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
                 </li>
+                <li>
+                    <button class="about-button">
+
+                        <a  href="./about.html">
+                            About Us
+                        </a>
+                    </button>
+                   
+                </li>
                 <li><button class="about-button">
           
                     <a  href="./faq.html">
@@ -90,6 +97,7 @@ <h1>HelpOps-Hub</h1>
 
         </nav>
     <div class="container">
+      <main class="main-content">
         <div class="intro">
           <h1>Our Team</h1>
           <p>
@@ -100,13 +108,16 @@ <h1>Our Team</h1>
         </div>
         <div id="team-grid">
           <div class="team-member">
-              <div class="image-div peach">
+            <div class="card1">
+              <div class="image-div">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
+              </div>
+              <div class="info-div">
                 <span class="badge founder">Founder</span>
                 <h2>Azfar Alam</h2>
                 <p>DevOps Engineer</p>
               </div>
-             
+            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/mdazfar2"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/mdazfar2"><i class="fab fa-github"></i> GitHub</a>
@@ -114,13 +125,16 @@ <h2>Azfar Alam</h2>
             </div>
           </div>
           <div class="team-member">
-              <div class="image-div pink">
+            <div class="card2">
+              <div class="image-div">
                 <img src="Screenshot (250).png" alt="Anurag Pandey" />
+              </div>
+              <div class="info-div">
                 <span class="badge founder">Maintainer</span>
                 <h2>Anurag Pandey</h2>
                 <p>Software Engineer</p>
               </div>
-            
+            </div>
             <div id="social-links">
               <a href="https://github.com/sponsors/pandeyji711"><i class="fas fa-heart"></i> Sponsor</a>
               <a href="https://github.com/pandeyji711"><i class="fab fa-github"></i> GitHub</a>
@@ -128,6 +142,7 @@ <h2>Anurag Pandey</h2>
             </div>
           </div>
         </div>
+      </main>
     </div>
     <button id="scrollToTopBtn" class="scrollToTopBtn">▲</button>
     <div id="team-grid1">
@@ -474,4 +489,4 @@ <h2>Anurag Pandey</h2>
     <script src="contributor.js"></script>
     <script src="dark_mode.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
index 75afccf4..dfbd291c 100644
--- a/Official_Website/contributor-style.css
+++ b/Official_Website/contributor-style.css
@@ -214,24 +214,15 @@ width: 40px;
 .container {
   display: flex;
   width: 100%;
-  height: auto;
-  flex-direction: column;
 }
 
 .main-content {
   flex: 1;
   padding: 20px;
-  height: auto;
 }
 
 .intro {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-
-  margin: 30px;
-  justify-content: center;
+  margin:24px;
 }
 
 /* .intro h1 {
@@ -245,59 +236,24 @@ width: 40px;
 } */
 
 #team-grid {
-  
-  display: flex;
-  flex-direction: row;
-justify-content: center;
- min-height: 300px;
- height: auto;
-  gap: 30px;
-}
-
-@media only screen and (max-width:944px) {
-    #team-grid{
-      flex-direction: column;
-
-    }
-    .intro{
-      align-items: center;
-    }
-    .team-member{
-      justify-content: space-between;
-    }
-}
-@media only screen and (max-width:520px) {
-  .team-member{
-    display: flex;
-    flex-direction: column !important;
-  }
-  .intro{
-    align-items: center;
-  }
-}
-.pink{
-  background-color: #fcedfe;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-radius: 20px;
-}
-.peach{
-  background-color: #fff0f0;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-radius: 20px;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 5rem;
+  height: 300px;
 }
+
 .team-member {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-
   background-color: whitesmoke;
   border-radius: 20px;
   /* border: solid; */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding: 20px;
  /* background-color: gray; */
- gap: 10px;
   margin-left: 20px;
   background-position: center center;
   background-size: cover;
@@ -333,10 +289,7 @@ justify-content: center;
   position: relative;
 }
 .image-div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 300px;
+  flex: none;
   text-align: center;
 }
 
@@ -456,4 +409,4 @@ justify-content: center;
 }
 #team h4{
   font-size: 10px;
-}
+}
\ No newline at end of file