<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" /> <script defer src="js/script.js"></script> <title>Music Player | OnlineITtuts Tutorials</title> </head> <body> <div class="background"> <img src="imgs_audio/img-1.jpg" id="bg_img" /> </div> <div class="container"> <!--===============Player Image================= --> <div class="player_img"> <img src="imgs_audio/img-1.jpg" id="cover" class="active" /> </div> <!--============Player Content --> <h2 id="music_title">Capital Letters</h2> <h3 id="musric_artist">Lorem, ipsum dolor.</h3> <!--==============Player Progress & Timmer --> <div class="player_progress" id="player_progress"> <div class="progress" id="progress"> <div class="music_duration"> <span id="current_time">0:00</span> <span id="duration">0:00</span> </div> </div> </div> <!--==============Player Controllers --> <div class="player_controls"> <i class="fa-solid fa-backward" title="Previous" id="prev"></i> <i class="fa-solid fa-play play-button" title="Play" id="play"></i> <i class="fa-solid fa-forward" title="Next" id="next"></i> </div> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter