Spotify-Like Music Player HTML/CSS Template

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Lecteur Musical</title>
    <style>
        /* Styles de base pour la maquette similaire à Spotify */
        body {
            font-family: 'Montserrat', sans-serif; /* Police similaire à Spotify */
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #121212; /* Couleur de fond principale */
            color: #b3b3b3; /* Couleur de texte par défaut */
            overflow: hidden; /* Empêche le défilement du corps principal */
        }

.app-container {
            display: flex;
            flex: 1; /* Prend l'espace restant en hauteur */
            overflow: hidden; /* Empêche le défilement du conteneur de l'application */
        }

header {
            background-color: #000; /* Couleur d'arrière-plan de l'en-tête */
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px; /* Hauteur fixe de l'en-tête */
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.header-left {
            display: flex;
            align-items: center;
        }

.app-logo {
            font-size: 24px;
            font-weight: bold;
            color: #1DB954; /* Vert Spotify */
            margin-right: 20px;
        }

.search-bar {
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #333;
            background-color: #282828;
            color: #fff;
            width: 300px;
            box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
        }

.user-profile .profile-btn {
            background-color: #282828;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

.user-profile .profile-btn:hover {
            background-color: #3a3a3a;
        }

nav.sidebar {
            width: 250px;
            background-color: #000;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 5px rgba(0,0,0,0.5);
            overflow-y: auto; /* Permet le défilement de la barre latérale */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #000; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        nav.sidebar::-webkit-scrollbar {
            width: 8px;
        }

nav.sidebar::-webkit-scrollbar-track {
            background: #000;
        }

nav.sidebar::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #000;
        }

.sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.sidebar ul li {
            margin-bottom: 5px;
        }

.sidebar ul li a {
            display: flex; /* Pour aligner l'icône et le texte */
            align-items: center;
            padding: 10px 20px;
            color: #b3b3b3;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

.sidebar ul li a i {
            margin-right: 10px;
            font-size: 20px;
        }

.sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: #282828;
            color: #fff;
        }

.sidebar h3 {
            color: #fff;
            padding: 0 20px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.create-playlist-btn {
            background-color: #1DB954;
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 20px 20px 20px; /* Ajusté pour être centré avec le padding */
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.create-playlist-btn i {
            margin-right: 8px;
        }

.create-playlist-btn:hover {
            background-color: #178a40;
        }

.main-content {
            flex: 1; /* Prend l'espace restant en largeur */
            background-color: #121212;
            padding: 20px;
            overflow-y: auto; /* Permet le défilement du contenu principal */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #121212; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        .main-content::-webkit-scrollbar {
            width: 8px;
        }

.main-content::-webkit-scrollbar-track {
            background: #121212;
        }

.main-content::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #121212;
        }

.content-section {
            margin-bottom: 40px;
        }

.content-section h2 {
            color: #fff;
            font-size: 28px;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

.grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
        }

.card {
            background-color: #181818;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.card:hover {
            background-color: #282828;
        }

.card img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

.card h3 {
            color: #fff;
            font-size: 16px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* S'assure que le texte ne déborde pas */
        }

.card p {
            color: #b3b3b3;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

.playlists-list-detailed .playlist-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            cursor: pointer;
            margin-bottom: 10px;
        }

.playlists-list-detailed .playlist-item:hover {
            background-color: #282828;
        }

.playlist-item img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            object-fit: cover;
        }

.playlist-info h4 {
            color: #fff;
            margin: 0;
            font-size: 18px;
        }

.playlist-info p {
            color: #b3b3b3;
            margin: 0;
            font-size: 14px;
        }

footer.player-bar {
            background-color: #282828;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px; /* Hauteur fixe de la barre de lecture */
            box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.current-song-info {
            display: flex;
            align-items: center;
            width: 25%;
        }

.current-song-info img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

.song-details h4 {

Spotify-Like Music Player HTML/CSS Template

Recommended

HTML Login Form Template

Web Designer Portfolio HTML Template

HTML Chat Box Template

HTML

CSS

JS

Recommended

HTML Login Form Template

Web Designer Portfolio HTML Template

HTML Chat Box Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS