Update index.html

index.html

@@ -349,7 +349,79 @@ button:hover {
   transform: translateX(30px);
 }
 
-    
+    .downloads {
+      background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.downloads h2 {
+  font-size: 32px;
+  margin-bottom: 30px;
+}
+
+.downloads-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.downloads-options input[type="text"],
+.downloads-options select {
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.downloads-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.download-item {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.download-item img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px 8px 0 0;
+}
+
+.download-info {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.download-info h3 {
+  margin-bottom: 10px;
+}
+
+.download-info p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #555;
+}
+
+.download-button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #3498db;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.download-button:hover {
+  background-color: #2980b9;
+}
       
     </style>
 </head>
@@ -379,12 +451,66 @@ button:hover {
                 <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal3" href="#">PlayList</a>
                 <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal4" href="#">About</a>
                 <a class="nav-link text-white" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Settings</a>
-                <a class="nav-link text-white" href="#">Downloads</a>
+                <a class="nav-link text-white" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Downloads</a>
                 </div>
             </div>
           </nav>
     </div>
 
+    <!--Downloads-->
+      
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+          <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Downloads</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div>
+          <div class="offcanvas-body">
+            <div class="downloads">
+        <div class="downloads-options">
+          <input type="text" id="search" placeholder="Search...">
+          <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 class="downloads-list">
+          <div class="download-item">
+            <img src="album_cover_1.jpg" alt="Album 1 Cover">
+            <div class="download-info">
+              <h3>Album 1</h3>
+              <p>Artist: Artist Name</p>
+              <p>Genre: Genre Name</p>
+              <a href="download_link_album_1.zip" download class="download-button">Download</a>
+            </div>
+          </div>
+          <div class="download-item">
+            <img src="album_cover_2.jpg" alt="Album 2 Cover">
+            <div class="download-info">
+              <h3>Album 2</h3>
+              <p>Artist: Artist Name</p>
+              <p>Genre: Genre Name</p>
+              <a href="download_link_album_2.zip" download class="download-button">Download</a>
+            </div>
+          </div>
+          <div class="download-item">
+            <img src="album_cover_2.jpg" alt="Album 2 Cover">
+            <div class="download-info">
+              <h3>Album 2</h3>
+              <p>Artist: Artist Name</p>
+              <p>Genre: Genre Name</p>
+              <a href="download_link_album_2.zip" download class="download-button">Download</a>
+            </div>
+          </div>
+          
+          <!-- Add more download items as needed -->
+        </div>
+      </div>
+      
+          </div>
+        </div>
+          
+
 <!-- Settiings page-->
             <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
             <div class="offcanvas-header">