HTML CODE:
`<div class="music-card">
<div class="uppersection">
<div class="song-image">
<img src="./players.jpeg" alt="Loading">
</div>
<div class="song-info">
<h2 class="song-title">Players</h2>
<p class="singer-name">Karan Aujla,Badshah</p>
</div>
</div>
<div class="controls">
<i class="fas fa-volume-up"></i>
<div class="player-controls">
<i class="fas fa-backward"></i>
<i class="fas fa-play"></i>
<i class="fas fa-forward"></i>
</div>
<i class="far fa-heart"></i>
</div>
<div class="progress-bar">
<div class="progress" style="width:50%;"></div>
</div>
<div class="time-stamps">
<span>1:30</span>
<span>3:20</span>
</div>
</div>`
CSS CODE
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
margin:0;
}
.music-card{
align-items: center;
background-color: black;
color:white;
border-radius: 12px;
width: 300px;
padding: 20px;
}
.song-image img{
width: 100px;
height:100px;
border-radius: 12px;
}
.song-info{
margin-left: 20px;
width: 100%;
}
.uppersection{
display: flex;
}
.song-title{
font-size: 18px;
}
.singer-name{
font-size: 14px;
color:#666;
margin:5px 0 10px
}
.controls{
display: flex;
align-items: center;
margin-bottom: 10px;
justify-content: space-between;
}
.controls i{
font-size: 20px;
margin-right:20px;
cursor: pointer;
}
.controls i:hover{
color: green;
}
.progress-bar{
background-color: #e0e0e0;
height: 6px;
border-radius: 2.5px;
overflow: hidden;
margin-bottom: 10px;
}
.progress{
background-color: #4caf50;
height: 100%;
}
.time-stamps{
display:flex;
justify-content: space-between;
font-size:12px;
color: #b3afaf;
}
Top comments (0)