1+ < html lang ="en ">
2+
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css ">
8+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css ">
9+ < link rel ="stylesheet " href ="style.css ">
10+ < title > Music App</ title >
11+ </ head >
12+
13+ < body >
14+ < div class ="bg ">
15+ < img src ="./2-removebg-preview.png " alt ="" class ="earphone ">
16+ < img src ="./1-removebg-preview.png " alt ="" class ="girl ">
17+ </ div >
18+
19+ < div id ="logo ">
20+ < img src ="rehan.jpeg " alt ="Official logo ">
21+ </ div >
22+
23+ < div class ="player ">
24+ < div class ="wrapper ">
25+ < div class ="details ">
26+ < div class ="now-playing "> Playing x OF y</ div >
27+ < div class ="track-art "> </ div >
28+ < div class ="track-name "> Track Name</ div >
29+ < div class ="track-artist "> Track Artist</ div >
30+ </ div >
31+
32+ < div class ="slider_container ">
33+ < div class ="current-time "> 00:00</ div >
34+ < input type ="range " min ="1 " max ="100 " value ="0 " class ="seek_slider " onchange ="seekTo() ">
35+ < div class ="total-duration "> 00:30</ div >
36+ </ div >
37+
38+ < div class ="buttons ">
39+ < div class ="random-track " onclick ="randomTrack() ">
40+ < i class ="fas fa-random fa-1x " title ="random "> </ i >
41+ </ div >
42+ < div class ="prev-track " onclick ="prevTrack() ">
43+ < i class ="fa fa-step-backward fa-2x "> </ i >
44+ </ div >
45+ < div class ="playpause-track " onclick ="playpauseTrack() ">
46+ < i class ="fa fa-play-circle fa-5x "> </ i >
47+ </ div >
48+ < div class ="next-track " onclick ="nextTrack() ">
49+ < i class ="fa fa-step-forward fa-2x "> </ i >
50+ </ div >
51+ < div class ="repeat-track " onclick ="repeatTrack() ">
52+ < i class ="fa fa-repeat fa-2x " title ="repeat "> </ i >
53+ </ div >
54+ </ div >
55+ </ div >
56+ </ div >
57+
58+ < script src ="index.js "> </ script >
59+ </ body >
60+
61+ </ html >
0 commit comments