[ F2U ] Playlist (CODE (T))

<!-- -----------------------------

        PLAYLIST
        (code by jiko)
         
        RULES
            – Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3  thank youu
               [ https://toyhou.se/~bulletins/127417.code-rules ]
        
        TIPS
            — if you would like to use a drawing, the example image is 1850 × 1139 (though, any similar ratio is okay)!
            — ensure that if a character is in the image, they are on the extreme left (or right side if edited) so that the playlist is not obsured
            — other than that, have fun!
            
            (i pre-set an image here just so it's easier to see and edit, its from Unsplash btw)
            
        TEXT COLOUR : #fff

----------------------------- -->
<div class="mx-auto" style="font-size:13px; letter-spacing:0.3px; max-width:750px">
<div class="row no-gutters" style="margin:-4px; min-height:400px;

  background-image:url(https://images.unsplash.com/photo-1599078583671-f4b954247370?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
  
  background-size: cover;
  background-position: center left;
  background-attachment: scroll;">
<!-- -----------------------------

                 SPACE
                 — to move the playlist over to the left,
                   change [ order-1 ] to [ order-3 ]

----------------------------- -->
<div class="col-md-5 col-4 order-1 card-transparent">
<div class="p-3">
    
    <!-- [ BLANK ] -->
    
</div>
</div>
<!-- -----------------------------

                 PLAYLIST (it scrolls!)

----------------------------- -->
<div class="col-md-7 col-8 order-2 card-transparent pt-4 pl-4">
<div class="p-3" style="height:350px; overflow:auto">
<div class="row no-gutters" style="color:#fff">


    <!-- SONG ONE -->
    <div class="col-2 pb-3" style="font-size:18px">01.</div>
    <div class="col-10 pb-3">
        <a href="SONG LINK" class="text-reset">Song Title</a><br>
        <span class="text-uppercase small" style="letter-spacing:2px">Band</span>
    </div>
    
    <!-- SONG TWO -->
    <div class="col-2 pb-3" style="font-size:18px">02.</div>
    <div class="col-10 pb-3">
        <a href="SONG LINK" class="text-reset">Song Title</a><br>
        <span class="text-uppercase small" style="letter-spacing:2px">Band</span>
    </div>
    
    <!-- SONG THREE -->
    <div class="col-2 pb-3" style="font-size:18px">03.</div>
    <div class="col-10 pb-3">
        <a href="SONG LINK" class="text-reset">Song Title</a><br>
        <span class="text-uppercase small" style="letter-spacing:2px">Band</span>
    </div>
    
    <!-- SONG FOUR -->
    <div class="col-2 pb-3" style="font-size:18px">04.</div>
    <div class="col-10 pb-3">
        <a href="SONG LINK" class="text-reset">Song Title</a><br>
        <span class="text-uppercase small" style="letter-spacing:2px">Band</span>
    </div>
    
    <!-- SONG FIVE -->
    <div class="col-2 pb-3" style="font-size:18px">05.</div>
    <div class="col-10 pb-3">
        <a href="SONG LINK" class="text-reset">Song Title</a><br>
        <span class="text-uppercase small" style="letter-spacing:2px">Band</span>
    </div>



<!-- (add/delete more above THIS line!) -->
</div>
</div>
</div>
<!-- -----------------------------

                 CREDITS

----------------------------- -->
</div>
<div class="py-2 small text-right text-muted">
    <div style="letter-spacing:0.3em;">
            
            <a href="https://toyhou.se/9439709.-f2u-resonant" class="text-reset tooltipster" title="code by jiko" style="text-decoration: none!important;">
                <i class="far fa-code"></i>
            </a> .
            
            <a href="LINK TO ARTIST" class="text-reset tooltipster" title="bg by ARTIST" style="text-decoration: none!important;">
                <i class="far fa-image"></i>
            </a>
            
    </div>
</div>
</div>