پیشنمایش زنده
کد HTML
<div class="card">
<div class="top">
<div class="pfp">
<div class="playing">
<div class="greenline line-1"></div>
<div class="greenline line-2"></div>
<div class="greenline line-3"></div>
<div class="greenline line-4"></div>
<div class="greenline line-5"></div>
</div>
</div>
<div class="texts">
<p class="title-1">Soldiers Rage</p>
<p class="title-2">Tha Mechanic</p>
</div>
</div>
<div class="controls">
<svg
class="volume_button"
width="24"
height="20"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
></path>
</svg>
<div class="volume">
<div class="slider">
<div class="green"></div>
</div>
<div class="circle"></div>
</div>
<svg
width="18px"
height="18px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
stroke="#CCCCCC"
stroke-width="0.048"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.8906 4.20444C19.2197 3.31836 21 4.27115 21 5.86854V18.1315C21 19.7289 19.2197 20.6817 17.8906 19.7956L8.69337 13.6641C7.50591 12.8725 7.50591 11.1276 8.69337 10.3359L17.8906 4.20444ZM19 5.86854L9.80277 12L19 18.1315V5.86854Z"
fill="currentColor"
></path>
<path
d="M5 5C5 4.44772 4.55228 4 4 4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20C4.55228 20 5 19.5523 5 19V5Z"
fill="currentColor"
></path>
</g>
</svg>
<svg
width="32"
height="32"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
></path>
</svg>
<svg
width="18px"
height="18px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g
id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1094 4.20444C4.78029 3.31836 3 4.27115 3 5.86854V18.1315C3 19.7289 4.78029 20.6817 6.1094 19.7956L15.3066 13.6641C16.4941 12.8725 16.4941 11.1276 15.3066 10.3359L6.1094 4.20444ZM5 5.86854L14.1972 12L5 18.1315V5.86854Z"
fill="currentColor"
></path>
<path
d="M21 5C21 4.44772 20.5523 4 20 4C19.4477 4 19 4.44772 19 5V19C19 19.5523 19.4477 20 20 20C20.5523 20 21 19.5523 21 19V5Z"
fill="currentColor"
></path>
</g>
</svg>
<div class="air"></div>
<svg
width="24"
height="20"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
></path>
</svg>
</div>
<div class="time">
<div class="elapsed"></div>
</div>
<p class="timetext time_now">1:31</p>
<p class="timetext time_full">3:46</p>
</div>
کد CSS
/* Spotify music card made by: csozi | Website: www.csozi.hu*/
.card {
position: relative;
width: 260px;
height: 130px;
background: #151515;
border-radius: 10px;
padding: 10px;
}
.top {
position: relative;
width: 100%;
display: flex;
gap: 10px;
}
.pfp {
position: relative;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
background-color: #ffffff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.title-1 {
color: white;
font-size: 24px;
font-weight: normal;
margin-left: 5px;
}
.title-2 {
color: lightgrey;
font-size: 12px;
font-weight: lighter;
margin-top: -5px;
margin-left: 5px;
}
.time {
width: 90%;
background-color: #5e5e5e;
height: 6px;
border-radius: 3px;
position: absolute;
left: 5%;
bottom: 24px;
}
.elapsed {
width: 42%;
background-color: #1db954;
height: 100%;
border-radius: 3px;
}
.controls {
gap: 4px;
align-items: center;
color: #ffffff;
display: flex;
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
justify-content: center;
}
.volume {
height: 100%;
width: 42px;
margin-right: 2px;
}
.air {
height: 100%;
width: 42px;
}
.controls svg {
cursor: pointer;
transition: 0.1s;
}
.controls svg:hover {
color: #23da63;
}
.volume {
opacity: 0;
position: relative;
transition: 0.2s;
}
.volume .slider {
height: 4px;
background-color: #5e5e5e;
width: 80%;
border-radius: 2px;
margin-left: 10%;
}
.volume .slider .green {
background-color: #1db954;
height: 100%;
width: 80%;
border-radius: 3px;
}
.volume .circle {
background-color: white;
height: 6px;
width: 6px;
border-radius: 3px;
position: absolute;
right: 20%;
top: -25%;
}
.volume_button:hover ~ .volume {
opacity: 1;
}
.timetext {
color: white;
font-size: 8px;
position: absolute;
}
.time_now {
bottom: 10px;
left: 15px;
}
.time_full {
bottom: 10px;
right: 15px;
}
.playing {
display: flex;
position: relative;
justify-content: center;
gap: 1px;
width: 30px;
height: 20px;
}
.greenline {
background-color: #1db954;
height: 20px;
width: 2px;
position: relative;
transform-origin: bottom;
}
.line-1 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.2s;
}
.line-2 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.5s;
}
.line-3 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.6s;
}
.line-4 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0s;
}
.line-5 {
animation: infinite playing 1s ease-in-out;
animation-delay: 0.4s;
}
@keyframes playing {
0% {
transform: scaleY(0.1);
}
33% {
transform: scaleY(0.6);
}
66% {
transform: scaleY(0.9);
}
100% {
transform: scaleY(0.1);
}
}