Card by mirbasit01

1.card {
2  width: 330px;
3  height: 370px;
4  padding: 20px;
5  color: white;
6  background: linear-gradient(#212121, #212121) padding-box,
7    linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;
8  border: 2px solid transparent;
9  border-radius: 8px;
10  display: flex;
11  flex-direction: column;
12  cursor: pointer;
13  transform-origin: top bottom;
14  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
15}
16
17.card .main-content {
18  flex: 1;
19}
20
21.card .header span:first-child {
22  font-weight: 600;
23  color: #717171;
24  margin-right: 4px;
25}
26
27.card .heading {
28  font-size: 24px;
29  margin: 24px 0 16px;
30  font-weight: 600;
31}
32
33.card .categories {
34  display: flex;
35  gap: 10px;
36}
37
38.card .categories span {
39  background-color: #0a89a8;
40  padding: 4px 8px;
41  font-weight: 600;
42  text-transform: uppercase;
43  font-size: 12px;
44  border-radius: 50em;
45}
46
47.card .footer {
48  font-weight: 600;
49  color: #717171;
50  margin-right: 4px;
51}
52
53.card:hover {
54  rotate: -6deg;
55}
56