Profile
<!-- THIS CODE USES THEME COLORS + CUSTOM ACCENT
==============================================
43. || Gifted || F2U
==============================================
ACCENT COLOR == #F6B054
Use CTRL+F to quickly find & replace the color!
-->
<div class="py-5">
<div class="container p-0" style="max-width: 600px;">
<div class="card rounded-0 p-2 border-0" style="box-shadow: 0 0 15px rgba(89,21,0, .3);
background-image: url('https://cdn.discordapp.com/attachments/971391070749466713/1051222538891563078/image.png');
background-size: 350px;">
<div class="card rounded-0 h-100 hidden-md-down" style="position: absolute; width: 80px; top: 0px; right: 90px; background-color: #F6B054; border-color: rgba(89,21,0, .3);"></div>
<div class="card rounded-0 w-100 hidden-md-down" style="position: absolute; height: 80px; left: 0px; bottom: 90px; background-color: #F6B054; border-color: rgba(89,21,0, .3);"></div>
<div class="row no-gutters flex-lg-row-reverse">
<!--
=========================================================
RIGHT PART WITH ICON + BASICS
=========================================================
-->
<div class="col-12 col-lg-5 p-2">
<div class="card rounded-0 p-1 mb-3">
<div class="p-2" style="border: dashed 4px #F6B054;">
<div class="card rounded-0 border-0" style="box-shadow: inset 0 0 12px rgba(89,21,0, .5); padding: 50%;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div>
<!--
===================================
AGE
===================================
-->
<div class="card p-1 rounded-0">
<div class="row no-gutters">
<div class="col" style="color: #F6B054; font-weight: 500;"><span><i class="fad fa-hourglass fa-fw"></i>
Age
</span></div>
<div class="col-auto" style="border-right: dashed 4px #F6B054;"></div>
<div class="col text-right"><span>
content
</span></div>
</div>
</div>
<!--
===================================
GENDER
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: #F6B054; font-weight: 500;"><span><i class="fad fa-venus-mars fa-fw"></i>
Gender
</span></div>
<div class="col-auto" style="border-right: dashed 4px #F6B054;"></div>
<div class="col text-right"><span>
content
</span></div>
</div>
</div>
<!--
===================================
PRONOUNS
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: #F6B054; font-weight: 500;"><span><i class="fad fa-comments fa-fw"></i>
Pronouns
</span></div>
<div class="col-auto" style="border-right: dashed 4px #F6B054;"></div>
<div class="col text-right"><span>
content
</span></div>
</div>
</div>
</div>
</div>
<!--
=========================================================
LEFT PART WITH MAIN CONTENT
=========================================================
-->
<div class="col-12 col-lg-7 p-2">
<div class="card rounded-0 p-1 mb-3 text-center display-4 text-white" style="background-color: #F6B054; border-color: rgba(89,21,0, .3);">
<span>
Character name
</span>
</div>
<div class="card rounded-0 d-block d-lg-flex" style="min-height: 550px;">
<div class="p-1" style="flex: 1 1 0; overflow-y: auto;">
<i class="fas fa-gifts fa-4x" style="position: absolute; left: -10px; bottom: -10px; color: #F6B054; z-index: 2;"></i>
<i class="fas fa-gift fa-3x" style="position: absolute; right: -10px; bottom: -10px; color: #F6B054; z-index: 2;"></i>
<!--
=================================================
BASICS SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: #F6B054;"><span>
Basics
</span></div>
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
</div>
<div class="px-2 mb-2">
<!-- ORIENTATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-heartbeat fa-fw"></i>
s.o
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- DOB -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-birthday-cake fa-fw"></i>
DoB
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- SIGN/ZODIAC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-star-shooting fa-fw"></i>
Sign
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- SPECIES -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-paw-claws fa-fw"></i>
Species
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- STATUS -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-crown fa-fw"></i>
status
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-suitcase fa-fw"></i>
occupation
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-scale-unbalanced fa-fw"></i>
alignment
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
</div>
</div>
<!--
=================================================
PERSONALITY SECTION
=================================================
-->
<div>
<!-- SECTION HEADER -->
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: #F6B054;"><span>
Personality
</span></div>
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
</div>
<div class="px-2">
<div class="card rounded-0 bg-faded p-2 mt-1 mb-3">
<p class="mb-0 text-center font-italic"><i class="fad fa-quote-left" style="color: #F6B054;"></i>
A quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fad fa-quote-right" style="color: #F6B054;"></i></p>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-sliders fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
TWO-SIDED STATS
=================================================
-->
<div class="px-2">
<!-- EXTROVERTED == INTROVERTED -->
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Extroverted
</span>
<span>
Introverted
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Instinctive
</span>
<span>
Calculated
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Deceptive
</span>
<span>
Sincere
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- GROUNDED == DREAMING -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Grounded
</span>
<span>
Dreaming
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- NAIVE == CAUTIOUS -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Naive
</span>
<span>
Cautious
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Indifferent
</span>
<span>
Emotional
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="mt-1">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Reserved
</span>
<span>
Affectionate
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
<!-- COOPERATIVE == LONE WOLF -->
<div class="mt-1 mb-3">
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Cooperative
</span>
<span>
Lone wolf
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
;"><div style="width: 6px; background-color: #F6B054; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
</div>
<!--
=================================================
PERSONALITY BASICS
=================================================
-->
<div class="px-2 py-2">
<!-- ATTITUDE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-glasses fa-fw"></i>
attitude
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
optimist/pessimist/etc.
</span></div>
</div>
</div>
<!-- DOMINANT HAND -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-hand fa-fw"></i>
dom. hand
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
left/right
</span></div>
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-head-side-brain fa-fw"></i>
MBTI
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
XXXX-X (Content)
</span></div>
</div>
</div>
<!-- ENNEAGRAM -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-ferris-wheel fa-fw"></i>
enneagram
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- ARCHETYPE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-dharmachakra fa-fw"></i>
archetype
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- TAROT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-cards-blank fa-fw"></i>
tarot
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content content
</span></div>
</div>
</div>
</div>
<!--
=================================================
STANDALONE STATS
=================================================
-->
<div class="px-2 mb-3">
<!-- CHARISMA -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
charisma
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
kindness
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
patience
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
integrity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
intellect
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MANNERS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
manners
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
maturity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
courage
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TEMPER -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
temper
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: #F6B054; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-masks-theater fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
PERSONALITY TRAITS
=================================================
-->
<div class="px-2">
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-plus fa-xs"></i></span>
positive traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-plus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-plus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-plus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
NEUTRAL TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-equals fa-xs"></i></span>
neutral traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-equals" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-equals" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-equals" style="color: #F6B054;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-minus fa-xs"></i></span>
negative traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-minus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-minus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- TRAIT -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-minus" style="color: #F6B054;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
VIBES SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: #F6B054;"><span>
Vibes
</span></div>
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
</div>
<!--
=================================================
LITTLE MOODBOARD ROW
=================================================
-->
<div class="px-2 mt-1 mb-3">
<div class="row no-gutters">
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col mx-2">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
<!--
=================================================
FAVORITE/ASSOCATIVE ITEMS
=================================================
-->
<div class="px-2 mb-3">
<!-- FOOD -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-pot-food fa-fw"></i>
food
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- BEVERAGE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-cup-straw fa-fw"></i>
beverage
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- SCENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-spray-can-sparkles fa-fw"></i>
scent
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- COLOR -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-palette fa-fw"></i>
color
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- FLOWER -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-flower-tulip fa-fw"></i>
flower
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- ANIMAL -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-paw fa-fw"></i>
animal
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- SEASON -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-clouds-sun fa-fw"></i>
season
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
<!-- MUSIC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: #F6B054;"><span><i class="fas fa-music fa-fw"></i>
music
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
content
</span></div>
</div>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-heart-half-stroke fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
LIKES/DISLIKES/FEARS/HOBBIES
=================================================
-->
<div class="px-2">
<!--
===========================================
LIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart fa-xs"></i></span>
likes
</p>
<ul class="fa-ul ml-4">
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart" style="color: #F6B054;"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
DISLIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart-crack fa-xs"></i></span>
dislikes
</p>
<ul class="fa-ul ml-4">
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart-crack" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart-crack" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart-crack" style="color: #F6B054;"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
FEARS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-skull fa-xs"></i></span>
fears
</p>
<ul class="fa-ul ml-4">
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-skull" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-skull" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-skull" style="color: #F6B054;"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
HOBBIES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-icons fa-xs"></i></span>
hobbies
</p>
<ul class="fa-ul ml-4">
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-icons" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-icons" style="color: #F6B054;"></i></span>
content
</li>
<!-- LIST ITEM -->
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-icons" style="color: #F6B054;"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
STORY SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: #F6B054;"><span>
Story
</span></div>
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
</div>
<div class="mb-3">
<!--
=================================================
STORY PART
=================================================
-->
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
subheader
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 mt-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-bookmark fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
STORY PART
=================================================
-->
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
subheader
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 mt-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-bookmark fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
STORY PART
=================================================
-->
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
subheader
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- YOU CAN ADD MORE STORY PARTS ABOVE
Don't forget to add icon dividers in-between! -->
</div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: #F6B054;"><span>
Related
</span></div>
<div class="col"><hr style="border-top: dashed 3px #F6B054;"></div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div class="px-2 text-justify">
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
relationship
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: #F6B054; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: #F6B054;"
href="LINK_HERE">
Character Name
</a></p>
<div>
<p>
Describe the relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-link fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
relationship
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: #F6B054; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: #F6B054;"
href="LINK_HERE">
Character Name
</a></p>
<div>
<p>
Describe the relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-link fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
relationship
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: #F6B054; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: #F6B054;"
href="LINK_HERE">
Character Name
</a></p>
<div>
<p>
Describe the relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- YOU CAN ADD MORE RELATED CHARACTERS ABOVE -->
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-gift-card fa-2x" style="color: #F6B054;"></i></div>
<div class="col"><hr></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS LINE == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end">
<!-- BACKGROUND PATTERN/IMAGE CREDIT-->
<a href="https://www.freepik.com/free-vector/hand-drawn-cute-tree-seamless-pattern_26933706.htm#query=new%20year%20seamless%20pattern&position=2&from_view=search&track=sph"
title="Pattern from Freepik"
class="tooltipster pr-1"><i class="far fa-images"></i></a>
<!-- CODE CREDIT -->
<a href="https://toyhou.se/ChiiAka" class="tooltipster" title="Code by ChiiAka"><i class="far fa-code"></i></a>
</div>
</div>
</div>
<div class="py-5">
<div class="container p-0" style="max-width: 600px;">
<div class="card rounded-0 p-2 border-0" style="box-shadow: 0 0 15px rgba(89,21,0, .3);
background-image: url('https://cdn.discordapp.com/attachments/971391070749466713/1051222538891563078/image.png');
background-size: 350px;">
<div class="card rounded-0 h-100 hidden-md-down" style="position: absolute; width: 80px; top: 0px; right: 90px; background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);"></div>
<div class="card rounded-0 w-100 hidden-md-down" style="position: absolute; height: 80px; left: 0px; bottom: 90px; background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);"></div>
<div class="row no-gutters flex-lg-row-reverse">
<!--
=========================================================
RIGHT PART WITH ICON + BASICS
=========================================================
-->
{{%%Right part%
<div class="col-12 col-lg-5 p-2">
<div class="card rounded-0 p-1 mb-3">
<div class="p-2" style="border: dashed 4px {{c!Accent color!}};">
<div class="card rounded-0 border-0" style="box-shadow: inset 0 0 12px rgba(89,21,0, .5); padding: 50%;
background-image: url('{{u%Character image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div>
<!--
===================================
AGE
===================================
-->
<div class="card p-1 rounded-0">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-hourglass fa-fw"></i>
Age
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Age%}}
</span></div>
</div>
</div>
<!--
===================================
GENDER
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-venus-mars fa-fw"></i>
Gender
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Gender%}}
</span></div>
</div>
</div>
<!--
===================================
PRONOUNS
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-comments fa-fw"></i>
Pronouns
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Pronouns%}}
</span></div>
</div>
</div>
</div>
</div>
%end%}}
<!--
=========================================================
LEFT PART WITH MAIN CONTENT
=========================================================
-->
<div class="col-12 col-lg-7 p-2">
<div class="card rounded-0 p-1 mb-3 text-center display-4 text-white" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<span>
{{!Character name!}}
</span>
</div>
<div class="card rounded-0 d-block d-lg-flex" style="min-height: 550px;">
<div class="p-1" style="flex: 1 1 0; overflow-y: auto;">
<i class="fas fa-gifts fa-4x" style="position: absolute; left: -10px; bottom: -10px; color: {{c!Accent color!}}; z-index: 2;"></i>
<i class="fas fa-gift fa-3x" style="position: absolute; right: -10px; bottom: -10px; color: {{c!Accent color!}}; z-index: 2;"></i>
<!--
=================================================
BASICS SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Basics
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="px-2 mb-2">
<!-- ORIENTATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-heartbeat fa-fw"></i>
s.o
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Orientation!}}
</span></div>
</div>
</div>
<!-- DOB -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-birthday-cake fa-fw"></i>
DoB
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!DoB!}}
</span></div>
</div>
</div>
<!-- SIGN/ZODIAC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-star-shooting fa-fw"></i>
Sign
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Sign!}}
</span></div>
</div>
</div>
<!-- SPECIES -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-paw-claws fa-fw"></i>
Species
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Species!}}
</span></div>
</div>
</div>
<!-- STATUS -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-crown fa-fw"></i>
status
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Status!}}
</span></div>
</div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-suitcase fa-fw"></i>
occupation
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Occupation!}}
</span></div>
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-scale-unbalanced fa-fw"></i>
alignment
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Alignment!}}
</span></div>
</div>
</div>
</div>
</div>
<!--
=================================================
PERSONALITY SECTION
=================================================
-->
<div>
<!-- SECTION HEADER -->
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Personality
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="px-2">
<div class="card rounded-0 bg-faded p-2 mt-1 mb-3">
<p class="mb-0 text-center font-italic"><i class="fad fa-quote-left" style="color: {{c!Accent color!}};"></i>
{{!Quote line!}}
<i class="fad fa-quote-right" style="color: {{c!Accent color!}};"></i></p>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-sliders fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
TWO-SIDED STATS
=================================================
-->
<div class="px-2">
<!-- EXTROVERTED == INTROVERTED -->
{{%%Extroverted - Introverted%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Extroverted
</span>
<span>
Introverted
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- INSTINCTIVE == CALCULATED -->
{{%%Instinctive - Calculated%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Instinctive
</span>
<span>
Calculated
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- DECEPTIVE == SINCERE -->
{{%%Deceptive - Sincere%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Deceptive
</span>
<span>
Sincere
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- GROUNDED == DREAMING -->
{{%%Grounded - Dreaming%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Grounded
</span>
<span>
Dreaming
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- NAIVE == CAUTIOUS -->
{{%%Naive - Cautious%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Naive
</span>
<span>
Cautious
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- INDIFFERENT == EMOTIONAL -->
{{%%indifferent - Emotional%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Indifferent
</span>
<span>
Emotional
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- RESERVED == AFFECTIONATE -->
{{%%Reserved - Affectionate%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Reserved
</span>
<span>
Affectionate
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- COOPERATIVE == LONE WOLF -->
{{%%Cooperative - Lone wolf%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Cooperative
</span>
<span>
Lone wolf
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
</div>
<!--
=================================================
PERSONALITY BASICS
=================================================
-->
{{%%Personality basics%
<div class="px-2 py-2">
<!-- ATTITUDE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-glasses fa-fw"></i>
attitude
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%attitude%}}
</span></div>
</div>
</div>
<!-- DOMINANT HAND -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-hand fa-fw"></i>
dom. hand
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%dominant hand%}}
</span></div>
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-head-side-brain fa-fw"></i>
MBTI
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%MBTI%}}
</span></div>
</div>
</div>
<!-- ENNEAGRAM -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-ferris-wheel fa-fw"></i>
enneagram
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%enneagram%}}
</span></div>
</div>
</div>
<!-- ARCHETYPE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-dharmachakra fa-fw"></i>
archetype
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%archetype%}}
</span></div>
</div>
</div>
<!-- TAROT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-cards-blank fa-fw"></i>
tarot
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%tarot%}}
</span></div>
</div>
</div>
</div>
%end%}}
<!--
=================================================
STANDALONE STATS
=================================================
-->
{{%%Standalone stats%
<div class="px-2 mb-3">
<!-- CHARISMA -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
charisma
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Charisma 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
kindness
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Kindness 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
patience
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Patience 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
integrity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Integrity 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
intellect
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Intellect 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- MANNERS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
manners
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Manners 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- MATURITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
maturity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Maturity 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- COURAGE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
courage
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Courage 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- TEMPER -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
temper
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Temper 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
%end%}}
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-masks-theater fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
PERSONALITY TRAITS
=================================================
-->
<div class="px-2">
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-plus fa-xs"></i></span>
positive traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
{{%Positive traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-plus" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
NEUTRAL TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-equals fa-xs"></i></span>
neutral traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
{{%Neutral traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-equals" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-minus fa-xs"></i></span>
negative traits
</p>
<ul class="fa-ul ml-4">
{{%Negative traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-minus" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
VIBES SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Vibes
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<!--
=================================================
LITTLE MOODBOARD ROW
=================================================
-->
{{%%Moodboard row%
<div class="px-2 mt-1 mb-3">
<div class="row no-gutters">
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%left image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col mx-2">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%center image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%right image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
%end%}}
<!--
=================================================
FAVORITE/ASSOCATIVE ITEMS
=================================================
-->
{{%%Favorite or associative items%
<div class="px-2 mb-3">
<!-- FOOD -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-pot-food fa-fw"></i>
food
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%food%}}
</span></div>
</div>
</div>
<!-- BEVERAGE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-cup-straw fa-fw"></i>
beverage
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%beverage%}}
</span></div>
</div>
</div>
<!-- SCENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-spray-can-sparkles fa-fw"></i>
scent
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%scent%}}
</span></div>
</div>
</div>
<!-- COLOR -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-palette fa-fw"></i>
color
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%color%}}
</span></div>
</div>
</div>
<!-- FLOWER -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-flower-tulip fa-fw"></i>
flower
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%flower%}}
</span></div>
</div>
</div>
<!-- ANIMAL -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-paw fa-fw"></i>
animal
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%animal%}}
</span></div>
</div>
</div>
<!-- SEASON -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-clouds-sun fa-fw"></i>
season
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%season%}}
</span></div>
</div>
</div>
<!-- MUSIC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-music fa-fw"></i>
music
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%music%}}
</span></div>
</div>
</div>
</div>
%end%}}
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-heart-half-stroke fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
LIKES/DISLIKES/FEARS/HOBBIES
=================================================
-->
<div class="px-2">
<!--
===========================================
LIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart fa-xs"></i></span>
likes
</p>
<ul class="fa-ul ml-4">
{{%Likes%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
DISLIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart-crack fa-xs"></i></span>
dislikes
</p>
<ul class="fa-ul ml-4">
{{%Dislikes%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart-crack" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
FEARS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-skull fa-xs"></i></span>
fears
</p>
<ul class="fa-ul ml-4">
{{%Fears%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-skull" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
HOBBIES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-icons fa-xs"></i></span>
hobbies
</p>
<ul class="fa-ul ml-4">
{{%Hobbies%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-icons" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
STORY SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Story
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="mb-3">
<!--
=================================================
STORY PART
=================================================
-->
{{%%First story part%
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
{{%subheader%}}
</p>
{{%Paragraphs%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
%end%}}
{{%Story parts%
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 mt-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-bookmark fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
STORY PART
=================================================
-->
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
{{%subheader%}}
</p>
{{%Paragraphs%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
%end%}}
<!-- YOU CAN ADD MORE STORY PARTS ABOVE
Don't forget to add icon dividers in-between! -->
</div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Related
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div class="px-2 text-justify">
{{%%First related block%
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
{{%relationship%}}
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('{{%character icon url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-{{%FA icon name%}} fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: {{c!Accent color!}};"
href="{{%character page link%}}">
{{%Character name%}}
</a></p>
<div>
<p>
{{%relationship description%}}
</p>
</div>
</div>
%end%}}
{{%Related blocks%
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-link fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
{{%relationship%}}
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('{{%character icon url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-{{%FA icon name%}} fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: {{c!Accent color!}};"
href="{{%character page link%}}">
{{%Character name%}}
</a></p>
<div>
<p>
{{%relationship description%}}
</p>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE RELATED CHARACTERS ABOVE -->
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-gift-card fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS LINE == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end">
<!-- BACKGROUND PATTERN/IMAGE CREDIT-->
<a href="https://www.freepik.com/free-vector/hand-drawn-cute-tree-seamless-pattern_26933706.htm#query=new%20year%20seamless%20pattern&position=2&from_view=search&track=sph"
title="Pattern from Freepik"
class="tooltipster pr-1"><i class="far fa-images"></i></a>
<!-- CODE CREDIT -->
<a href="https://toyhou.se/ChiiAka" class="tooltipster" title="Code by ChiiAka"><i class="far fa-code"></i></a>
</div>
</div>
</div>
<div class="py-5">
<div class="container p-0" style="max-width: 600px;">
<div class="card rounded-0 p-2 border-0" style="box-shadow: 0 0 15px rgba(89,21,0, .3);
{{?Check this option for pattern bg?
{{%%Pattern background%
background-image: url('{{u%pattern url%}}');
background-size: {{n%pattern size in pixels%}}px;
%end%}}
?end?}}
{{?Check this option for non repeatable image bg?
{{%%Image background%
background-image: url('{{u%image url%}}');
background-size: cover;
background-position: center;
%end%}}
?end?}}">
<div class="card rounded-0 h-100 hidden-md-down" style="position: absolute; width: 80px; top: 0px; right: 90px; background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);"></div>
<div class="card rounded-0 w-100 hidden-md-down" style="position: absolute; height: 80px; left: 0px; bottom: 90px; background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);"></div>
<div class="row no-gutters flex-lg-row-reverse">
<!--
=========================================================
RIGHT PART WITH ICON + BASICS
=========================================================
-->
{{%%Right part%
<div class="col-12 col-lg-5 p-2">
<div class="card rounded-0 p-1 mb-3">
<div class="p-2" style="border: dashed 4px {{c!Accent color!}};">
<div class="card rounded-0 border-0" style="box-shadow: inset 0 0 12px rgba(89,21,0, .5); padding: 50%;
background-image: url('{{u%Character image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div>
<!--
===================================
AGE
===================================
-->
<div class="card p-1 rounded-0">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-hourglass fa-fw"></i>
Age
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Age%}}
</span></div>
</div>
</div>
<!--
===================================
GENDER
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-venus-mars fa-fw"></i>
Gender
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Gender%}}
</span></div>
</div>
</div>
<!--
===================================
PRONOUNS
===================================
-->
<div class="card p-1 rounded-0 mt-1">
<div class="row no-gutters">
<div class="col" style="color: {{c!Accent color!}}; font-weight: 500;"><span><i class="fad fa-comments fa-fw"></i>
Pronouns
</span></div>
<div class="col-auto" style="border-right: dashed 4px {{c!Accent color!}};"></div>
<div class="col text-right"><span>
{{%Pronouns%}}
</span></div>
</div>
</div>
</div>
</div>
%end%}}
<!--
=========================================================
LEFT PART WITH MAIN CONTENT
=========================================================
-->
<div class="col-12 col-lg-7 p-2">
<div class="card rounded-0 p-1 mb-3 text-center display-4 text-white" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<span>
{{!Character name!}}
</span>
</div>
<div class="card rounded-0 d-block d-lg-flex" style="min-height: 550px;">
<div class="p-1" style="flex: 1 1 0; overflow-y: auto;">
<i class="fas fa-gifts fa-4x" style="position: absolute; left: -10px; bottom: -10px; color: {{c!Accent color!}}; z-index: 2;"></i>
<i class="fas fa-gift fa-3x" style="position: absolute; right: -10px; bottom: -10px; color: {{c!Accent color!}}; z-index: 2;"></i>
<!--
=================================================
BASICS SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Basics
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="px-2 mb-2">
<!-- ORIENTATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-heartbeat fa-fw"></i>
s.o
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Orientation!}}
</span></div>
</div>
</div>
<!-- DOB -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-birthday-cake fa-fw"></i>
DoB
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!DoB!}}
</span></div>
</div>
</div>
<!-- SIGN/ZODIAC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-star-shooting fa-fw"></i>
Sign
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Sign!}}
</span></div>
</div>
</div>
<!-- SPECIES -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-paw-claws fa-fw"></i>
Species
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Species!}}
</span></div>
</div>
</div>
<!-- STATUS -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-crown fa-fw"></i>
status
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Status!}}
</span></div>
</div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-suitcase fa-fw"></i>
occupation
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Occupation!}}
</span></div>
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-scale-unbalanced fa-fw"></i>
alignment
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{!Alignment!}}
</span></div>
</div>
</div>
</div>
</div>
<!--
=================================================
PERSONALITY SECTION
=================================================
-->
<div>
<!-- SECTION HEADER -->
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Personality
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="px-2">
<div class="card rounded-0 bg-faded p-2 mt-1 mb-3">
<p class="mb-0 text-center font-italic"><i class="fad fa-quote-left" style="color: {{c!Accent color!}};"></i>
{{!Quote line!}}
<i class="fad fa-quote-right" style="color: {{c!Accent color!}};"></i></p>
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-sliders fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
TWO-SIDED STATS
=================================================
-->
<div class="px-2">
<!-- EXTROVERTED == INTROVERTED -->
{{%%Extroverted - Introverted%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Extroverted
</span>
<span>
Introverted
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- INSTINCTIVE == CALCULATED -->
{{%%Instinctive - Calculated%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Instinctive
</span>
<span>
Calculated
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- DECEPTIVE == SINCERE -->
{{%%Deceptive - Sincere%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Deceptive
</span>
<span>
Sincere
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- GROUNDED == DREAMING -->
{{%%Grounded - Dreaming%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Grounded
</span>
<span>
Dreaming
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- NAIVE == CAUTIOUS -->
{{%%Naive - Cautious%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Naive
</span>
<span>
Cautious
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- INDIFFERENT == EMOTIONAL -->
{{%%indifferent - Emotional%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Indifferent
</span>
<span>
Emotional
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- RESERVED == AFFECTIONATE -->
{{%%Reserved - Affectionate%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Reserved
</span>
<span>
Affectionate
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
<!-- COOPERATIVE == LONE WOLF -->
{{%%Cooperative - Lone wolf%
<div>
<div class="row no-gutters justify-content-between text-lowercase display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
Cooperative
</span>
<span>
Lone wolf
</span>
</div>
<div class="progress mt-1" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
{{%stat value 1-100%}}%
;"><div style="width: 6px; background-color: {{c!Accent color!}}; border: solid 1px; border-color: rgba(89,21,0, .3); height: calc(100% + 2px); margin-top: -1px; margin-right: -3px;"></div></div>
</div>
</div>
%end%}}
</div>
<!--
=================================================
PERSONALITY BASICS
=================================================
-->
{{%%Personality basics%
<div class="px-2 py-2">
<!-- ATTITUDE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-glasses fa-fw"></i>
attitude
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%attitude%}}
</span></div>
</div>
</div>
<!-- DOMINANT HAND -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-hand fa-fw"></i>
dom. hand
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%dominant hand%}}
</span></div>
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-head-side-brain fa-fw"></i>
MBTI
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%MBTI%}}
</span></div>
</div>
</div>
<!-- ENNEAGRAM -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-ferris-wheel fa-fw"></i>
enneagram
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%enneagram%}}
</span></div>
</div>
</div>
<!-- ARCHETYPE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-dharmachakra fa-fw"></i>
archetype
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%archetype%}}
</span></div>
</div>
</div>
<!-- TAROT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-cards-blank fa-fw"></i>
tarot
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%tarot%}}
</span></div>
</div>
</div>
</div>
%end%}}
<!--
=================================================
STANDALONE STATS
=================================================
-->
{{%%Standalone stats%
<div class="px-2 mb-3">
<!-- CHARISMA -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
charisma
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Charisma 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
kindness
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Kindness 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
patience
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Patience 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
integrity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Integrity 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
intellect
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Intellect 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- MANNERS -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
manners
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Manners 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- MATURITY -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
maturity
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Maturity 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- COURAGE -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
courage
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Courage 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- TEMPER -->
<div class="row no-gutters">
<div class="col display-4" style="font-variant: small-caps; font-size: 20px;">
<span>
temper
</span>
</div>
<div class="col align-items-center">
<div class="progress mt-1 w-100" style="height: 8px;">
<!-- STAT BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end" style="background-color: {{c!Accent color!}}; width:
{{%Temper 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
%end%}}
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-masks-theater fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
PERSONALITY TRAITS
=================================================
-->
<div class="px-2">
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-plus fa-xs"></i></span>
positive traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
{{%Positive traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-plus" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
NEUTRAL TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-equals fa-xs"></i></span>
neutral traits
</p>
<ul class="fa-ul ml-4">
<!-- TRAIT -->
{{%Neutral traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-equals" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===========================================
POSITIVE TRAITS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-minus fa-xs"></i></span>
negative traits
</p>
<ul class="fa-ul ml-4">
{{%Negative traits%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-minus" style="color: {{c!Accent color!}};"></i></span>
{{%trait%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
VIBES SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Vibes
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<!--
=================================================
LITTLE MOODBOARD ROW
=================================================
-->
{{%%Moodboard row%
<div class="px-2 mt-1 mb-3">
<div class="row no-gutters">
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%left image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col mx-2">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%center image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col">
<div class="card bg-faded p-1">
<div class="card border-0" style="min-height: 100px; border-radius: 0.1rem;
background-image: url('{{u%right image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
%end%}}
<!--
=================================================
FAVORITE/ASSOCATIVE ITEMS
=================================================
-->
{{%%Favorite or associative items%
<div class="px-2 mb-3">
<!-- FOOD -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-pot-food fa-fw"></i>
food
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%food%}}
</span></div>
</div>
</div>
<!-- BEVERAGE -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-cup-straw fa-fw"></i>
beverage
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%beverage%}}
</span></div>
</div>
</div>
<!-- SCENT -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-spray-can-sparkles fa-fw"></i>
scent
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%scent%}}
</span></div>
</div>
</div>
<!-- COLOR -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-palette fa-fw"></i>
color
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%color%}}
</span></div>
</div>
</div>
<!-- FLOWER -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-flower-tulip fa-fw"></i>
flower
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%flower%}}
</span></div>
</div>
</div>
<!-- ANIMAL -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-paw fa-fw"></i>
animal
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%animal%}}
</span></div>
</div>
</div>
<!-- SEASON -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-clouds-sun fa-fw"></i>
season
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%season%}}
</span></div>
</div>
</div>
<!-- MUSIC -->
<div class="row no-gutters mb-1">
<div class="col-auto text-uppercase mr-2" style="font-weight: 500; color: {{c!Accent color!}};"><span><i class="fas fa-music fa-fw"></i>
music
</span></div>
<div class="col">
<div class="card bg-faded rounded-0 px-1 font-italic"><span>
{{%music%}}
</span></div>
</div>
</div>
</div>
%end%}}
<!-- ICON DIVIDER -->
<div class="container w-50 p-0">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-heart-half-stroke fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
LIKES/DISLIKES/FEARS/HOBBIES
=================================================
-->
<div class="px-2">
<!--
===========================================
LIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart fa-xs"></i></span>
likes
</p>
<ul class="fa-ul ml-4">
{{%Likes%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
DISLIKES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-heart-crack fa-xs"></i></span>
dislikes
</p>
<ul class="fa-ul ml-4">
{{%Dislikes%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-heart-crack" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
FEARS
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-skull fa-xs"></i></span>
fears
</p>
<ul class="fa-ul ml-4">
{{%Fears%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-skull" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
===========================================
HOBBIES
===========================================
-->
<div>
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-icons fa-xs"></i></span>
hobbies
</p>
<ul class="fa-ul ml-4">
{{%Hobbies%
<li class="card bg-faded rounded-0 pl-2 font-italic mb-1"><span class="fa-li"><i class="fas fa-icons" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=================================================
STORY SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Story
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<div class="mb-3">
<!--
=================================================
STORY PART
=================================================
-->
{{%%First story part%
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
{{%subheader%}}
</p>
{{%Paragraphs%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
%end%}}
{{%Story parts%
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 mt-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-bookmark fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
STORY PART
=================================================
-->
<div class="text-justify px-2">
<p class="display-4 mb-1" style="font-variant: small-caps; font-size: 20px;"><span class="pull-right"><i class="fal fa-bookmark fa-xs"></i></span>
{{%subheader%}}
</p>
{{%Paragraphs%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
%end%}}
<!-- YOU CAN ADD MORE STORY PARTS ABOVE
Don't forget to add icon dividers in-between! -->
</div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div>
<div class="row no-gutters mx-n1">
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
<div class="col-auto display-4 px-1 text-lowercase" style="font-variant: small-caps; margin-top: -5px; font-weight: 400; color: {{c!Accent color!}};"><span>
Related
</span></div>
<div class="col"><hr style="border-top: dashed 3px {{c!Accent color!}};"></div>
</div>
<!--
=================================================
RELATED SECTION
=================================================
-->
<div class="px-2 text-justify">
{{%%First related block%
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
{{%relationship%}}
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('{{%character icon url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-{{%FA icon name%}} fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: {{c!Accent color!}};"
href="{{%character page link%}}">
{{%Character name%}}
</a></p>
<div>
<p>
{{%relationship description%}}
</p>
</div>
</div>
%end%}}
{{%Related blocks%
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-link fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!--
=================================================
RELATED BLOCK
=================================================
-->
<div>
<div class="row no-gutters">
<!--
==========================================
RELATIONSHIP
==========================================
-->
<div class="col-2 card rounded-0 bg-faded align-items-center justify-content-center">
<span class="fa-rotate-270 text-lowercase display-4 text-center" style="font-variant: small-caps; font-size: 20px; margin-left: -5px;">
{{%relationship%}}
</span>
</div>
<!--
==========================================
RELATED CHARACTER IMAGE
==========================================
-->
<div class="col mx-2">
<div class="card rounded-0 p-1">
<div style="min-height: 200px; box-shadow: inset 0 0 12px rgba(89,21,0, .5);
background-image: url('{{%character icon url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==========================================
RELATIONSHIP ICON
==========================================
-->
<div class="card rounded-0 col-2 text-white p-2" style="background-color: {{c!Accent color!}}; border-color: rgba(89,21,0, .3);">
<div class="h-100 align-items-center justify-content-center border-left-0 border-right-0" style="border: dashed 4px;">
<!-- FA ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-{{%FA icon name%}} fa-2x"></i>
</div>
</div>
</div>
<p class="text-center display-4 my-2"><a target="_BLANK" style="color: {{c!Accent color!}};"
href="{{%character page link%}}">
{{%Character name%}}
</a></p>
<div>
<p>
{{%relationship description%}}
</p>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE RELATED CHARACTERS ABOVE -->
</div>
</div>
<!-- ICON DIVIDER -->
<div class="container w-50 p-0 my-3">
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto text-center mx-2"><i class="fad fa-gift-card fa-2x" style="color: {{c!Accent color!}};"></i></div>
<div class="col"><hr></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS LINE == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end">
<!-- BACKGROUND PATTERN/IMAGE CREDIT-->
{{%%Background pattern or image credit%
<a href="{{%link to the resource or autor%}}"
title="{{%Write by whom the pattern or image was created%}}"
class="tooltipster pr-1"><i class="far fa-images"></i></a>
%end%}}
<!-- CODE CREDIT -->
<a href="https://toyhou.se/ChiiAka" class="tooltipster" title="Code by ChiiAka"><i class="far fa-code"></i></a>
</div>
</div>
</div>