<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap"
rel="stylesheet"
/>
<div class="container">
<div class="bubble pink-bubble"></div>
<div class="bubble blue-bubble"></div>
<div class="bubble small-p-bubble"></div>
<div class="bubble small-b-bubble"></div>
<div class="wrapper">
<div class="app-ui left-ui">
<div class="header">
<div class="discover">Discover</div>
<div class="menu-line"></div>
</div>
<div class="left-menu-bar">
<div class="playlist">
<div class="playlist-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
<g
fill="#FFF"
fill-rule="evenodd"
stroke="#10335C"
stroke-width="3"
>
<rect width="21" height="21" x="7" y="7" rx="5" />
<rect width="21" height="21" x="1" y="1" rx="5" />
</g>
</svg>
</div>
<div class="ur-playlist">Your playlist</div>
</div>
<div class="like-recent">
<div class="ur-playlist recent">Recent</div>
<div class="recent-detail"></div>
<div class="ur-playlist like">Like</div>
</div>
</div>
<div class="album-img">
<div class="relax">Relax</div>
<button class="btn play-pause">
<div class="icon-container">
<div class="icon play">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 308.838 308.838"
>
<path
fill="#063064"
d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
<div class="icon-container">
<div class="icon pause">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 493.528 493.528"
>
<path
fill="#063064"
d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
</button>
</div>
<div class="flowers-img"></div>
<div class="music-list">
<div class="song">
<div class="song-img">
<img
src="https://images.unsplash.com/photo-1574281183650-14db8f28c259?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
/>
</div>
<div class="song-detail">
<div class="song-name">Sunset</div>
<div class="artist">The xx</div>
</div>
</div>
<div class="song">
<div class="song-img">
<img
src="https://images.unsplash.com/photo-1496324839965-d6281225d8eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80"
/>
</div>
<div class="song-detail">
<div class="song-name">The pursuit of happiness</div>
<div class="artist">Beyries</div>
</div>
</div>
<div class="song">
<div class="song-img">
<img
src="https://images.unsplash.com/photo-1506079619863-0bf287d459e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
/>
</div>
<div class="song-detail">
<div class="song-name">Run</div>
<div class="artist">Daughter</div>
</div>
</div>
</div>
<div class="player-bg">
<button class="btn play-pause">
<div class="icon-container">
<div class="icon play small-play">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 308.838 308.838"
>
<path
fill="#063064"
d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
<div class="icon-container">
<div class="icon pause small-pause">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 493.528 493.528"
>
<path
fill="#063064"
d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
</button>
</div>
<div class="player-info">
<div class="player-cover">
<img
src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
/>
<div class="pointer"></div>
</div>
<div class="song-detail">
<div class="song-name">Tearing Me up</div>
<div class="artist play-artist">Bob Moses</div>
</div>
<svg
fill="none"
stroke="#063064"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="blue-heart"
viewBox="0 0 24 24"
>
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
/>
</svg>
</div>
<div class="nav">
<div class="nav-first">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="feather feather-home"
viewBox="0 0 24 24"
>
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="css-i6dzq1"
viewBox="0 0 24 24"
>
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
</svg>
<svg
style="width: 15px; height: 15px;"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 29 29"
>
<g
fill="#FFF"
fill-rule="evenodd"
stroke="currentColor"
stroke-width="3"
>
<rect width="21" height="21" x="7" y="7" rx="5" />
<rect width="21" height="21" x="1" y="1" rx="5" />
</g>
</svg>
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="css-i6dzq1"
viewBox="0 0 24 24"
>
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
/>
</svg>
</div>
</div>
</div>
<div class="app-ui right-ui">
<div class="play-action">
<div class="half-arrow">
<div class="line">
<div class="other-line"></div>
</div>
</div>
<div class="what-play">Now playing</div>
<div class="double-dot">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="app-ui inside-right">
<div class="bigPlay">
<img src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
<div class="grey-detail"></div>
<div class="grey-detail-sec"></div>
<button class="btn play-pause">
<div class="icon-container">
<div class="icon play bigger-play">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 308.838 308.838"
>
<path
fill="#063064"
d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
<div class="icon-container">
<div class="icon pause bigger-pause">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 493.528 493.528"
>
<path
fill="#063064"
d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
class="active-path"
data-old_color="#000000"
data-original="#000000"
/>
</svg>
</div>
</div>
</button>
<div class="song-detail right-detail">
<div class="song-name right-song">Tearing Me Up</div>
<div class="artist play-artist right-artist">Bob Moses</div>
</div>
<div class="line-wrapper">
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
<div class="lines grey"></div>
</div>
<div class="second">
<div class="listened">0:39</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.88 477.88">
<path fill="#063064" d="M468.46 1.8a17.06 17.06 0 00-15.3 0L9.44 223.69a17.07 17.07 0 004.58 32.05l176.1 32.03 32.04 176.11a17.07 17.07 0 0032.05 4.58L476.07 24.7a17.07 17.07 0 00-7.61-22.9z" class="active-path" data-old_color="#000000" data-original="#000000"/>
</svg>
<div class="listen">6:28</div>
</div>
<div class="left-bar-wrapper">
<svg class="addTo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<path fill="#063064" d="M934 822H794v140c0 15.5-12.5 28-28 28s-28-12.5-28-28V822H598c-15.5 0-28-12.5-28-28s12.5-28 28-28h140V626c0-15.5 12.5-28 28-28s28 12.5 28 28v140h140c15.5 0 28 12.5 28 28s-12.5 28-28 28zM738 122c0-30.9-25.1-56-56-56H150c-30.9 0-56 25.1-56 56v756c0 30.9 25.1 56 56 56h364v56H122c-46.4 0-84-37.6-84-84V94c0-46.4 37.6-84 84-84h588c46.4 0 84 37.6 84 84v364h-56V122z"/>
</svg>
<svg class="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<path d="M977.8 524.5H22.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.3 12.3-12.3h955.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.8-5.6 12.3-12.3 12.3zm-49.1-294H757.2c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h171.5c6.8 0 12.3 5.5 12.3 12.3v24.5c0 6.7-5.5 12.2-12.3 12.2zm-294 0H71.3c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h563.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.7-5.6 12.2-12.4 12.2zm-563.4 539h171.5c6.8 0 12.2 5.5 12.2 12.2v24.5c0 6.8-5.5 12.3-12.2 12.3H71.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.2 12.3-12.2zm293.9 0h563.5c6.8 0 12.3 5.5 12.3 12.2v24.5c0 6.8-5.5 12.3-12.3 12.3H365.2c-6.8 0-12.3-5.5-12.3-12.3v-24.5c.1-6.7 5.6-12.2 12.3-12.2z"/>
</svg>
<svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 -28 512 512">
<path fill="#EBC7E5" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316-2.641 19.785-7.43 20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0" class="active-path" data-old_color="#000000" data-original="#000000"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
<audio style="display: none;" controls id="audio">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
:root {
--blue-bubble: #bbe6f3;
--small-b-bubble: #bae5f2;
--pink-bubble: #ebc7e5;
--font-color: #063064;
}
* {
box-sizing: border-box;
&:focus {
outline: none;
}
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #f4f4f4;
}
.container {
background-color: #f3fcfd;
width: 800px;
height: 600px;
margin: 60px auto;
position: relative;
overflow: hidden;
border-radius: 6px;
-webkit-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
-moz-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
}
.bubble {
position: absolute;
border-radius: 50%;
}
.pink-bubble {
width: 460px;
height: 460px;
right: -160px;
top: -110px;
background-color: var(--pink-bubble);
}
.blue-bubble {
width: 520px;
height: 520px;
left: -30px;
top: 345px;
background-color: var(--blue-bubble);
}
.small-b-bubble {
width: 50px;
height: 50px;
right: 40px;
bottom: 85px;
background-color: var(--small-b-bubble);
}
.small-p-bubble {
width: 105px;
height: 105px;
left: -45px;
top: 140px;
background-color: var(--pink-bubble);
}
.app-ui {
background-color: #fff;
width: 235px;
height: 500px;
position: absolute;
left: 140px;
top: 35px;
border-radius: 30px;
box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2);
}
.left-ui {
overflow: hidden;
}
.right-ui {
left: 435px;
top: 60px;
box-shadow: -6px 14px 40px -20px rgba(0, 0, 0, 0.2);
background-color: #bbe6f3;
}
.inside-right {
left: 0;
top: 70px;
height: 430px;
}
.header {
font-family: "Fjalla One", sans-serif;
color: var(--font-color);
display: flex;
justify-content: space-between;
align-items: center;
width: 235px;
padding: 27px 27px 21px 27px;
font-size: 22px;
}
.menu-line {
border: 1px solid var(--font-color);
width: 25px;
border-radius: 50px;
&:before {
content: "";
position: absolute;
top: 45px;
left: 197px;
border: 0.05em solid;
width: 8px;
border-radius: 50px;
}
&:after {
content: "";
position: absolute;
top: 45px;
left: 190px;
border: 0.05em solid;
width: 3px;
border-radius: 50px;
}
}
.left-menu-bar {
position: relative;
font-family: "Roboto", sans-serif;
color: var(--font-color);
left: -5px;
}
.ur-playlist {
font-size: 11px;
font-weight: 500;
transform: rotate(270deg);
position: absolute;
left: 2px;
top: 40px;
cursor: pointer;
}
.playlist-icon {
width: 11px;
position: absolute;
left: 28px;
top: -6px;
cursor: pointer;
}
.like-recent {
position: absolute;
top: 110px;
}
.recent {
left: 18px;
top: 90px;
}
.recent-detail {
width: 4px;
height: 4px;
background-color: var(--font-color);
position: absolute;
top: 95px;
left: 15px;
border-radius: 50%;
}
.like {
left: 25px;
top: 140px;
color: #aeb8cc;
&:hover {
color: var(--font-color);
}
}
.album-img {
position: relative;
background-image: url("https://images.unsplash.com/photo-1535392432937-a27c36ec07b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
width: 130px;
height: 165px;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin-left: 58px;
box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
cursor: pointer;
&:hover {
transform: scale(1.02);
}
}
.relax {
position: absolute;
bottom: 15px;
left: 20px;
color: #fff;
font-family: "Roboto", sans-serif;
font-size: 15px;
font-weight: 500;
}
.btn {
background-color: #ffffff;
position: absolute;
width: 27px;
height: 27px;
right: 10px;
bottom: 10px;
border-radius: 9px;
transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0px 1px 2px rgba(255, 255, 255, 1),
0px 2px 1px rgba(0, 0, 0, 0.15);
cursor: pointer;
border: none;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 15px;
z-index: 2;
}
&:active {
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.02);
&:after {
box-shadow: inset 0px 2px 3px rgb(255, 255, 255),
inset 0px 2px 0px rgba(0, 0, 0, 0.1);
}
}
&.active {
&.play-pause {
.icon {
&.pause {
opacity: 1;
transform: translate(-50%, -50%);
}
&.play {
opacity: 0;
}
}
}
}
}
.play {
width: 13px;
position: absolute;
top: 7px;
left: 8px;
svg {
stroke-width: 5;
}
}
.pause {
width: 12px;
opacity: 0;
position: absolute;
left: 14px;
top: 15px;
}
.flowers-img {
background-image: url("https://images.unsplash.com/photo-1490823670292-6699d9edbb7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80");
background-repeat: no-repeat;
background-size: cover;
height: 135px;
width: 120px;
position: absolute;
right: -88px;
top: 90px;
border-radius: 20px;
transform: rotate(180deg);
box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
&:hover {
cursor: pointer;
-webkit-transform: rotate(180deg) scale(1.03);
}
}
.music-list {
cursor: pointer;
margin-left: 50px;
margin-top: 20px;
}
.song {
display: flex;
margin-bottom: 10px;
align-items: center;
&:hover {
transform: scale(1.02);
box-shadow: -8px 10px 3px -11px rgba(0, 0, 0, 0.4);
}
}
.song-img > img {
background-repeat: no-repeat;
background-size: cover;
width: 30px;
height: 30px;
border-radius: 10px;
margin-right: 10px;
}
.song-name {
font-family: "Roboto", sans-serif;
color: var(--font-color);
font-weight: 500;
font-size: 10px;
}
.song-detail {
display: flex;
flex-direction: column;
}
.artist {
font-family: "Roboto", sans-serif;
color: #d0d2e5;
font-weight: 400;
font-size: 9px;
margin-top: 4px;
}
.nav svg {
width: 17px;
}
.nav {
position: absolute;
bottom: 0;
color: #c5c7da;
left: 0;
width: 100%;
background-color: #fff;
border-radius: 20px 20px 0 0;
height: 52px;
}
.nav-first {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
height: 52px;
}
.player-bg {
position: absolute;
top: 394px;
left: 0;
background-color: #bae6f2;
height: 80px;
width: 100%;
border-radius: 25px 25px 0 0;
}
.player-info {
position: absolute;
top: 394px;
left: 0;
}
.player-cover img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
object-position: center;
margin: 10px 0 10px 25px;
border: 2px solid #fff;
box-shadow: 0px 15px 30px -6px rgba(0, 0, 0, 0.5);
}
.pointer {
position: absolute;
top: 27px;
width: 9px;
height: 9px;
margin: -6px 0 0 37px;
background-color: #a5c8e3;
border-radius: 50%;
box-shadow: inset 0 0 0 1.7px #fff;
}
.player-info .song-detail {
margin: -42px 0 0 65px;
}
.play-artist {
color: #6590ad;
margin-top: 5px;
font-size: 8px;
}
.player-info svg {
width: 12px;
position: absolute;
right: -50px;
top: 22px;
}
.player-bg .btn {
bottom: 40px;
width: 24px;
height: 23px;
right: 25px;
}
.small-play {
width: 10px;
top: 5px;
left: 8px;
}
.small-pause {
width: 10px;
left: 12px;
top: 13px;
}
@media only screen and (max-width: 768px) {
.container {
transform: scale(0.8);
right: 60px;
margin-top: -40px;
}
}
@media only screen and (max-width: 480px) {
.container {
transform: scale(0.6);
right: 200px;
}
}
.play-action {
display: flex;
margin-top: 40px;
justify-content: space-between;
align-items: center;
}
.dot {
border-radius: 50%;
width: 3px;
height: 3px;
background-color: #043165;
margin-right: 5px;
}
.what-play {
font-family: "Roboto", sans-serif;
color: var(--font-color);
font-weight: 500;
font-size: 10px;
}
.double-dot {
display: flex;
margin-right: 15px;
}
.line {
width: 20px;
height: 2px;
margin-left: 20px;
border-radius: 10px;
background-color: #043165;
}
.other-line {
position: absolute;
width: 10px;
height: 2px;
top: 44px;
left: 19px;
border-radius: 5px;
background-color: #043165;
transform: rotate(-30deg);
}
.half-arrow {
margin-top: 2px;
}
.bigPlay img {
width: 160px;
height: 160px;
border-radius: 50%;
border: 3px solid #fff;
position: relative;
left: 37px;
top: 30px;
object-fit: cover;
object-position: top right;
animation: rotateImg 3s linear 0s infinite forwards;
animation-play-state: paused;
}
.bigPlay img.active {
animation-play-state: running;
}
@keyframes rotateImg
{
0%{ transform: rotateZ(0); }
100%{ transform: rotateZ(360deg); }
}
.bigPlay {
position: absolute;
& .btn {
top: 90px;
left: 96px;
width: 44px;
height: 44px;
border-radius: 18px;
}
}
.icon.play.bigger-play {
width: 22px;
top: 11px;
left: 13px;
}
.icon.pause.bigger-pause {
width: 20px;
left: 22px;
top: 23px;
}
.right-detail {
margin: 50px 0;
text-align: center;
}
.right-song {
font-size: 20px;
font-family: "Fjalla One", sans-serif;
}
.right-artist {
font-size: 12px;
color:#aeb8cc;
}
.lines {
border-left: 2px solid var(--font-color);
margin-left: -55px;
height: 5px;
transition: all .1s ease;
&.grey {
border-left: 2px solid #e8e9f4;
}
}
.line-wrapper {
margin-top: -20px;
margin-left: 62px;
}
.lines:nth-child(1) {
margin-left: -40px;
margin-top: 60px;
}
.lines:nth-child(2) {
margin-left: -35px;
margin-top: -12px;
height: 18px;
}
.lines:nth-child(3) {
margin-left: -30px;
margin-top: -26px;
height: 36px;
}
.lines:nth-child(4) {
margin-left: -25px;
margin-top: -40px;
height: 48px;
}
.lines:nth-child(5) {
margin-left: -20px;
margin-top: -43px;
height: 33px;
}
.lines:nth-child(6) {
margin-left: -15px;
margin-top: -30px;
height: 25px;
}
.lines:nth-child(7) {
margin-left: -10px;
margin-top: -32px;
height: 40px;
}
.lines:nth-child(8) {
margin-left: -5px;
margin-top: -40px;
height: 48px;
}
.lines:nth-child(9) {
margin-left: 0;
margin-top: -43px;
height: 33px;
}
.lines:nth-child(10) {
margin-left: 5px;
margin-top: -30px;
height: 25px;
}
.lines:nth-child(11) {
margin-left: 10px;
margin-top: -32px;
height: 40px;
}
.lines:nth-child(12) {
margin-left: 15px;
margin-top: -37px;
height: 33px;
}
.lines:nth-child(13) {
margin-left: 20px;
margin-top: -30px;
height: 25px;
}
.lines:nth-child(14) {
margin-left: 25px;
margin-top: -32px;
height: 40px;
}
.lines:nth-child(15) {
margin-left: 30px;
margin-top: -40px;
height: 48px;
}
.lines:nth-child(16) {
margin-left: 35px;
margin-top: -42px;
height: 35px;
}
.lines:nth-child(17) {
margin-left: 40px;
margin-top: -33px;
height: 25px;
}
.lines:nth-child(18) {
margin-left: 45px;
margin-top: -22px;
height: 20px;
}
.lines:nth-child(19) {
margin-left: 50px;
margin-top: -18px;
height: 16px;
}
.lines:nth-child(20) {
margin-left: 55px;
margin-top: -19px;
height: 21px;
}
.lines:nth-child(21) {
margin-left: 60px;
margin-top: -27px;
height: 32px;
}
.lines:nth-child(22) {
margin-left: 65px;
margin-top: -30px;
height: 34px;
}
.lines:nth-child(23) {
margin-left: 70px;
margin-top: -38px;
height: 48px;
}
.lines:nth-child(24) {
margin-left: 75px;
margin-top: -44px;
height: 33px;
}
.lines:nth-child(25) {
margin-left: 80px;
margin-top: -35px;
height: 40px;
}
.lines:nth-child(26) {
margin-left: 85px;
margin-top: -35px;
height: 34px;
}
.lines:nth-child(27) {
margin-left: 90px;
margin-top: -42px;
height: 48px;
}
.lines:nth-child(28) {
margin-left: 95px;
margin-top: -44px;
height: 33px;
}
.lines:nth-child(29) {
margin-left: 100px;
margin-top: -35px;
height: 40px;
}
.lines:nth-child(30) {
margin-left: 105px;
margin-top: -35px;
height: 40px;
}
.lines:nth-child(31) {
margin-left: 110px;
margin-top: -45px;
height: 40px;
}
.lines:nth-child(32) {
margin-left: 115px;
margin-top: -38px;
height: 48px;
}
.lines:nth-child(33) {
margin-left: 120px;
margin-top: -44px;
height: 33px;
}
.lines:nth-child(34) {
margin-left: 125px;
margin-top: -35px;
height: 40px;
}
.lines:nth-child(35) {
margin-left: 130px;
margin-top: -36px;
height: 30px;
}
.lines:nth-child(36) {
margin-left: 135px;
margin-top: -25px;
height: 22px;
}
.lines:nth-child(37) {
margin-left: 140px;
margin-top: -25px;
height: 30px;
}
.lines:nth-child(38) {
margin-left: 145px;
margin-top: -39px;
height: 48px;
}
.lines:nth-child(39) {
margin-left: 150px;
margin-top: -44px;
height: 33px;
}
.lines:nth-child(40) {
margin-left: 155px;
margin-top: -36px;
height: 41px;
}
.lines:nth-child(41) {
margin-left: 160px;
margin-top: -44px;
height: 47px;
}
.lines:nth-child(42) {
margin-left: 165px;
margin-top: -44px;
height: 40px;
}
.lines:nth-child(43) {
margin-left: 170px;
margin-top: -34px;
height: 30px;
}
.heart {
width: 18px;
cursor: pointer;
:hover {
fill: #E52121;
}
&:hover {
transform: scale(1.2);
}
}
.addTo{
width: 16px;
cursor: pointer;
}
.menu {
width: 16px;
cursor: pointer;
}
.left-bar-wrapper {
display: flex;
justify-content: space-evenly;
margin-top: 35px;
}
.blue-heart:hover {
fill: #063064;
cursor: pointer;
transform: scale(1.2);
}
.second svg {
width: 11px;
transform: rotate(-45deg);
margin: 0 4px 0 4px;
}
.second {
margin: 20px 60px 0 90px;
display: flex;
align-items: center;
font-size: 9px;
font-weight: 500;
font-family: "Roboto", sans-serif;
color: #c9cade;
& .listened {
color: var(--font-color);
}
}
.grey-detail {
background-color: #eff3f8;
width: 205px;
height: 90px;
border-radius: 50%;
margin-top: -100px;
margin-left: 13px;
}
.grey-detail-sec {
background-color: #dae3f0;
width: 176px;
height: 130px;
border-radius: 50%;
margin-top: -110px;
margin-left: 29px;
}
View Compiled
console.clear();
const buttons = Array.from(document.querySelectorAll("button"));
buttons.forEach(btn => {
btn.addEventListener("click", () => {
btn.classList.toggle("active");
});
});
$('.btn').click( function() {
$(".bigPlay img").toggleClass("active");
} );
const audio = document.querySelector('#audio');
let isPlay = false;
const allCibik = document.querySelectorAll('.lines.grey');
let index = 0;
let animation;
const bigButton = document.querySelector('.bigPlay');
bigButton.addEventListener('click', () => {
if (!isPlay) {
isPlay = true;
audio.play();
animation = setInterval(() => {
allCibik[index].classList.remove('grey');
index = index + 1;
}, 1000);
} else {
isPlay = false;
audio.pause();
clearInterval(animation);
}
});
This Pen doesn't use any external CSS resources.