Skip to content

Commit 1b3a807

Browse files
MithulKRSMithulKRS
authored
Add files via upload
0 parents  commit 1b3a807

File tree

2 files changed

+655
-0
lines changed

2 files changed

+655
-0
lines changed

‎spotify.html‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Spotify Clone</title>
8+
<link rel="stylesheet" href="spotifystyle.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<!-- Top Navigation -->
13+
<div class="top-nav">
14+
<div class="nav-controls">
15+
<button class="nav-btn">◀</button>
16+
<button class="nav-btn">▶</button>
17+
</div>
18+
<input type="text" class="search-bar" placeholder="What do you want to listen to?">
19+
<div class="user-menu">
20+
<button class="nav-btn">⚙️</button>
21+
<div class="user-avatar">MK</div>
22+
</div>
23+
</div>
24+
25+
<!-- Main Content -->
26+
<div class="main-content">
27+
<!-- Sidebar -->
28+
<div class="sidebar">
29+
<div class="logo">Spotify</div>
30+
<ul class="nav-menu">
31+
<li class="nav-item active">
32+
<div class="nav-icon">🏠</div>
33+
<span>Home</span>
34+
</li>
35+
<li class="nav-item">
36+
<div class="nav-icon">🔍</div>
37+
<span>Search</span>
38+
</li>
39+
<li class="nav-item">
40+
<div class="nav-icon">📚</div>
41+
<span>Your Library</span>
42+
</li>
43+
</ul>
44+
45+
<div class="library-section">
46+
<div class="library-header">
47+
<h3>Playlists</h3>
48+
<button class="create-playlist-btn">+</button>
49+
</div>
50+
<ul class="playlist-list">
51+
<li class="playlist-item">Liked Songs</li>
52+
<li class="playlist-item">Discover Weekly</li>
53+
<li class="playlist-item">Release Radar</li>
54+
<li class="playlist-item">Chill Vibes</li>
55+
<li class="playlist-item">Workout Mix</li>
56+
<li class="playlist-item">Road Trip</li>
57+
</ul>
58+
</div>
59+
</div>
60+
61+
<!-- Content Area -->
62+
<div class="content-area">
63+
<h1 class="greeting">Good Evening</h1>
64+
65+
<h2 class="section-title">Made for you</h2>
66+
<div class="card-grid">
67+
<div class="card">
68+
<div class="card-image">
69+
<img src="https://placehold.co/400x400/1db954/ffffff?text=Discover+Weekly" alt="Discover Weekly playlist cover with abstract geometric patterns in Spotify green and white">
70+
</div>
71+
<div class="card-title">Discover Weekly</div>
72+
<div class="card-description">Your weekly mixtape of fresh music</div>
73+
</div>
74+
<div class="card">
75+
<div class="card-image">
76+
<img src="https://placehold.co/400x400/2d46b9/ffffff?text=Release+Radar" alt="Release Radar playlist cover with futuristic radar design in blue and white">
77+
</div>
78+
<div class="card-title">Release Radar</div>
79+
<div class="card-description">Catch all the latest music from artists you follow</div>
80+
</div>
81+
<div class="card">
82+
<div class="card-image">
83+
<img src="https://placehold.co/400x400/ff6b6b/ffffff?text=Daily+Mix+1" alt="Daily Mix 1 playlist cover with vibrant red and orange abstract waves">
84+
</div>
85+
<div class="card-title">Daily Mix 1</div>
86+
<div class="card-description">Made for you based on your listening habits</div>
87+
</div>
88+
<div class="card">
89+
<div class="card-image">
90+
<img src="https://placehold.co/400x400/4ecdc4/ffffff?text=Chill+Vibes" alt="Chill Vibes playlist cover with calming turquoise gradient and minimalist design">
91+
</div>
92+
<div class="card-title">Chill Vibes</div>
93+
<div class="card-description">Relaxing beats for your downtime</div>
94+
</div>
95+
</div>
96+
97+
<h2 class="section-title">Recently played</h2>
98+
<div class="card-grid recently-played">
99+
<div class="card">
100+
<div class="card-image">
101+
<img src="https://placehold.co/400x400/ffd93d/000000?text=After+Hours" alt="After Hours album cover by The Weeknd featuring dramatic red lighting and retro aesthetic">
102+
</div>
103+
<div class="card-title">After Hours</div>
104+
<div class="card-description">The Weeknd</div>
105+
</div>
106+
<div class="card">
107+
<div class="card-image">
108+
<img src="https://placehold.co/400x400/6c5ce7/ffffff?text=Future+Nostalgia" alt="Future Nostalgia album cover by Dua Lipa with pink and purple disco ball aesthetic">
109+
</div>
110+
<div class="card-title">Future Nostalgia</div>
111+
<div class="card-description">Dua Lipa</div>
112+
</div>
113+
<div class="card">
114+
<div class="card-image">
115+
<img src="https://placehold.co/400x400/00b894/ffffff?text=Fine+Line" alt="Fine Line album cover by Harry Styles featuring colorful abstract art and psychedelic elements">
116+
</div>
117+
<div class="card-title">Fine Line</div>
118+
<div class="card-description">Harry Styles</div>
119+
</div>
120+
<div class="card">
121+
<div class="card-image">
122+
<img src="https://placehold.co/400x400/fdcb6e/000000?text=When+We+All+Fall+Asleep" alt="When We All Fall Asleep album cover by Billie Eilish with eerie green tint and mysterious atmosphere">
123+
</div>
124+
<div class="card-title">When We All Fall Asleep</div>
125+
<div class="card-description">Billie Eilish</div>
126+
</div>
127+
</div>
128+
129+
<h2 class="section-title">Popular albums</h2>
130+
<div class="card-grid">
131+
<div class="card">
132+
<div class="card-image">
133+
<img src="https://placehold.co/400x400/e17055/ffffff?text=Midnights" alt="Midnights album cover by Taylor Swift featuring dreamy blue and silver celestial theme">
134+
</div>
135+
<div class="card-title">Midnights</div>
136+
<div class="card-description">Taylor Swift</div>
137+
</div>
138+
<div class="card">
139+
<div class="card-image">
140+
<img src="https://placehold.co/400x400/00cec9/ffffff?text=Un+Verano+Sin+Ti" alt="Un Verano Sin Ti album cover by Bad Bunny with tropical beach sunset vibes">
141+
</div>
142+
<div class="card-title">Un Verano Sin Ti</div>
143+
<div class="card-description">Bad Bunny</div>
144+
</div>
145+
<div class="card">
146+
<div class="card-image">
147+
<img src="https://placehold.co/400x400/0984e3/ffffff?text=Harry's+House" alt="Harry's House album cover by Harry Styles featuring cozy domestic interior with warm lighting">
148+
</div>
149+
<div class="card-title">Harry's House</div>
150+
<div class="card-description">Harry Styles</div>
151+
</div>
152+
<div class="card">
153+
<div class="card-image">
154+
<img src="https://placehold.co/400x400/d63031/ffffff?text=Sour" alt="Sour album cover by Olivia Rodrigo with blue-green tint and distorted typography">
155+
</div>
156+
<div class="card-title">Sour</div>
157+
<div class="card-description">Olivia Rodrigo</div>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
163+
<!-- Player Controls -->
164+
<div class="player">
165+
<div class="current-track">
166+
<img src="https://placehold.co/56x56/1db954/ffffff?text=Track" alt="Current track album artwork with abstract green design" class="track-image">
167+
<div class="track-info">
168+
<div class="track-name">Blinding Lights</div>
169+
<div class="track-artist">The Weeknd</div>
170+
</div>
171+
</div>
172+
173+
<div class="player-controls">
174+
<div class="control-buttons">
175+
<button class="control-btn">🔀</button>
176+
<button class="control-btn">⏮</button>
177+
<button class="control-btn play">▶</button>
178+
<button class="control-btn">⏭</button>
179+
<button class="control-btn">🔁</button>
180+
</div>
181+
<div class="progress-bar">
182+
<div class="progress-time">1:23</div>
183+
<div class="progress-track">
184+
<div class="progress-fill"></div>
185+
</div>
186+
<div class="progress-time">3:45</div>
187+
</div>
188+
</div>
189+
190+
<div class="volume-controls">
191+
<div class="volume-icon">🔊</div>
192+
<div class="volume-bar">
193+
<div class="volume-fill"></div>
194+
</div>
195+
</div>
196+
</div>
197+
</div>
198+
</body>
199+
</html>
200+

0 commit comments

Comments
 (0)