Add files via upload

affancoder · May 11, 2024 · 899afda · 899afda
1 parent ddea749
commit 899afda
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
       <li class="brand"><img src="assests/logo.png" alt="spotify" />Music Play</li>
       <li>Home</li>
       <li>About</li>
-    </ul>
+    </ul>  
   </nav>
   <!-- Navbar End -->
   <div>
@@ -118,6 +118,56 @@ <h1>Best of Punjabi Hits - Dill Se Punjabi</h1>
       </div>
     </div>
 
+    <div class="contianer3">
+      <div class="container" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdLKk6b5rqN9pfV2F1XvrAJMBSniWdDN34nA-FulH4Yw&s); background-size: cover;">
+        <div class="songList">
+          <h1>Best of Bollywood Hits - Love Songs</h1>
+          <br>
+          <div>
+            <div class="songItem">
+              <img alt="1" width="89px" />
+              <span class="songName">Let me love you</span>
+              <span class="songListplay"><span class="timestamp">04:34 <i id="10" class="far songItemPlay fa-play-circle"></i></span></span>
+            </div>
+
+            <div>
+              <div class="songItem">
+                <img alt="1" width="89px" />
+                <span class="songName">Let me love you</span>
+                <span class="songListplay"><span class="timestamp">04:21 <i id="11" class="far songItemPlay fa-play-circle"></i></span></span>
+              </div>
+
+              <div>
+                <div class="songItem">
+                  <img alt="1" width="89px" />
+                  <span class="songName">Let me love you</span>
+                  <span class="songListplay"><span class="timestamp">04:14 <i id="12" class="far songItemPlay fa-play-circle"></i></span></span>
+                </div>
+
+                <div>
+                  <div class="songItem">
+                    <img alt="1" width="89px" />
+                    <span class="songName">Let me love you</span>
+                    <span class="songListplay"><span class="timestamp">03:39 <i id="13" class="far songItemPlay fa-play-circle"></i></span></span>
+                  </div>
+
+                  <div>
+                    <div class="songItem">
+                      <img alt="1" width="89px" />
+                      <span class="songName">Let me love you</span>
+                      <span class="songListplay"><span class="timestamp">06:34 <i id="14" class="far songItemPlay fa-play-circle"></i></span></span>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="songBanner"></div>
+        </div>
+      </div>
+    </div>
+
     <div class="bottom">
       <input type="range" name="range" id="myProgressBar" min="0" value="0" max="100" />
       <div class="icons">
@@ -132,5 +182,4 @@ <h1>Best of Punjabi Hits - Dill Se Punjabi</h1>
     <script src="https://kit.fontawesome.com/033520b209.js" crossorigin="anonymous"></script>
     <script src="script.js"></script>
 </body>
-
 </html>
diff --git a/script.js b/script.js
@@ -59,6 +59,31 @@ let songs = [
     filePath: "assests/10.mp3",
     coverPath: "cover/10.jpg",
   },
+  {
+    songName: " Sanam re",
+    filePath: "assests/11.mp3",
+    coverPath: "cover/11.jpeg",
+  },
+  {
+    songName: " Tera Hua",
+    filePath: "assests/12.mp3",
+    coverPath: "cover/12.jpg",
+  },
+  {
+    songName: " Dill Diya Gallan",
+    filePath: "assests/13.mp3",
+    coverPath: "cover/13.jpg",
+  },
+  {
+    songName: " Rafta Rafta",
+    filePath: "assests/14.mp3",
+    coverPath: "cover/14.jpg",
+  },
+  {
+    songName: " Baarish",
+    filePath: "assests/15.mp3",
+    coverPath: "cover/15.jpg",
+  },
 ];
 
 songItems.forEach((element, i) => {

diff --git a/style.css b/style.css
@@ -18,6 +18,7 @@ nav ul {
   height: 70px;
   background: black;
   color: white;
+  cursor: pointer;
 }
 .brand img {
   height: 50px;