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;