API tools faq
paste
RyukiChan

Music

RyukiChan
May 30th, 2020
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Aroma - Music Player</title>
  6.     <link rel="icon" type="image/png" href="icon.ico">
  7.     <!-- Compiled and minified CSS -->
  8.         <!-- Desktop Layout -->
  9.         <link rel="stylesheet" type="text/css" href="css/style.css">
  10.         <!-- Mobile Layout -->
  11.         <link rel="stylesheet" type="text/css" href="css/m-Style.css">
  12.  
  13.     <!-- Font Awesome -->
  14.         <link href="fontawesome/css/all.css" rel="stylesheet">
  15.     <!-- jQuery Plugin  -->
  16.         <script src="jquery/jquery-3.3.1.js"></script>
  17. </head>
  18. <body>
  19.  
  20.     <div class="container">
  21.  
  22.     <section class="sidenav">
  23.         <a href="#" id="close">
  24.             <i class="fas fa-times"></i>
  25.         </a>
  26.  
  27.         <div class="rekomendasi">
  28.             <h2>Rekomendasi</h2>
  29.             <ul>
  30.                 <li>Awal</li>
  31.                 <li>Lembar lagu</li>
  32.                 <li>Sedang ramai</li>
  33.                 <li>MV</li>
  34.             </ul>
  35.         </div>
  36.  
  37.         <div class="line"></div>
  38.  
  39.         <div class="musik-saya">
  40.             <h2>Musik Saya</h2>
  41.             <ul>
  42.                 <li>Musik ponsel</li>
  43.                 <li>Favorit</li>
  44.                 <li>Terakhir kali</li>
  45.                 <li>Dibeli</li>
  46.                 <li>Berbagi</li>
  47.             </ul>
  48.         </div>
  49.  
  50.         <div class="line"></div>
  51.  
  52.         <div class="sedang-diputar">
  53.             <h5>Sedang Diputar</h5>
  54.             <img class="gantiAlbum" src="Albums/noAlbum.png">
  55.         </div>
  56.     </section>
  57.  
  58.     <section class="content">
  59.         <div class="top">
  60.            
  61.                 <form onsubmit="return false">
  62.                     <span class="div-search">
  63.                         <button class="btn-search" id="menu">
  64.                             <i class="fas fa-bars"></i>
  65.                         </button>
  66.                         <input type="text" name="cari" class="search">
  67.                 </form>
  68.             </span>
  69.  
  70.             <span class="utility">
  71.                 <ul>
  72.                     <li><img src="me.jpg"></li>
  73.                     <li><h5>Muhamad Ferdiansyah</h5></li>
  74.                     <li><a href="#"><i class="show-btn2 fas fa-cog"></i></a></li>
  75.                 </ul>
  76.             </span>
  77.         </div>
  78.  
  79.         <div class="mid">
  80.             <h3>Sering Kamu Dengar</h3>
  81.             <div class="sering" id="sering">       
  82.                     <!-- <li>
  83.                         <button class="album-sering">
  84.                             <img src="Albums/220px-Labrinth,_Sia_and_Diplo_Present..._LSD.png">
  85.                             <h4>Sia - LSD</h4>
  86.                             <h6>Thunderclouds</h6>
  87.                         </button>
  88.                     </li> -->
  89.             </div>
  90.         </div>
  91.  
  92.         <div class="list">
  93.             <div class="list-music">
  94.                 <h3>Daftar Lagu</h3>
  95.                 <div class="music" id="music">
  96.                 </div>
  97.             </div>
  98.  
  99.             <div class="list-artist">
  100.                 <h3>Daftar artist</h3>
  101.                 <div class="artist">
  102.                     <ul>
  103.                         <li>
  104.                             <img src="Artist/Anji.jpeg">
  105.                             <div class="data-artist">
  106.                                 <h6>Indonesia</h6>
  107.                                 <h4>Anji</h4>
  108.                             </div>
  109.                         </li>
  110.                         <li>
  111.                             <img src="Artist/afgan.jpeg">
  112.                             <div class="data-artist">
  113.                                 <h6>Indonesia</h6>
  114.                                 <h4>Afgan</h4>
  115.                             </div>
  116.                         </li>
  117.                         <li>
  118.                             <img src="Artist/selena.jpeg">
  119.                             <div class="data-artist">
  120.                                 <h6>Amerika Serikat</h6>
  121.                                 <h4>Selena Gomez</h4>
  122.                             </div>
  123.                         </li>
  124.                         <li>
  125.                             <img src="Artist/yojiro.jpeg">
  126.                             <div class="data-artist">
  127.                                 <h6>Jepang</h6>
  128.                                 <h4>Yojiro Noda</h4>
  129.                             </div>
  130.                         </li>
  131.                     </ul>
  132.                 </div>
  133.             </div>
  134.         </div>
  135.  
  136.         <div class="play-music">
  137.             <input id="progress" type="range" min="0" max="100" value="0"></input>
  138.             <div class="title">
  139.                 <h5 class="ubahJudul">.....</h5>
  140.                 <h6 class="ubahArtist-dari-judul">... </h6>
  141.             </div>
  142.             <div class="control">
  143.                 <a class="backward" href="#">
  144.                     <i class="fas fa-backward"></i>
  145.                 </a>       
  146.                 <a class="play" href="#">
  147.                     <i class="fas fa-play"></i>
  148.                 </a>
  149.                 <a class="forward" href="#">
  150.                     <i class="fas fa-forward"></i>
  151.                 </a>
  152.             </div>
  153.             <div class="volume-slider">
  154.                 <label><b>Volume : <b id="volume"></b>%</b></label>
  155.                 <br>
  156.                 <a href="#" id="mute">
  157.                     <i class="fas fa-volume-up fa-volume-mute"></i>
  158.                 </a>
  159.                 <input type="range" name="volume" min="0" max="100" value="100" >
  160.             </div>     
  161.         </div>
  162.     </section>
  163.  
  164.     <section class="recent">
  165.         <center>
  166.             <h1>Musik Terakhir</h1>
  167.             <div class="line"></div>
  168.  
  169.             <div class="list-recent">
  170.                 <ul>   
  171.                     <li>
  172.                         <h4>Mottohiro Hatta</h4>
  173.                         <h6>Tomoidatta sekai</h6>  
  174.                     </li>
  175.  
  176.                     <li>
  177.                         <h4>Westlife</h4>
  178.                         <h6>My love</h6>   
  179.                     </li>
  180.  
  181.                     <li>
  182.                         <h4>7!!</h4>
  183.                         <h6>Orange's</h6>  
  184.                     </li>
  185.  
  186.                     <li>
  187.                         <h4>Sia - LSD</h4>
  188.                         <h6>Thunderclouds</h6> 
  189.                     </li>
  190.  
  191.                     <li>
  192.                         <h4>Didi Kempot</h4>
  193.                         <h6>Stasiun balapan</h6>   
  194.                     </li>
  195.                     <li>
  196.                         <h4>Jack Stauber</h4>
  197.                         <h6>Buttercup</h6> 
  198.                     </li>
  199.                     <li>
  200.                         <h4>Linkin Park</h4>
  201.                         <h6>In The End</h6>
  202.                     </li>
  203.                 </ul>
  204.             </div>
  205.             <img class="icon" src="Icon.png"></img>
  206.         </center>
  207.     </section>
  208.  
  209.     <div id="big-play-music">
  210.         <div class="topNav">
  211.             <ul>
  212.                 <li>
  213.                     <a href="#" id="close">
  214.                         <i class="fas fa-times"></i>
  215.                     </a>
  216.                 </li>
  217.                 <li>
  218.                    
  219.                 </li>
  220.                 <li>
  221.                     <a href="#" id="headphones">
  222.                         <i class="fas fa-headphones-alt"></i>
  223.                     </a>
  224.                 </li>
  225.             </ul>  
  226.         </div>
  227.  
  228.         <div class="info">
  229.             <img class="gantiAlbum" src="Albums/noAlbum.png">
  230.             <h5 class="ubahJudul">.....</h5>
  231.             <h6 class="ubahArtist-dari-judul">... </h6>
  232.         </div>
  233.  
  234.         <div class="control">
  235.             <ul>
  236.                 <li id="currentTime">
  237.                     ../..
  238.                 </li>
  239.                 <li>
  240.                    
  241.                 </li>
  242.                 <li id="duration">
  243.                     ../..
  244.                 </li>
  245.             </ul>  
  246.             <input id="progress2" type="range" min="0" max="100" value="0"></input>
  247.             <div class="list-control">
  248.                 <a class="backward" href="#">
  249.                         <i class="fas fa-backward"></i>
  250.                 </a>       
  251.                 <a class="play" href="#">
  252.                     <i class="fas fa-play"></i>
  253.                 </a>
  254.                 <a class="forward" href="#">
  255.                     <i class="fas fa-forward"></i>
  256.                 </a>
  257.             </div>
  258.         </div>
  259.     </div>
  260.  
  261.     </div>
  262.     <!-- Compiled and minified JavaScript -->
  263.     <script type="text/javascript" src="js/script.js"></script>
  264. </script></body>
  265. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!