Card by Rodrypaladin
#e8e8e8
1.card { 2 width: 300px; 3 padding: 10px; 4 background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7); 5 background-size: 200% 200%; 6 border-radius: 12px; 7} 8 9.card-int { 10 position: relative; 11 height: 100%; 12 overflow: hidden; 13 font-size: 14px; 14 border-radius: 6px; 15 background-color: white; 16} 17 18.img { 19 width: 100%; 20 height: 175px; 21 background-color: pink; 22} 23 24.title { 25 font-weight: bold; 26 font-size: 16px; 27 margin-bottom: 10px; 28} 29 30.card-data { 31 padding: 20px; 32 font-size: 14px; 33} 34 35.card__span { 36 font-family: 'Lucida Sans' sans-serif; 37 font-size: 11px; 38 position: absolute; 39 top: 10px; 40 left: 10px; 41 background-color: white; 42 padding: 5px 10px; 43 border-radius: 15px; 44} 45 46button { 47 width: 100%; 48 margin-top: 15px; 49 background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7); 50 background-size: 200% 200%; 51 border: none; 52 padding: 8px 10px; 53 color: white; 54 font-size: 14px; 55 font-weight: bold; 56 border-radius: 5px; 57 transition: transform 0.1s ease-in; 58} 59 60button:active { 61 transform: translateY(3px); 62} 63 64.card:hover, button:hover { 65 animation: gradient 0.8s ease-in 1; 66} 67 68@keyframes gradient { 69 0% { 70 background-position: 200% 200%; 71 } 72 73 100% { 74 background-position: 400% 400%; 75 } 76} 77
642 views
642 views
MIT License