Update index.html

index.html

@@ -351,6 +351,7 @@ button:hover {
 
     .downloads {
       background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
+      border-radius: 8px;
   max-width: 1000px;
   margin: 0 auto;
   padding: 20px;
@@ -362,7 +363,7 @@ button:hover {
 }
 
 .downloads-options {
-  width: 180px; 
+  width: 200px; 
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -423,43 +424,6 @@ button:hover {
 .download-button:hover {
   background-color: #2980b9;
 }
-      /* Styling for Select Tag with Fixed Size */
-
-/* Assuming a fixed width and height */
-.select-custom {
-  width: 200px; /* Adjust as needed */
-  height: 40px; /* Adjust as needed */
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  padding: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #fff;
-  
-}
-
-
-.select-custom::after {
-  content: '\25BC';
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-
-.select-custom option {
-  background-color: #fff;
-  color: #333;
-}
-
-
-.select-custom option:hover {
-  background-color: #f9f9f9;
-}
 
 .search-input {
   padding: 10px;
@@ -528,6 +492,13 @@ button:hover {
             <div class="downloads">
         <div class="downloads-options">
           <input type="text" id="search" placeholder="Search..." class="form-control">
+          <div style="width: 60px;">
+          <select id="sort">
+            <option value="recent"> Sort by Recent </option>
+            <option value="name">Sort by Name</option>
+            <option value="artist">Sort by Artist</option>
+          </select>
+          </div>
           
         </div>