Skip to content

Commit 69bc5c0

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #873 from Bhumika-00/main
Added Spotify Clone
2 parents 73d6971 + 9f24f85 commit 69bc5c0

File tree

2 files changed

+514
-0
lines changed

2 files changed

+514
-0
lines changed

‎SpotifyClone/index.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
8+
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous"
9+
referrerpolicy="no-referrer" />
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
13+
<link rel="icon" href="https://github.com/apna-college/Delta/blob/main/CSS/Project/assets/logo.png?raw=true">
14+
<link rel="stylesheet" href="style.css">
15+
<title>Spotify web application</title>
16+
</head>
17+
<body>
18+
<div class="main">
19+
20+
<div class="sidebar">
21+
<div class="nav">
22+
<div class="nav-option">
23+
<i class="fa-solid fa-house"></i>
24+
<a href="#">Home</a>
25+
</div>
26+
<div class="nav-option">
27+
<i class="fa-solid fa-magnifying-glass"></i>
28+
<a href="#">Search</a>
29+
</div>
30+
</div>
31+
<div class="library">
32+
<div class="option">
33+
<div class="lib-options nav-option">
34+
<i class="fa-solid fa-book"></i>
35+
<a href="#">Your Library</a>
36+
</div>
37+
<div class="icons">
38+
<i class="fa-solid fa-plus"></i>
39+
<i class="fa-solid fa-arrow-right"></i>
40+
</div>
41+
</div>
42+
<div class="lib-box">
43+
<div class="box">
44+
<div class="box-p1">Create your first playlist</div>
45+
<div class="box-p2">It's easy we'll help you</div>
46+
<button class="badge">Create playlist</button>
47+
</div>
48+
<div class="box" style="height: 12rem;">
49+
<div class="box-p1">Let's find some podcast to follow</div>
50+
<div class="box-p2">We'll keep you uploading on new episodes</div>
51+
<button class="badge">Browse podacst</button>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="main-content">
58+
<div class="sticky-nav">
59+
<div class="sticky-nav-icons">
60+
<img src="backward_icon.png">
61+
<img src="forward_icon.png" class="hide">
62+
</div>
63+
<div class="sticky-nav-options">
64+
<button class="badge nav-item hide" >Explore premium</button>
65+
<button class="badge nav-item"><i class="fa-solid fa-download"></i>Install app</button>
66+
<i class="fa-regular fa-user nav-item"></i>
67+
</div>
68+
</div>
69+
70+
71+
<h2>Recently Played</h2>
72+
<div class="card-container">
73+
<div class="card">
74+
<img class="card-image" src="ti.jpeg">
75+
<p class="card-title">Top 50 global</p>
76+
<p class="card-info">Your daily update of the most played tracks.....</p>
77+
</div>
78+
</div>
79+
80+
<h2>Trending Now Near You</h2>
81+
<div class="card-container">
82+
<div class="card">
83+
<img class="card-image" src="week.jpg">
84+
<p class="card-title">Weekend</p>
85+
<p class="card-info">Listen to your favourite weekend's song on loop.....</p>
86+
</div>
87+
<div class="card">
88+
<img class="card-image" src="images.jpeg">
89+
<p class="card-title">Taylor's Trending</p>
90+
<p class="card-info">Listen to your favourite Taylor's song on loop.....</p>
91+
</div>
92+
<div class="card">
93+
<img class="card-image" src="selena.jpg">
94+
<p class="card-title">Selena Gomez</p>
95+
<p class="card-info">Listen to your favourite Selena's song on loop.....</p>
96+
</div>
97+
<div class="card">
98+
<img class="card-image" src="ss.jpg">
99+
<p class="card-title">Senorita Sunset</p>
100+
<p class="card-info">Listen to your favourite song on loop......</p>
101+
</div>
102+
<div class="card">
103+
<img class="card-image" src="mma.jpg">
104+
<p class="card-title">Marshmallo</p>
105+
<p class="card-info">Listen to your favourite Marshmallo's song on loop.....</p>
106+
</div>
107+
108+
109+
</div>
110+
<h2>Featured Charts</h2>
111+
<div class="card-container">
112+
<div class="card">
113+
<img class="card-image" src="fc1.webp">
114+
<p class="card-title">Weekend Top 50</p>
115+
<p class="card-info">Listen to your favourite weekend song on loop.....</p>
116+
</div>
117+
<div class="card">
118+
<img class="card-image" src="fc2.webp">
119+
<p class="card-title">Pop 50 Global</p>
120+
<p class="card-info">Listen to your favourite pop music on loop.....</p>
121+
</div>
122+
<div class="card">
123+
<img class="card-image" src="fc3.jpg">
124+
<p class="card-title">AP Dhillon Top 50 </p>
125+
<p class="card-info">Listen to your favourite Dhillon's song on loop.....</p>
126+
</div>
127+
<div class="card">
128+
<img class="card-image" src="fc4.jpeg">
129+
<p class="card-title">The Rage Band</p>
130+
<p class="card-info">Listen to your favourite Rage Band song on loop......</p>
131+
</div>
132+
<div class="card">
133+
<img class="card-image" src="fc5.jpeg">
134+
<p class="card-title">Drake Top 50</p>
135+
<p class="card-info">Listen to your favourite Drake's song on loop.....</p>
136+
</div>
137+
<div class="card">
138+
<img class="card-image" src="fc6.jpg">
139+
<p class="card-title">Top 50 Black-Pink </p>
140+
<p class="card-info">Listen to your favourite Band's song in loop.....</p>
141+
</div>
142+
</div>
143+
<h2>Recently Visited</h2>
144+
<div class="card-container">
145+
<div class="card">
146+
<img class="card-image" src="rp1.webp">
147+
<p class="card-title">Mid night's</p>
148+
<p class="card-info">Your daily update of the most played tracks.....</p>
149+
</div>
150+
<div class="card">
151+
<img class="card-image" src="rp2.jpeg">
152+
<p class="card-title">Doja Cat</p>
153+
<p class="card-info">Your daily update of the most played tracks.....</p>
154+
</div>
155+
<div class="card">
156+
<img class="card-image" src="rp3.webp">
157+
<p class="card-title">God is a women</p>
158+
<p class="card-info">Your daily update of the most played tracks.....</p>
159+
</div>
160+
<div class="card">
161+
<img class="card-image" src="rp4.jpeg">
162+
<p class="card-title">Illusions</p>
163+
<p class="card-info">Your daily update of the most played tracks.....</p>
164+
</div>
165+
<div class="card">
166+
<img class="card-image" src="rp5.webp">
167+
<p class="card-title">We can't be friends</p>
168+
<p class="card-info">Your daily update of the most played tracks.....</p>
169+
</div>
170+
<div class="card">
171+
<img class="card-image" src="rp6.jpg">
172+
<p class="card-title">Positions</p>
173+
<p class="card-info">Your daily update of the most played tracks.....</p>
174+
</div>
175+
</div>
176+
<div class="footer">
177+
<div class="line"></div>
178+
</div>
179+
</div>
180+
181+
</div>
182+
183+
184+
<div class="music-player">
185+
<div class="album">
186+
<div class="first-line">
187+
<img src="assh.jpg" class="image-inside" alt="Album Cover">
188+
<p class="textm">Tu Aashiqui</p>
189+
<i class="fa-regular fa-heart" id="first"></i>
190+
<i class="fa-solid fa-music" id="second"></i>
191+
</div>
192+
193+
</div>
194+
195+
196+
197+
<div class="player">
198+
<div class="player-control">
199+
<img src="player_icon1.png" class="player-control-icon">
200+
<img src="player_icon2.png" class="player-control-icon">
201+
<img src="player_icon3.png" class="player-control-icon" style="opacity: 1 ; height: 2rem;">
202+
<img src="player_icon4.png" class="player-control-icon">
203+
<img src="player_icon5.png" class="player-control-icon">
204+
</div>
205+
<div class="playback-bar">
206+
<span class="curr-time">00.00</span>
207+
<input type="range" min="0" max="100" class="progress-bar">
208+
<span class="tot-time">3.14</span>
209+
</div>
210+
</div>
211+
<div class="controls">
212+
<i class="fa-solid fa-play" id="f1"></i>
213+
<i class="fa-solid fa-microphone" id="f2"></i>
214+
<i class="fa-brands fa-pagelines " id="f3"></i>
215+
<i class="fa-solid fa-box"id=f4 ></i>
216+
<i class="fa-solid fa-volume-xmark" id="f5"></i>
217+
<input type="range" min="0" max="100"class=volume>
218+
</div>
219+
</div>
220+
</div>
221+
</body>
222+
</html>

0 commit comments

Comments
 (0)