Not Quite Spotify
created by:dragon-heist
HTMLCustom ColorsMiscellaneous
Copy
<div class="mx-auto" style="max-width:430px;
--box-radius: .5rem;
--thumbnail-width: 95px;
--thumbnail-height: 95px;c
--thumbnail-radius: .3rem;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<div style="position:absolute; top:0; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<div id="SONG-CAROUSEL" class="carousel slide carousel-fade p-3" data-pause="true">
<!-- CAROUSEL SLIDES -->
<div class="carousel-inner" style="overflow:visible;">
<!-- SONG SLIDE 1 -->
<div class="carousel-item active" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Fall Out Boy</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:37</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/oFhmSD2i9jU?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 2 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Roaring 20s</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Panic! At The Disco</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:06</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/HWSqv-xsc5o?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 3 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Razzmatazz</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">4:18</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/1JP2d7K63J4?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div><!-- song slide end -->
</div> <!-- carousel slides end -->
</div>
</div>
</div>Copy
<div class="mx-auto" style="max-width:430px;
--box-radius: .5rem;
--thumbnail-width: 95px;
--thumbnail-height: 95px;
--thumbnail-radius: .3rem;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<!-- CREDITS -->
<div style="position:absolute; top:0; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<div id="SONG-CAROUSEL" class="carousel slide carousel-fade p-3" data-pause="true">
<!-- CAROUSEL SLIDES -->
<div class="carousel-inner" style="overflow:visible;">
<!-- SONG SLIDE 1 -->
<div class="carousel-item active" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 2 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Roaring 20s</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 3 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Razzmatazz</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div><!-- song slide end -->
</div> <!-- carousel slides end -->
</div>
</div>
</div>Copy
<div class="mx-auto" style="max-width:430px;
--box-radius: .5rem;
--thumbnail-width: 95px;
--thumbnail-height: 95px;
--thumbnail-radius: .3rem;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--pill-bg: #171819;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<!-- CREDITS -->
<div style="position:absolute; top:0; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<!-- PLAYLIST TABS -->
<div class="tab-content p-3" style="overflow:visible;">
<!-- SONG TAB 1 -->
<div class="tab-pane fade show active" id="SONG-1" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:37</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/oFhmSD2i9jU?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 2 -->
<div class="tab-pane fade" id="SONG-2" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Roaring 20s</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:06</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/HWSqv-xsc5o?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 3 -->
<div class="tab-pane fade" id="SONG-3" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Razzmatazz</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">4:18</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/1JP2d7K63J4?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div><!-- song tab end -->
</div> <!-- playlist tabs end -->
<!-- PLAYLIST TOGGLE -->
<div class="mt-n2" style="color:var(--subtitle-color); text-decoration:none; position:relative;">
<div class="row no-gutters px-3">
<hr class="w-100">
<div>
<i class="fa-solid fa-list-music fa-lg mr-1"></i> <span class="font-weight-bold">PLAYLIST</span>
<span class="mx-2 px-2 py-1 small font-weight-bold" style="background:var(--pill-bg); border-radius:1rem; letter-spacing:.5px;">3 tracks</span>
</div>
<hr class="w-100">
</div>
<a href="#" class="btn btn-default my-3" data-toggle="collapse" data-target="#PLAYLIST-NAV" style="position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.001;"></a>
</div>
<!-- PLAYLIST NAVIGATION -->
<div class="collapse show active" id="PLAYLIST-NAV">
<ul class="nav nav-pills flex-column px-3 py-1" style="max-height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
<!-- SONG TAB BUTTON 1 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link active text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-1">1</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<div class="mt-0" style="color:var(--subtitle-color);">Fall Out Boy</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:37</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 2 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-2">2</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Roaring 20s</div>
<div class="mt-0" style="color:var(--subtitle-color);">Panic! At The Disco</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:06</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 3 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-3">3</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Razzmatazz</div>
<div class="mt-0" style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">4:18</div>
</li> <!-- song tab button end -->
</ul>
</div>
</div>
</div>Copy
<div class="mx-auto" style="max-width:430px;
--box-radius: .5rem;
--thumbnail-width: 95px;
--thumbnail-height: 95px;
--thumbnail-radius: .3rem;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--pill-bg: #171819;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<!-- CREDITS -->
<div style="position:absolute; top:0; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<!-- PLAYLIST TABS -->
<div class="tab-content p-3" style="overflow:visible;">
<!-- SONG TAB 1 -->
<div class="tab-pane fade show active" id="SONG-1" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 2 -->
<div class="tab-pane fade" id="SONG-2" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Roaring 20s</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 3 -->
<div class="tab-pane fade" id="SONG-3" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold">Razzmatazz</div>
<!-- ARTIST NAME -->
<div style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
</div>
</div>
</div><!-- song tab end -->
</div> <!-- playlist tabs end -->
<!-- PLAYLIST TOGGLE -->
<div class="mt-n2" style="color:var(--subtitle-color); text-decoration:none; position:relative;">
<div class="row no-gutters px-3">
<hr class="w-100">
<div>
<i class="fa-solid fa-list-music fa-lg mr-1"></i> <span class="font-weight-bold">PLAYLIST</span>
<span class="mx-2 px-2 py-1 small font-weight-bold" style="background:var(--pill-bg); border-radius:1rem; letter-spacing:.5px;">3 tracks</span>
</div>
<hr class="w-100">
</div>
<a href="#" class="btn btn-default my-3" data-toggle="collapse" data-target="#PLAYLIST-NAV" style="position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.001;"></a>
</div>
<!-- PLAYLIST NAVIGATION -->
<div class="collapse show active" id="PLAYLIST-NAV">
<ul class="nav nav-pills flex-column px-3 py-1" style="max-height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
<!-- SONG TAB BUTTON 1 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link active text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-1">1</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Heartbreak Feels So Good</div>
<div class="mt-0" style="color:var(--subtitle-color);">Fall Out Boy</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:37</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 2 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-2">2</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Roaring 20s</div>
<div class="mt-0" style="color:var(--subtitle-color);">Panic! At The Disco</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:06</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 3 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-3">3</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold">Razzmatazz</div>
<div class="mt-0" style="color:var(--subtitle-color);">I DON'T KNOW HOW BUT THEY FOUND ME</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">4:18</div>
</li> <!-- song tab button end -->
</ul>
</div>
</div>
</div>Copy
<div style="width:350px; position:fixed; bottom:0; right:10px; z-index:50;
--box-radius: .5rem 0 .5rem .5rem;
--thumbnail-width: 70px;
--thumbnail-height: 70px;
--thumbnail-radius: .3rem;
--title-width: 225px;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="justify-content-end">
<div class="text-center card border-bottom-0" style="width:50px; height:45px; background:var(--bg-color); border-radius: 2em 2em 0 0; position:relative;">
<div class="collapse show PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-up fa-xl mt-4"></i>
</div>
<div class="collapse PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-down fa-xl mt-4"></i>
</div>
<a href="#" data-toggle="collapse" data-target=".PLAYLIST-TOGGLE" style="position:absolute; top:0; bottom:0; left:0; right:0;"></a>
</div>
</div>
<div class="collapse PLAYLIST-TOGGLE">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<div style="position:absolute; top:2px; right:6px; z-index:50;" class="small">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<div id="SONG-CAROUSEL" class="carousel slide carousel-fade p-3" data-pause="true">
<!-- CAROUSEL SLIDES -->
<div class="carousel-inner" style="overflow:visible;">
<!-- SONG SLIDE 1 -->
<div class="carousel-item active" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:37</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/oFhmSD2i9jU?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 2 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:06</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/HWSqv-xsc5o?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 3 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:205px; overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">4:18</span> <!-- song length -->
</div>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- SONG EMBED PLAYER -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="w-100 h-100" style="position:absolute; bottom:2px; left:1px; height:100px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/1JP2d7K63J4?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div><!-- song slide end -->
</div> <!-- carousel slides end -->
</div>
</div>
</div>
</div>Copy
<div style="width:350px; position:fixed; bottom:0; right:10px; z-index:50;
--box-radius: .5rem 0 .5rem .5rem;
--thumbnail-width: 70px;
--thumbnail-height: 70px;
--thumbnail-radius: .3rem;
--title-width: 225px;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="justify-content-end">
<div class="text-center card border-bottom-0" style="width:50px; height:45px; background:var(--bg-color); border-radius: 2em 2em 0 0; position:relative;">
<div class="collapse show PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-up fa-xl mt-4"></i>
</div>
<div class="collapse PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-down fa-xl mt-4"></i>
</div>
<a href="#" data-toggle="collapse" data-target=".PLAYLIST-TOGGLE" style="position:absolute; top:0; bottom:0; left:0; right:0;"></a>
</div>
</div>
<div class="collapse PLAYLIST-TOGGLE">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<div style="position:absolute; top:2px; right:6px; z-index:50;" class="small">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<div id="SONG-CAROUSEL" class="carousel slide carousel-fade p-3" data-pause="true">
<!-- CAROUSEL SLIDES -->
<div class="carousel-inner" style="overflow:visible;">
<!-- SONG SLIDE 1 -->
<div class="carousel-item active" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 2 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div> <!-- song slide end -->
<!-- SONG SLIDE 3 -->
<div class="carousel-item" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:205px; overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
<!-- PLAY EMBED -->
<div class="row no-gutters mt-2">
<!-- prev button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="prev" style="color:var(--subtitle-color);">
<i class="fas fa-backward-step fa-lg"></i>
</a>
<!-- music icon -->
<div class="mx-3" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-music fa-xl fa-fw"></i>
</div>
<!-- next button -->
<a href="#" role="button" data-target="#SONG-CAROUSEL" data-slide="next" style="color:var(--subtitle-color);">
<i class="fas fa-forward-step fa-lg"></i>
</a>
</div>
</div>
</div>
</div><!-- song slide end -->
</div> <!-- carousel slides end -->
</div>
</div>
</div>
</div>Copy
<div style="width:350px; position:fixed; bottom:0; right:10px; z-index:50;
--box-radius: .5rem 0 .5rem .5rem;
--thumbnail-width: 70px;
--thumbnail-height: 70px;
--thumbnail-radius: .3rem;
--title-width: 225px;
--playlist-width: 175px;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="justify-content-end">
<div class="text-center card border-bottom-0" style="width:50px; height:45px; background:var(--bg-color); border-radius: 2em 2em 0 0; position:relative;">
<div class="collapse show PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-up fa-xl mt-4"></i>
</div>
<div class="collapse PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-down fa-xl mt-4"></i>
</div>
<a href="#" data-toggle="collapse" data-target=".PLAYLIST-TOGGLE" style="position:absolute; top:0; bottom:0; left:0; right:0;"></a>
</div>
</div>
<div class="collapse PLAYLIST-TOGGLE">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<!-- CREDITS -->
<div style="position:absolute; top:2px; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<!-- PLAYLIST TABS -->
<div class="tab-content p-3" style="overflow:visible;">
<!-- SONG TAB 1 -->
<div class="tab-pane fade show active" id="SONG-1" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:37</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/oFhmSD2i9jU?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 2 -->
<div class="tab-pane fade" id="SONG-2" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">3:06</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/HWSqv-xsc5o?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 3 -->
<div class="tab-pane fade" id="SONG-3" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1 d-none" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
<!-- FAKE AUDIO TIMELINE -->
<div class="row no-gutters align-items-center mt-2" style="color:var(--subtitle-color);">
<span>0:00</span> <!-- start time -->
<div class="rounded col mx-2" style="height:5px; background:var(--bar-bg);"></div>
<span class="mr-3">4:18</span> <!-- song length -->
</div>
<!-- SONG EMBED PLAYER -->
<div class="mt-2" style="position:relative; color:var(--accent-color); height:25px;">
<i class="fas fa-play-circle fa-xl fa-fw"></i>
<div class="h-100" style="position:absolute; bottom:2px; left:1px; height:100px; width:25px; overflow:hidden; z-index:2;">
<!-- EMBED VIDEO (replace song ID) -->
<iframe src="https://www.youtube.com/embed/1JP2d7K63J4?controls=0"
style="width:200vh; height:200vh; position:absolute; top:-99vh; left:-99vh; opacity:0.001;" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div><!-- song tab end -->
</div> <!-- playlist tabs end -->
<!-- PLAYLIST TOGGLE -->
<div class="mt-n2" style="color:var(--subtitle-color); text-decoration:none; position:relative;">
<div class="row no-gutters px-3">
<hr class="w-100">
<div>
<i class="fa-solid fa-list-music fa-lg mr-1"></i> <span class="font-weight-bold">PLAYLIST</span>
<span class="mx-2 px-2 py-1 small font-weight-bold" style="background:var(--pill-bg); border-radius:1rem; letter-spacing:.5px;">3 tracks</span>
</div>
<hr class="w-100">
</div>
<a href="#" class="btn btn-default my-3" data-toggle="collapse" data-target="#PLAYLIST-NAV" style="position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.001;"></a>
</div>
<!-- PLAYLIST NAVIGATION -->
<div class="collapse" id="PLAYLIST-NAV">
<ul class="nav nav-pills flex-column px-3 py-1" style="max-height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
<!-- SONG TAB BUTTON 1 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link active text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-1">1</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:37</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 2 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-2">2</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:06</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 3 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-3">3</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">4:18</div>
</li> <!-- song tab button end -->
</ul>
</div>
</div>
</div>
</div>Copy
<div style="width:350px; position:fixed; bottom:0; right:10px; z-index:50;
--box-radius: .5rem 0 .5rem .5rem;
--thumbnail-width: 70px;
--thumbnail-height: 70px;
--thumbnail-radius: .3rem;
--title-width: 225px;
--playlist-width: 175px;
--fade-duration: .2s;
--subtitle-color: #6d767e;
--bar-bg: #535353;
--accent-color: #1ed760;
--bg-color: linear-gradient(145deg, #181818, #0f0f0f);
">
<div class="justify-content-end">
<div class="text-center card border-bottom-0" style="width:50px; height:45px; background:var(--bg-color); border-radius: 2em 2em 0 0; position:relative;">
<div class="collapse show PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-up fa-xl mt-4"></i>
</div>
<div class="collapse PLAYLIST-TOGGLE" style="transition:none;">
<i class="fas fa-angle-down fa-xl mt-4"></i>
</div>
<a href="#" data-toggle="collapse" data-target=".PLAYLIST-TOGGLE" style="position:absolute; top:0; bottom:0; left:0; right:0;"></a>
</div>
</div>
<div class="collapse PLAYLIST-TOGGLE">
<div class="card" style="background:var(--bg-color); border-radius:var(--box-radius); position:relative;">
<!-- CREDITS -->
<div style="position:absolute; top:2px; right:6px; z-index:50;">
<a href="https://toyhou.se/41429636." style="color:var(--subtitle-color);" data-toggle="tooltip" title="code by dragon-heist"><i class="far fa-code"></i></a>
</div>
<!-- PLAYLIST TABS -->
<div class="tab-content p-3" style="overflow:visible;">
<!-- SONG TAB 1 -->
<div class="tab-pane fade show active" id="SONG-1" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/50721dbc/9019/49fa/b199/0ee195f1b872/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/fRAhPFkFSj9isLJa9dSt4dZY9OdFJuTpSXwNs4MC8MduvPfpz5yEYhhx68kSU8zp?download=1"></audio>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 2 -->
<div class="tab-pane fade" id="SONG-2" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/31d0375b/9481/4dca/984e/d68c0e371757/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/u85TNk3wgx0Inx7l6D6qiiIfKXgVEv03iLmv7vCEffgcnA7sJJiXaHKOtoEybTfZ?download=1"></audio>
</div>
</div>
</div> <!-- song tab end -->
<!-- SONG TAB 3 -->
<div class="tab-pane fade" id="SONG-3" style="transition-duration:var(--fade-duration);">
<div class="row no-gutter align-items-center">
<!-- THUMBNAIL -->
<div class="py-1 px-3">
<div style="height:var(--thumbnail-height); width:var(--thumbnail-width);
background:url('https://resources.tidal.com/images/57bc170d/0ac1/4431/b68b/4dda3b3ef543/1280x1280.jpg') center no-repeat; background-size:cover; border-radius:var(--thumbnail-radius);"></div>
</div>
<div class="col p-0">
<!-- SONG TITLE -->
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<!-- ARTIST NAME -->
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
<!-- AUDIO PLAYER -->
<audio controls="" class="col-12 p-0 mt-1" style="height:25px; border-radius:var(--box-radius); "><source src="https://deskomy.com/en-us/link/5oe8KydsKTRymDbyZi8MkGKDOGFQxaoKeb7OzkehRUocmXpJQ9pZqYYB4v6CTiLy?download=1"></audio>
</div>
</div>
</div><!-- song tab end -->
</div> <!-- playlist tabs end -->
<!-- PLAYLIST TOGGLE -->
<div class="mt-n2" style="color:var(--subtitle-color); text-decoration:none; position:relative;">
<div class="row no-gutters px-3">
<hr class="w-100">
<div>
<i class="fa-solid fa-list-music fa-lg mr-1"></i> <span class="font-weight-bold">PLAYLIST</span>
<span class="mx-2 px-2 py-1 small font-weight-bold" style="background:var(--pill-bg); border-radius:1rem; letter-spacing:.5px;">3 tracks</span>
</div>
<hr class="w-100">
</div>
<a href="#" class="btn btn-default my-3" data-toggle="collapse" data-target="#PLAYLIST-NAV" style="position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.001;"></a>
</div>
<!-- PLAYLIST NAVIGATION -->
<div class="collapse" id="PLAYLIST-NAV">
<ul class="nav nav-pills flex-column px-3 py-1" style="max-height:200px; overflow-x:hidden; overflow-y:auto; scrollbar-color: #191919 transparent; color:#a1a1a1;">
<!-- SONG TAB BUTTON 1 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link active text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-1">1</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Heartbreak Feels So Good</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">Fall Out Boy</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:37</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 2 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-2">2</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Roaring 20s</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">Panic! At The Disco</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">3:06</div>
</li> <!-- song tab button end -->
<!-- SONG TAB BUTTON 3 -->
<li class="nav-item d-flex justify-content-between align-items-center mb-3">
<!-- song number-->
<a class="ml-1 nav-link text-white text-center" style="width:40px;" data-toggle="pill" href="#SONG-3">3</a>
<!-- song name / artist -->
<div class="container-fluid">
<div class="text-white font-weight-bold text-nowrap" style="max-width:var(--title-width); overflow:hidden; text-overflow:ellipsis;">Razzmatazz</div>
<div class="text-nowrap" style="color:var(--subtitle-color); max-width:var(--playlist-width); overflow:hidden; text-overflow:ellipsis;">I DON'T KNOW HOW BUT THEY FOUND ME</div>
</div>
<!-- song length -->
<div class="pr-3" style="color:var(--subtitle-color);">4:18</div>
</li> <!-- song tab button end -->
</ul>
</div>
</div>
</div>
</div>