Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@affancoder
affancoder committed May 10, 2024
1 parent 358ae9d commit 0c8bbfd
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 69 deletions.
174 changes: 107 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Play</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="assests/logo.png" class="rel">
</head>
<body>
<nav>
<ul>
<li class="brand"><img src="assests/logo.png" alt="spotify" />Music Play</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Play</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="assests/logo.png" class="rel">
</head>

<body>
<!-- Navbar Start -->
<nav>
<ul>
<li class="brand"><img src="assests/logo.png" alt="spotify" />Music Play</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<!-- Navbar End -->
<div>
<div class="container">
<div class="songList">
<h1>Best of NCS - No copyright sounds</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">05:34 <i id="0" class="far songItemPlay fa-play-circle"></i></span></span>
<span class="songListplay"><span class="timestamp">05:34 <i id="0" 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="1" class="far songItemPlay fa-play-circle"></i></span></span>
</div>

<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="2" 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="3" 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="4" class="far songItemPlay fa-play-circle"></i></span></span>
<img alt="1" width="89px" />
<span class="songName">Let me love you</span>
<span class="songListplay"><span class="timestamp">04:21 <i id="1" class="far songItemPlay fa-play-circle"></i></span></span>
</div>
</div>

<div>
<div class="songItem">
<img alt="1" width="89px" />
<span class="songName">Shape of you</span>
<span class="songListplay"
><span class="timestamp">02:54 <i id="5" class="far songItemPlay fa-play-circle"></i></span></span>
<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="2" 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="3" 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="4" class="far songItemPlay fa-play-circle"></i></span></span>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="songBanner"></div>
</div>
</div>

<div class="contianer2">
<div class="container" style="background-image: url(https://c4.wallpaperflare.com/wallpaper/738/744/882/music-vinyl-simple-background-minimalism-wallpaper-thumb.jpg); background-size: cover;">
<div class="songList">
<h1>Best of Punjabi Hits - Dill Se Punjabi</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="5" 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="6" 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="7" 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="8" 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="9" class="far songItemPlay fa-play-circle"></i></span></span>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="songBanner"></div>
</div>
</div>
</div>
</div>
</div>
<div class="songBanner"></div>
</div>
</div>

<div class="bottom">
<input type="range" name="range" id="myProgressBar" min="0" value="0" max="100"/>
<input type="range" name="range" id="myProgressBar" min="0" value="0" max="100" />
<div class="icons">
<i class="fa-solid fa-3x fa-step-backward" id="previous"></i>
<i class="fa-solid fa-3x fa-play-circle" id="masterPlay"></i>
<i class="fa-solid fa-3x fa-step-forward" id="next"></i>
</div>
<div class="songInfo">
<img src="assests/playing.gif" width="42px" alt="" id="gif"/><span id="masterSongName"></span>
<img src="assests/playing.gif" width="42px" alt="" id="gif" /><span id="masterSongName"></span>
</div>
</div>
<script
src="https://kit.fontawesome.com/033520b209.js"
crossorigin="anonymous"
></script>
<script src="https://kit.fontawesome.com/033520b209.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
</body>

</html>
24 changes: 22 additions & 2 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,30 @@ let songs = [
coverPath: "cover/5.jpg",
},
{
songName: "Shape of you",
filePath: "assests/ed.mp3",
songName: " Billian billian",
filePath: "assests/6.mp3",
coverPath: "cover/6.jpg",
},
{
songName: " Made in India",
filePath: "assests/7.mp3",
coverPath: "cover/7.jpeg",
},
{
songName: " Kya Baat Hai",
filePath: "assests/8.mp3",
coverPath: "cover/8.jpg",
},
{
songName: " Hookah Hookah",
filePath: "assests/9.mp3",
coverPath: "cover/9.jpg",
},
{
songName: " Ishare Tere",
filePath: "assests/10.mp3",
coverPath: "cover/10.jpg",
},
];

songItems.forEach((element, i) => {
Expand Down

0 comments on commit 0c8bbfd

Please sign in to comment.