Spotify Clone HTML CSS: interfaccia utente del lettore musicale

881 r.ducoutumanyc

Apri nell'Editor Video Pubblica il Tuo Codice

Spotify Clone HTML CSS: interfaccia utente del lettore musicale

Consigliato

19 December 2025

Esempio di scarpa Nike in HTML con scheda prodotto 3D

11 February 2026

Esempio di rilevamento del piano di tracciamento delle mani WebXR AR

18 December 2025

Codice HTML del gioco Elastic Face

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify Clone</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gotham:wght@400;500;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Gotham', sans-serif;
        }

:root {
            --spotify-green: #1DB954;
            --spotify-black: #191414;
            --spotify-white: #FFFFFF;
            --spotify-grey: #282828;
        }

body {
            background-color: var(--spotify-black);
            color: var(--spotify-white);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

.main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

.sidebar {
            width: 240px;
            background-color: var(--spotify-black);
            padding: 24px 12px;
            display: flex;
            flex-direction: column;
        }

.logo {
            padding: 0 12px;
            margin-bottom: 24px;
        }

.logo img {
            width: 130px;
        }

.nav-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

.nav-links a {
            color: #b3b3b3;
            text-decoration: none;
            padding: 12px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 16px;
            font-weight: 500;
            transition: color 0.2s;
        }

.nav-links a:hover {
            color: var(--spotify-white);
        }

.nav-links a.active {
            background-color: var(--spotify-grey);
            color: var(--spotify-white);
        }

.main-content {
            flex: 1;
            background: linear-gradient(to bottom, #535353, var(--spotify-black));
            padding: 24px;
            overflow-y: auto;
        }

.playlists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 24px;
            margin-top: 24px;
        }

.playlist-card {
            background-color: var(--spotify-grey);
            padding: 16px;
            border-radius: 8px;
            transition: background-color 0.3s;
            cursor: pointer;
        }

.playlist-card:hover {
            background-color: #3E3E3E;
        }

.playlist-card img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 16px;
        }

.playlist-card h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

.playlist-card p {
            color: #b3b3b3;
            font-size: 14px;
        }

.player {
            height: 90px;
            background-color: var(--spotify-grey);
            border-top: 1px solid #282828;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.now-playing {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 180px;
        }

.now-playing img {
            width: 56px;
            height: 56px;
            border-radius: 4px;
        }

.track-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

.track-info .title {
            font-size: 14px;
            font-weight: 500;
        }

.track-info .artist {
            font-size: 12px;
            color: #b3b3b3;
        }

.player-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
            max-width: 722px;
        }

.control-buttons {
            display: flex;
            align-items: center;
            gap: 16px;
        }

.control-buttons button {
            background: none;
            border: none;
            color: #b3b3b3;
            cursor: pointer;
            transition: color 0.2s;
        }

.control-buttons button:hover {
            color: var(--spotify-white);
        }

.control-buttons .play-pause {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--spotify-white);
            color: var(--spotify-black);
            display: flex;
            align-items: center;
            justify-content: center;
        }

.progress-bar {
            width: 100%;
            height: 4px;
            background-color: #4f4f4f;
            border-radius: 2px;
            position: relative;
        }

.progress {
            width: 30%;
            height: 100%;
            background-color: var(--spotify-white);
            border-radius: 2px;
            position: relative;
        }

.volume-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 180px;
            justify-content: flex-end;
        }

