<div class="py-5">
<div class="container card p-2 py-2 rounded-0 border-0" style="max-width: 680px; color: {{c!Text color!}};">
<hr class="w-100 mb-1" style="border-width: 4px; border-color: {{c!Accent color!}};">
<hr class="w-100 mt-2" style="border-width: 4px; border-color: {{c!Accent color!}};">
<div class="card rounded-0 border-0"
style="background-color: {{c!Accent color!}};">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url('https://www.toptal.com/designers/subtlepatterns/uploads/checkerboard-cross.png'); mix-blend-mode: luminosity; opacity: .6;"></div>
<div class="card rounded-0 bg-transparent p-2 border-top-0 border-bottom-0" style="border: solid 10px; border-color: rgba(255,255,255, .5);">
<div class="row no-gutters">
<!--
========================================================================
LEFT PART (USER AVATAR + LINKS + INTRO)
========================================================================
-->
<div class="col-12 col-lg-5 px-2 px-lg-4 pb-lg-3 flex-column">
<!--
====================================
USER IMAGE
====================================
-->
<div class="card mt-n5 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-3 mt-n5" style="color: {{c!Accent color!}};">
<i class="fas fa-hat-witch fa-8x hidden-md-down" style="position: absolute; transform: rotate(52deg); top: -40px; right: -70px;"></i>
<i class="fas fa-flask-round-potion fa-2x" style="position: absolute; right: -5px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fas fa-books fa-4x" style="position: absolute; left: -5px; bottom: 0px;"></i>
<div class="p-2" style="border: solid 3px {{c!Accent color!}};">
<div style="height: 190px;
background-image: url('{{u!User avatar image!}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
====================================
SOCIAL LINKS
====================================
-->
<div class="row justify-content-around mt-3 px-3" style="font-size: 22px;">
{{%Social links%
<a style="color: {{c!Accent color!}};"
href="{{%social page link%}}">
<i class="{{%FA icon prefix use fas or fab%}} fa-{{%FA icon name in lowercase%}}"></i>
</a>
%end%}}
</div>
<!--
====================================
LITTLE DESCRIPTION
====================================
-->
<div class="card rounded-0 mt-2 p-2 d-block d-lg-flex" style="font-size: 14px; border: double 2px; border-top-width: 6px; border-right-width: 6px; border-color: rgba(255,255,255, .6); background-color: {{c!Content card color!}}; min-height: 96px;">
<div style="flex: 1 1 0; overflow-y: auto;">
<p>
{{l!Profile intro!}}
</p>
</div>
</div>
</div>
<!--
========================================================================
RIGHT PART (ALL THE MAIN INFORMATION + )
========================================================================
-->
<div class="col-12 col-lg-7 flex-column p-2 pb-lg-0 pr-lg-3 pl-lg-2 pt-4">
<!--
====================================
DECORATIONS ROW (HIDDEN ON MOBILE)
====================================
-->
<div class="row no-gutters justify-content-between mx-n2 mb-3 mt-n5 hidden-md-down" style="color: {{c!Accent color!}};">
<i class="fas fa-{{!hanging FA icon name in lowercase mistletoe by default!}} fa-2x"></i>
<i class="fas fa-{{!hanging FA icon name in lowercase mistletoe by default!}} fa-2x"></i>
<i class="fas fa-{{!hanging FA icon name in lowercase mistletoe by default!}} fa-2x"></i>
<i class="fas fa-{{!hanging FA icon name in lowercase mistletoe by default!}} fa-2x"></i>
<i class="fas fa-{{!hanging FA icon name in lowercase mistletoe by default!}} fa-2x"></i>
</div>
<!--
====================================
MAIN INFO CONTENT
====================================
-->
<div class="card rounded-0 mb-3 mb-lg-4" style="border: double 2px; border-left-width: 6px; border-bottom-width: 6px; border-color: rgba(255,255,255, .6); background-color: {{c!Content card color!}};">
<div class="tab-content">
<!--
=====================================================
BASIC INFORMATION
=====================================================
-->
<div class="tab-pane fade in active show p-2" style="height: 250px; overflow: auto;" id="intro">
<!--
================================================
BASICS
================================================
-->
<div class="row no-gutters">
<!-- PRONOUNS -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-comments fa-fw fa-2x" style="color: {{c!Accent color!}}; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
{{!Pronouns!}}
</p>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-hourglass fa-fw fa-2x" style="color: {{c!Accent color!}}; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
{{!Age!}}
</p>
</div>
</div>
</div>
<!-- MBTI -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-head-side-brain fa-fw fa-2x" style="color: {{c!Accent color!}}; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
{{!MBTI (XXXX-X)!}}
</p>
</div>
</div>
</div>
<!-- SIGN -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-star-shooting fa-fw fa-2x" style="color: {{c!Accent color!}}; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
{{!Sign!}}
</p>
</div>
</div>
</div>
</div>
<!--
================================================
LANGUAGE SECTION
================================================
-->
<div style="font-variant: small-caps;">
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4" style="font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-language"></i>
I speak...
</p>
{{%I speak section%
<!-- LANGUAGE BLOCK -->
<div class="row no-gutters my-1 ml-2">
<span class="px-2" style="color: {{c!Accent color!}}; border-left: solid 3px; border-color: rgba(255,255,255, .3);">
{{%language%}}:
</span>
<span>
{{%level%}}
</span>
</div>
%end%}}
<!-- YOU CAN ADD MORE LANGUAGE BLOCKS ABOVE -->
</div>
<!--
================================================
PLEASE NOTE SECTION
================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-circle-info"></i>
Please note
</p>
<ul class="fa-ul">
{{%Please note section%
<!-- NOTE ITEM -->
<li><span class="fa-li"><i class="fad fa-info" style="color: {{c!Accent color!}};"></i></span>
{{%Note item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE NOTE ITEMS ABOVE -->
</ul>
</div>
<!--
================================================
DNI SECTION
================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-circle-xmark"></i>
DNI
</p>
<ul class="fa-ul">
{{%DNI section%
<!-- DNI ITEM -->
<li><span class="fa-li"><i class="fad fa-xmark" style="color: {{c!Accent color!}};"></i></span>
{{%DNI item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE DNI ITEMS ABOVE -->
</ul>
</div>
</div>
<!--
=====================================================
STATUS + LINKS + I DRAW + INTERESTS
=====================================================
-->
<div class="tab-pane fade" style="height: 250px; overflow: auto;" id="status">
<!--
=================================================
STATUS + LINKS
=================================================
-->
<div class="row no-gutters">
<!--
=================================================
STATUS INFO
=================================================
-->
<div class="col-12 col-lg-4 p-2 align-items-center">
<div class="w-100">
<!-- COMMISSIONS STATUS -->
<div class="text-center">
<p class="mb-n2">
commissions
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: {{c!Accent color!}}; font-size: 25px;">
{{!Commissions status!}}
</span>
</div>
<!-- DIVIDER -->
<hr class="mx-n2 my-1" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<!-- TRADES STATUS -->
<div class="text-center">
<p class="mb-n2">
trades
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: {{c!Accent color!}}; font-size: 25px;">
{{!Trades status!}}
</span>
</div>
<!-- DIVIDER -->
<hr class="mx-n2 my-1" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<!-- REQUESTS STATUS -->
<div class="text-center">
<p class="mb-n2">
requests
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: {{c!Accent color!}}; font-size: 25px;">
{{!Requests status!}}
</span>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="col-auto hidden-md-down" style="border-right: solid 1px; border-color: rgba(255,255,255, .3);"></div>
<!--
=================================================
CUSTOM LINKS
=================================================
-->
<div class="col-12 col-lg px-2 py-1 text-lowercase" style="font-variant: small-caps;">
{{%%First link button%
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: {{c!Accent color!}}; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="{{%link url%}}">
{{%link name%}}
</a>
</div>
%end%}}
{{%%Second link button%
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: {{c!Accent color!}}; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="{{%link url%}}">
{{%link name%}}
</a>
</div>
%end%}}
{{%%Third link button%
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: {{c!Accent color!}}; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="{{%link url%}}">
{{%link name%}}
</a>
</div>
%end%}}
{{%%Fourth link button%
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: {{c!Accent color!}}; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="{{%link url%}}">
{{%link name%}}
</a>
</div>
%end%}}
</div>
</div>
<!-- DIVIDER -->
<hr class="mt-0 mb-1" style="border-color: rgba(255,255,255, .3);">
<!--
=================================================
I DRAW + INTERESTS
=================================================
-->
<div class="p-2">
<!--
=================================================
I DRAW
=================================================
-->
<div>
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-paintbrush"></i>
I draw...
</p>
<ul class="fa-ul">
{{%I draw section%
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-pencil" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
=================================================
INTERESTS
=================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-circle-heart"></i>
Interests
</p>
<ul class="fa-ul">
{{%Interests section%
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-heart-half-stroke" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=====================================================
UPDATES INFORMATION
=====================================================
-->
<div class="tab-pane fade p-2" style="height: 250px; overflow: auto;" id="updates">
<!-- ADD THE NEWER BLOCKS BELOW -->
<!--
================================================
UPDATE BLOCK
================================================
-->
{{%Updates block%
<div class="mb-2">
<p class="display-4 mb-2" style="font-size: 25px; color: {{c!Accent color!}}; font-variant: small-caps;"><i class="fad fa-calendar-day"></i>
{{%month date year%}}
</p>
<div class="ml-2 px-2 text-justify" style="border-left: solid 3px; border-color: rgba(255,255,255, .3); font-size: 13px;">
<p>
{{%update text%}}
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
%end%}}
</div>
<!--
=====================================================
FEATURED CHARACTERS/FRIENDS
=====================================================
-->
<div class="tab-pane fade p-2" style="height: 250px; overflow: auto;" id="featured">
<!--
==============================================
FEATURED CHARACTER
==============================================
-->
<div>
<p class="display-4 mb-2" style="font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-sparkles"></i>
Featured characters
</p>
<div class="row no-gutters justify-content-center">
{{%Featured character block%
<!--
====================================
CHARACTER BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="{{%character link%}}"
style="
background-image: url('{{u%character image%}}');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: {{c!Accent color!}}; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-{{%FA icon name%}}"></i>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE CHARACTER BLOCKS ABOVE -->
</div>
</div>
<!--
==============================================
FEATURED FRIENDS
==============================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-size: 25px; color: {{c!Accent color!}};"><i class="fad fa-cauldron"></i>
Friends
</p>
<div class="row no-gutters justify-content-center">
{{%Featured friend block%
<!--
====================================
CHARACTER BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="{{%friend link%}}"
style="
background-image: url('{{u%friend image%}}');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: {{c!Accent color!}}; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-{{%FA icon name%}}"></i>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE FRIEND BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
====================================
NAVIGATION ROW
====================================
-->
<div class="card rounded-0 border-0 bg-transparent mb-n3">
<div class="card rounded-0 border-0 p-3 mb-n5">
<div style="background-color: {{c!Accent color!}}; z-index: 3;">
<ul class="nav row no-gutters py-1">
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link py-1" style="color: rgba(255,255,255, .7)" data-toggle="tab" href="#intro">
<i class="fal fa-portrait"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#status">
<i class="fal fa-pencil-paintbrush"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#updates">
<i class="fal fa-newspaper"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#featured">
<i class="fal fa-users"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<hr class="w-100 mb-1" style="border-width: 4px; border-color: {{c!Accent color!}}; z-index: 2;">
<div class="row no-gutters mt-3 mt-lg-0">
<div class="card rounded-0 border-0 col-12 col-lg-auto text-center ml-lg-5 mt-lg-n3 px-2" style="z-index: 5;">
<a class="tooltipster" title="Code by ChiiAka" href="https://toyhou.se/ChiiAka" style="color: {{c!Accent color!}}; font-size: 18px; margin-top: -3px;">
<i class="fad fa-code"></i>
</a>
</div>
</div>
</div>
</div>