Modèle HTML/CSS de lecteur de musique de type Spotify

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 June 2024

Police de caractères dansante

HTML

<!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 {

Modèle HTML/CSS de lecteur de musique de type Spotify

Recommandé

Bascule dentée

Un code par slowlogic992

Police de caractères dansante

HTML

CSS

JS

Recommandé

Bascule dentée

Un code par slowlogic992

Police de caractères dansante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS