music player
Rohit143
html
3 years ago
8.0 kB
5
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device,initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="style.css"> <title>Music App</title> </head> <body> <header> <div class="menu_side"> <h1>Playlist</h1> <div class="Playlist"> <h4 class="active"><i class="bi bi-music-note-beamed"></i>Playlist</h4> <h4><span></span><i class="bi bi-music-note-beamed"></i>Last Listening</h4> <h4><span></span><i class="bi bi-music-note-beamed"></i>Recommended</h4> </div> <div class="menu_song"> <li class="songItem"> <span>01</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="1"></i> </li> <li class="songItem"> <span>02</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="2"></i> </li> <li class="songItem"> <span>03</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="3"></i> </li> <li class="songItem"> <span>04</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="4"></i> </li> <li class="songItem"> <span>05</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="5"></i> </li> <li class="songItem"> <span>06</span> <img src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> <i class="bi Playlistplay bi bi-play-circle-fill" id="6"></i> </li> </div> <div class="Song_side"></div> <div class="master_play"> <div class="wave"> <div class="wave1"></div> <div class="wave1"></div> <div class="wave1"></div> </div> <img class="playing" src="mehendi.jpg" alt="Dhanvi bhanushali"> <h5> mehendi <div class="subtitle">dhanvi bhanushali</div> </h5> </div> </header> <script src="app.js"></script> </body> </html> <!-- style.css --> /*Google Font 'Poppins'*/ *{ padding: 0%; margin: 0%; box-sizing:border-box; } body { width: 100%; height: 100vh; background-color: #131312; font-family: 'Poppins',sans-serif; display: flex; align-items: center; justify-content: center; } header{ width: 85%; height: 95%; border: 1px solid #fff; display: flex; flex-wrap: wrap; overflow: hidden; } header .menu_side, .song_side{ position: relative; width: 32%; height: 100%; /* border: 1px solid #fff; */ background-color: #111727; box-shadow: 5px 0px 2px #090f1f; color: #fff; } header .song_side{ width: 75%; background: #0b130b; } header.master_play{ width:100%; height: 10%; background: #111727; box-shadow: 0px 3px 8px #090f1f; } header .menu_side h1{ font-size: 43px; margin: 15px 0px 0px 20px; font-weight: 500; color: #fff; } header .menu_side .Playlist{ margin: 40px 0px 0px 20px; } header .menu_side .Playlist h4{ font-size: 20px; font-weight: 400; padding-bottom: 10px; color: #4c5262; cursor: pointer; display: flex; align-items: center; transition: .3s linear; } header .menu_side .Playlist h4:hover{ color:#fff; } header .menu_side .Playlist h4 span{ position: relative; margin-right: 35px; } header .menu_side .Playlist h4 span::before{ content: ''; position: absolute; width: 4px; height: 4px; border: 2px solid #fff; border-radius: 50%; top:-4px; transition: .3s linear; } header .menu_side .Playlist h4:hover span::before{ border: 2px solid #fff; } header .menu_side .Playlist h4 .bi{ display:none } header .menu_side .Playlist .active{ color:#36e2ec; } header .menu_side .Playlist .active .span{ display: none; } header .menu_side .Playlist .active .bi{ display: flex; margin-right: 20px; } header .menu_side .menu_song{ width: 100%; height: 300px; /*border: 1px solid #fff;*/ margin-top: 40px; } header .menu_side .menu_song li{ position: relative; list-style-type: none; padding:5px 0px 5px 20px; display:flex; align-items: center; margin-bottom: 10px; cursor: pointer; transition: 3s linear; } header .menu_side .menu_song li:hover{ background: rgb(105,105,170,.1); } header .menu_side .menu_song li span{ font-size: 12px; font-weight: 600; color: #4c5262; } img{ width: 32px; height: 32px; margin-left: 30px; } header .menu_side .menu_song li h5{ font-size: 11px; margin-left: 15px; } .subtitle{ font-size: 11px; color: #4c5262; } header .menu_side .menu_song li .bi{ position: absolute; right: 15px; top: 6px; font-size: 16px; } header .master_play { display: flex; align-items: center; padding: 10px 0 0 20px; } .wave{ width: 30px; height: 30px; padding-bottom: 5px; display: flex; align-items: flex-end; margin-top: 10px; /* border: 1px solid #fff; */ } .wave1{ width: 3px; height: 10px; margin-right: 3px; border-radius: 10px 10px 0px 0px; background: #36e2ec; animation: unset; } .wave1:nth-child(2){ height: 13px; /*animation-delay: .4s ;*/ } .wave1:nth-child(3){ height: 8px; /*animation-delay: .8s;*/ } /*javascript class wave*/ .wave1{ animation: wave .5s linear infinite; } .wave1:nth-child(2){ animation-delay: .4s ; } .wave1:nth-child(3){ animation-delay: .8s; } @keyframes wave{ 0%{ height: 10px; } 50%{ height: 15px; } 100%{ height: 10px; } } header .master_play img{ width: 35px; height: 35px; } .playing{ width: 35px; height: 35px; margin: 10px ; }
Editor is loading...