Spaces:
Running
Running
Commit
·
e89aae7
1
Parent(s):
5c19f8f
Update index.html
Browse files- index.html +44 -5
index.html
CHANGED
|
@@ -362,8 +362,7 @@ button:hover {
|
|
| 362 |
}
|
| 363 |
|
| 364 |
.downloads-options {
|
| 365 |
-
|
| 366 |
-
justify-content: space-between;
|
| 367 |
align-items: center;
|
| 368 |
margin-bottom: 20px;
|
| 369 |
}
|
|
@@ -422,6 +421,44 @@ button:hover {
|
|
| 422 |
.download-button:hover {
|
| 423 |
background-color: #2980b9;
|
| 424 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 425 |
|
| 426 |
</style>
|
| 427 |
</head>
|
|
@@ -468,17 +505,19 @@ button:hover {
|
|
| 468 |
<div class="downloads">
|
| 469 |
<div class="downloads-options">
|
| 470 |
<input type="text" id="search" placeholder="Search...">
|
| 471 |
-
|
| 472 |
-
|
| 473 |
-
<select id="sort">
|
| 474 |
<option value="recent">Sort by Recent</option>
|
| 475 |
<option value="name">Sort by Name</option>
|
| 476 |
<option value="artist">Sort by Artist</option>
|
| 477 |
</select>
|
| 478 |
</div>
|
|
|
|
|
|
|
| 479 |
<div class="downloads-list">
|
| 480 |
<div class="download-item">
|
| 481 |
<img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" alt="Album 1 Cover">
|
|
|
|
| 482 |
<div class="download-info">
|
| 483 |
<h4>Album 1</h4>
|
| 484 |
<h5>Artist: Arijit Singh</h5>
|
|
|
|
| 362 |
}
|
| 363 |
|
| 364 |
.downloads-options {
|
| 365 |
+
|
|
|
|
| 366 |
align-items: center;
|
| 367 |
margin-bottom: 20px;
|
| 368 |
}
|
|
|
|
| 421 |
.download-button:hover {
|
| 422 |
background-color: #2980b9;
|
| 423 |
}
|
| 424 |
+
/* Styling for Select Tag with Fixed Size */
|
| 425 |
+
|
| 426 |
+
/* Assuming a fixed width and height */
|
| 427 |
+
.select-custom {
|
| 428 |
+
width: 200px; /* Adjust as needed */
|
| 429 |
+
height: 40px; /* Adjust as needed */
|
| 430 |
+
appearance: none;
|
| 431 |
+
-webkit-appearance: none;
|
| 432 |
+
-moz-appearance: none;
|
| 433 |
+
padding: 10px;
|
| 434 |
+
font-size: 16px;
|
| 435 |
+
border: 1px solid #ccc;
|
| 436 |
+
border-radius: 5px;
|
| 437 |
+
background-color: #fff;
|
| 438 |
+
/* Add your additional styling */
|
| 439 |
+
}
|
| 440 |
+
|
| 441 |
+
/* Styling for the dropdown arrow */
|
| 442 |
+
.select-custom::after {
|
| 443 |
+
content: '\25BC'; /* Unicode for down arrow */
|
| 444 |
+
position: absolute;
|
| 445 |
+
top: 50%;
|
| 446 |
+
right: 10px;
|
| 447 |
+
transform: translateY(-50%);
|
| 448 |
+
pointer-events: none;
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
/* Styling for the dropdown list */
|
| 452 |
+
.select-custom option {
|
| 453 |
+
background-color: #fff;
|
| 454 |
+
color: #333;
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
/* Hover effect on options */
|
| 458 |
+
.select-custom option:hover {
|
| 459 |
+
background-color: #f9f9f9;
|
| 460 |
+
}
|
| 461 |
+
|
| 462 |
|
| 463 |
</style>
|
| 464 |
</head>
|
|
|
|
| 505 |
<div class="downloads">
|
| 506 |
<div class="downloads-options">
|
| 507 |
<input type="text" id="search" placeholder="Search...">
|
| 508 |
+
<div>
|
| 509 |
+
<select id="sort" class="select-custom">
|
|
|
|
| 510 |
<option value="recent">Sort by Recent</option>
|
| 511 |
<option value="name">Sort by Name</option>
|
| 512 |
<option value="artist">Sort by Artist</option>
|
| 513 |
</select>
|
| 514 |
</div>
|
| 515 |
+
</div>
|
| 516 |
+
|
| 517 |
<div class="downloads-list">
|
| 518 |
<div class="download-item">
|
| 519 |
<img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" alt="Album 1 Cover">
|
| 520 |
+
|
| 521 |
<div class="download-info">
|
| 522 |
<h4>Album 1</h4>
|
| 523 |
<h5>Artist: Arijit Singh</h5>
|