Music card using html css

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;
        }