Card by Javierrocadev

1.temporary__storage {
2/*delete this*/
3  width: 350px;
4  height: 350px;
5  background: #1b1a1a;
6  border-radius: 15px;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10}
11
12.card {
13  width: 320px;
14  height: 300px;
15  background: #1b1a1a;
16  position: relative;
17  color: #e6e6ea;
18  display: flex;
19  flex-direction: column;
20  gap: 10px;
21}
22
23.image {
24  width: 100%;
25  height: 180px;
26  position: absolute;
27  background-color: rgb(144, 197, 47);
28  cursor: pointer;
29  transition: all .2s ease;
30}
31
32.image::before {
33  content: "LIVE";
34  position: absolute;
35  top: 7px;
36  left: 7px;
37  font-weight: 900;
38  font-size: .8em;
39  background-color: rgb(228, 33, 33);
40  border-radius: 5px;
41  padding: 3px 5px;
42}
43
44.image::after {
45  content: "102.2k viewers";
46  position: absolute;
47  bottom: 7px;
48  left: 7px;
49  font-weight: 300;
50  font-size: .7em;
51  background-color: rgb(59, 53, 53);
52  border-radius: 2px;
53  padding: 3px 5px;
54}
55
56.image__overlay {
57  width: 100%;
58  height: 180px;
59}
60
61.image:hover {
62  transform: translate(8px, -8px);
63  box-shadow: -1px 1px 0px 0px violet,-2px 2px 0px 0px violet,-3px 3px 0px 0px violet,-4px 4px 0px 0px violet,-5px 5px 0px 0px violet,-6px 6px 0px 0px violet,-7px 7px 0px 0px violet,-8px 8px 0px 0px violet;
64}
65
66.avatar {
67  width: 40px;
68  height: 40px;
69  border-radius: 50%;
70  cursor: pointer;
71  background-image: linear-gradient(to right top, #371f05, #654607, #8b7600, #a4ae00, #a8eb12);
72}
73
74.content {
75  display: flex;
76  flex-direction: row;
77  gap: 10px;
78}
79
80.content__text {
81  display: flex;
82  flex-direction: column;
83  gap: 5px;
84}
85
86.content__body {
87  display: flex;
88  flex-direction: column;
89}
90
91.stream__title {
92  font-weight: 900;
93  width: 260px;
94  white-space: nowrap;
95  text-overflow: ellipsis;
96  overflow: hidden;
97  cursor: pointer;
98}
99
100.event {
101  cursor: pointer;
102}
103
104.streamer__name, .event {
105  font-size: .8em;
106  font-weight: 400;
107  color: rgb(216, 213, 213);
108}
109
110.categories__btn {
111  text-decoration: none;
112  color: rgb(216, 213, 213);
113  font-size: .8em;
114  background-color: rgb(73, 71, 71);
115  padding: 3px 10px;
116  border-radius: 15px;
117}
118
119.stream__title:hover, .event:hover {
120  color: #9f7cd3;
121}
122
123.categories__btn:hover {
124  background-color: rgb(79, 79, 79);
125}