Spaces:
Running
Running
Commit
•
6ca9a20
1
Parent(s):
1afc712
Update index.html
Browse files- index.html +49 -36
index.html
CHANGED
|
@@ -191,6 +191,28 @@
|
|
| 191 |
background-size: 1920px 1080px; /* Set the specific dimensions */
|
| 192 |
}
|
| 193 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 194 |
</style>
|
| 195 |
</head>
|
| 196 |
<body>
|
|
@@ -287,42 +309,33 @@
|
|
| 287 |
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
| 288 |
<div class="modal-dialog">
|
| 289 |
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
|
| 296 |
-
|
| 297 |
-
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
|
| 301 |
-
|
| 302 |
-
|
| 303 |
-
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
|
| 314 |
-
|
| 315 |
-
|
| 316 |
-
|
| 317 |
-
<img src="song3.jpg" alt="Song 3" class="col-2 col-md-1">
|
| 318 |
-
<div class="song-details col-10 col-md-11">
|
| 319 |
-
<p class="song-title">Song Title 3</p>
|
| 320 |
-
<p class="song-artist">Artist 3</p>
|
| 321 |
-
</div>
|
| 322 |
-
</li>
|
| 323 |
-
</ul>
|
| 324 |
-
</div>
|
| 325 |
-
</div>
|
| 326 |
</div>
|
| 327 |
</div>
|
| 328 |
</div>
|
|
|
|
| 191 |
background-size: 1920px 1080px; /* Set the specific dimensions */
|
| 192 |
}
|
| 193 |
}
|
| 194 |
+
|
| 195 |
+
main {
|
| 196 |
+
padding: 20px 0;
|
| 197 |
+
}
|
| 198 |
+
|
| 199 |
+
.playlist {
|
| 200 |
+
background-color: #fff;
|
| 201 |
+
border-radius: 5px;
|
| 202 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
| 203 |
+
padding: 20px;
|
| 204 |
+
}
|
| 205 |
+
|
| 206 |
+
.song1 {
|
| 207 |
+
border-bottom: 1px solid #ccc;
|
| 208 |
+
padding-bottom: 10px;
|
| 209 |
+
margin-bottom: 20px;
|
| 210 |
+
}
|
| 211 |
+
|
| 212 |
+
audio {
|
| 213 |
+
width: 100%;
|
| 214 |
+
margin-top: 10px;
|
| 215 |
+
}
|
| 216 |
</style>
|
| 217 |
</head>
|
| 218 |
<body>
|
|
|
|
| 309 |
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
| 310 |
<div class="modal-dialog">
|
| 311 |
|
| 312 |
+
<div class="modal-content">
|
| 313 |
+
<main>
|
| 314 |
+
<div class="container">
|
| 315 |
+
<section class="playlist">
|
| 316 |
+
<h2>Playlist</h2>
|
| 317 |
+
<div class="song1">
|
| 318 |
+
<h3>Song Title 1</h3>
|
| 319 |
+
<p>Artist: Singer Name</p>
|
| 320 |
+
<audio controls>
|
| 321 |
+
<source src="song1.mp3" type="audio/mpeg">
|
| 322 |
+
Your browser does not support the audio element.
|
| 323 |
+
</audio>
|
| 324 |
+
</div>
|
| 325 |
+
|
| 326 |
+
<div class="song1">
|
| 327 |
+
<h3>Song Title 2</h3>
|
| 328 |
+
<p>Artist: Singer Name</p>
|
| 329 |
+
<audio controls>
|
| 330 |
+
<source src="song2.mp3" type="audio/mpeg">
|
| 331 |
+
Your browser does not support the audio element.
|
| 332 |
+
</audio>
|
| 333 |
+
</div>
|
| 334 |
+
|
| 335 |
+
<!-- Add more songs as needed -->
|
| 336 |
+
</section>
|
| 337 |
+
</div>
|
| 338 |
+
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 339 |
</div>
|
| 340 |
</div>
|
| 341 |
</div>
|