Card by Pawelitto
#e8e8e8
1.container { 2 background-color: #ffffff; 3 display: flex; 4 width: 270px; 5 height: 120px; 6 position: relative; 7 border-radius: 6px; 8 transition: 0.3s ease-in-out; 9} 10 11.container:hover { 12 transform: scale(1.03); 13} 14 15.container:hover .left-side { 16 width: 100%; 17} 18 19.left-side { 20 background-color: #5de2a3; 21 width: 130px; 22 height: 120px; 23 border-radius: 4px; 24 position: relative; 25 display: flex; 26 justify-content: center; 27 align-items: center; 28 cursor: pointer; 29 transition: 0.3s; 30 flex-shrink: 0; 31 overflow: hidden; 32} 33 34.right-side { 35 display: flex; 36 align-items: center; 37 overflow: hidden; 38 cursor: pointer; 39 justify-content: space-between; 40 white-space: nowrap; 41 transition: 0.3s; 42} 43 44.right-side:hover { 45 background-color: #f9f7f9; 46} 47 48.arrow { 49 width: 20px; 50 height: 20px; 51 margin-right: 20px; 52} 53 54.new { 55 font-size: 23px; 56 font-family: "Lexend Deca", sans-serif; 57 margin-left: 20px; 58} 59 60.card { 61 width: 70px; 62 height: 46px; 63 background-color: #c7ffbc; 64 border-radius: 6px; 65 position: absolute; 66 display: flex; 67 z-index: 10; 68 flex-direction: column; 69 align-items: center; 70 -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72); 71 -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72); 72 -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72); 73} 74 75.card-line { 76 width: 65px; 77 height: 13px; 78 background-color: #80ea69; 79 border-radius: 2px; 80 margin-top: 7px; 81} 82 83@media only screen and (max-width: 480px) { 84 .container { 85 transform: scale(0.7); 86 } 87 88 .container:hover { 89 transform: scale(0.74); 90 } 91 92 .new { 93 font-size: 18px; 94 } 95} 96 97.buttons { 98 width: 8px; 99 height: 8px; 100 background-color: #379e1f; 101 box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e; 102 border-radius: 50%; 103 margin-top: 5px; 104 transform: rotate(90deg); 105 margin: 10px 0 0 -30px; 106} 107 108.container:hover .card { 109 animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both; 110} 111 112.container:hover .post { 113 animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both; 114} 115 116@keyframes slide-top { 117 0% { 118 -webkit-transform: translateY(0); 119 transform: translateY(0); 120 } 121 122 50% { 123 -webkit-transform: translateY(-70px) rotate(90deg); 124 transform: translateY(-70px) rotate(90deg); 125 } 126 127 60% { 128 -webkit-transform: translateY(-70px) rotate(90deg); 129 transform: translateY(-70px) rotate(90deg); 130 } 131 132 100% { 133 -webkit-transform: translateY(-8px) rotate(90deg); 134 transform: translateY(-8px) rotate(90deg); 135 } 136} 137 138.post { 139 width: 63px; 140 height: 75px; 141 background-color: #dddde0; 142 position: absolute; 143 z-index: 11; 144 bottom: 10px; 145 top: 120px; 146 border-radius: 6px; 147 overflow: hidden; 148} 149 150.post-line { 151 width: 47px; 152 height: 9px; 153 background-color: #545354; 154 position: absolute; 155 border-radius: 0px 0px 3px 3px; 156 right: 8px; 157 top: 8px; 158} 159 160.post-line:before { 161 content: ""; 162 position: absolute; 163 width: 47px; 164 height: 9px; 165 background-color: #757375; 166 top: -8px; 167} 168 169.screen { 170 width: 47px; 171 height: 23px; 172 background-color: #ffffff; 173 position: absolute; 174 top: 22px; 175 right: 8px; 176 border-radius: 3px; 177} 178 179.numbers { 180 width: 12px; 181 height: 12px; 182 background-color: #838183; 183 box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183; 184 border-radius: 2px; 185 position: absolute; 186 transform: rotate(90deg); 187 left: 25px; 188 top: 52px; 189} 190 191.numbers-line2 { 192 width: 12px; 193 height: 12px; 194 background-color: #aaa9ab; 195 box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab; 196 border-radius: 2px; 197 position: absolute; 198 transform: rotate(90deg); 199 left: 25px; 200 top: 68px; 201} 202 203@keyframes slide-post { 204 50% { 205 -webkit-transform: translateY(0); 206 transform: translateY(0); 207 } 208 209 100% { 210 -webkit-transform: translateY(-70px); 211 transform: translateY(-70px); 212 } 213} 214 215.dollar { 216 position: absolute; 217 font-size: 16px; 218 font-family: "Lexend Deca", sans-serif; 219 width: 100%; 220 left: 0; 221 top: 0; 222 color: #4b953b; 223 text-align: center; 224} 225 226.container:hover .dollar { 227 animation: fade-in-fwd 0.3s 1s backwards; 228} 229 230@keyframes fade-in-fwd { 231 0% { 232 opacity: 0; 233 transform: translateY(-5px); 234 } 235 236 100% { 237 opacity: 1; 238 transform: translateY(0); 239 } 240} 241
663 views
Variation of acard
MIT License