[ F2U ] Playlist (CODE (CC))

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

        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 ]
               
        ACCENT
            BG COLOUR : #7897aa
            TEXT      : #fff

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

                 SPACE
                 — to move the image over to the right,
                   change [ order-1 ] to [ order-3 ]

----------------------------- -->
<div class="col-md-5 col-4 order-1" style=" min-height:400px;

  background-image:url(https://images.unsplash.com/photo-1592669707772-7fc9e48ad822?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80);
  
  background-size: cover;
  background-position: center left;
  background-attachment: scroll;">
<div class="p-3">
    
    <!-- [ BLANK ] -->
    
</div>
</div>
<!-- -----------------------------

                 PLAYLIST (it scrolls!)

----------------------------- -->
<div class="col-md-7 col-8 order-2 pt-4 pl-4" style="background:#7897aa">
<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="https://unsplash.com/" class="text-reset tooltipster" title="bg by Unsplash" style="text-decoration: none!important;">
                <i class="far fa-image"></i>
            </a>
            
    </div>
</div>
</div>