-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (104 loc) · 4.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
<link rel="icon" type="image/png" href="/logo.png">
<script src="https://kit.fontawesome.com/7b482eb7ca.js" crossorigin="anonymous"></script>
<title>Kinetic Player</title>
</head>
<body>
<!-- Main Div -->
<div id="container">
<!-- Nav Bar -->
<div id="nav-bar">
<div id="nav-bar-left">
<img src="./assets/logo.png" id="logo">
<h3>Favourites</h3>
</div>
<div id="nav-bar-right">
<div id="search">
<i class="fa-solid fa-magnifying-glass" style="color: #eeeff2;"></i>
<input type="text" name="search" placeholder="Search">
<i class="fa-solid fa-microphone" style="color: #dee2e8;"></i>
</div>
<div id="nav-bar-widgets">
<i class="fa-solid fa-bell fa-2xl" style="color: #ffffff;"></i>
<img src="./assets/ProfilePicture.png" id="profile-picture">
</div>
</div>
</div>
<!-- Header Section -->
<div id="header">
<div id="poster-card">
<div id="poster-card-image">
<img src="./assets/coldplay.jpeg">
</div>
<div id="poster-card-content">
<div id="artist-heading">
<h1>
Coldplay
</h1>
<p>3.2M Followers</p>
</div>
<div id="artist-description">
<h4>British Band</h4>
<p>Coldplay is a british band that has enjoyed continous success since their inception in 1996 through their intelligence and soulful song. The band members are Chris Martin(lead vocals), Jonny Buckland (lead guitar), Guy Berryman (bass guitar) and Will Champion (drums)</p>
</div>
<div id="card-action-buttons">
<button id="play">Play</button>
<button id="follow">Follow +</button>
<p id="records">
247 Tracks | 187 Albums
</p>
</div>
</div>
</div>
<div id="similar-artists">
<div id="similar-artists-heading">
<h2>Similar Artists</h2>
<p>View All</p>
</div>
<div id="similar-artist-list">
<li>
<img src="./assets/imaginedragons.jpeg">
<div>
<h3>Imagine Dragons</h3>
<p>Pop Band</p>
</div>
<div>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<p>4.44</p>
</div>
</li>
<br>
<li>
<img src="./assets/chainsmokers.webp">
<div>
<h3>The Chainsmokers</h3>
<p>Pop Band</p>
</div>
<div>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<p>4.44</p>
</div>
</li><br>
<li>
<img src="./assets/weeknd.jpg">
<div>
<h3>The Weeknd</h3>
<p>Rock Artist</p>
</div>
<div>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<p>4.44</p>
</div>
</li><br>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>