make over of contribution page

mdazfar2 · Jun 3, 2024 · 5c96704 · 5c96704
1 parent d935a79
commit 5c96704
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 29 deletions.
diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
@@ -56,23 +56,42 @@ <h1>Our Team</h1>
         </div>
         <div id="team-grid">
           <div class="team-member">
-            <div class="card">
-              <div class="image-div">
+            <div class="card1">
+              <div class="image-div1">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
               </div>
               <div class="info-div">
                 <span class="badge founder">Founder</span>
                 <h2>Azfar Alam</h2>
               </div>
             </div>
-            <div class="social-links">
+            <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>
+              <a href="https://www.linkedin.com/in/md-azfar-alam/"><i class="fab fa-linkedin"></i>LinkedIn</a>
+            </div>
+          </div>
+          <div class="team-member">
+            <div class="card2">
+              <div class="image-div1">
+                <img src="Screenshot (250).png" alt="Azfar Alam" />
+              </div>
+              <div class="info-div">
+                <span class="badge founder">Maintainer</span>
+                <h2>Anurag Pandey</h2>
+              </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>
+              <a href="https://www.linkedin.com/in/anuragpandey0711/"><i class="fab fa-linkedin"></i>LinkedIn</a>
             </div>
           </div>
         </div>
       </main>
     </div>
+    <div id="team-grid1"></div>
     <script src="contributor.js"></script>
+    <script src="dark_mode.js"></script>
   </body>
 </html>
diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
@@ -171,7 +171,7 @@ width: 40px;
 
 /* Individual folder card */
 .folder-card {
-  flex: 0 0 calc(25% - 20px); /* Four cards per row (adjust margin as needed) */
+  flex: 0 0 calc(50% - 20px); /* Four cards per row (adjust margin as needed) */
   margin: 10px;
   justify-content: center;
   padding: 1.5rem;
@@ -202,7 +202,7 @@ width: 40px;
 /* Path text */
 .folder-card p {
   font-size: 14px;
-  color: #777;
+  color: black;
 }
 /* sponser button */
 .sponsor-button {
@@ -263,40 +263,68 @@ width: 40px;
 
 #team-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
   gap: 20px;
+  height: 400px;
+  /* margin: 20px; */
+
 }
 
 .team-member {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #36d0ef;
-  border-radius: 10px;
+  background-color: whitesmoke;
+  border-radius: 20px;
+  /* border: solid; */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding: 20px;
-  background-image: linear-gradient(
-      to right,
-      rgb(128, 238, 244),
-      rgba(2, 151, 156, 0.995)
-    ),
-    url("/PROJECTS/MediGo/Assets 2/Medication\ Adherence\ 2.jpg");
+ /* background-color: gray; */
+  margin-left: 20px;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
+  transition: 0.5s;
+}
+.team-member:hover{
+  transform: scale(1.07);
 }
-
 .card {
-  background-color: #00ccff;
+  background-color: #ceedff;
   padding: 20px;
-  border-radius: 10px;
+  border-radius: 20px;
+  border-color: #3498db;
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 300px;
+  height: 200px;
+  align-items: center;
+  position: relative;
+}
+.card1 {
+  background-color: #fff0f0;
+  padding: 20px;
+  border-radius: 20px;
+  border-color: #3498db;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 300px;
+  align-items: center;
+  position: relative;
+}
+.card2 {
+  background-color: #fcedfe;
+  padding: 20px;
+  border-radius: 20px;
+  border-color: #3498db;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 300px;
   align-items: center;
   position: relative;
 }
-
 .image-div {
   flex: none;
   text-align: center;
@@ -316,14 +344,19 @@ width: 40px;
 .info-div h2 {
   margin: 10px 0 5px;
   font-size: 1.3em;
-  color: whitesmoke;
+  color: black;
 }
 
 .info-div p {
   margin: 5px 0;
   font-size: 0.8em;
   color: whitesmoke;
 }
+#team-grid1 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 15px;
+}
 
 .badge {
   position: absolute;
@@ -332,7 +365,7 @@ width: 40px;
   display: inline-block;
   padding: 2px 10px;
   border-radius: 20px;
-  font-size: 0.8em;
+  font-size: 1em;
 }
 
 .founder {
@@ -349,12 +382,38 @@ width: 40px;
   display: flex;
   flex-direction: column;
   margin-left: 20px;
+  font-size: large;
+}
+#social-links{
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+  font-size: XX-large;
+}
+#social-links a {
+  display: flex;
+  align-items: center;
+  color: black;
+  margin: 5px 0;
+  text-decoration: none;
 }
 
+
+#social-links a i {
+  margin-right: 5px;
+}
+
+#social-links a:hover {
+  color: #89d2fc;
+}
+ #group{
+  color: black;
+ }
+
 .social-links a {
   display: flex;
   align-items: center;
-  color: #ffffff;
+  color: black;
   margin: 5px 0;
   text-decoration: none;
 }
@@ -364,8 +423,18 @@ width: 40px;
 }
 
 .social-links a:hover {
-  color: #ffffff;
+  color: #89d2fc;
 }
  #group{
-  color: rgb(29, 129, 29);
+  color: black;
+ }
+ .image-div img{
+  height: 150px;
+  width: 150px;
  }
+ .image-div1 img{
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+ }
+
diff --git a/Official_Website/contributor.js b/Official_Website/contributor.js
@@ -15,7 +15,7 @@
 //   nMenu.classList.toggle("active");
 // }
 
-const cont = document.getElementById("team-grid");
+const cont = document.getElementById("team-grid1");
 const owner = "mdazfar2";
 const repoName = "HelpOps-Hub";
 
@@ -70,6 +70,7 @@ async function fetchAllContributors() {
       allContributors = allContributors.concat(contributorsData);
       pageNumber++;
     }
+    var cheak = 0;
     allContributors.forEach((contributor) => {
       if (contributor.login === owner) {
         return;
@@ -130,8 +131,8 @@ async function fetchAllContributors() {
       //   loginLink.appendChild(avatarImg);
 
       //   contributorCard.appendChild(loginLink);
-
-      cont.appendChild(contributorCard);
+      if (cheak > 0) cont.appendChild(contributorCard);
+      cheak++;
     });
   } catch (error) {
     console.error(error);

diff --git a/Official_Website/style.css b/Official_Website/style.css
@@ -159,8 +159,8 @@ width: 40px;
   background-color: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: 5px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
   transition: background-color 0.3s ease;
 }