- I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'Goal' image represents my desired outcome, while the 'website' image reflects the current state of my website. Here is the code snippet specifically for that portion. Additionally, I have provided the links to both images for reference.
- Desired Outcome - Current Website Appearance
<div class="music-player">
<div class="album">
<div class="playing">
<img src="assets/rapgod.jpeg" alt="rapgod" class="cover">
<p class="cover-name">Rap God</p>
<p class="artist">Eminem</p>
</div>
<div class="playing_icons">
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="player">
<div class="player-controls">
<img src="/assets/player_icon1.png" alt="" class="player-controls-icon">
<img src="/assets/player_icon2.png" alt="" class="player-controls-icon">
<img src="/assets/player_icon3.png" alt="" class="player-controls-icon" style="opacity: 1; height: 2rem;">
<img src="/assets/player_icon4.png" alt="" class="player-controls-icon">
<img src="/assets/player_icon5.png" alt="" class="player-controls-icon">
</div>
<div class="playback-bar">
<span class="current-time">00:00</span>
<input type="range" min="0" max="100" class="progress-bar" step="1">
<span class="curt-time">3:33</span>
</div>
<div class="controls"></div>
</div>
</div>
This is my CSS note (I repeated 'music' twice due to layout considerations). Below is the CSS code related to the issue I am facing:
.music-player {
background-color: black;
position: fixed;
bottom: 0px;
width: 100%;
height: 72px;
}
.music-player {
display: flex;
justify-content: center;
align-items: center;
}
.album {
width: 25%;
}
.player {
width: 50%;
}
.controls {
width: 25%;
}
(player-controls, playback-bar properties here...)
I have experimented with various properties without success thus far.