Card by Sourcesketch
#e8e8e8
1.card { 2 display: flex; 3 height: 280px; 4 width: 200px; 5 background-color: #2b223f; 6 border-radius: 10px; 7 box-shadow: -1rem 0 3rem #00000044; 8 margin-left: -80px; 9 transition: 0.4s ease-out; 10 position: relative; 11 left: 0px; 12} 13 14.card:not(:first-child) { 15 margin-left: -50px; 16} 17 18.card:hover { 19 transform: translateY(-20px); 20 transition: 0.4s ease-out; 21 text-shadow: 2px 2px 8px #6e5b94; 22} 23 24.card:hover ~ .card { 25 position: relative; 26 left: 50px; 27 transform: rotateX(-15deg) rotateY(10deg); 28 transition: 0.4s ease-out; 29} 30 31.title-1 { 32 color: #ffffff; 33 font-size: 28px; 34 font-weight: 800; 35 position: absolute; 36 left: 20px; 37 top: 15px; 38} 39 40.btn { 41 position: absolute; 42 top: 195px; 43 margin: 0 20px; 44 width: 120px; 45 height: 32px; 46 border-radius: 8px; 47 border: none; 48 background-color: #4a2f7c; 49 color: #fff; 50 transition: 0.4s ease-out; 51} 52 53.btn:hover { 54 transition: 0.4s ease-out; 55 background-color: #8a4ff8; 56 color: #ffffff; 57 box-shadow: 0px 0px 20px rgba(157, 71, 255, 0.5), 58 0px 5px 5px -1px rgba(163, 58, 233, 0.25), 59 inset 4px 4px 8px rgba(219, 175, 255, 0.5), 60 inset -4px -4px 8px rgba(137, 19, 216, 0.35); 61} 62 63.bar { 64 position: relative; 65 top: 250px; 66 67 height: 5px; 68 width: 100%; 69} 70 71.emptybar { 72 background-color: #201c29; 73 width: 100%; 74 height: 100%; 75} 76 77.filledbar { 78 position: absolute; 79 top: 0px; 80 z-index: 3; 81 width: 0px; 82 height: 100%; 83 background: #d059ff; 84 background: linear-gradient(90deg, #6831cfab, #a777ff 100%); 85 transition: 0.6s ease-out; 86} 87 88.card:hover .filledbar { 89 width: 100%; 90 transition: 0.4s ease-out; 91} 92 93.content { 94 position: absolute; 95 padding: 20px; 96 top: 60px; 97 color: #eae0fd; 98 font-size: 0.7rem; 99} 100 101.stroke { 102 stroke: white; 103 stroke-dasharray: 360; 104 stroke-dashoffset: 360; 105 transition: 0.6s ease-out; 106} 107 108.card:hover .stroke { 109 stroke-dashoffset: 100; 110 transition: 0.6s ease-out; 111} 112
548 views
548 views
MIT License