[18] Evasive (Safehou-se Template)

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

    [18] EVASIVE by TOGO
    SAFEHOUSE VER. 
    
    not meant for regular editing -
    please edit on 
    
      SAFEHOU-SE.VERCEL.APP/CODE-FILLER

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

<div style="max-width: 550px; margin: 100px auto; color:  {{c!Text Color!}};">  
<div class="px-3 pb-3" style="position: relative; padding-top: 100px; background-color: {{c!Background Color!}}; background-image: url({{u!Background Pattern!}}); border-radius: 30px; overflow: hidden;">  
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 405px; background-image: url({{u!Background Image!}}); 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">  
<div class="mb-2 pt-3 px-3 pb-2 font-italic" style="letter-spacing: 1px; background-color: {{c!Card BG Color!}}; 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: {{c!Primary Color!}};">
<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: {{c!Primary Color!}};">
<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: {{c!Primary Color!}};">
<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: {{c!Primary Color!}};">
<i class="fa-light fa-globe fa-fw"></i>
</div>
<div class="col">
{{!Languages!}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-auto d-none d-md-block">  
<div class="p-4 mr-2" style="background-color: {{c!Card BG Color!}}; border-radius: 5px 5px 5px 20px;">
<i class="fal fa-compact-disc fa-spin" style="font-size: 60px; color: {{c!Primary Color!}}; 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/{{!YouTube ID!}}?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;"></iframe>
</div>
</div>
</div>
<div class="col">  
<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: {{c!Card BG Color!}}; border-radius: 5px;">
<p>{{!Profile Text!}}</p>
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="flex-column justify-content-center align-items-center h-100 p-3" style="color: {{c!Primary Color!}}; background-color: {{c!Card BG Color!}}; border-radius: 5px 5px 20px 5px;"> 
{{%Socials%
<a href="{{%URL%}}" class="mb-2" style="color: {{c!Primary Color!}};">
<i class="{{i%Icon%}}"></i>
</a>
%end%}}
{{?Discord?
<span title="{{!Discord User!}}" data-toggle="tooltip" data-placement="left" class="mb-2">
<i class="fa-brands fa-discord"></i>
</span>
?end?}}
</div>
</div>
</div>
</div>
<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>