1<div class="card">
  2  <div class="top">
  3    <div class="pfp">
  4      <div class="playing">
  5        <div class="greenline line-1"></div>
  6        <div class="greenline line-2"></div>
  7        <div class="greenline line-3"></div>
  8        <div class="greenline line-4"></div>
  9        <div class="greenline line-5"></div>
 10      </div>
 11    </div>
 12    <div class="texts">
 13      <p class="title-1">Soldiers Rage</p>
 14      <p class="title-2">Tha Mechanic</p>
 15    </div>
 16  </div>
 17 
 18  <div class="controls">
 19    <svg
 20      xmlns="http://www.w3.org/2000/svg"
 21      viewBox="0 0 24 24"
 22      fill="currentColor"
 23      height="20"
 24      width="24"
 25      class="volume_button"
 26    >
 27      <path
 28        clip-rule="evenodd"
 29        d="M11.26 3.691A1.2 1.2 0 0 1 12 4.8v14.4a1.199 1.199 0 0 1-2.048.848L5.503 15.6H2.4a1.2 1.2 0 0 1-1.2-1.2V9.6a1.2 1.2 0 0 1 1.2-1.2h3.103l4.449-4.448a1.2 1.2 0 0 1 1.308-.26Zm6.328-.176a1.2 1.2 0 0 1 1.697 0A11.967 11.967 0 0 1 22.8 12a11.966 11.966 0 0 1-3.515 8.485 1.2 1.2 0 0 1-1.697-1.697A9.563 9.563 0 0 0 20.4 12a9.565 9.565 0 0 0-2.812-6.788 1.2 1.2 0 0 1 0-1.697Zm-3.394 3.393a1.2 1.2 0 0 1 1.698 0A7.178 7.178 0 0 1 18 12a7.18 7.18 0 0 1-2.108 5.092 1.2 1.2 0 1 1-1.698-1.698A4.782 4.782 0 0 0 15.6 12a4.78 4.78 0 0 0-1.406-3.394 1.2 1.2 0 0 1 0-1.698Z"
 30        fill-rule="evenodd"
 31      ></path>
 32    </svg>
 33    <div class="volume">
 34      <div class="slider">
 35        <div class="green"></div>
 36      </div>
 37      <div class="circle"></div>
 38    </div>
 39    <svg
 40      xmlns="http://www.w3.org/2000/svg"
 41      viewBox="0 0 24 24"
 42      fill="currentColor"
 43      height="24"
 44      width="24"
 45    >
 46      <path
 47        clip-rule="evenodd"
 48        d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm.848-12.352a1.2 1.2 0 0 0-1.696-1.696l-3.6 3.6a1.2 1.2 0 0 0 0 1.696l3.6 3.6a1.2 1.2 0 0 0 1.696-1.696L11.297 13.2H15.6a1.2 1.2 0 1 0 0-2.4h-4.303l1.551-1.552Z"
 49        fill-rule="evenodd"
 50      ></path>
 51    </svg>
 52    <svg
 53      xmlns="http://www.w3.org/2000/svg"
 54      viewBox="0 0 24 24"
 55      fill="currentColor"
 56      height="24"
 57      width="24"
 58    >
 59      <path
 60        clip-rule="evenodd"
 61        d="M21.6 12a9.6 9.6 0 1 1-19.2 0 9.6 9.6 0 0 1 19.2 0ZM8.4 9.6a1.2 1.2 0 1 1 2.4 0v4.8a1.2 1.2 0 1 1-2.4 0V9.6Zm6-1.2a1.2 1.2 0 0 0-1.2 1.2v4.8a1.2 1.2 0 1 0 2.4 0V9.6a1.2 1.2 0 0 0-1.2-1.2Z"
 62        fill-rule="evenodd"
 63      ></path>
 64    </svg>
 65    <svg
 66      xmlns="http://www.w3.org/2000/svg"
 67      viewBox="0 0 24 24"
 68      fill="currentColor"
 69      height="24"
 70      width="24"
 71    >
 72      <path
 73        clip-rule="evenodd"
 74        d="M12 21.6a9.6 9.6 0 1 0 0-19.2 9.6 9.6 0 0 0 0 19.2Zm4.448-10.448-3.6-3.6a1.2 1.2 0 0 0-1.696 1.696l1.551 1.552H8.4a1.2 1.2 0 1 0 0 2.4h4.303l-1.551 1.552a1.2 1.2 0 1 0 1.696 1.696l3.6-3.6a1.2 1.2 0 0 0 0-1.696Z"
 75        fill-rule="evenodd"
 76      ></path>
 77    </svg>
 78    <div class="air"></div>
 79    <svg
 80      xmlns="http://www.w3.org/2000/svg"
 81      viewBox="0 0 24 24"
 82      stroke-width="2"
 83      stroke-linejoin="round"
 84      stroke-linecap="round"
 85      stroke="currentColor"
 86      fill="none"
 87      height="20"
 88      width="24"
 89    >
 90      <path
 91        d="M3.343 7.778a4.5 4.5 0 0 1 7.339-1.46L12 7.636l1.318-1.318a4.5 4.5 0 1 1 6.364 6.364L12 20.364l-7.682-7.682a4.501 4.501 0 0 1-.975-4.904Z"
 92      ></path>
 93    </svg>
 94  </div>
 95  <div class="time">
 96    <div class="elapsed"></div>
 97  </div>
 98  <p class="timetext time_now">1:31</p>
 99  <p class="timetext time_full">3:46</p>
