corrected code

 avatar
Rohit143
html
2 years ago
17 kB
5
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>


        <div class="Song_side">

            <nav>
                <ul>
                    <li>Discover<span></span></li>
                    <li>MY LIBRARY</li>
                    <li>RADIO</li>
                    <div class="search">
                        <i class="bi bi-search"></i>
                        <input type="text" placeholder="Search Music..."></input>
                    </div>
                    <div class="user">
                        <img src="musiclogo.jpeg" alt="User" title="Magical Music"></img>
                    </div>
                </ul>
            </nav>
            <div class="content">
                <h1>Arijit Singh</h1>
                <p>
                    Arijit Singh (born 25 April 1987) is an Indian singer and music composer.
                    <br> He sings predominantly in Hindi and Bengali, but has also performed in</br>
                    Various other Indian languages.He is the recipient of a National Award and a record six Filmfare
                    Awards.
                </p>
                <div class="buttons">
                    <button>PLAY</button>
                    <button>FOLLOW</button>

                </div>
                <div class="popular_song">
                    <div class="h4">
                        <h4>Popular Song</h4>
                        <div class="btn_s">
                            <i id="left_scroll" class="bi bi-arrow-left-short"></i>
                            <i id="right_scroll" class="bi bi-arrow-right-short"></i>
                        </div>

                    </div>
                </div>
            </div>


        </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 class="icon">
                <i class="bi bi-skip-start-fill"></i>
                <i class="bi bi-play-fill"></i>
                <i class="bi bi-skip-end-fill"></i>

            </div>

            <span id="currentStart">0:00</span>
            <div class="bar">
                <input type="range" id="seek" min="0" value="0" max="100">
                <div class="bar2" id="bar2"></div>
                <div class="dot"></div>

            </div>

            <span id="currentEnd">0:00</span>
            <div class="vol">
                <i class="bi bi-volume-down-fill"></i>
                <input type="range" id="vol" min="0" value="30" max="100">
                <div class="vol_bar"></div>
                <div class="dot" id="vol_bar"></div>
            </div>



        </div>






    </header>
    <script src="app.js"></script>
</body>

</html>


<!-- style.css-->

<style>
/*Google Font 'Poppins'*/



*{
    padding: 0%;
    margin: 0%;
    box-sizing:border-box;


}

body
{
    width: 100%;
    height: 100vh;
    background-color: #131312;
    /* font-family: 'Poppins','Bell MT'; */
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;

}

header{
       width: 90%;
       height: 95%;
       border: 1px solid #fff; 
       background-color: #6d36ec38;
       display: flex;
       flex-wrap: wrap;
       /* overflow: hidden; */
}

header .menu_side, .song_side{
    width: 20%;
    position: relative;
    height: 90%;
    padding-right: 20px;
    background-color: #111727;
    box-shadow: 5px 0px 2px #090f1f;
    color: #fff;
}

header .song_side{
    width: 75%;
    background: #0b130b;
}

header .menu_side h1{
    font-size: 43px;
    margin: 15px 0px 0px 10px;
    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 15px;
    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: 35px;
    height: 35px;
    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: 5px;
    top: 6px;
    font-size: 16px;

}
header .master_play {
    /* margin-top: 27px; */
    display: flex;
    align-items: center;
    padding:  0px 0px 0px 10px;
    width: 100%;
    height: 10%;
    background: #111727;
    box-shadow: 0px 3px 8px #090f1f;
}
.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 ;
}
header .master_play h5{
    width: 130px;
    font-size: 13px;
    margin-left:  15px;
    color: #fff;
    line-height: 15px;
}

header.master_play h5.subtitle{
    font-size: 11px;
    color: #4c5262;
}

header .master_play .icon{
    font-size: 25px;
    color: #fff;
    margin: 0px 10px 0px 40px;
}

header .master_play .icon .bi{
    cursor:pointer;
    outline:none;
}

header .master_play .icon .bi:nth-child(2){
    border: 1px solid rgb(105,105,170,.1);
    border-radius: 50%;
    padding: 1px 3px 0px 6px;
    margin: 0px 5px;
    transition: .3s linear;
}

header .master_play span{
    color: #fff;
    width: 32px;
    font-size: 11px;
    font-weight: 400px;

}

header .master_play #currentStart{
    margin: 0px 0px 0px 80px;
   
}

header .master_play  .bar{
    position: relative;
    width: 43%;
    height: 2px;
    background:rgb(105,105,170,.1);
    margin:0px 15px 0px 10px;
    
}
header .master_play  .bar .bar2{
    position: absolute;
    background: #36e2ec;
    width: 0%;
    height: 100%;
    top:0; 
}

header .master_play  .bar .dot{
    position: absolute;
    width: 5px;
    height: 5px;
    background: #36e2ec;
    border-radius: 50%;
    left: 0%;
    top: -1px;
    transition: 1s linear;
}

