Card by ahmed150up2

1.main {
2  background-color: white;
3  padding: 1em;
4  padding-bottom: 1.1em;
5  border-radius: 15px;
6  margin: 1em;
7}
8
9.loader {
10  display: flex;
11  flex-direction: row;
12  height: 4em;
13  padding-left: 1em;
14  padding-right: 1em;
15  transform: rotate(180deg);
16  justify-content: right;
17  border-radius: 10px;
18  transition: .4s ease-in-out;
19}
20
21.loader:hover {
22  cursor: pointer;
23  background-color: lightgray;
24}
25
26.currentplaying {
27  display: flex;
28  margin: 1em;
29}
30
31.soundcloud {
32  width: 50px;
33  height: 50px;
34  margin-right: 0.6em;
35}
36
37.heading {
38  color: black;
39  font-size: 1.1em;
40  font-weight: bold;
41  align-self: center;
42}
43
44.loading {
45  display: flex;
46  margin-top: 1em;
47  margin-left: 0.3em;
48}
49
50.load {
51  width: 2px;
52  height: 33px;
53  background-color: #ff8800;
54  animation: 1s move6 infinite;
55  border-radius: 5px;
56  margin: 0.1em;
57}
58
59.load:nth-child(1) {
60  animation-delay: 0.2s;
61}
62
63.load:nth-child(2) {
64  animation-delay: 0.4s;
65}
66
67.load:nth-child(3) {
68  animation-delay: 0.6s;
69}
70
71.play {
72  position: relative;
73  left: 0.35em;
74  height: 1.6em;
75  width: 1.6em;
76  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
77  background-color: black;
78  transform: rotate(-90deg);
79  align-self: center;
80  margin-top: 0.7em;
81  justify-self: center;
82}
83
84.albumcover {
85  position: relative;
86  margin-right: 1em;
87  height: 40px;
88  width: 40px;
89  background-color: rgb(233, 232, 232);
90  align-self: center;
91  border-radius: 5px;
92}
93
94.song {
95  position: relative;
96  transform: rotate(180deg);
97  margin-right: 1em;
98  color: black;
99  align-self: center;
100}
101
102.artist {
103  font-size: 0.6em;
104}
105
106@keyframes move6 {
107  0% {
108    height: 0.2em;
109  }
110
111  25% {
112    height: 0.7em;
113  }
114
115  50% {
116    height: 1.5em;
117  }
118
119  100% {
120    height: 0.2em;
121  }
122}