Card by VassoD

1.flip-card {
2  background-color: transparent;
3  width: 240px;
4  height: 154px;
5  perspective: 1000px;
6  color: white;
7}
8
9.heading_8264 {
10  position: absolute;
11  font-size: 1em;
12  top: 0.75em;
13  left: 1em;
14  font-weight: 600;
15  text-shadow: -0.2px -0.2px 0.2px white, 0.2px -0.2px 0.2px gray,
16    -0.2px 0.2px 0.2px white, 0.2px 0.2px 0.2px gray;
17}
18
19.logo {
20  position: absolute;
21  top: 6.8em;
22  left: 11.7em;
23}
24
25.chip {
26  position: absolute;
27  top: 2.3em;
28  left: 1.5em;
29}
30
31.contactless {
32  position: absolute;
33  top: 3.5em;
34  left: 12.4em;
35}
36
37.number {
38  position: absolute;
39  font-weight: 600;
40  letter-spacing: 1px;
41  font-size: 0.75em;
42  top: 7em;
43  left: 1.5em;
44}
45
46.date_8264 {
47  position: absolute;
48  font-weight: 600;
49  font-size: 0.75em;
50  top: 9em;
51  left: 1.5em;
52  letter-spacing: 2px;
53}
54
55.cvc_number {
56  position: absolute;
57  font-weight: 600;
58  font-size: 0.75em;
59  top: 9em;
60  left: 8.5em;
61  letter-spacing: 2px;
62}
63
64.cvc {
65  position: absolute;
66  font-weight: 600;
67  font-size: 5px;
68  top: 6.9rem;
69  left: 8rem;
70}
71
72.exp {
73  position: absolute;
74  font-weight: 600;
75  font-size: 5px;
76  top: 6.9rem;
77  left: 3.8rem;
78}
79
80.name {
81  position: absolute;
82  font-weight: 400;
83  font-size: 8.5px;
84  top: 15em;
85  left: 2em;
86  color: #bea35c;
87}
88
89.strip {
90  position: absolute;
91  background-color: white;
92  width: 15em;
93  height: 2.25em;
94  top: 0;
95  border-radius: 1rem 1rem 0 0;
96}
97
98.flip-card-inner {
99  position: relative;
100  width: 100%;
101  height: 100%;
102  text-align: center;
103  transition: transform 0.8s;
104  transform-style: preserve-3d;
105}
106
107.flip-card:hover .flip-card-inner {
108  transform: rotateY(180deg);
109}
110
111.flip-card-front,
112.flip-card-back {
113  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
114  position: absolute;
115  display: flex;
116  flex-direction: column;
117  justify-content: center;
118  width: 100%;
119  height: 100%;
120  -webkit-backface-visibility: hidden;
121  backface-visibility: hidden;
122  border-radius: 1rem;
123}
124
125.flip-card-front {
126  background: linear-gradient(135deg, #edcb78, #f7e4b2, #fee08b);
127  border: 1px solid white;
128}
129
130.flip-card-back {
131  background: linear-gradient(135deg, #fee08b, #f7e4b2, #edcb78);
132  transform: rotateY(180deg);
133}
134