Stor8

<!------------------------------------------------------------------------------
P L A Y L I S T
                                                             f2u code by skysong
 
c o l o r   p a l e t t e
main bg         bg-faded
main text       (default, unspecified)
accent text     text-dark
accent color    text-success, bg-success
(ctrl + f to change)

r e s o u r c e s
icons           https://fontawesome.com/
TH colors       https://toyhou.se/7850218.bootstrap-color-combos
editing         https://th.circlejourney.net/#
img hosting     https://freeimage.host/
code link       https://toyhou.se/31652971.playlist-f2u

things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
 
------------------------------------------------------------------------------->

<div class="row py-4" style="font-family: MS Gothic, Avenir, Arial Narrow, sans-serif; max-width:700px; margin:0 auto;">

<!------------------------------------------------------------ S I D E B A R -->
<div class="col-sm-5 p-0">
<!--STICKY-->
    <div style="position:sticky; top:0">
    <div class="bg-faded m-2 px-2 py-4">
    <!--HEADER-->
        <h1 style="text-align:center;">
        OC PLAYLIST / <b>NAME</b></h1>
    <!--ICON-->
        <img src="https://placehold.co/70" style="height:70px; display:block; margin:0 auto">
            <!--[ edit src="URLHERE" ]-->
    <!--LINKS-->
        <div class="p-3">
        <!--LINK 1-->
            <a href="https://toyhou.se/LINK_HERE" style="text-decoration:none" class="text-success">
                <!--[ edit href="URLHERE" ]-->
            <i class="fa fa-link fa-fw mr-3"></i>
            link text</a><br>
        <!--[ copy and paste above this line ]-->
        </div>
    </div>
    <!--CODE CREDITS-->
        <!--[ do not edit! ]-->
        <div style="text-align:center;">
        <a class="text-success tooltipster px-1" data-placement="bottom" title="code - skysong" href="https://toyhou.se/31652971.playlist-f2u">
        <i class="fa fa-code"></i></a>
        </div>
    </div> <!--end sticky-->
</div> <!--end sidebar-->

<!------------------------------------------------------------------ M A I N -->
<div class="col-sm m-2 p-0">

<!--SONG TEMPLATE-->
    <!--HEADER-->
        <div class="bg-success text-dark p-2" style="position:relative">
				<!--[ to space out the songs, add mt-3 after p-2 (this is not needed for the first one) ]-->
        <div class="row m-0">
        <!--SONG EMBED-->
            <iframe frameborder="0" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" style="opacity:0.01; position:absolute; left:30px; top:25px; width:15px; height:15px; cursor:pointer; z-index:10"></iframe>
            <!--[ edit src="https://www.youtube-nocookie.com/embed/INSERTHERE?controls=0" ]-->
            <!--[ use only what comes after the v= in the video URL ]-->
        <!--PLAY ICON-->
            <div class="col-2 p-0" style="display:flex; justify-content:center; align-items:center;">
            <h2><i class="fal fa-play" style="cursor:pointer"></i></h2></div>
        <!--TITLE-->
            <div class="col-9 px-2">
            <h3><b>Song Name</b></h3>
            Artist(s)
            </div>
        <!--COLLAPSE ICON-->
            <div class="col-1 p-0" style="display:flex; justify-content:center; align-items:center;">
            <a class="btn-link" data-toggle="collapse" data-target="#song1" style="cursor:pointer">
                <!--[ edit data-target="#song1" to whatever number you're on (if they're all the same it won't work) ]-->
            <h2><i class="fa fa-chevron-down"></i></h2>
            </a></div>
        </div></div>
    <!--CONTENT-->
        <div id="song1" class="collapse show">
             <!--[ edit id="song1" to the same ID you used above ]-->
        <div class="bg-faded p-3">
        <!--ALBUM ART-->
           <img src="https://placehold.co/500">
           <!--[ edit src="URLHERE" ]-->
        <!--PROGRESS BAR-->
            <div class="row m-0 py-3">
            <!--TIMESTAMP 1-->
                <div class="col-auto p-0">1:30</div>
            <!--BAR-->
                <div class="col px-2" style="display:flex; align-items:center;">
                <div style="background:#fff; height:2px; width:100%; display:flex; align-items:center;">
                <div class="bg-success" style="height:2px; width:50%; position:relative; display:flex; align-items:center;">
                    <!--[ edit the width:50% percentage ]-->
                    <!--[ if you want to have the percentage accurate to the lyrics' position:
                        1. pull up the actual song & find the lyrics you want
                        2. screenshot the progress bar to find its length
                        3. screenshot the current progress to find its length
                        4. divide the second number by the first
                        5. multiply by 100 and round 
                        (or convert the timestamps to decimals and divide that )]-->
                <!--CIRCLE-->
                    <i class="fa fa-circle text-success" style="position:absolute; left:100%;"></i></div>
                        <!--[ no need to edit this width ]-->
                </div></div>
            <!--TIMESTAMP 2-->
                <div class="col-auto p-0">3:00</div>
            </div>
        <!--LYRICS-->
            <p style="text-align:center; font-size:18px">
            <i class="fa fa-quote-left text-success"></i>
            Optional song lyrics!
                <!--[ some styling templates if you want to be fancy:
                    ITALICS: <i>words</i>
                    BOLD: <b>words</b>
                    UNDERLINE: <u>words</u>
                    COLOR: <span class="text-success">words</span> 
                    SIZE: <span style="font-size:20px">words</span>
                    if there's something specific you want just ask! ]-->
            <i class="fa fa-quote-right text-success"></i></p>
        </div></div>

<!--[ copy and paste above this line ]-->
</div> <!--end main-->

<!----------------------------------------------------------------------------->
</div>