-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (133 loc) · 6.59 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/logo.png">
<title>Spotify : Web play</title>
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="home-menu">
<div class="home"> <i class="fa-solid fa-house"></i>Home</div>
<div class="search"><i class="fa-solid fa-magnifying-glass"></i>Search</div>
</div>
<div class="optn-menu">
<div class="library-menu">
<div class="library-menu-icon"><img src="images/library_icon.png" alt="library" class="library">
Your Library</div>
<div class="library-icon"><i class="fa-solid fa-plus"></i><i class="fa-solid fa-arrow-right"></i></div>
</div>
<div class="card1">
<h3>Create your first playlist</h3>
<p>It,s easy.we'll help you</p>
<button>Create playlist</button>
</div>
<div class="card1">
<h3>Let,s find some podcasts to follow</h3>
<p>We'll keep you uploaded on new episodes</p>
<button>Browse podcasts</button>
</div>
</div>
</div>
<div class="hero-content">
<div class="nav-bar">
<div class="nav-icon">
<img src="images/backward_icon.png" class="backward-icon" alt="backward">
<img src="images/forward_icon.png" class="forward-icon" alt="forward">
</div>
<div class="nav-btn">
<button class="install-btn premium">Premium</button>
<button class="install-btn"><i class="fa-solid fa-download install-icon"></i>Install App</button>
<i class="fa-solid fa-user profile"></i>
</div>
</div>
<div class="below-nav">
<div class="first-line">
<h2 class="heading">Recently played</h2>
<div class="music-card1">
<img src="images/card1img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
</div>
<div class="second-line">
<h2 class="heading">Spotify original & exclusive prodcasts</h2>
<div class="line-cards">
<div class="music-card1">
<img src="images/card2img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
<div class="music-card1">
<img src="images/card3img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
<div class="music-card1">
<img src="images/card4img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
</div>
</div>
<div class="third-line">
<h2 class="heading">Spotify original & exclusive prodcasts</h2>
<div class="line-cards">
<div class="music-card1">
<img src="images/card5img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
<div class="music-card1">
<img src="images/card1img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
<div class="music-card1">
<img src="images/card2img.jpeg" alt="image" class="cards">
<h3>Top 50 - Global</h3>
<p class="card-content">Your daily update of the most played tracks right...</p>
</div>
</div>
</div>
</div>
</div>
<div class="music-playbar">
<div class="playbar-name">
<img src="images/card2img.jpeg" alt="image" class="playbar-image">
<h4 class="song">Daylight</h4>
<p class="singer">yoo honey singh</p>
<div class="playbar-name-icon">
<i class="fa-regular fa-heart fav"></i>
<i class="fa-solid fa-compact-disc album"></i>
</div>
</div>
<div class="player-optns">
<div class="upper-player-optns">
<img src="images/player_icon1.png" class="musicbar1" alt="icon">
<img src="images/player_icon2.png" class="musicbar1" alt="icon">
<img src="images/player_icon3.png" class="musicbar" alt="icon">
<img src="images/player_icon4.png" class="musicbar2" alt="icon">
<img src="images/player_icon5.png" class="musicbar2" alt="icon">
</div>
<div class="lower-player">00:00<input class="progress-bar" type="range" value="20" min="0" max="100">03:56</div>
</div>
<div class="player-menu">
<img src="images/controls_icon4.jpg" class="sp_icon" alt="icon">
<img src="images/controls_icon2.jpg" class="sp_icon" alt="icon">
<img src="images/controls_icon3.jpg" alt="icon">
<img src="images/controls_icon1.jpg" alt="icon">
<img src="images/controls_icon5.jpg" alt="icon">
<input class="vol" type="range" value="70" min="0" max="100">
</div>
</div>
</div>
</body>
</html>