100</div>          

  1/* Spotify music card made by: csozi | Website: www.csozi.hu*/
  2 
  3.card {
  4  position: relative;
  5  width: 250px;
  6  height: 120px;
  7  background: #191414;
  8  border-radius: 10px;
  9  padding: 10px;
 10}
 11 
 12.top {
 13  position: relative;
 14  width: 100%;
 15  display: flex;
 16  gap: 10px;
 17}
 18 
 19.pfp {
 20  position: relative;
 21  top: 5px;
 22  left: 5px;
 23  height: 40px;
 24  width: 40px;
 25  background-color: #d2d2d2;
 26  border-radius: 5px;
 27  display: flex;
 28  justify-content: center;
 29  align-items: center;
 30}
 31 
 32.title-1 {
 33  color: white;
 34  font-size: 25px;
 35  font-weight: bolder;
 36}
 37 
 38.title-2 {
 39  color: white;
 40  font-size: 12px;
 41  font-weight: bold;
 42}
 43 
 44.time {
 45  width: 90%;
 46  background-color: #5e5e5e;
 47  height: 6px;
 48  border-radius: 3px;
 49  position: absolute;
 50  left: 5%;
 51  bottom: 22px;
 52}
 53 
 54.elapsed {
 55  width: 42%;
 56  background-color: #1db954;
 57  height: 100%;
 58  border-radius: 3px;
 59}
 60 
 61.controls {
 62  color: white;
 63  display: flex;
 64  position: absolute;
 65  bottom: 30px;
 66  left: 0;
 67  width: 100%;
 68  justify-content: center;
 69}
 70 
 71.volume {
 72  height: 100%;
 73  width: 48px;
 74}
 75 
 76.air {
 77  height: 100%;
 78  width: 48px;
 79}
 80 
 81.controls svg {
 82  cursor: pointer;
 83  transition: 0.1s;
 84}
 85 
 86.controls svg:hover {
 87  color: #1db954;
 88}
 89 
 90.volume {
 91  opacity: 0;
 92  position: relative;
 93  transition: 0.2s;
 94}
 95 
 96.volume .slider {
 97  height: 4px;
 98  background-color: #5e5e5e;
 99  width: 80%;
100  border-radius: 2px;
101  margin-top: 8px;
102  margin-left: 10%;
103}
104 
105.volume .slider .green {
106  background-color: #1db954;
107  height: 100%;
108  width: 80%;
109  border-radius: 3px;
110}
111 
112.volume .circle {
113  background-color: white;
114  height: 6px;
115  width: 6px;
116  border-radius: 3px;
117  position: absolute;
118  right: 20%;
119  top: 60%;
120}
121 
122.volume_button:hover ~ .volume {
123  opacity: 1;
124}
125 
126.timetext {
127  color: white;
128  font-size: 8px;
129  position: absolute;
130}
131 
132.time_now {
133  bottom: 11px;
134  left: 10px;
135}
136 
137.time_full {
138  bottom: 11px;
139  right: 10px;
140}
141 
142.playing {
143  display: flex;
144  position: relative;
145  justify-content: center;
146  gap: 1px;
147  width: 30px;
148  height: 20px;
149}
150 
151.greenline {
152  background-color: #1db954;
153  height: 20px;
154  width: 2px;
155  position: relative;
156  transform-origin: bottom;
157}
158 
159.line-1 {
160  animation: infinite playing 1s ease-in-out;
161  animation-delay: 0.2s;
162}
163 
164.line-2 {
165  animation: infinite playing 1s ease-in-out;
166  animation-delay: 0.5s;
167}
168 
169.line-3 {
170  animation: infinite playing 1s ease-in-out;
171  animation-delay: 0.6s;
172}
173 
174.line-4 {
175  animation: infinite playing 1s ease-in-out;
176  animation-delay: 0s;
177}
178 
179.line-5 {
180  animation: infinite playing 1s ease-in-out;
181  animation-delay: 0.4s;
182}
183 
184@keyframes playing {
185  0% {
186    transform: scaleY(0.1);
187  }
188 
189  33% {
190    transform: scaleY(0.6);
191  }
192 
193  66% {
194    transform: scaleY(0.9);
195  }
196 
197  100% {
198    transform: scaleY(0.1);
199  }
200}