[21] Playlist (Card - Code)

<!--==========================================

    [21] PLAYLIST (CARD) by TOGO
    
    -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
    
    anything you need to edit should be
    tabbed and clearly marked - i've also
    added comments for light code edits you 
    may want to do. feel free to change
    any elements to your needs!
    
    -- -- -- -- -- -- -- -- -- -- -- -- -- --
    
    this code has a custom accent colour;
    the easiest way to change it is to 
    mark the colour code below, and 
    then use ctrl+f to find and replace
    all instances of it in the code.
    
    accent : 
        
        #e18d6e

    -- -- -- -- -- -- -- -- -- -- -- -- -- --
    
    > do not use with WYSIWYG on, it will
      break the code.
    > keep my credit in.
    > direct any questions to my comments,
      PMs or discord. thank you!

===========================================-->

<!-- MAIN CONTAINER =======================-->

<div class="p-4 p-lg-5 bg-faded" style="

    background-image: url(IMAGE URL); 
    
background-size: cover; background-position: center; overflow: hidden;">
<div class="mx-auto" 

    style="max-width: 848px;">
    <!-- 
    you can change max-width to match the
    rest of the profile.
    the player (right column) will always
    be 200px wide. 
    -->
  
<div class="row flex-lg-row-reverse justify-content-center mx-n4 mb-n3">
  
<!-- MUSIC PLAYER (RIGHT) =================-->
  
<div class="col-auto mb-3 pt-4 px-4">
<div class="card pt-4 px-4 pb-3 border-0" style="border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,.3);">
<div class="mt-n5" style="position: relative;">
  
<!-- ALBUM COVER ==========================-->
  
<div class="card mb-4 rounded-0 border-0" style="

    background-image: url(IMAGE URL); 
    
height: 200px; width: 200px; background-size: cover; background-position: center; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,.15);"></div>

<!-- SONG INFO ============================-->

<div class="text-center" style="max-width: 200px;">
<p style="margin-bottom: 3px; font-size: 16px;">
    
    Song Title

</p>
<p class="text-uppercase text-muted" style="margin-bottom: 12px; font-size: 11px; letter-spacing: 1px;">
    
    Artist

</p>

<!-- PROGRESS BAR =========================-->

<div class="progress mb-3" style="height: 3px;">
<div class="progress-bar" style="

    width: 20%; 
    
background-color: #e18d6e;"></div>
</div>
<div class="flex-row justify-content-center align-items-center mb-3 text-muted" style="font-size: 18px;">
<i class="fa-light fa-backward-fast"></i>
<i class="fa-solid fa-play mx-3" style="font-size: 22px; color: #e18d6e;"></i>
<i class="fa-light fa-forward-fast"></i>
</div>
</div>

<!-- YOUTUBE LINK =========================-->

<div class="w-100" style="position: absolute; top: 0; bottom: 0; opacity: .001; overflow: hidden;">
<iframe width="200" height="500" 

    src="https://www.youtube.com/embed/slYQnyfFu4Y?controls=0" frameborder="0" style="position: absolute; top: -100px;"></iframe>
    <!-- youtube embed. replace 'slYQnyfFu4Y' with your yt id, keep ?controls=0 at the end -->
    
</div>
</div>
</div>
</div>

<!-- PLAYLIST (LEFT) ======================-->

<div class="col-lg mb-3 px-4">
<div class="card p-4 border-0" style="border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,.3);">
<p class="mb-0" style="font-size: 24px; font-weight: 300; letter-spacing: 1px;">
Playlist
</p>
<hr class="w-100">
<ul class="flex-column mb-n2 pl-0">
  
<!-- TRACKS ==================================

    > fill out the template below and
      copy + paste as many as needed.
      
    > will hold a lot of tracks, but this
      block does not scroll. around 8 tracks
      looks best.
    
===========================================-->
  
<li class="d-flex align-items-center mb-2 py-2 px-3">
<span class="pr-4" style="font-size: 18px; color: #e18d6e;">
    
    01
    <!-- track number -->

</span>
<div>
<p style="margin-bottom: 2px; font-size: 16px;">
    
    Song Title

</p>
<p class="text-uppercase text-muted" style="font-size: 11px; letter-spacing: 1px;">
    
    Artist

</p>
</div>
<span class="ml-auto">
    
    00:00
    <!-- track length -->

</span>
</li>

<!------------------------------------------->

<!-- MORE TRACKS ABOVE THIS LINE ==========-->
</ul>
<hr class="w-100">
<p class="text-uppercase" style="font-size: 12px; letter-spacing: 1px;">
  
<!-- CREDIT ===============================-->
  
<a href="https://toyhou.se/Togo" class="float-right" style="color: #e18d6e;"><i class="fa-regular fa-code"></i></a>

<!-- PLAYLIST LINK ========================-->

    <a href="PLAYLIST URL" class="text-muted" style="text-decoration: none;">
      
      <i class="fa-brands fa-youtube mr-1" style="color: #e18d6e;"></i>
      Listen on Youtube
    
    </a>
    
</p>
</div>
</div>
</div>
</div>
</div>