header .master_play  .bar .dot::before{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid #36e2ec;
    border-radius: 50%;
    left: -6px;
    top:-6px;
    box-shadow: inset 0px 0px 3px #36e2ec;

}
header .master_play .bar input{
    position: absolute;
    width: 100%;
    top: -6px;
    left: 0;
    cursor: pointer;
    z-index: 99999999;
    transition: 3s linear;
    opacity: 0;
}
header .master_play .vol{
    position: relative;
    width: 100px;
    height: 2px;
    margin-left: 50px;
    background: rgb(105,105,170,.1);
}

header .master_play .vol .bi{
    position: absolute;
    color: #fff;
    font-size: 26px;
    top: -12px;
    left: -30px;
}
header .master_play .vol input{
    position: absolute;
    width: 100%;
    top: -10px;
    left: 0;
    cursor: pointer;
    z-index: 99999999;
    transition: 3s linear;
    opacity: 0;
}

header .master_play  .vol .vol_bar{
    position: absolute;
    background: #36e2ec;
    width: 0%;
    height: 100%;
    top:0; 
}

header .master_play  .vol .dot{
    position: absolute;
    width: 5px;
    height: 5px;
    background: #36e2ec;
    border-radius: 50%;
    left: 0%;
    top: -1px;
    transition: 1s linear;
}

header .master_play  .vol .dot::before{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid #36e2ec;
    border-radius: 50%;
    left: -6px;
    top:-6px;
    box-shadow: inset 0px 0px 3px #36e2ec;

}
header .Song_side{
    z-index: auto;
}
header .Song_side::before{
     content:'';
     position: absolute;
     width: 38%;
     height: 280px;
     right: 75px;
     background: url('arijit\ singh.jpg');
     z-index: -1;
    
}

header.Song_side nav{
    width: 90%;
    height:10%;
    margin:0;
    /*border: 1px solid #fff;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .Song_side nav ul{
    display: flex;

}
header .Song_side nav ul li{
    position: relative;
    list-style-type: none;
    font-size: 20px;
    color: #4c5262;
    margin-right: 25px;
    cursor: pointer;
    transition: 3s linear;
}
.Song_side{
    color: white;
    margin-left: 20px;
    
}
header .Song_side nav ul li:hover{
    color: #fff;
}
header .Song_side nav ul li:nth-child(1){
    color: #fff;
}
header .Song_side nav ul li span{
    position: absolute;
    width: 100%;
    height: 2.5px;
    background: #36e2ec;
    bottom: -5px;
    left: 0;
    border-radius: 20px;
}

header .Song_side nav .search{
    position: relative;
    
    padding: 1px 30px;
    color: grey;
    border-radius:20px;
}

header .Song_side nav .search::before{
      content: '';
    position: absolute;
    width: 150%;
    height: 100%;
    border-radius: 20px;
    background: rgb(184, 184, 184, .1 );
    backdrop-filter: blur(5px);
    z-index: -1;
}

header .Song_side nav .search .bi{
    font-size:18px;
    padding: 3px 0px 0px 10px;

}
header .Song_side nav .search input{
    background: none;
    outline: none;
    border: none;
    padding: 0px 10px;
    color: #fff;
    font-size: 18px;

}

header .Song_side nav .user{
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor:pointer;
    
}

header .Song_side nav .user img{
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 2px 2px 8px #131312;
    right: 0px;
    top: 0;
    left:250px
}

header .Song_side .content{
    width: 90%;
    height: 30%;
    margin: auto;
    /*border: 1px solid #fff;*/
    padding-top: 25px;

}
header .Song_side .content h1{
    font-size: 25px;
    font-weight: 600;
    
}
header .Song_side .content p{
    font-size: 16px;
    font-weight: 400;
    color: #4c5262;
    margin: 5px;
    
}
header .Song_side .content .buttons{
   margin-top: 15px;
}
header .Song_side .content .buttons button{
    width: 130px;
    height: 30px;
    border: 2px solid #36e2ec;
    outline: none;
    border-radius: 90px;
    background: #5adae0;
    color: #fff;
    cursor: pointer;
    transition: .3s linear;

} 
header .Song_side .content .buttons button:hover{
    border: 2px solid #36e2ec;
    background: none;
    color:#36e2ec;
}
header .Song_side .content .buttons button:nth-child(2){
    border:2px solid #36e2ec;
    background:none;
    color:#36e2ec;
}
 header .Song_side .content .buttons button:nth-child(2):hover{
     border:2px solid #36e2ec;
     background: #36e2ec;
     color:#fff;
}
header .Song_side .popular_song{
    width: 153%;
    height: 25%;
    border: 1px solid #fff;
    margin: 0px 0px 0px 0px;
    margin-top: 15px;
}
header .Song_side .popular_song .h4{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

</style>