Stor8

<!-----------------------------------------------------------------------------------------
[ PLAYLIST ] // default version
    f2u code by skysong

[ color palette ]
    accent bg       bg-success
    accent text     text-success (varying opacities; look for the faded class to change)

[ resources ]
    icons           https://fontawesome.com/
    TH colors       https://toyhou.se/7850218.bootstrap-color-combos
    TH fonts        https://toyhou.se/23372355.fonts
    editing         https://th.circlejourney.net/#
    img hosting     https://freeimage.host/
    code link       https://toyhou.se/31652971.05-playlist

[ embed instructions ]
    > Note that this playlist only works with Youtube videos
    > The part you need to edit is this one
        src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1"
    > Get the link to the video you want to embed. For example:
        https://www.youtube.com/watch?v=lKzcsVBcH9I&list=PLXky5KZSwAPKc6chnBTMhAw4zkoEXLPXl&index=1&t=638s&pp=iAQB8AUBsAgC
    > Do NOT just put the entire link in!!
    > You only need the part after the v= and before any &s there may be in the link
        https://www.youtube.com/watch?v=    >> lKzcsVBcH9I <<   &list=PLXky5KZSwAPKc6chnBTMhAw4zkoEXLPXl&index=1&t=638s&pp=iAQB8AUBsAgC
    > Then just replace URLHERE with that bit ^ and it should work!

------------------------------------------------------------------------------------------->

<div class="row mx-auto" style="max-width:700px;">

<!-------------------------------------------------------------------------- [ SIDEBAR ] -->
<div class="col-sm-5 p-0 mr-sm-2">
<div class="sticky-top pt-sm-2">

<!--TOP LINKS-->
    <div class="font-italic text-success pl-1" style="cursor:default">
    <!--FOLDER LINK-->
        <a href="https://toyhou.se" class="text-reset">folder</a>
    <!--ICON-->
        <i class="fa fa-angle-right faded"></i>
    <!--MAIN PROFILE LINK-->
        <a href="https://toyhou.se" class="text-reset">oc</a>
    <!--ICON-->
        <i class="fa fa-angle-right faded"></i>
    <!--PLAYLIST TEXT-->
        <span class="font-weight-bold">playlist</span>
    </div>

<!--MAIN CONTAINER-->
    <div class="bg-faded p-3" style="position:relative; overflow:hidden">

