[12] Underlined (Card - Code)

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

    [12] UNDERLINED (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 : 
        
        #4fa4bb

    -- -- -- -- -- -- -- -- -- -- -- -- -- --
    
    > 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="my-5 mx-auto py-4 px-3 p-md-4" style="position: relative; max-width: 750px; border-radius: 15px; overflow: hidden;">

<!-- BACKGROUND ===========================-->
  
<div class="h-100 w-100" style="position: absolute; top: 0; left: 0; 

    background-image: url(IMAGE URL); 
    background-size: cover;
    filter: blur(3px);
  /* 
    remove background-size if you're using a seamless pattern.
    filter will automatically blur the background - remove it if you'd like the bg sharp.
  */;
    
background-position: center;  transform: scale(1.1,1.1);"></div>
<div class="row flex-md-row-reverse justify-content-center align-items-center">
  
<!-- IMAGE ================================-->
  
<div class="col-7 col-md-4">
<img class="w-100" 

    src="IMAGE URL">
    
</div>

<!-- TEXT TITLE ===========================-->

<div class="my-4 col-10 col-md-8">
<div class="card p-3 border-0" style="border-radius: 15px;">
<p class="mb-0" style="font-family: 'Courier New', monospace;">
    
    name. pro/nouns. adjective.

<!-- MUSIC LINK ===========================-->

<a class="float-right" 

    href="YOUTUBE URL" target="_blank" style="color: #f09542;">

<i class="fal fa-music-alt"></i>
</a>
</p>
<hr class="w-100 mt-1 mb-3" style="border-top-style: dashed; border-top-width: 2px;">

<!-- TEXT BODY ============================-->

<div class="mb-3 text-center font-italic text-muted" style="max-height: 200px; overflow-y: auto;">
    
    <p>
      Write a little about your character here. This box will start scrolling if it gets too big. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur consequat augue vitae sollicitudin. Nam bibendum vitae enim a posuere. 
    </p>
    
    <p>
      Sed vitae viverra felis, id sollicitudin arcu. Praesent dignissim commodo mi vitae aliquet. Nulla in ipsum auctor ante cursus tincidunt. Donec sagittis, mauris nec blandit tincidunt.
    </p>
    
</div>

<!-- TEXT FOOTER ==========================-->

<hr class="w-100 mt-0 mb-1" style="border-top-style: dashed; border-top-width: 2px;">
<p class="text-right" style="font-family: 'Courier New', monospace;">
<!-- credit. you can restyle, but don't hide/remove it. -->
<a href="https://toyhou.se/Togo" class="float-left" style="color: #f09542; margin-top: 1px;">
<i class="fal fa-code"></i>
</a>
    
    design + art by 
    <a href="DESIGNER URL" style="color: #f09542;">
      designer.
    </a>
</p>
</div>
</div>
</div>
</div>