Spaces:
Running
Running
JAYASWAROOP
commited on
Commit
•
d450781
1
Parent(s):
710766b
Update index.html
Browse files- index.html +450 -18
index.html
CHANGED
@@ -1,19 +1,451 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7 |
+
<title>Document</title>
|
8 |
+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
|
9 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
10 |
+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
11 |
+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
12 |
+
<script src="https://kit.fontawesome.com/20c5629a29.js" crossorigin="anonymous"></script>
|
13 |
+
<script src="audio.js"></script>
|
14 |
+
|
15 |
+
<style>
|
16 |
+
* {
|
17 |
+
box-sizing: border-box;
|
18 |
+
}
|
19 |
+
|
20 |
+
#myVideo {
|
21 |
+
position: fixed;
|
22 |
+
right: 0;
|
23 |
+
bottom: 0;
|
24 |
+
min-width: 100%;
|
25 |
+
min-height: 100%;
|
26 |
+
}
|
27 |
+
|
28 |
+
.slide{
|
29 |
+
height: 60vh;
|
30 |
+
width: 100%;
|
31 |
+
}
|
32 |
+
input{
|
33 |
+
border-radius: 9px;
|
34 |
+
border-width: 0px;
|
35 |
+
width: 170px;
|
36 |
+
}
|
37 |
+
.movie {
|
38 |
+
border-radius: 11px;
|
39 |
+
margin-bottom: 20px;
|
40 |
+
transition: transform 0.2s ease-in-out;
|
41 |
+
}
|
42 |
+
|
43 |
+
.movie:hover {
|
44 |
+
transform: scale(1.07);
|
45 |
+
}
|
46 |
+
.song{
|
47 |
+
border-top-left-radius: 11px;
|
48 |
+
border-top-right-radius: 11px;
|
49 |
+
}
|
50 |
+
#audioPlayer {
|
51 |
+
|
52 |
+
width: 1000px;
|
53 |
+
margin-top: 20px;
|
54 |
+
}
|
55 |
+
|
56 |
+
#audioPlayer {
|
57 |
+
border-radius: 8px;
|
58 |
+
padding: 10px;
|
59 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
60 |
+
}
|
61 |
+
|
62 |
+
#audioPlayer audio {
|
63 |
+
border-radius: 8px;
|
64 |
+
width: 1000px;
|
65 |
+
outline: none;
|
66 |
+
}
|
67 |
+
|
68 |
+
#audioPlayer audio::-webkit-media-controls-panel {
|
69 |
+
border-radius: 8px;
|
70 |
+
background-color: transparent;
|
71 |
+
border-radius: 6px;
|
72 |
+
}
|
73 |
+
|
74 |
+
#audioPlayer audio::-webkit-media-controls {
|
75 |
+
display: none !important;
|
76 |
+
}
|
77 |
+
|
78 |
+
#audioPlayer audio::-webkit-media-controls-play-button,Tum Kya Mile Rocky Aur Rani Kii Prem Kahaani 320 Kbps.mp3
|
79 |
+
#audioPlayer audio::-webkit-media-controls-volume-slider {
|
80 |
+
display: none !important;
|
81 |
+
}
|
82 |
+
|
83 |
+
#audioPlayer audio::--webkit-media-controls-current-time-display,
|
84 |
+
#audioPlayer audio::--webkit-media-controls-time-remaining-display {
|
85 |
+
font-family: Arial, sans-serif;
|
86 |
+
font-size: 14px;
|
87 |
+
color: rgb(174, 228, 253);
|
88 |
+
}
|
89 |
+
|
90 |
+
|
91 |
+
</style>
|
92 |
+
</head>
|
93 |
+
<body>
|
94 |
+
<div>
|
95 |
+
<video autoplay muted loop id="myVideo">
|
96 |
+
<source src="neon1.mp4.mp4" type="video/mp4">
|
97 |
+
</video>
|
98 |
+
|
99 |
+
<div>
|
100 |
+
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
|
101 |
+
<a class="navbar-brand" href="#"><img src="https://cdn.dribbble.com/users/3547568/screenshots/14395014/media/0b94c75b97182946d495f34c16eab987.jpg?resize=400x300&vertical=center" style="height: 65px; width: 65px; border-radius: 100px;"/></a>
|
102 |
+
<div>
|
103 |
+
<input type="search" id="searchBar" placeholder="Search for a song" class="mr-2 ml-2 p-2 mt-2">
|
104 |
+
</div>
|
105 |
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
106 |
+
<span class="navbar-toggler-icon"></span>
|
107 |
+
</button>
|
108 |
+
<div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
|
109 |
+
<div class="navbar-nav ml-auto">
|
110 |
+
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
|
111 |
+
<a class="nav-link text-white" href="#">LogIn</a>
|
112 |
+
<a class="nav-link text-white" href="#">SignUp</a>
|
113 |
+
<a class="nav-link text-white" href="#">PlayList</a>
|
114 |
+
<a class="nav-link text-white" href="#">About</a>
|
115 |
+
<a class="nav-link text-white" href="#">Settings</a>
|
116 |
+
<a class="nav-link text-white" href="#">Downloads</a>
|
117 |
+
</div>
|
118 |
+
</div>
|
119 |
+
</nav>
|
120 |
+
</div>
|
121 |
+
<div>
|
122 |
+
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
123 |
+
<ol class="carousel-indicators">
|
124 |
+
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
|
125 |
+
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
|
126 |
+
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
|
127 |
+
</ol>
|
128 |
+
<div class="carousel-inner">
|
129 |
+
<div class="carousel-item active">
|
130 |
+
<img src="https://img.freepik.com/free-vector/young-people-jumping-having-fun_23-2148313536.jpg?t=st=1700131011~exp=1700131611~hmac=d9864498c06aa235de278720d8abbca1263c0904b9afd1675cb489a559d65732" class="d-block slide" alt="...">
|
131 |
+
<div class="carousel-caption d-none d-md-block">
|
132 |
+
<h5>First slide label</h5>
|
133 |
+
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
134 |
+
</div>
|
135 |
+
</div>
|
136 |
+
<link rel="stylesheet" href="style.css">
|
137 |
+
<div class="carousel-item">
|
138 |
+
<img src="https://img.freepik.com/free-vector/flat-design-nostalgic-90-s-background_52683-72484.jpg?w=1380&t=st=1700130425~exp=1700131025~hmac=b93fc935100be45a915bc63d0ac7d6fa485afebe63e5aeba683502868b65a013" class="d-block slide" alt="...">
|
139 |
+
<div class="carousel-caption d-none d-md-block">
|
140 |
+
<h5>Second slide label</h5>
|
141 |
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
142 |
+
</div>
|
143 |
+
</div>
|
144 |
+
<div class="carousel-item">
|
145 |
+
<img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="...">
|
146 |
+
<div class="carousel-caption d-none d-md-block">
|
147 |
+
<h5>Third slide label</h5>
|
148 |
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
149 |
+
</div>
|
150 |
+
</div>
|
151 |
+
<div class="carousel-item">
|
152 |
+
<img src="https://img.freepik.com/free-vector/hand-drawn-flat-design-metaverse-background_23-2149257282.jpg?w=900&t=st=1700130483~exp=1700131083~hmac=e47fa0774a51bbf2170c2ee0333f93a846156dedf3fd5408b69274f423a7e4d8" class="d-block slide" alt="...">
|
153 |
+
<div class="carousel-caption d-none d-md-block">
|
154 |
+
<h5>Third slide label</h5>
|
155 |
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
156 |
+
</div>
|
157 |
+
</div>
|
158 |
+
</div>
|
159 |
+
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
|
160 |
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
161 |
+
<span class="sr-only">Previous</span>
|
162 |
+
</a>
|
163 |
+
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
|
164 |
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
165 |
+
<span class="sr-only">Next</span>
|
166 |
+
</a>
|
167 |
+
</div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
|
168 |
+
<link rel="stylesheet" href="search.css" />
|
169 |
+
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script>
|
170 |
+
</div>
|
171 |
+
|
172 |
+
<div class="fluid-container m-5">
|
173 |
+
|
174 |
+
<div class="row p-3">
|
175 |
+
<div class="col-12 mt-4">
|
176 |
+
<h1 class="text-white">
|
177 |
+
Trending Songs
|
178 |
+
</h1>
|
179 |
+
</div>
|
180 |
+
<div class="col-6 col-md-3">
|
181 |
+
<div class="shadow-lg bg-light movie">
|
182 |
+
<div>
|
183 |
+
<img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
|
184 |
+
</div>
|
185 |
+
<div class="p-3">
|
186 |
+
<h1 style="font-size: 28px;">Heeriye</h1>
|
187 |
+
<p style="font-size: 20px;">Description</p>
|
188 |
+
<audio controls autoplay class="d-none" id="audio">
|
189 |
+
<source src="ranjha.mp3" type="audio/mp3" />
|
190 |
+
</audio>
|
191 |
+
</div>
|
192 |
+
|
193 |
+
</div>
|
194 |
+
</div>
|
195 |
+
<div class="col-6 col-md-3">
|
196 |
+
<div class="shadow-lg bg-light movie">
|
197 |
+
<div>
|
198 |
+
<img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" style="width: 100%;" alt="" class="song">
|
199 |
+
</div>
|
200 |
+
<div class="p-3">
|
201 |
+
<h1 style="font-size: 28px;"><a href="Chaleya Jawan 320 Kbps(1).mp3" download>
|
202 |
+
Chaleya
|
203 |
+
</a></h1>
|
204 |
+
<p style="font-size: 20px;">
|
205 |
+
Description
|
206 |
+
</p>
|
207 |
+
</div>
|
208 |
+
</div>
|
209 |
+
</div>
|
210 |
+
<div class="col-6 col-md-3">
|
211 |
+
<div class="shadow-lg bg-light movie">
|
212 |
+
<div>
|
213 |
+
<img src="https://m.timesofindia.com/photo/96027287/size-75010/96027287.jpg" style="width: 100%;" alt="" class="song">
|
214 |
+
</div>
|
215 |
+
<div class="p-3">
|
216 |
+
<h1 style="font-size: 28px;"><a href="Apna Bana Le Bhediya 320 Kbps.mp3" download>
|
217 |
+
Apna Bana le
|
218 |
+
</a></h1>
|
219 |
+
<p style="font-size: 20px;">
|
220 |
+
Description
|
221 |
+
</p>
|
222 |
+
</div>
|
223 |
+
</div>
|
224 |
+
</div>
|
225 |
+
<div class="col-6 col-md-3">
|
226 |
+
<div class="shadow-lg bg-light movie">
|
227 |
+
<div>
|
228 |
+
<img src="https://images.fwdlife.in/2023/07/Feature-Image.jpg" style="width: 100%;" alt="" class="song">
|
229 |
+
</div>
|
230 |
+
<div class="p-3">
|
231 |
+
<h1 style="font-size: 28px;"><a href="Tum Kya Mile Rocky Aur Rani Kii Prem Kahaani 320 Kbps.mp3" download>
|
232 |
+
Tum Kya Mile
|
233 |
+
</a></h1>
|
234 |
+
<p style="font-size: 20px;">
|
235 |
+
Description
|
236 |
+
</p>
|
237 |
+
</div>
|
238 |
+
</div>
|
239 |
+
</div>
|
240 |
+
<div class="col-12 mt-3">
|
241 |
+
<h1 class="text-white">
|
242 |
+
Popular Songs
|
243 |
+
</h1>
|
244 |
+
</div>
|
245 |
+
<div class="col-6 col-md-3">
|
246 |
+
<div class="shadow-lg bg-light movie">
|
247 |
+
<div>
|
248 |
+
<img src="https://naasongsmix.com/wp-content/uploads/2022/06/rj.jpg" style="width: 100%;" alt="" class="song">
|
249 |
+
</div>
|
250 |
+
<div class="p-3">
|
251 |
+
<h1 style="font-size: 28px;"><a href="ranjha.mp3" download>
|
252 |
+
Ranjha</a>
|
253 |
+
</h1>
|
254 |
+
<p style="font-size: 20px;">
|
255 |
+
Description
|
256 |
+
</p>
|
257 |
+
</div>
|
258 |
+
</div>
|
259 |
+
</div>
|
260 |
+
<div class="col-6 col-md-3">
|
261 |
+
<div class="shadow-lg bg-light movie">
|
262 |
+
<div>
|
263 |
+
<img src="https://img.theweek.in/content/dam/week/news/entertainment/images/2022/8/4/sita-ramam.jpg" style="width: 100%;" alt="" class="song">
|
264 |
+
</div>
|
265 |
+
<div class="p-3">
|
266 |
+
<h1 style="font-size: 28px;">
|
267 |
+
Song Name6
|
268 |
+
</h1>
|
269 |
+
<p style="font-size: 20px;">
|
270 |
+
Description
|
271 |
+
</p>
|
272 |
+
</div>
|
273 |
+
</div>
|
274 |
+
</div>
|
275 |
+
<div class="col-6 col-md-3">
|
276 |
+
<div class="shadow-lg bg-light movie">
|
277 |
+
<div>
|
278 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
279 |
+
</div>
|
280 |
+
<div class="p-3">
|
281 |
+
<h1 style="font-size: 28px;">
|
282 |
+
Song Name7
|
283 |
+
</h1>
|
284 |
+
<p style="font-size: 20px;">
|
285 |
+
Description
|
286 |
+
</p>
|
287 |
+
</div>
|
288 |
+
</div>
|
289 |
+
</div>
|
290 |
+
<div class="col-6 col-md-3">
|
291 |
+
<div class="shadow-lg bg-light movie">
|
292 |
+
<div>
|
293 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
294 |
+
</div>
|
295 |
+
<div class="p-3">
|
296 |
+
<h1 style="font-size: 28px;">
|
297 |
+
Song Name8
|
298 |
+
</h1>
|
299 |
+
<p style="font-size: 20px;">
|
300 |
+
Description
|
301 |
+
</p>
|
302 |
+
</div>
|
303 |
+
</div>
|
304 |
+
</div>
|
305 |
+
<div class="col-12 mt-3">
|
306 |
+
<h1 class="text-white">
|
307 |
+
Best of 90's
|
308 |
+
</h1>
|
309 |
+
</div>
|
310 |
+
<div class="col-6 col-md-3">
|
311 |
+
<div class="shadow-lg bg-light movie">
|
312 |
+
<div>
|
313 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
314 |
+
</div>
|
315 |
+
<div class="p-3">
|
316 |
+
<h1 style="font-size: 28px;">
|
317 |
+
Song Name9
|
318 |
+
</h1>
|
319 |
+
<p style="font-size: 20px;">
|
320 |
+
Description
|
321 |
+
</p>
|
322 |
+
</div>
|
323 |
+
</div>
|
324 |
+
</div>
|
325 |
+
<div class="col-6 col-md-3">
|
326 |
+
<div class="shadow-lg bg-light movie">
|
327 |
+
<div>
|
328 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
329 |
+
</div>
|
330 |
+
<div class="p-3">
|
331 |
+
<h1 style="font-size: 28px;">
|
332 |
+
Song Name10
|
333 |
+
</h1>
|
334 |
+
<p style="font-size: 20px;">
|
335 |
+
Description
|
336 |
+
</p>
|
337 |
+
</div>
|
338 |
+
</div>
|
339 |
+
</div>
|
340 |
+
<div class="col-6 col-md-3">
|
341 |
+
<div class="shadow-lg bg-light movie">
|
342 |
+
<div>
|
343 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
344 |
+
</div>
|
345 |
+
<div class="p-3">
|
346 |
+
<h1 style="font-size: 28px;">
|
347 |
+
Song Name11
|
348 |
+
</h1>
|
349 |
+
<p style="font-size: 20px;">
|
350 |
+
Description
|
351 |
+
</p>
|
352 |
+
</div>
|
353 |
+
</div>
|
354 |
+
</div>
|
355 |
+
<div class="col-6 col-md-3">
|
356 |
+
<div class="shadow-lg bg-light movie">
|
357 |
+
<div>
|
358 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
359 |
+
</div>
|
360 |
+
<div class="p-3">
|
361 |
+
<h1 style="font-size: 28px;">
|
362 |
+
Song Name12
|
363 |
+
</h1>
|
364 |
+
<p style="font-size: 20px;">
|
365 |
+
Description
|
366 |
+
</p>
|
367 |
+
</div>
|
368 |
+
</div>
|
369 |
+
</div>
|
370 |
+
<div class="col-12 mt-3">
|
371 |
+
<h1 class="text-white">
|
372 |
+
Artists
|
373 |
+
</h1>
|
374 |
+
</div>
|
375 |
+
<div class="col-6 col-md-3">
|
376 |
+
<div class="shadow-lg bg-light movie">
|
377 |
+
<div>
|
378 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
379 |
+
</div>
|
380 |
+
<div class="p-3">
|
381 |
+
<h1 style="font-size: 28px;">
|
382 |
+
Song Name13
|
383 |
+
</h1>
|
384 |
+
<p style="font-size: 20px;">
|
385 |
+
Description
|
386 |
+
</p>
|
387 |
+
</div>
|
388 |
+
</div>
|
389 |
+
</div>
|
390 |
+
<div class="col-6 col-md-3">
|
391 |
+
<div class="shadow-lg bg-light movie">
|
392 |
+
<div>
|
393 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
394 |
+
</div>
|
395 |
+
<div class="p-3">
|
396 |
+
<h1 style="font-size: 28px;">
|
397 |
+
Song Name14
|
398 |
+
</h1>
|
399 |
+
<p style="font-size: 20px;">
|
400 |
+
Description
|
401 |
+
</p>
|
402 |
+
</div>
|
403 |
+
</div>
|
404 |
+
</div>
|
405 |
+
<div class="col-6 col-md-3">
|
406 |
+
<div class="shadow-lg bg-light movie">
|
407 |
+
<div>
|
408 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
409 |
+
</div>
|
410 |
+
<div class="p-3">
|
411 |
+
<h1 style="font-size: 28px;">
|
412 |
+
Song Name15
|
413 |
+
</h1>
|
414 |
+
<p style="font-size: 20px;">
|
415 |
+
Description
|
416 |
+
</p>
|
417 |
+
</div>
|
418 |
+
</div>
|
419 |
+
</div>
|
420 |
+
<div class="col-6 col-md-3">
|
421 |
+
<div class="shadow-lg bg-light movie">
|
422 |
+
<div>
|
423 |
+
<img src="https://i.ytimg.com/vi/FmbWT9zLV_A/maxresdefault.jpg" style="width: 100%;" alt="" class="song">
|
424 |
+
</div>
|
425 |
+
<div class="p-3">
|
426 |
+
<h1 style="font-size: 28px;">
|
427 |
+
Song Name16
|
428 |
+
</h1>
|
429 |
+
<p style="font-size: 20px;">
|
430 |
+
Description
|
431 |
+
</p>
|
432 |
+
</div>
|
433 |
+
</div>
|
434 |
+
</div>
|
435 |
+
</div>
|
436 |
+
</div>
|
437 |
+
</div>
|
438 |
+
<div>
|
439 |
+
<footer class="footer mt-auto py-3">
|
440 |
+
<div class="container">
|
441 |
+
<span class="text-muted">Place sticky footer content here.</span>
|
442 |
+
</div>
|
443 |
+
</footer>
|
444 |
+
</div>
|
445 |
+
|
446 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
447 |
+
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
448 |
+
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
449 |
+
<script src="script.js"></script>
|
450 |
+
</body>
|
451 |
+
</html>
|