-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (69 loc) · 4.11 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<title>Spotify</title>
</head>
<body>
<div class="navbar">
<ul>
<li id="Home"><i class="fa-solid fa-house"></i><p>Home</p></li>
<li id="Search"><i class="fa-solid fa-magnifying-glass"></i><p>Search</p></li>
<li id="Library"><i class="fa-regular fa-bookmark"></i><p>Bookmark</p</li>
<li id="like"><img src="like.png"></li>
<li class="artists"><img src="images/art1.jpg"></li> <li class="artists"><img src="images/art2.jpg"></li>
<li class="artists"><img src="images/art3.webp"></li>
<li class="artists"><img src="images/art4.jpg"></li>
<li class="artists"><img src="images/art4.jpg"></li>
</ul>
</div>
<div class="topbar">
<input type="text" class="searchbar" placeholder="What do you want to listen to?">
<div class="sidebar">
<div class="premium">Explore Premium</div>
<div class="profile"><i class="fa-solid fa-user"></i></div>
<div class="users"><i class="fa-solid fa-users"></i></i></div></div>
</div>
<div class="front">
<div class="cover">
<img src="https://palyvoice.com/wp-content/uploads/2022/10/Taylor-Swift-Midnights-e1666897618365.webp">
<div class="head1">
<h1>BEST ENGLISH SONGS-</h1>
<h1>The Biggest And The Hottest</h1>
<h4>Listen to biggest english songs, only on the Best English Songs Playlist. Follow now!</h4>
</div>
</div>
<div class="buttons">
<button class="play">Play</button>
<button class="follow">Follow</button>
<button class="more"><i class="fa-solid fa-ellipsis"></i></button>
</div>
</div>
<div class="today">
<h1 class="recommend">Recommended for today</h1>
<ul>
<li class="songitem"><img src="images/cover1.png" alt="cover" id="1"><caption><h1>Gorgeous</h1><h3>Taylor Swift</h3></caption></li>
<li class="songitem"><img src="images/cover2.webp" alt="cover" id="2"><caption><h1>New Rules</h1><h3>Dua Lipa</h3></caption></li>
<li class="songitem"><img src="images/cover3.jpg" alt="cover" id="3"><caption><h1>Senorita</h1><h3>Camila Cabello, Shawn Mendes</h3></caption></li>
<li class="songitem"><img src="images/cover4.jpg" alt="cover" id="4"><caption><h1>Shape of you</h1><h3>Ed Sheeran</h3></caption></li>
<li class="songitem"><img src="images/cover5.jpg" alt="cover" id="5"><caption><h1>Back to you</h1><h3>Selena Gomez</h3></caption></li>
<li class="songitem"><img src="images/cover6.jpg" alt="cover" id="6"><caption><h1>Love Yourself</h1><h3>Justin Bieber</h3></caption></li>
<li class="songitem"><img src="images/cover7.jpg" alt="cover" id="7"><caption><h1>Attention</h1><h3>Charlie Puth</h3></caption></li>
<li class="songitem"><img src="images/cover8.jpg" alt="cover" id="8"><caption><h1>7 Rings</h1><h3>Ariana Grande</h3></caption></li>
<li class="songitem"><img src="images/cover9.jpg" alt="cover" id="9"><caption><h1>Driver's License</h1><h3>Olivia Rodrigo</h3></caption></li>
<li class="songitem"><img src="images/cover10.jpg" alt="cover" id="10"><caption><h1>Speechless</h1><h3>Naomi Scott</h3></caption></li>
</ul>
</div>
<footer>
<div class="play_bar"><div class="bwd"><i id="bwd" class="fa-solid fa-backward-step"></i></div>
<div id="pause"><i id= "masterplay" class="fa-solid fa-play"></i></div>
<div class="fwd"><i id="fwd" class="fa-solid fa-forward-step"></i></div></div>
<div class="range"><div class="gif"><img src="https://media4.giphy.com/media/mXbQ2IU02cGRhBO2ye/giphy.gif?cid=ecf05e476jsusmawvn7c76pfjrd5kwpku452wsur3qkn9bds&ep=v1_stickers_search&rid=giphy.gif&ct=s"></img></div><div class="currentsong"><p id="currentsong">Gorgeous | Taylor Swift</p></div><input type="range" name="range" id="progressBar" min="0" value="0" max="100" ></div>
</footer>
<div class="blank"></div>
<script src="script.js"></script>
</body>
</html>