[18] Evasive (Code)

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

    [18] EVASIVE 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 uses four custom colours;
    the easiest way to change them is to 
    mark the colour code below, and 
    then use ctrl+f to find and replace
    all instances of it in the code.
    
    accent : 
        
        #dc8e3b
        
        
    text block bg :
    
        rgba(24,19,8,0.8)
        
        
    pattern bg :
    
        #2a2412
        
        
    text :
    
        #f2ecdb
    
    
    -- -- -- -- -- -- -- -- -- -- -- -- -- --
    
    > 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 style="max-width: 550px; margin: 100px auto; color: #f2ecdb;">
  
<!-- BG PATTERN ===========================-->
  
<div class="px-3 pb-3" style="position: relative; padding-top: 100px; 

    background-color: #2a2412; 
    background-image: url(https://www.transparenttextures.com/patterns/vichy.png); 
    
border-radius: 30px; overflow: hidden;">
  
<!-- BG IMAGE =============================-->
  
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 405px; 

    background-image: url(IMAGE URL); 
    
background-size: cover; background-position: left; background-repeat: no-repeat; box-shadow: -10px 0 10px inset rgba(0,0,0,.3);"></div>
<div class="row no-gutters">
<div class="col mr-2">
<div class="row no-gutters justify-content-end">
<div class="col-md-7">

<!-- FILEDS ===============================-->
  
<div class="mb-2 pt-3 px-3 pb-2 font-italic" style="letter-spacing: 1px; background-color: rgba(24,19,8,0.8); border-radius: 20px 5px 5px 5px;">
<div class="row no-gutters">
<!------------------------------------------->
<div class="col-6">
<div class="row no-gutters mb-2">
<div class="col-auto mr-2" style="color: #dc8e3b;">
    
    <i class="fa-light fa-pen-line fa-fw"></i>

</div>
<div class="col">
    
    name

</div>
</div>
</div>
<!------------------------------------------->
<div class="col-6">
<div class="row no-gutters mb-2">
<div class="col-auto mr-2" style="color: #dc8e3b;">
    
    <i class="fa-light fa-birthday-cake fa-fw"></i>

</div>
<div class="col">
    
    age

</div>
</div>
</div>
<!------------------------------------------->
<div class="col-6">
<div class="row no-gutters mb-2">
<div class="col-auto mr-2" style="color: #dc8e3b;">
    
    <i class="fa-light fa-venus-mars fa-fw"></i>

</div>
<div class="col">
    
    pronouns

</div>
</div>
</div>
<!------------------------------------------->
<div class="col-6">
<div class="row no-gutters mb-2">
<div class="col-auto mr-2" style="color: #dc8e3b;">
    
    <i class="fa-light fa-globe fa-fw"></i>

</div>
<div class="col">
    
    language(s)

</div>
</div>
</div>
<!------------------------------------------->
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-auto d-none d-md-block">
  
<!-- MUSIC PLAYER =========================-->
  
<div class="p-4 mr-2" style="background-color: rgba(24,19,8,0.8); border-radius: 5px 5px 5px 20px;">
<i class="fal fa-compact-disc fa-spin" style="font-size: 60px; color: #dc8e3b; animation-duration: 10s;"></i>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
<iframe width="700" height="500" 

    src="https://www.youtube.com/embed/Vhap-9YhEWU?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;"></iframe>
    <!-- replace 'Vhap-9YhEWU' with your youtube ID, keep ?controls=0 at the end -->
    
</div>
</div>
</div>
<div class="col">
  
<!-- TEXT BLOCK ===========================-->
  
<div class="flex-column justify-content-center align-items-center h-100 p-3 font-italic text-md-center" style="letter-spacing: 1px; background-color: rgba(24,19,8,0.8); border-radius: 5px;">
<p>
      
    <b>a short introduction, 1-3 lines.</b> <br/>
    lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
</p>
</div>
</div>
</div>
</div>
<div class="col-auto">
  
<!-- SOCIAL LINKS =========================-->
  
<div class="flex-column justify-content-center align-items-center h-100 p-3" style="background-color: rgba(24,19,8,0.8); border-radius: 5px 5px 20px 5px;">
    
    <a href="TWITTER URL" class="mb-2" style="color: #dc8e3b;">
    <i class="fab fa-twitter"></i>
    </a>
    
    <a href="DEVIANTART URL" class="mb-2" style="color: #dc8e3b;">
    <i class="fa-brands fa-deviantart"></i>
    </a>
    
    <a href="INSTAGRAM URL" class="mb-2" style="color: #dc8e3b;">
    <i class="fa-brands fa-instagram"></i>
    </a>
    
    <a href="TUMBLR URL" class="mb-2" style="color: #dc8e3b;">
    <i class="fa-brands fa-tumblr"></i>
    </a>
    
    <span title="DISCORD USER#0000" data-toggle="tooltip" data-placement="left" class="mb-2" style="color: #dc8e3b;">
    <i class="fa-brands fa-discord"></i>
    </span>

</div>
</div>
</div>
</div>

<!-- CREDIT ===============================-->

<p class="mt-2 text-right">
<a href="https://toyhou.se/Togo" class="text-body">
<i class="fa-light fa-code"></i>
</a>
</p>
</div>