Card by adamgiebl

1.card {
2  width: 230px;
3  border-radius: 20px;
4  background: #1b233d;
5  padding: 5px;
6  overflow: hidden;
7  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
8  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
9}
10
11.card:hover {
12  transform: scale(1.05);
13}
14
15.card .top-section {
16  height: 150px;
17  border-radius: 15px;
18  display: flex;
19  flex-direction: column;
20  background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);
21  position: relative;
22}
23
24.card .top-section .border {
25  border-bottom-right-radius: 10px;
26  height: 30px;
27  width: 130px;
28  background: white;
29  background: #1b233d;
30  position: relative;
31  transform: skew(-40deg);
32  box-shadow: -10px -10px 0 0 #1b233d;
33}
34
35.card .top-section .border::before {
36  content: "";
37  position: absolute;
38  width: 15px;
39  height: 15px;
40  top: 0;
41  right: -15px;
42  background: rgba(255, 255, 255, 0);
43  border-top-left-radius: 10px;
44  box-shadow: -5px -5px 0 2px #1b233d;
45}
46
47.card .top-section::before {
48  content: "";
49  position: absolute;
50  top: 30px;
51  left: 0;
52  background: rgba(255, 255, 255, 0);
53  height: 15px;
54  width: 15px;
55  border-top-left-radius: 15px;
56  box-shadow: -5px -5px 0 2px #1b233d;
57}
58
59.card .top-section .icons {
60  position: absolute;
61  top: 0;
62  width: 100%;
63  height: 30px;
64  display: flex;
65  justify-content: space-between;
66}
67
68.card .top-section .icons .logo {
69  height: 100%;
70  aspect-ratio: 1;
71  padding: 7px 0 7px 15px;
72}
73
74.card .top-section .icons .logo .top-section {
75  height: 100%;
76}
77
78.card .top-section .icons .social-media {
79  height: 100%;
80  padding: 8px 15px;
81  display: flex;
82  gap: 7px;
83}
84
85.card .top-section .icons .social-media .svg {
86  height: 100%;
87  fill: #1b233d;
88}
89
90.card .top-section .icons .social-media .svg:hover {
91  fill: white;
92}
93
94.card .bottom-section {
95  margin-top: 15px;
96  padding: 10px 5px;
97}
98
99.card .bottom-section .title {
100  display: block;
101  font-size: 17px;
102  font-weight: bolder;
103  color: white;
104  text-align: center;
105  letter-spacing: 2px;
106}
107
108.card .bottom-section .row {
109  display: flex;
110  justify-content: space-between;
111  margin-top: 20px;
112}
113
114.card .bottom-section .row .item {
115  flex: 30%;
116  text-align: center;
117  padding: 5px;
118  color: rgba(170, 222, 243, 0.721);
119}
120
121.card .bottom-section .row .item .big-text {
122  font-size: 12px;
123  display: block;
124  color: white;
125  font-weight: 700;
126}
127
128.card .bottom-section .row .item .regular-text {
129  font-size: 9px;
130}
131
132.card .bottom-section .row .item:nth-child(2) {
133  border-left: 1px solid rgba(255, 255, 255, 0.126);
134  border-right: 1px solid rgba(255, 255, 255, 0.126);
135}