Card by Yaya12085

1.card {
2  user-select: none;
3  position: relative;
4  width: 300px;
5  background: #ffffff;
6  background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);
7  background-size: 100% 1.2rem;
8  color: #000;
9  display: flex;
10  flex-direction: column;
11  padding: 1.4rem 0.5rem 0.3rem 4rem;
12  border-radius: 10px;
13  font-family: cursive;
14}
15
16.card::before,
17.card::after {
18  position: absolute;
19  content: "";
20  bottom: 10px;
21  width: 40%;
22  height: 10px;
23  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
24  z-index: -1;
25  transition: all 0.3s ease;
26}
27
28.card::before {
29  left: 15px;
30  transform: skew(-5deg) rotate(-5deg);
31}
32
33.card::after {
34  right: 15px;
35  transform: skew(5deg) rotate(5deg);
36}
37
38.card:hover::before,
39.card:hover::after {
40  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
41}
42
43.heading {
44  color: red;
45  font-size: 21px;
46  line-height: 21px;
47  text-align: center;
48}
49
50.content {
51  display: flex;
52  flex-direction: column;
53  justify-content: space-between;
54  gap: 10px;
55}
56
57.content::before {
58  position: absolute;
59  content: "";
60  border-left: 1px solid #d88;
61  height: 100%;
62  top: 0;
63  left: 3.3rem;
64}
65
66.content .item {
67  position: relative;
68  display: flex;
69  align-items: center;
70  padding: 10px;
71  padding-left: 20px;
72  color: #04176d;
73  font-size: 15px;
74}
75
76.content .item::before {
77  position: absolute;
78  content: "";
79  left: 0;
80  width: 6px;
81  height: 6px;
82  background-color: #04176d;
83  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
84}
85
86.content .item:nth-child(2)::before {
87  border-radius: 55% 45% 73% 27% / 80% 30% 70% 20%;
88}
89
90.content .item:nth-child(3)::before {
91  border-radius: 28% 72% 18% 82% / 70% 30% 70% 30%;
92}
93
94.content .item::after {
95  position: absolute;
96  content: "";
97  left: 0;
98  width: 0;
99  height: 1px;
100  background-color: #04176d;
101  transition: width .3s ease-in-out;
102}
103
104.content .item:hover::after {
105  width: 100%;
106}
107
108.content .item svg {
109  margin-right: 10px;
110  width: 20px;
111}
112
113.card button {
114  all: unset;
115  position: relative;
116  align-self: flex-end;
117  padding-bottom: 8px;
118  color: #04176d;
119}
120
121.card button::before {
122  content: "";
123  position: absolute;
124  bottom: -8px;
125  left: 0;
126  height: 7px;
127  width: 100% !important;
128  border: solid 4px #04176d;
129  border-color: #04176d transparent transparent transparent;
130  border-radius: 50%;
131}