music player

 avatar
Rohit143
html
2 years ago
8.0 kB
4
Indexable
Never
<!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 ;
}