Merge pull request PriyaGhosal#1899 from Son7c/main

Contributors page redesigned
PATILYASHH · Nov 5, 2024 · 0186072 · 0186072
2 parents 49b1754 + 7513da3
commit 0186072
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 39 deletions.
diff --git a/contributor/Contributors.css b/contributor/Contributors.css
@@ -2,12 +2,10 @@
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
   }
 
   .container {
     text-align: center;
-    background-color: #2193b0;
   }
 
   .title {
@@ -46,34 +44,28 @@
     flex-wrap: wrap;
     gap: 40px;
     padding: 20px;
-    display: grid;
-    grid-template-columns: repeat(7, minmax(100px,5fr));
+    display: flex;
   }
 
   .contributor-card {
-    /* width: auto;
-    height: auto; */
-    min-width: 200px;
     min-height: 300px;
     display: flex;
     justify-content: center; 
     position: relative;
-    overflow: hidden;
     max-width: calc(55% - 16px);
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #7cb9ff;
-    border: 1px solid #7cb9ff;
+    background-color: #253745;
     border-radius: 8px;
-    box-shadow: 0 0px 8px rgb(40, 119, 255);
     padding: 16px;
     transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
     text-decoration: none;
     color: inherit;
     /* margin-bottom: 16px;  */
     word-wrap: wrap;
     transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+    width:14%;
 
   }
 
@@ -89,25 +81,6 @@
     cursor: pointer;
     transform: translateZ(50px); /* Moves the card forward in 3D space */
 
-  .contributor-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(132deg, #76ABAE 50%, rgb(206, 206, 206) 51%);
-    /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translate(-100%, -100%);
-    opacity: 0;
-    z-index: -1;
-  }
-
-  .contributor-card:hover::before {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
 
   .contributor-card img {
     border-radius: 50%;
@@ -140,7 +113,6 @@
 
   .contributor-card p {
     font-size: 1.2em;
-    color: #040404;
     position: relative;
     z-index: 1;
     transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
@@ -162,7 +134,7 @@
   }
 
   body {
-    background-color: #f8f9fa;
+    background-color:#2c394c;
     color: hsl(0, 0%, 100%);
   }
 
@@ -434,7 +406,7 @@
   }
 
   body {
-    background-color: #2193b0;    
+    background-color: #021024;    
     overflow-x: hidden;
     margin: 0;
 
@@ -569,10 +541,11 @@
 .contributor-stats {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 3rem 0;
+  padding: 2rem 2rem;
   text-align: center;
-  background-color: #2193b0;
-
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 25px;
+  margin-top: 60px;
 }
 
 .contributor-stats h2 {
@@ -587,8 +560,7 @@
 }
 
 .contributor-stat-card {
-  background-color: #7cb9ff;
-  border: 1px solid #2487d4;
+  background-color: rgba(0,0,0,0.4);
   border-radius: 10px;
   padding: 1.5rem;
   text-align: center;
@@ -606,4 +578,10 @@
 
 .contributor-stat-card p {
   color: #ffffff;
+}
+
+div#contributors{
+  gap: 2rem 7rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
diff --git a/contributor/Contributors.html b/contributor/Contributors.html
@@ -60,8 +60,46 @@ <h3>348</h3>
 
   <div class="container">
     <h1 class="title">Our Contributors</h1>
-    <div id="contributors" class="contributors-grid"></div>
   </div>
+  <div id="contributors" class="contributors-grid"></div>
+  s<style>
+    @property --angle{
+      syntax: "<angle>";
+      initial-value: 0deg;
+      inherits: false;
+    }
+
+    .contributor-card::after, .contributor-card::before{
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      z-index: -1;
+      padding: 4px;
+      top: -1.5%;
+      border-radius: 10px;
+    }
+
+    .contributor-card:hover::before,
+    .contributor-card:hover::after {
+      animation: spin 0.75s linear infinite;
+      background-image: conic-gradient(from var(--angle),#00a5e3,#8dd7bf,#ff96c5,#ff5768,#ffbf65,#00a5e3)
+    }
+
+    .contributor-card::before{
+      filter: blur(3rem);
+      opacity: 0.5;
+    }
+
+    @keyframes spin{
+      from{
+        --angle:0deg;
+      }
+      to{
+        --angle:360deg;
+      }
+    }
+  </style>
 
   <script src="./contributors.js"></script>