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>
|