Spaces:
Running
Running
Commit
•
27f221a
1
Parent(s):
e1d1a56
Update index.html
Browse files- index.html +67 -2
index.html
CHANGED
|
@@ -125,6 +125,33 @@
|
|
| 125 |
text-align: center;
|
| 126 |
color: red;
|
| 127 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 128 |
</style>
|
| 129 |
</head>
|
| 130 |
<body>
|
|
@@ -147,7 +174,7 @@
|
|
| 147 |
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
|
| 148 |
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal1" href="#">LogIn</a>
|
| 149 |
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal2" href="#">SignUp</a>
|
| 150 |
-
<a class="nav-link text-white" href="#">PlayList</a>
|
| 151 |
<a class="nav-link text-white" href="#">About</a>
|
| 152 |
<a class="nav-link text-white" href="#">Settings</a>
|
| 153 |
<a class="nav-link text-white" href="#">Downloads</a>
|
|
@@ -207,6 +234,44 @@
|
|
| 207 |
</div>
|
| 208 |
</div>
|
| 209 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 210 |
<div>
|
| 211 |
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
| 212 |
<ol class="carousel-indicators">
|
|
@@ -262,7 +327,7 @@
|
|
| 262 |
</h1>
|
| 263 |
</div>
|
| 264 |
<div class="col-sm-12 col-md-3">
|
| 265 |
-
|
| 266 |
<div>
|
| 267 |
<img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
|
| 268 |
</div>
|
|
|
|
| 125 |
text-align: center;
|
| 126 |
color: red;
|
| 127 |
}
|
| 128 |
+
.song-item {
|
| 129 |
+
margin-bottom: 10px;
|
| 130 |
+
padding: 10px;
|
| 131 |
+
background-color: #ffffff;
|
| 132 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| 133 |
+
}
|
| 134 |
+
|
| 135 |
+
.song-item img {
|
| 136 |
+
width: 50px;
|
| 137 |
+
height: 50px;
|
| 138 |
+
margin-right: 10px;
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
.song-details {
|
| 142 |
+
flex-grow: 1;
|
| 143 |
+
}
|
| 144 |
+
|
| 145 |
+
.song-title {
|
| 146 |
+
font-weight: bold;
|
| 147 |
+
margin: 0 0 5px 0;
|
| 148 |
+
}
|
| 149 |
+
|
| 150 |
+
.song-artist {
|
| 151 |
+
font-size: 14px;
|
| 152 |
+
color: #666666;
|
| 153 |
+
margin: 0;
|
| 154 |
+
}
|
| 155 |
</style>
|
| 156 |
</head>
|
| 157 |
<body>
|
|
|
|
| 174 |
<a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
|
| 175 |
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal1" href="#">LogIn</a>
|
| 176 |
<a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal2" href="#">SignUp</a>
|
| 177 |
+
<a class="nav-link text-white" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop" href="#">PlayList</a>
|
| 178 |
<a class="nav-link text-white" href="#">About</a>
|
| 179 |
<a class="nav-link text-white" href="#">Settings</a>
|
| 180 |
<a class="nav-link text-white" href="#">Downloads</a>
|
|
|
|
| 234 |
</div>
|
| 235 |
</div>
|
| 236 |
</div>
|
| 237 |
+
|
| 238 |
+
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
|
| 239 |
+
<div class="offcanvas-header">
|
| 240 |
+
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
|
| 241 |
+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="offcanvas-body">
|
| 244 |
+
<div class="container playlist">
|
| 245 |
+
<div class="py-4">
|
| 246 |
+
<h2 class="text-center">My Playlist</h2>
|
| 247 |
+
<ul class="list-unstyled song-list">
|
| 248 |
+
<li class="song-item row">
|
| 249 |
+
<img src="song1.jpg" alt="Song 1" class="col-2 col-md-1">
|
| 250 |
+
<div class="song-details col-10 col-md-11">
|
| 251 |
+
<p class="song-title">Song Title 1</p>
|
| 252 |
+
<p class="song-artist">Artist 1</p>
|
| 253 |
+
</div>
|
| 254 |
+
</li>
|
| 255 |
+
<li class="song-item row">
|
| 256 |
+
<img src="song2.jpg" alt="Song 2" class="col-2 col-md-1">
|
| 257 |
+
<div class="song-details col-10 col-md-11">
|
| 258 |
+
<p class="song-title">Song Title 2</p>
|
| 259 |
+
<p class="song-artist">Artist 2</p>
|
| 260 |
+
</div>
|
| 261 |
+
</li>
|
| 262 |
+
<li class="song-item row">
|
| 263 |
+
<img src="song3.jpg" alt="Song 3" class="col-2 col-md-1">
|
| 264 |
+
<div class="song-details col-10 col-md-11">
|
| 265 |
+
<p class="song-title">Song Title 3</p>
|
| 266 |
+
<p class="song-artist">Artist 3</p>
|
| 267 |
+
</div>
|
| 268 |
+
</li>
|
| 269 |
+
</ul>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
<div>
|
| 276 |
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
|
| 277 |
<ol class="carousel-indicators">
|
|
|
|
| 327 |
</h1>
|
| 328 |
</div>
|
| 329 |
<div class="col-sm-12 col-md-3">
|
| 330 |
+
<div class="shadow-lg bg-light movie">
|
| 331 |
<div>
|
| 332 |
<img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
|
| 333 |
</div>
|