@media (max-width: 768px) {
            .sidebar {
                width: 64px;
                padding: 24px 4px;
            }

.logo {
                display: none;
            }

.nav-links a span {
                display: none;
            }

.now-playing {
                min-width: auto;
            }

.track-info {
                display: none;
            }

.volume-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="main-container">
        <aside class="sidebar">
            <div class="logo">
                <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_RGB_White.png" alt="Spotify">
            </div>
            <nav class="nav-links">
                <a href="#" class="active">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12.5 3.247a1 1 0 0 0-1 0L4 7.577V20h4.5v-6a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v6H20V7.577l-7.5-4.33zm-2-1.732a3 3 0 0 1 3 0l7.5 4.33a2 2 0 0 1 1 1.732V21a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1v-6h-3v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.577a2 2 0 0 1 1-1.732l7.5-4.33z"/>
                    </svg>
                    <span>Inicio</span>
                </a>
                <a href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M10.533 1.279c-5.18 0-9.407 4.14-9.407 9.279s4.226 9.279 9.407 9.279c2.234 0 4.29-.77 5.907-2.058l4.353 4.353a1 1 0 1 0 1.414-1.414l-4.344-4.344a9.157 9.157 0 0 0 2.077-5.816c0-5.14-4.226-9.28-9.407-9.28zm-7.407 9.279c0-4.006 3.302-7.28 7.407-7.28s7.407 3.274 7.407 7.28-3.302 7.279-7.407 7.279-7.407-3.273-7.407-7.28z"/>
                    </svg>
                    <span>Buscar</span>
                </a>
                <a href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M14.5 2.134a1 1 0 0 1 1 0l6 3.464a1 1 0 0 1 .5.866V21a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3a1 1 0 0 1 .5-.866zM16 4.732V20h4V7.041l-4-2.309zM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H3zm1-2h4V4H4v16z"/>
                    </svg>
                    <span>Tu Biblioteca</span>
                </a>
            </nav>
        </aside>
        <main class="main-content">
            <h1>Buenos días</h1>
            <div class="playlists-grid">
                <div class="playlist-card">
                    <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da84849cff93133f27d8c1141da3" alt="Playlist">
                    <h3>Descubrimiento semanal</h3>
                    <p>Tu mix semanal de música nueva</p>
                </div>
                <div class="playlist-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDtX_eVaWBk3AA5i1oUoH9H29IFP7XXuBX8g&s" alt="Playlist">
                    <h3>Mix Diario 1</h3>
                    <p>Artista 1, Artista 2 y más</p>
                </div>
                <div class="playlist-card">
                    <img src="https://i.scdn.co/image/ab67706f0000000275400322be4ca506707d63e1" alt="Playlist">
                    <h3>Éxitos Colombia</h3>
                    <p>Lo más escuchado en España</p>
                </div>
                <div class="playlist-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5iqCqpandwMvpDplQ02MBJRg6IdU5D54Ocw&s" alt="Playlist">
                    <h3>Top 50 Global</h3>
                    <p>Los temas más hot del mundo</p>
                </div>
            </div>
        </main>
    </div>
    <footer class="player">
        <div class="now-playing">
            <img src="https://i.scdn.co/image/ab67616d0000b273b62a2ec2d61d48f34a368144" alt="Album cover">
            <div class="track-info">
                <div class="title">Mirame</div>
                <div class="artist">Blessd</div>
            </div>
        </div>
        <div class="player-controls">
            <div class="control-buttons">
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75 13.15.922zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3.3 1a.7.7 0 0 1 .7.7v5.15l9.95-5.744a.7.7 0 0 1 1.05.606v12.575a.7.7 0 0 1-1.05.607L4 9.149V14.3a.7.7 0 0 1-.7.7H1.7a.7.7 0 0 1-.7-.7V1.7a.7.7 0 0 1 .7-.7h1.6z"/>
                    </svg>
                </button>
                <button class="play-pause">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M12.7 1a.7.7 0 0 0-.7.7v5.15L2.05 1.107A.7.7 0 0 0 1 1.712v12.575a.7.7 0 0 0 1.05.607L12 9.149V14.3a.7.7 0 0 0 .7.7h1.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-1.6z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M0 4.75l3.5 2.25-3.5 2.25v-4.5zm4 0l3.5 2.25-3.5 2.25v-4.5z"/>
                    </svg>
                </button>
            </div>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
        <div class="volume-controls">
            <button>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"/>
                </svg>
            </button>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
    </footer>

playPauseBtn.addEventListener('click', () => {
            isPlaying = !isPlaying;
            playPauseBtn.innerHTML = isPlaying 
                ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"/></svg>'
                : '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"/></svg>';
        });

// Simulación de progreso
        setInterval(() => {
            const progress = document.querySelector('.player-controls .progress');
            let width = parseFloat(progress.style.width || '30');
            width = (width + 0.1) % 100;
            progress.style.width = width + '%';
        }, 1000);
    </script>
</body>
</html>

Consigliato

Esempio di scarpa Nike in HTML con scheda prodotto 3D

Esempio di rilevamento del piano di tracciamento delle mani WebXR AR

Codice HTML del gioco Elastic Face

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS