forked from meankit2610/CW-1-Spotify-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.html
More file actions
111 lines (99 loc) · 6.66 KB
/
search.html
File metadata and controls
111 lines (99 loc) · 6.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="asset/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="search.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/552818db49.js" crossorigin="anonymous"></script>
<title>Search- Spotify</title>
<style>
.sidebar-name a{
color: #b3b3b3;
}
.sidebar-name a:hover{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="d-flex flex-column flex-md-row">
<header class="d-flex order-1 order-md-0">
<nav id="sidebar" class="sidebar">
<a href="index.html">
<svg viewBox="0 0 1134 340" class="spotify-logo"><title>Spotify</title><path fill="currentColor" d="M8 171c0 92 76 168 168 168s168-76 168-168S268 4 176 4 8 79 8 171zm230 78c-39-24-89-30-147-17-14 2-16-18-4-20 64-15 118-8 162 19 11 7 0 24-11 18zm17-45c-45-28-114-36-167-20-17 5-23-21-7-25 61-18 136-9 188 23 14 9 0 31-14 22zM80 133c-17 6-28-23-9-30 59-18 159-15 221 22 17 9 1 37-17 27-54-32-144-35-195-19zm379 91c-17 0-33-6-47-20-1 0-1 1-1 1l-16 19c-1 1-1 2 0 3 18 16 40 24 64 24 34 0 55-19 55-47 0-24-15-37-50-46-29-7-34-12-34-22s10-16 23-16 25 5 39 15c0 0 1 1 2 1s1-1 1-1l14-20c1-1 1-1 0-2-16-13-35-20-56-20-31 0-53 19-53 46 0 29 20 38 52 46 28 6 32 12 32 22 0 11-10 17-25 17zm95-77v-13c0-1-1-2-2-2h-26c-1 0-2 1-2 2v147c0 1 1 2 2 2h26c1 0 2-1 2-2v-46c10 11 21 16 36 16 27 0 54-21 54-61s-27-60-54-60c-15 0-26 5-36 17zm30 78c-18 0-31-15-31-35s13-34 31-34 30 14 30 34-12 35-30 35zm68-34c0 34 27 60 62 60s62-27 62-61-26-60-61-60-63 27-63 61zm30-1c0-20 13-34 32-34s33 15 33 35-13 34-32 34-33-15-33-35zm140-58v-29c0-1 0-2-1-2h-26c-1 0-2 1-2 2v29h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v58c0 23 11 35 34 35 9 0 18-2 25-6 1 0 1-1 1-2v-21c0-1 0-2-1-2h-2c-5 3-11 4-16 4-8 0-12-4-12-12v-54h30c1 0 2-1 2-2v-22c0-1-1-2-2-2h-30zm129-3c0-11 4-15 13-15 5 0 10 0 15 2h1s1-1 1-2V93c0-1 0-2-1-2-5-2-12-3-22-3-24 0-36 14-36 39v5h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v89c0 1 1 2 2 2h26c1 0 1-1 1-2v-89h25l37 89c-4 9-8 11-14 11-5 0-10-1-15-4h-1l-1 1-9 19c0 1 0 3 1 3 9 5 17 7 27 7 19 0 30-9 39-33l45-116v-2c0-1-1-1-2-1h-27c-1 0-1 1-1 2l-28 78-30-78c0-1-1-2-2-2h-44v-3zm-83 3c-1 0-2 1-2 2v113c0 1 1 2 2 2h26c1 0 1-1 1-2V134c0-1 0-2-1-2h-26zm-6-33c0 10 9 19 19 19s18-9 18-19-8-18-18-18-19 8-19 18zm245 69c10 0 19-8 19-18s-9-18-19-18-18 8-18 18 8 18 18 18zm0-34c9 0 17 7 17 16s-8 16-17 16-16-7-16-16 7-16 16-16zm4 18c3-1 5-3 5-6 0-4-4-6-8-6h-8v19h4v-6h4l4 6h5zm-3-9c2 0 4 1 4 3s-2 3-4 3h-4v-6h4z"></path></svg>
</a>
<div class="menu-container">
<div class="sidebar-name-container" id="sidebar-name">
<i class="fa fa-home sidebar-icon" aria-hidden="true"></i>
<p class="sidebar-name"><a href="dashboard.html">Home</a></p>
</div>
<!-- <div class="sidebar-name-container" id="sidebar-name1">
<i class="fa fa-search" aria-hidden="true"></i>
<p class="sidebar-name">Search</p>
</div> -->
<div class="sidebar-name-container" id="sidebar-name2">
<i class="fa fa-list" aria-hidden="true"></i>
<p class="sidebar-name">Your Library</p>
</div>
</div>
<div class="sidebar-name-container playlist" id="sidebar-name3">
<i class="fa fa-plus-square" aria-hidden="true"></i>
<p class="sidebar-name" id="playlist">Create Playlist</p>
</div>
<div class="sidebar-name-container" id="sidebar-name4">
<i class="fa fa-gratipay" aria-hidden="true"></i>
<p class="sidebar-name">Liked Songs</p>
</div>
</nav>
</header>
<div class="content-container" id="home">
<div class="top-nav-container">
<!-- <div class="arrow-container">
<div><i class="fa fa-chevron-left arrows" aria-hidden="true"></i>
<i class="fa fa-chevron-right arrows" aria-hidden="true"></i>
</div>
</div> -->
<div class = "searchParent">
<img class = "icons" id = "mag" src = "mag.svg" alt="love Rishab>"/>
<input id="searchbar" type="text" onclick="" placeholder="Search..." >
<!-- <a style="padding-left: 50px;" href="#"><button class="bot-btn">Search</button></a> -->
</div>
<div class="user-choice-container">
<div class="nav_links">
<a href="#"><button class="bot-btn">Profile</button></a>
</div>
</div>
</div>
<div class="songItemContainer">
<!-- <h1 class="songHeading w-100">Happy World Music Day</h1>
<div class="songItem">
<img class="songBanner" src="img/1.jpg" alt="Bollywood butter"/>
<p class="songName">Bollywood Butter</p>
</div>
<div class="songItem">
<img class="songBanner" src="img/2.jpg" alt="punjabi 101" />
<p class="songName">Punjabi 101</p>
</div>
<div class="songItem">
<img src="img/3.jpg" alt="Kollywood Cream" class="songBanner" />
<p class="songName">Kollywood Cream</p>
</div>
<div class="songItem">
<img src="img/4.jpg" class="songBanner" alt="Indie India" />
<p class="songName">Indie India </p>
</div>
<div class="songItem">
<img src="img/5.jpg" class="songBanner" alt="Tollywood Pearls"/>
<p class="songName">Tollywood Pearls</p>
</div> -->
</div>
</div>
</div>
</body>
</html>
<script src="dashboard.js"></script>