-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathspotify.html
More file actions
249 lines (216 loc) · 17.6 KB
/
Copy pathspotify.html
File metadata and controls
249 lines (216 loc) · 17.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="icons/green-spotify_icon.svg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Spotify - Web Player: Music for everyone</title>
</head>
<body>
<div class="parent">
<nav>
<span class="left-nav">
<?xml version="1.0" ?><svg height="60px" version="1.1" viewBox="0 0 60 60" width="60px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="black" stroke="none" stroke-width="1"><g id="slice" transform="translate(-100.000000, -200.000000)"/><g fill="#000000" id="Spotify" transform="translate(12.000000, 18.000000)"><path d="M26.676152,23.5377386 C26.4592954,23.531377 26.2431339,23.4670537 26.0471289,23.343355 C26.0450438,23.343355 25.7941296,23.1814865 25.2790952,22.9008672 C24.7633657,22.6195411 24.0036726,22.2321875 23.0570101,21.825749 C21.1657704,21.0072173 18.5183129,20.1010361 15.5594715,19.7532662 C14.651037,19.6472387 13.7766601,19.5822086 12.9405111,19.5546414 C9.18027344,19.4288222 6.22490733,19.9978361 5.02038017,20.2791622 C4.61724933,20.3731732 4.43167013,20.430428 4.43097508,20.430428 C3.76024876,20.6304664 3.05824505,20.238165 2.86084995,19.556762 C2.66554,18.8739453 3.04920936,18.1586136 3.71924062,17.959282 C3.80473216,17.9345423 7.61709884,16.8042899 13.0204422,16.9817091 C13.9212312,17.0128105 14.8685887,17.0813749 15.8472235,17.1965914 C22.4120008,17.9776601 27.2982246,21.1125378 27.3885815,21.1598968 C27.982157,21.5380613 28.1614807,22.3325602 27.7903223,22.9340891 C27.5442735,23.3384071 27.1126454,23.5525825 26.676152,23.5377386 Z M31.2787942,15.9468814 C30.9688005,16.4494514 30.4308293,16.7194679 29.8852126,16.700383 C29.6141418,16.6911939 29.3437661,16.6106131 29.0991074,16.4551062 C29.0977173,16.4572267 29.0421131,16.41835 28.8926766,16.3299938 C28.7418501,16.2409308 28.5152627,16.1101636 28.2205602,15.9497088 C27.6269848,15.6259717 26.7567782,15.1806564 25.6662398,14.7106015 C23.4907233,13.7697847 20.4456954,12.7307159 17.0441051,12.3320528 C16.0029154,12.2090609 14.9957834,12.1362554 14.0331347,12.1044472 C9.7064287,11.9588362 6.3055335,12.612672 4.92307273,12.9364091 C4.46155742,13.045264 4.25234641,13.1074667 4.2509563,13.1095873 C3.41341722,13.3569846 2.5334799,12.8678447 2.28882118,12.0146773 C2.04277236,11.1608031 2.5230541,10.2666384 3.36267834,10.0206548 C3.46902148,9.98743282 7.88121905,8.68046801 14.1353075,8.88828178 C15.1778873,8.92291741 16.271901,9.00067086 17.4055328,9.13497227 C25.0121947,10.0411534 30.6671474,13.665171 30.779746,13.7294943 C31.5185875,14.2030835 31.7437848,15.1947934 31.2787942,15.9468814 Z M35.0181803,8.86354204 C34.6449367,9.46719156 33.9971472,9.78951495 33.3444922,9.76760261 C33.0212925,9.75699987 32.6953126,9.66157518 32.4026952,9.4735532 C32.4026952,9.4735532 32.33458,9.42972853 32.1580365,9.32440795 C31.9828831,9.22120791 31.7166777,9.06640786 31.3663709,8.87555849 C30.6685375,8.49739398 29.6419439,7.97361846 28.3574857,7.41803472 C25.7927394,6.31040148 22.20557,5.08401752 18.1999785,4.61396257 C16.9711245,4.46976526 15.7832786,4.38494332 14.650342,4.34818714 C8.70277191,4.14602817 4.2405305,5.22680113 3.30429387,5.47914641 C3.17084366,5.51448889 3.12358005,5.52862588 3.12358005,5.52862588 C2.1178381,5.82762324 1.06413748,5.23952442 0.769434933,4.21741997 C0.474732386,3.19390183 1.05023642,2.12019737 2.05806353,1.82120001 C2.18595331,1.78585753 7.39329172,0.242098123 14.7740614,0.488081765 C16.0050006,0.528372189 17.2950193,0.618848931 18.6329967,0.77718323 C27.6144738,1.84806029 34.282119,6.1237932 34.4176543,6.2008398 C35.3052372,6.76631944 35.5742228,7.96018832 35.0181803,8.86354204 Z"/></g></g></svg>
</span>
<span class="mid-nav">
<span class="home-icon">
<?xml version="1.0" ?><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><path d="M218.8,103.7,138.8,31a16,16,0,0,0-21.6,0l-80,72.7A16,16,0,0,0,32,115.5v92.1a16.4,16.4,0,0,0,4,11A15.9,15.9,0,0,0,48,224H96a8,8,0,0,0,8-8V168a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8v48a8,8,0,0,0,8,8h48a15.6,15.6,0,0,0,7.6-1.9A16.1,16.1,0,0,0,224,208V115.5A16,16,0,0,0,218.8,103.7Z"/></svg>
</span>
<span class="search-bar">
<span class="search-bar-left">
<span class="search-icon">
<!-- search svg -->
<?xml version="1.0" ?><svg class="feather feather-search" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/></svg>
</span>
<input type="text" placeholder="What do you want to play?">
</span>
<span class="search-bar-right">
<span class="stroke"></span>
<span class="folder-icon">
<?xml version="1.0" ?><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="1" id="_1"><path d="M397.13,450h-284a59.07,59.07,0,0,1-59-59V195a59.07,59.07,0,0,1,59-59H213a29,29,0,0,0,29-29,59.06,59.06,0,0,1,59-59h96.13a59.06,59.06,0,0,1,59,59V391A59.06,59.06,0,0,1,397.13,450Zm-284-284a29,29,0,0,0-29,29V391a29,29,0,0,0,29,29h284a29,29,0,0,0,29-29V107a29,29,0,0,0-29-29H301a29,29,0,0,0-29,29,59.07,59.07,0,0,1-59,59Z"/></g></svg>
</span>
</span>
</span>
</span>
<span class="right-nav">
<button class="sign-up"><a href="/node.js/sign in.html">Sign up</a></button>
<button class="log-in"><a href="/JAVA/Html.html">Log in</a></button>
</span>
<span class="hamburger">
<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 18.0048C22 18.5544 21.5544 19 21.0048 19H12.9952C12.4456 19 12 18.5544 12 18.0048C12 17.4552 12.4456 17.0096 12.9952 17.0096H21.0048C21.5544 17.0096 22 17.4552 22 18.0048Z" fill="currentColor"/><path d="M22 12.0002C22 12.5499 21.5544 12.9954 21.0048 12.9954H2.99519C2.44556 12.9954 2 12.5499 2 12.0002C2 11.4506 2.44556 11.0051 2.99519 11.0051H21.0048C21.5544 11.0051 22 11.4506 22 12.0002Z" fill="currentColor"/><path d="M21.0048 6.99039C21.5544 6.99039 22 6.54482 22 5.99519C22 5.44556 21.5544 5 21.0048 5H8.99519C8.44556 5 8 5.44556 8 5.99519C8 6.54482 8.44556 6.99039 8.99519 6.99039H21.0048Z" fill="currentColor"/></svg>
</span>
</nav>
<!-- mid-part -->
<div class="mid-part">
<div class="left-mid">
<span class="left-mid-top">
<span class="layer-x-p">
<span class="layers">
<?xml version="1.0" ?><svg class="feather feather-layers" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
</span>
<span class="your-library">Your Library</span>
</span>
<button class="plus">
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2 s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/></svg>
</button>
</span>
<div class="fixed-mid">
<div class="first">
<h1>Create your first playlist</h1>
<p>It's easy, we'll help you</p>
<button>Create playlist</button>
</div>
<div class="second">
<h1>Let's find some podcasts to follow</h1>
<p>We'll keep you updated on new episodes</p>
<button><a style="text-decoration: none; color: black;" href="/ass/vincent favour work.html">Our Team</a></button>
</div>
</div>
<div class="left-mid-bottom">
<span>
<a href="http://">Legal</a>
<a href="http://">Safety & Privacy Center</a>
<a href="http://">Privacy Policy</a>
</span>
<span>
<a href="http://">Cookies</a>
<a href="http://">About Ads</a>
<a href="http://">Accessibility</a>
</span>
<span class="cookies">Cookies</span>
<button class="lang">
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M251.823,446.874H256h4.177h7.498v-0.39c99.829-6.058,179.202-89.161,179.202-190.481 c0-101.327-79.373-184.43-179.202-190.481c-2.478-0.151-4.97-0.233-7.473-0.283c-1.396-0.038-2.793-0.113-4.202-0.113 s-2.806,0.075-4.202,0.113c-2.503,0.05-4.995,0.132-7.473,0.283c-99.829,6.051-179.202,89.154-179.202,190.481 c0,101.32,79.373,184.423,179.202,190.481v0.39H251.823z M290.472,419.938c27.93-27.389,48.229-55.966,60.741-85.55h52.775 C381.016,377.592,339.688,409.61,290.472,419.938z M423.528,256.003c0,19.281-3.314,37.787-9.336,55.042h-54.777 c4.719-16.776,7.084-33.83,6.945-51.16c-0.164-20.859-3.85-40.592-9.713-58.929h57.545 C420.213,218.217,423.528,236.723,423.528,256.003z M403.989,177.612h-56.273c-16.406-37-40.436-66.691-58.715-85.852 C338.871,101.761,380.789,133.975,403.989,177.612z M267.675,103.535c15.626,15.89,37.78,41.737,54.022,74.076h-54.022V103.535z M267.675,200.956h64.138c6.719,18.361,11.047,38.265,11.197,59.249c0.125,17.186-2.598,34.139-8.027,50.84h-67.308V200.956z M267.675,334.388h57.847c-12.568,25.778-31.842,50.877-57.847,75.127V334.388z M244.325,311.045h-67.308 c-5.429-16.701-8.152-33.654-8.027-50.84c0.151-20.984,4.479-40.888,11.197-59.249h64.137V311.045z M244.325,177.612h-54.022 c16.242-32.339,38.396-58.193,54.022-74.083V177.612z M223.001,91.76c-18.28,19.161-42.31,48.852-58.715,85.852h-56.274 C131.21,133.975,173.13,101.761,223.001,91.76z M88.473,256.003c0-19.28,3.315-37.787,9.335-55.047h57.545 c-5.862,18.336-9.542,38.069-9.712,58.929c-0.138,17.33,2.227,34.384,6.945,51.16H97.808 C91.788,293.79,88.473,275.284,88.473,256.003z M108.011,334.388h52.777c12.518,29.584,32.811,58.161,60.747,85.55 C172.312,409.61,130.984,377.592,108.011,334.388z M186.478,334.388h57.847v75.127C218.321,385.265,199.047,360.167,186.478,334.388 z"/></svg>
<a href="/cosc 209/index.html">Services</a>
</button>
</div>
</div>
<div class="right-mid">
<div class="fixed-right">
<div class="one-main">
<div class="album-headers">
<h1>Popular artists</h1>
<p>Show all</p>
</div>
<div class="one-mid mid-divs">
<!-- <div class="artist">
<img src="images/artist_cover/asake_pic.jpg" alt="asake">
<span>
<h1>Asake</h1>
<p>Artist</p>
</span>
</div>
<div class="artist">
<img src="images/artist_cover/asake_pic.jpg" alt="asake">
<span>
<h1>Rema</h1>
<p>Artist</p>
</span>
</div> -->
</div>
</div>
<div class="two-main">
<div class="album-headers">
<h1>Popular albums</h1>
<p>Show all</p>
</div>
<div class="two-mid mid-divs">
</div>
</div>
<div class="three-main">
<div class="album-headers">
<h1>Popular radio</h1>
<p>Show all</p>
</div>
<div class="three-mid mid-divs"></div>
</div>
<div class="four-main">
<div class="album-headers">
<h1>Featured Charts</h1>
<!-- <p>Show all</p> -->
</div>
<div class="four-mid mid-divs"></div>
</div>
<div class="five-main">
<div class="album-headers">
<h1>Spotify Playlists</h1>
<p>Show all</p>
</div>
<div class="five-mid mid-divs"></div>
</div>
<div class="last">
<div class="last-up">
<div class="foots">
<h1>Company</h1>
<p>About</p>
<p>Jobs</p>
<p>For the Record</p>
</div>
<div class="foots">
<h1>Communities</h1>
<p>For Artists</p>
<p>Developers</p>
<p>Advertising</p>
<p>Investors</p>
<p>Vendors</p>
</div>
<div class="foots">
<h1>Useful Links</h1>
<p>Support</p>
<p>Free Mobile App</p>
</div>
<div class="foots">
<h1>Spotify Plans</h1>
<p>Premium Individual</p>
<p>Premium Duo</p>
<p>Premium Family</p>
<p>Premium Student</p>
<p>Spotify Free</p>
</div>
<div class="foots foots-with-svg">
<span class="foot-svg">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve">
<g>
<path d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8s5.7,12.8,12.8,12.8S41,36.5,41,29.5S35.2,16.7,28.2,16.7z M28.2,37.7
c-4.5,0-8.2-3.7-8.2-8.2s3.7-8.2,8.2-8.2s8.2,3.7,8.2,8.2S32.7,37.7,28.2,37.7z"/>
<circle cx="41.5" cy="16.4" r="2.9"/>
<path d="M49,8.9c-2.6-2.7-6.3-4.1-10.5-4.1H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.3,1.4,8,4.2,10.7c2.7,2.6,6.3,3.9,10.4,3.9
h20.4c4.3,0,7.9-1.4,10.5-3.9c2.7-2.6,4.1-6.3,4.1-10.6V19.3C53,15.1,51.6,11.5,49,8.9z M48.6,39.9c0,3.1-1.1,5.6-2.9,7.3
s-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.9-7.3-2.6C8.9,45.4,8,42.9,8,39.8V19.3c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6
c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2V39.9L48.6,39.9z"/>
</g>
</svg>
</span>
<span class="foot-svg">
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454 c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303 c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412 c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91 c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019 c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541 c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"/></svg>
</span>
<span class="foot-svg">
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512,257.555c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z" style="fill-rule:nonzero;"/></svg>
</span>
</div>
</div>
<div class="last-down">
<p>© Spotify 2024 AB</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="foot-left">
<span class="prev">Preview of Spotify</span>
<span class="prev-explain">Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed.</span>
</div>
<div class="foot-right">
<button><a style="text-decoration: none; color: black;" href="/Spotify Clone/ContactUs.html">Contact us for free</a></button>
</div>
</footer>
</div>
<script src="scripts/artist.js"></script>
<script src="scripts/albums.js"></script>
<script src="scripts/radio.js"></script>
<script src="scripts/charts.js"></script>
<script src="scripts/playlist.js"></script>
</body>
</html>