Card by IWhat1

1.container {
2  height: 294px;
3  width: 240px;
4  color: red;
5  perspective: 800px;
6  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7}
8
9.card {
10  width: 100%;
11  height: 100%;
12  background: black;
13  border-radius: 2rem;
14  position: relative;
15  transition: transform 1500ms;
16  transform-style: preserve-3d;
17}
18
19.card-top {
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  height: 10%;
24  position: absolute;
25  width: 50%;
26  background-color: transparent;
27  border: 2px solid black;
28  top: 0;
29  border-top: none;
30  border-radius: 0 0 1rem 1rem;
31  box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);
32}
33
34.card-top-para {
35  font-size: 16px;
36  font-weight: bold;
37}
38
39.container:hover > .card {
40  cursor: pointer;
41  transform: rotateX(180deg) rotateZ(-180deg);
42}
43
44.front,
45.back {
46  height: 100%;
47  width: 100%;
48  border-radius: 2rem;
49  box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.7);
50  position: absolute;
51  backface-visibility: hidden;
52  display: flex;
53  flex-direction: column;
54  align-items: center;
55  justify-content: center;
56  gap: 20px;
57}
58
59.back {
60  background-color: black;
61  transform: rotateX(180deg) rotateZ(-180deg);
62}
63
64.heading {
65  font-size: 22px;
66  font-weight: bold;
67}
68
69.follow {
70  font-size: 16px;
71  font-weight: 500;
72}
73
74.icons {
75  display: flex;
76  flex-direction: row;
77  gap: 20px;
78  margin-top: 20px;
79}
80