Replica of Spotify - Bottom Section - HTML and CSS Styling

  1. 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.

Answer №1

Experiment with incorporating display: flex; justify-content; and align-items; within the "player" division.

Answer №2

If you want to perfectly position your icons, try using this CSS snippet.

.icons{
margin: auto;
width: 50%;
}

Remember to customize the width based on the available space.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...

Is it possible to modify the text displayed within a select element?

Currently, I am working on enhancing a react app by making the dropdown options in a select element more informative than what is displayed as the selection. For instance: Selected: A However, when you click on the element for the dropdown it displays: ...

Positioning Text at the Top alongside the Fresh Twitter Button

Trying to integrate the new Twitter button into a Wordpress template has been a bit of a challenge. I'm aiming to have the text aligned with the top edge of the button rather than being centered within it. The specific code segment responsible for pla ...

Angular: NaNa: Attempting to access a property of an undefined variable

I've encountered these errors although the values are displayed correctly in the browser. I'm unsure about how to resolve this issue. ERROR TypeError: Cannot read property 'length' of undefined ERROR TypeError: Cannot read property &ap ...

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

Responsive grid made with HTML and CSS to create dynamic DIVs

Currently, I am working on a project that requires a responsive page layout using divs. The layout should resemble a grid, with 3 columns that reorganize into 2 columns on smaller screens. Here is the basic HTML structure I have so far: <div id="main" ...

Is it possible to create a hyperlink on the second page that directs to the first page and triggers a specific JavaScript function on the first page?

Working with a former colleague's code in C#, asp.net MVC, Telerik/Kendo controls. I am trying to navigate to a specific section on a page from another page that uses tabs/sections with links at the top of the page to toggle visibility based on the se ...

What is the best way to align a Font Awesome icon within an SVG circle?

Can anyone help me position the trophy inside the circle, just below the number 2000? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e352835 ...

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

The sidebar remains concealed at all times within the HTML5UP prologue/Skeljs framework

Currently, I am using HTML5up Prologue with the skeljs framework at this link. In my design, I prefer to keep my menu navigation hidden on the left side, especially in the narrow view (<961pixels). The toggle div should always remain visible. For refer ...

Arrange the select default option using AngularJS as the first option

I've been working on a project using Angular where I fetch data from a JSON file and push it to an array object. This data is then displayed in the options of a select element. My issue is: The default option with selection appears first, but I only ...

What is the best way to conceal a CSS div through PHP if the div is empty?

I need some help refining my previous question to ensure clarity. Is there a straightforward method for hiding a div when it doesn't contain any information, without causing confusion for the client? This specific div receives information from Jooml ...

CSS: Centralize content and use a div to hide images that overflow the container

I successfully centered my divs and images both horizontally and vertically using CSS: .center { height: 100% } .center-center { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; ...