Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 69bc5c0

Browse files
Ayushparikh-codeAyushparikh-code
authoredOct 29, 2024··
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

+222
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>

‎SpotifyClone/style.css

+292
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
*{
2+
font-family: "Montserrat", sans-serif;
3+
font-optical-sizing: auto;
4+
font-weight:500;
5+
font-style: normal;
6+
}
7+
body{
8+
background-color: black;
9+
color: white;
10+
margin: 0;
11+
overflow: hidden;
12+
}
13+
.main{
14+
display: flex;
15+
height: 100vh;
16+
padding: 0.5rm;
17+
}
18+
.sidebar{
19+
background-color:black;
20+
width: 300px;
21+
border-radius: 1rem;
22+
margin: 0.5rem;
23+
}
24+
.main-content{
25+
background-color:rgb(34, 33, 33);
26+
flex:1;
27+
border-radius: 1rem;
28+
overflow: auto;
29+
padding: 0 1.5rem 0 1.5rem;
30+
}
31+
.music-player{
32+
background-color: black;
33+
height: 72px;
34+
width: 100%;
35+
bottom: 0;
36+
position: fixed;
37+
border-radius: 1rem;
38+
}
39+
a{
40+
text-decoration: none;
41+
color: white;
42+
}
43+
.nav{
44+
background-color: rgb(34, 33, 33);
45+
border-radius: 15px;
46+
height: 100px;
47+
display: flex;
48+
flex-direction: column;
49+
padding: 0.5rem 0.75rem;
50+
}
51+
.nav-option{
52+
line-height:2.5rem;
53+
opacity: 0.75;
54+
padding: 0.5rem;
55+
}
56+
.nav-option:hover{
57+
58+
opacity: 1;
59+
}
60+
.nav-option i{
61+
font-size: 1.75 rem;
62+
}
63+
.nav-option a{
64+
font-size: 1rem;
65+
margin-left: 1rem;
66+
}
67+
.option{
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
71+
}
72+
.library{
73+
border-radius: 1rem;
74+
background-color: rgb(34, 33, 33);
75+
height: 100%;
76+
margin-top: 0.74rem;
77+
padding: 0.5rem 0.75rem;
78+
}
79+
.icons{
80+
font-size: 1rem;
81+
opacity:0.7;
82+
margin:1rem
83+
}
84+
.icons i{
85+
opacity:0.7;
86+
margin-right: 1rm;
87+
}
88+
.icons i:hover{
89+
opacity:1;
90+
91+
}
92+
.box{
93+
background-color: rgb(71, 70, 70);
94+
height: 8.125rem;
95+
border-radius: 0.813rem;
96+
margin-top: 1rem;
97+
}
98+
.box-p1{
99+
line-height:2.5rem;
100+
margin-left: 1rem;
101+
}
102+
.box-p2{
103+
line-height:2.5rem;
104+
margin-left: 1rem;
105+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
106+
font-weight: 300;
107+
}
108+
.badge{
109+
margin-left: 20px;
110+
background-color: white;
111+
border:none;
112+
border-radius: 100px;
113+
padding: 0.25rem 1rem;
114+
font-weight: 700;
115+
}
116+
.sticky-nav{
117+
position: sticky;
118+
top:0;
119+
background-color:rgb(34, 33, 33) ;
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: center;
123+
margin-top: 10px;
124+
margin-left: 7px;
125+
z-index: 10;
126+
}
127+
.sticky-nav-icons{
128+
margin-left: 0.75rem;
129+
}
130+
.sticky-nav-options{
131+
margin-left: 0.75rem;
132+
display: flex;
133+
justify-content: center;
134+
align-items: center;
135+
}
136+
.nav-items{
137+
margin-right: 1rem;
138+
}
139+
@media(max-width:1000px){
140+
.hide{
141+
display: none;
142+
}
143+
}
144+
.card{
145+
background-color: rgb(71, 70, 70);
146+
width:150px;
147+
border-radius:0.5rem;
148+
padding :0.5rem;
149+
margin:1.5rem
150+
}
151+
.card-container{
152+
display:flex;
153+
flex-wrap: wrap;
154+
}
155+
.card-image{
156+
width:100%;
157+
}
158+
.card-title{
159+
font-weight: 600;
160+
}
161+
.card-info{
162+
opacity:0.8;
163+
font-size: 0.75rem;
164+
}
165+
.footer{
166+
height: 300px;
167+
display: flex;
168+
align-items: center;
169+
justify-content: center;
170+
}
171+
.line{
172+
height: 50%;
173+
width: 90%;
174+
border-top:1px solid white ;
175+
opacity: 0.4;
176+
}
177+
.music-player{
178+
display: flex;
179+
justify-content: space-between;
180+
align-items: center;
181+
}
182+
.album{
183+
width: 25%;
184+
}
185+
.player{
186+
width: 50%;
187+
}
188+
.control{
189+
width: 25%;
190+
}
191+
.player-control{
192+
display: flex;
193+
justify-content: center;
194+
align-items: center;
195+
}
196+
.player-control-icon{
197+
height: 1rem;
198+
199+
margin-right: 2rem;
200+
margin-bottom: 0.1rem;
201+
opacity: 0.7;
202+
}
203+
.player-control-icon:hover{
204+
opacity:1;
205+
}
206+
.playback-bar{
207+
display: flex;
208+
justify-content: center;
209+
align-items: center;
210+
}
211+
.progress-bar{
212+
width: 70%;
213+
appearance: none;
214+
background-color: transparent;
215+
cursor: pointer;
216+
}
217+
.progress-bar::-webkit-slider-runnable-track{
218+
background-color: #ddd;
219+
border-radius: 100px;
220+
height: 0.2rem;
221+
}
222+
.progress-bar::-webkit-slider-thumb{
223+
appearance: none;
224+
height: 1rem;
225+
width: 1rem;
226+
background-color: #1bd760;
227+
border-radius: 50%;
228+
margin-top: -6px;
229+
}
230+
.volume{
231+
appearance: none;
232+
background-color: transparent;
233+
cursor: pointer;
234+
}
235+
.volume::-webkit-slider-runnable-track{
236+
background-color: #ddd;
237+
border-radius: 100px;
238+
height: 0.2rem;
239+
}
240+
.volume::-webkit-slider-thumb{
241+
appearance: none;
242+
height: 1rem;
243+
width: 1rem;
244+
background-color: #1bd760;
245+
border-radius: 50%;
246+
margin-top: -6px;
247+
}
248+
.first-line {
249+
display: flex; /* Align items in the same line */
250+
align-items: center; /* Center items vertically */
251+
}
252+
253+
.first-line img {
254+
margin-right: 10px; /* Space between image and text */
255+
}
256+
257+
.first-line p {
258+
margin-right: 10px;
259+
font-weight: 600;/* Space between text and icons */
260+
}
261+
262+
.artist-name {
263+
margin-top: 5px; /* Space above the artist name */
264+
}
265+
266+
.image-inside{
267+
268+
height: 50px;
269+
width: 50px;
270+
}
271+
#first{
272+
margin-left: 5px;
273+
}
274+
#second{
275+
margin-left: 5px;
276+
}
277+
#f1{
278+
margin-left: 2px;
279+
}
280+
#f2{
281+
margin-left: 2px;
282+
}
283+
#f3{
284+
margin-left: 2px;
285+
}
286+
#f4{
287+
margin-left: 2px;
288+
}
289+
#f5{
290+
margin-left: 2px;
291+
}
292+

0 commit comments

Comments
 (0)
Please sign in to comment.