diff --git a/contributors.html b/contributors.html
index fc0f15c..3d2aee7 100644
--- a/contributors.html
+++ b/contributors.html
@@ -42,6 +42,7 @@
gap: 30px;
padding: 0 10px;
}
+
.contributor-card {
background: #ffffff;
border-radius: 12px;
@@ -50,18 +51,25 @@
text-align: center;
overflow: hidden;
padding: 20px;
- position: relative;
}
+
.contributor-card::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(219, 127, 219, 0.2);
- border-radius: 12px;
- z-index: 0;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(133deg, #de25b6 50%, #f4caff 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:hover {
transform: translateY(-10px);
@@ -72,23 +80,36 @@
width: 120px;
height: 120px;
margin-top: 15px;
- border: 3px solid rgb(219, 127, 219);
+ border: 3px solid rgba(213, 6, 213, 0.87);
z-index: 1;
position: relative;
+ transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
+ }
+ .contributor-card:hover img {
+ border: 2px solid rgb(153, 0, 255);
+ box-shadow: -1px 2px 27px rgb(255, 4, 184);
}
+
.contributor-card h3 {
- margin: 15px 0 5px;
- font-size: 1.6em;
- color: rgb(219, 127, 219);
- z-index: 1;
- position: relative;
+ 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;
}
- .contributor-card p {
- margin: 0 0 10px;
- color: #757575;
- font-size: 1.1em;
- z-index: 1;
- position: relative;
+
+ 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;
+ margin: 0 0 10px;
+ }
+
+ .contributor-card:hover h3 {
+ text-shadow: 1px 1px 2px rgb(4, 230, 230), 0 0 0.2em rgb(196, 0, 210), 0 0 0.8em rgb(0, 14, 108);
+ color: white;
}
.contributor-card a {
display: inline-block;
@@ -105,6 +126,9 @@
background: rgba(219, 127, 219, 0.8);
transform: scale(1.05);
}
+ .contributor-card:hover a {
+ background: rgb(200, 72, 200);
+ }
#progress-container {
width: 100%;
height: 5px;