Profile
F2U CODE - spotify playlist
this code is actually a request from one of my friends haha
was definitely fun to work on! first time using collapse and web embeds... hopefully they work?
if you didn't realise it, this code is supposed to emulate a spotify playlist!
you can click on the songs to play different ones :]
there's two versions, the pagedoll version (with collapsable!) and a normal version
the live preview toggle doesn't remove the pagedoll live preview however
please note that the pagedoll isn't visible on mobile!
the 221b gang
from tgaa1+2
tos
- feel free to edit to your hearts content
- do not delete the credit, you may move it though
- please do not redistribute my codes
- frankesteining with other codes are perfectly fine
- have fun!!
<!-- F2U CODE BY NUTTFLOOF - spotify playlist
replace all IMAGE_URL_HERE with your raw image links!
i recommend filegarden.com to host them :]
when changing out the yt embed, change watch?v= to embed/
ex. https://www.youtube.com/watch?v=visRMohDgmU to https://www.youtube.com/embed/visRMohDgmU
this code uses fontawesome icons!
you can change them by finding the icons at fontawesome.com and copying the html code snippet
use th.circlejourney.net to see a live preview of the code
COLORS MASTERLIST
text: text-white aka #fff
background: #121212
accent: #1ed760
-->
<!--code start-->
<!--i suggest you change the first color in the brackets and leave the other one as that's what spotify playlists generally look like :]
if you are changing the colors, you can add more! just make sure to seperate the hexcodes with commas-->
<div class="p-4 text-white"
style="background: linear-gradient(
#1ed760, #121212
); width: 300px; max-height: 450px; overflow: auto; margin: auto">
<i class="far fa-angle-left faded"
style="position: absolute; margin-left: -10px"></i>
<!---->
<!--image banner-->
<img class="d-block mb-2"
src="
IMG_URL_HERE
"
style="width: 175px; height: 175px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 10px #121212; margin: auto;">
<!---->
<!--title-->
<span style="word-spacing: -1.5px;">
<b>
title here
</b>
</span>
<!---->
<!--subtitle-->
<span class="faded d-block small mb-1"
style="word-spacing: -1.5px;">
Keep it short, this will double up the more you type. Not much of a problem, just looks a little clunky. So don't do what I'm doing right now.
</span>
<!---->
<!--user-->
<div>
<!--pfp-->
<img src="
IMAGE_URL_HERE
"
style="width: 20px; height: 20px; object-fit: cover; border-radius: 50px;">
<!---->
<!--username-->
<span class="small">
<b>
user
</b>
</span>
<!---->
</div>
<!---->
<!--stats-->
<div class="faded align-items-center mt-1">
<i class="far fa-globe fa-xs mr-1"></i>
<!--text-->
<span class="small"
style="word-spacing: -1.5px; margin-top: 1.5px">
67 saves • 67h 67m
</span>
<!---->
</div>
<!---->
<!--buttons-->
<div class="d-flex align-items-center mt-1">
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 20px; height: 25px; object-fit: cover; border-radius: 3px; outline: 1.5px solid rgba(255, 255, 255, 0.4); padding: 2px">
<!---->
<!--icons-->
<i class="far fa-circle-plus faded ml-3"></i>
<div class="fa-stack faded"
style="margin-left: 3px">
<i class="fa fa-arrow-down fa-stack-1x"
style="font-size: 0.6em"></i>
<i class="far fa-circle fa-stack-1x"></i>
</div>
<!---->
<!--credit, do not remove-->
<a href="https://toyhou.se/nuttfloof" class="text-white tooltipster" title="code by nuttfloof">
<i class="fa fa-code fa-xs faded" style="margin-left: 3px"></i>
</a>
<!---->
<!--right icons-->
<div class="ml-auto align-items-center">
<i class="far fa-shuffle mr-2 faded"></i>
<i class="fa fa-circle-play fa-2x"
style="color: #1ed760"></i>
</div>
</div>
<!---->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
</div>
<!--code end--><!-- F2U CODE BY NUTTFLOOF - spotify playlist
replace all IMAGE_URL_HERE with your raw image links!
i recommend filegarden.com to host them :]
when changing out the yt embed, change watch?v= to embed/
ex. https://www.youtube.com/watch?v=visRMohDgmU to https://www.youtube.com/embed/visRMohDgmU
this code uses fontawesome icons!
you can change them by finding the icons at fontawesome.com and copying the html code snippet
use th.circlejourney.net to see a live preview of the code
COLORS MASTERLIST
text: text-white aka #fff
background: #121212
accent: #1ed760
-->
<!--code start-->
<!--i suggest you change the first color in the brackets and leave the other one as that's what spotify playlists generally look like :]
if you are changing the colors, you can add more! just make sure to seperate the hexcodes with commas
the d-none d-md-block makes it hide on mobile - i don't recommend you remove it as it takes up quite alot of space on the screen, however-->
<div class="d-none d-md-block fixed-bottom" style="right: 0; left: inherit">
<!--card start-->
<div class="p-4 text-white"
style="background: linear-gradient(
#1ed760, #121212
); width: 300px; max-height: 450px; overflow: auto; margin: auto">
<!---->
<!--collapse button-->
<!--change the color of the button to the color of the background accent so it blends in with it!-->
<a href="#collapse" data-toggle="collapse">
<div class="justify-content-center p-2 border-0"
style="background-color:
#1ed760
; position: absolute; margin: -60px -24px; width: 40px; border-radius: 4px 4px 0 0">
<i class="far text-white fa-angle-up faded"></i>
</div>
</a>
<!---->
<div id="collapse" class="collapse">
<!--image banner-->
<img class="d-block mb-2"
src="
IMG_URL_HERE
"
style="width: 175px; height: 175px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 10px #121212; margin: auto;">
<!---->
<!--title-->
<span style="word-spacing: -1.5px;">
<b>
title here
</b>
</span>
<!---->
<!--subtitle-->
<span class="faded d-block small mb-1"
style="word-spacing: -1.5px;">
Keep it short, this will double up the more you type. Not much of a problem, just looks a little clunky. So don't do what I'm doing right now.
</span>
<!---->
<!--user-->
<div>
<!--pfp-->
<img src="
IMAGE_URL_HERE
"
style="width: 20px; height: 20px; object-fit: cover; border-radius: 50px;">
<!---->
<!--username-->
<span class="small">
<b>
user
</b>
</span>
<!---->
</div>
<!---->
<!--stats-->
<div class="faded align-items-center mt-1">
<i class="far fa-globe fa-xs mr-1"></i>
<!--text-->
<span class="small"
style="word-spacing: -1.5px; margin-top: 1.5px">
67 saves • 67h 67m
</span>
<!---->
</div>
<!---->
<!--buttons-->
<div class="d-flex align-items-center mt-1">
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 20px; height: 25px; object-fit: cover; border-radius: 3px; outline: 1.5px solid rgba(255, 255, 255, 0.4); padding: 2px">
<!---->
<!--icons-->
<i class="far fa-circle-plus faded ml-3"></i>
<div class="fa-stack faded"
style="margin-left: 3px">
<i class="fa fa-arrow-down fa-stack-1x"
style="font-size: 0.6em"></i>
<i class="far fa-circle fa-stack-1x"></i>
</div>
<!---->
<!--credit, do not remove-->
<a href="https://toyhou.se/nuttfloof" class="text-white tooltipster" title="code by nuttfloof">
<i class="fa fa-code fa-xs faded" style="margin-left: 3px"></i>
</a>
<!---->
<!--right icons-->
<div class="ml-auto align-items-center">
<i class="far fa-shuffle mr-2 faded"></i>
<i class="fa fa-circle-play fa-2x"
style="color: #1ed760"></i>
</div>
</div>
<!---->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
<!--song start-->
<!--when adding more songs, just copy the code that's inbetween song start and song end-->
<div class="mt-2 ml-2 row align-items-center"
style="position: relative">
<div style="position: absolute">
<!--yt embed-->
<iframe src="
YOUTUBE_LINK_HERE
"
style="width: 100%; height: 35px; position: relative; z-index: 2; opacity: 0">
</iframe>
<!---->
</div>
<!--image-->
<img class="my-1"
src="
IMAGE_URL_HERE
"
style="width: 30px; height: 30px; object-fit: cover; border-radius: 3px">
<!---->
<!--text-->
<div class="d-flex flex-column ml-2">
<!--song title-->
<span style="word-spacing: -1.5px;">
title
</span>
<!---->
<!--artist name-->
<span class="faded small mt-n1"
style="word-spacing: -1.5px;">
artist name
</span>
</div>
<!---->
<!--icon-->
<i class="ml-auto mr-3 far fa-ellipsis faded"></i>
</div>
<!--song end-->
</div>
</div>
</div>
<!--code end-->