Card by Praashoo7

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  letter-spacing: .2em;
12  font-size: 0.5em;
13  top: 2em;
14  left: 18.6em;
15}
16
17.logo {
18  position: absolute;
19  top: 6.8em;
20  left: 11.7em;
21}
22
23.chip {
24  position: absolute;
25  top: 2.3em;
26  left: 1.5em;
27}
28
29.contactless {
30  position: absolute;
31  top: 3.5em;
32  left: 12.4em;
33}
34
35.number {
36  position: absolute;
37  font-weight: bold;
38  font-size: .6em;
39  top: 8.3em;
40  left: 1.6em;
41}
42
43.valid_thru {
44  position: absolute;
45  font-weight: bold;
46  top: 635.8em;
47  font-size: .01em;
48  left: 140.3em;
49}
50
51.date_8264 {
52  position: absolute;
53  font-weight: bold;
54  font-size: 0.5em;
55  top: 13.6em;
56  left: 3.2em;
57}
58
59.name {
60  position: absolute;
61  font-weight: bold;
62  font-size: 0.5em;
63  top: 16.1em;
64  left: 2em;
65}
66
67.strip {
68  position: absolute;
69  background-color: black;
70  width: 15em;
71  height: 1.5em;
72  top: 2.4em;
73  background: repeating-linear-gradient(
74    45deg,
75    #303030,
76    #303030 10px,
77    #202020 10px,
78    #202020 20px
79  );
80}
81
82.mstrip {
83  position: absolute;
84  background-color: rgb(255, 255, 255);
85  width: 8em;
86  height: 0.8em;
87  top: 5em;
88  left: .8em;
89  border-radius: 2.5px;
90}
91
92.sstrip {
93  position: absolute;
94  background-color: rgb(255, 255, 255);
95  width: 4.1em;
96  height: 0.8em;
97  top: 5em;
98  left: 10em;
99  border-radius: 2.5px;
100}
101
102.code {
103  font-weight: bold;
104  text-align: center;
105  margin: .2em;
106  color: black;
107}
108
109.flip-card-inner {
110  position: relative;
111  width: 100%;
112  height: 100%;
113  text-align: center;
114  transition: transform 0.8s;
115  transform-style: preserve-3d;
116}
117
118.flip-card:hover .flip-card-inner {
119  transform: rotateY(180deg);
120}
121
122.flip-card-front, .flip-card-back {
123  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
124  position: absolute;
125  display: flex;
126  flex-direction: column;
127  justify-content: center;
128  width: 100%;
129  height: 100%;
130  -webkit-backface-visibility: hidden;
131  backface-visibility: hidden;
132  border-radius: 1rem;
133}
134
135.flip-card-front {
136  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
137  background-color: #171717;
138}
139
140.flip-card-back {
141  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
142  background-color: #171717;
143  transform: rotateY(180deg);
144}