diff --git a/src/Pages/Contributors.css b/src/Pages/Contributors.css index 9ecac62..a33092e 100644 --- a/src/Pages/Contributors.css +++ b/src/Pages/Contributors.css @@ -31,46 +31,93 @@ } .contributor-card { + position: relative; width: 100%; - max-width: 25%; + max-width: 25%; display: flex; flex-direction: column; align-items: center; - background-color: rgb(0, 0, 85); - border: 2px solid #6969ff; + background-color: rgb(0,0,85); + border: 1px solid #6969ff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1rem; - transition: transform 0.3s ease, box-shadow 0.3s ease; + overflow: hidden; + transition: transform 0.4s ease, box-shadow 0.3s ease; } .contributor-card:hover { transform: scale(1.05); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 6px rgba(5, 205, 208, 0.752); +} + +.contributor-card:hover p { + text-shadow: 1px 1px 2px rgb(0, 225, 255), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235); + color: rgb(0, 0, 0); + font-weight: 500; +} + +.contributor-card:hover h2 { + text-shadow: 1px 1px 2px rgba(237, 9, 176, 0.926), 0 0 0.2em rgb(0, 191, 255), 0 0 0.8em rgb(135, 206, 235); + color: white; + font-size: 1.04rem; + font-weight: 600; + text-decoration: wavy; +} + +.contributor-card:hover .contributor-avatar { + border: 3.5px solid #89e6f0; + width: 5.2rem; + box-shadow: -2px 4px 10px 1px rgba(1, 41, 218, 0.75); + height: 5.2rem; } +.contributor-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(152deg, #0077b6 50%, #023e8a 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-link { display: block; } .contributor-avatar { - width: 5rem; - height: 5rem; + width: 5rem; + height: 5rem; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; - border: 2.5px solid #9e9eff; + border: 2px solid #00b4d8; + transition: border 0.4s ease-in-out, height 0.4s ease-in-out, width 0.4s ease-in-out, box-shadow 0.3s ease-in-out; } + .contributor-name { - font-size: 1rem; - font-weight: 500; + font-size: 1rem; + font-weight: 600; color: #f3f4f6; margin-bottom: 0.5rem; + transition: text-shadow 0.4s ease-in-out, font-size 0.5s ease-in-out, text-decoration 0.4s ease-in-out; } .contributor-contributions { color: #d1d5db; + transition: text-shadow 0.4s ease-in-out; } /* Media Queries for Responsiveness */