<!--HEADER-->
    <div class="d-flex mx-auto">
    <!--ICON-->
        <div class="p-0" style="width:75px; height:75px;
        
        background:url(https://placehold.co/300?text=placeholder);
        background-position:center;
        background-size:cover;
        
        "></div>
            <!--[ background:url(URLHERE) | replace with your image ]-->
            <!--[ position can be changed to things like left and bottom ]-->
            <!--[ and size can be changed to any percentage if you want to zoom in ]-->
    <!--TITLE-->
        <div class="ml-2 p-0 align-items-end text-uppercase font-weight-bold font-italic" style="flex:1; font-family:MS Gothic, Arial Narrow; font-size:25px; line-height:1;">
        playlist name
        </div>
    </div> <!--end header-->

<!--LINK LIST-->
    <div class="mt-2 text-success">
    <!--[ copy and paste below this line ]-->
    <!--LINK-->
        <div><a href="https://toyhou.se" class="text-reset" style="text-decoration:none">
        <!--ICON-->
            <i class="fa fa-link faded mr-1"></i> 
        link
        </a></div>
    <!--[ copy and paste above this line ]-->
    </div>

<!--CODE CREDIT-->
    <!--[ do not edit! ]-->
    <div class="text-right p-3" style="z-index:99; position:absolute; bottom:0; right:0">
    <a href="https://toyhou.se/31652971.playlist-f2u" data-toggle="tooltip" data-placement="left" title="code by sky" class="text-success">
    <i class="fa-light fa-ticket-airline"></i>
    </a></div>

<!--DISC ICON-->
    <i class="fa-thin fa-duotone fa-compact-disc fa-spin text-success d-block" style="position:absolute; bottom:-50px; right:-50px; font-size:180px; opacity:0.1; z-index:1; --fa-animation-duration: 6s;"></i>
    <!--[ if you don't want this to spin, just remove fa-spin ]-->

</div> </div> <!--end sticky-->    
</div> <!--end sidebar-->

<!--------------------------------------------------------------- [ MAIN CONTENT START ] -->
<div class="col-sm my-2 p-0">
<!--[ copy and paste below this line ]-->

<!----------------------------------------------------------------------------- [ SONG ] -->

<!--SONG HEADER-->
    <div class="bg-success text-dark p-3 d-flex align-items-center">
    <!--SONG EMBED-->
        <div style="position:relative">
        <!--ICON-->
            <i class="fal fa-play pt-1 fa-2x pl-1 pr-2"></i>
        <!--EMBED CONTAINER-->
            <div class="align-items-center justify-content-center" style="width:35px; height:35px; position:absolute; top:0; overflow:hidden;">
        <!--EMBED-->
            <iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1" frameborder="0"></iframe>
        </div> </div>
    <!--TITLE-->
        <div class="ml-2 p-0" style="flex:1; line-height:1;">
        <span class="font-weight-bold text-uppercase" style="font-size:20px; font-family:MS Gothic, Arial Narrow;">song title</span>
        <br>Artist
        </div>
    <!--COLLAPSE LINK-->
        <div class="pl-2 pr-1">
        <a href="#song1" class="text-reset" data-toggle="collapse">
            <!--[ the ID (song1) can be changed to anything, just make sure it's unique ]-->
        <!--ICON-->
            <i class="fal fa-angle-down pt-1 fa-2x pl-2"></i>
        </a></div>
    </div>

<!--COLLAPSE CONTENT-->
    <div id="song1" class="collapse">
        <!--[ remember to change the ID match the one above! ]-->
    <div class="bg-faded p-3">
    <!--LYRICS SECTION-->
        <div class="d-flex">
        <!--BAR-->
            <div class="bg-success my-1 mr-2 faded" style="width:2px"></div>
        <!--LYRICS-->
            <div class="font-italic" style="flex:1; font-size:17px; font-weight:300; line-height:1.2">
            Some lyrics here <br>
            Lorem ipsum dolor sit amet <br>
            Consectetur adipiscing elit <br>
            <!--[ add as many lines as you like, just seperate them with <br> ]-->
            </div>
        </div>
    <!--ALBUM COVER-->
        <div class="mt-3">
        <!--IMAGE-->
            <img src="https://placehold.co/300?text=placeholder" class="w-100">
                <!--[ src="URLHERE" | replace with your image ]-->
        </div>
    <!--PROGRESS BAR-->
        <div class="d-flex font-weight-bold mt-3 align-items-center">
        <!--TIMESTAMP 1-->
            1:30
        <!--LINE-->
            <div class="bg-success text-success mx-2" style="flex:1; height:2px; position:relative">
            <!--INDICATOR-->
                <i class="fad fa-circle-dot" style="position:absolute; top:-6px; left:calc(50% - 8px)"></i>
                    <!--[ replace 50% with your percentage - don't mind the 8px, that's just there to make sure it's centered properly ]-->
            </div>
        <!--TIMESTAMP 2-->
            3:00
        </div>
    <!--NOTES AREA-->
        <div class="mt-3">
        <!--HEADER-->
            <div class="font-weight-bold text-success" style="font-size:17px; font-family:MS Gothic, Arial Narrow;">
            <i class="fal fa-pen"></i> NOTES</div>
        <!--NOTE-->
            <p class="m-0"><i class="fa fa-angle-right text-success faded"></i>
            Optional notes about why the song was added to the playlist or how it fits the character!
            </p>
        <!--NOTE-->
            <p class="m-0"><i class="fa fa-angle-right text-success faded"></i>
            Remember to compress large images if you're using that part</p>
        <!--NOTE-->
            <p class="m-0"><i class="fa fa-angle-right text-success faded"></i>
            Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
        </div>
    <!--VERSION NOTE-->
        <div class="mt-3 text-success font-italic faded">
        <i class="fal fa-music mr-2"></i> opt. snippet to note song version
        </div>
    </div></div>
    
<!----------------------------------------------------------------------------------------->
<!--[ copy and paste above this line ]-->

</div> <!--end main content-->
</div> <!--end code-->