Untitled
unknown
plain_text
3 years ago
17 kB
3
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>
<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 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----
/*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;
}