Card by Admin12121

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