1 
  2<div class="card">
  3  <div class="top">
  4    <div class="pfp">
  5      <div class="playing">
  6        <div class="greenline line-1"></div>
  7        <div class="greenline line-2"></div>
  8        <div class="greenline line-3"></div>
  9        <div class="greenline line-4"></div>
 10        <div class="greenline line-5"></div>
 11      </div>
 12    </div>
 13    <div class="texts">
 14      <p class="title-1">Soldiers Rage</p>
 15      <p class="title-2">Tha Mechanic</p>
 16    </div>
 17  </div>
 18 
 19  <div class="controls">
 20    <svg
 21      xmlns="http://www.w3.org/2000/svg"
 22      viewBox="0 0 24 24"
 23      fill="currentColor"
 24      height="20"
 25      width="24"
 26      class="volume_button"
 27    >
 28      <path
 29        clip-rule="evenodd"
 30        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"
 31        fill-rule="evenodd"
 32      ></path>
 33    </svg>
 34    <div class="volume">
 35      <div class="slider">
 36        <div class="green"></div>
 37      </div>
 38      <div class="circle"></div>
 39    </div>
 40    <svg
 41      xmlns="http://www.w3.org/2000/svg"
 42      viewBox="0 0 24 24"
 43      fill="currentColor"
 44      height="24"
 45      width="24"
 46    >
 47      <path
 48        clip-rule="evenodd"
 49        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"
 50        fill-rule="evenodd"
 51      ></path>
 52    </svg>
 53    <svg
 54      xmlns="http://www.w3.org/2000/svg"
 55      viewBox="0 0 24 24"
 56      fill="currentColor"
 57      height="24"
 58      width="24"
 59    >
 60      <path
 61        clip-rule="evenodd"
 62        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"
 63        fill-rule="evenodd"
 64      ></path>
 65    </svg>
 66    <svg
 67      xmlns="http://www.w3.org/2000/svg"
 68      viewBox="0 0 24 24"
 69      fill="currentColor"
 70      height="24"
 71      width="24"
 72    >
 73      <path
 74        clip-rule="evenodd"
 75        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"
 76        fill-rule="evenodd"
 77      ></path>
 78    </svg>
 79    <div class="air"></div>
 80    <svg
 81      xmlns="http://www.w3.org/2000/svg"
 82      viewBox="0 0 24 24"
 83      stroke-width="2"
 84      stroke-linejoin="round"
 85      stroke-linecap="round"
 86      stroke="currentColor"
 87      fill="none"
 88      height="20"
 89      width="24"
 90    >
 91      <path
 92        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"
 93      ></path>
 94    </svg>
 95  </div>
 96  <div class="time">
 97    <div class="elapsed"></div>
 98  </div>
 99  <p class="timetext time_now">1:31</p>
100  <p class="timetext time_full">3:46</p>
101</div>          

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