Profile
<!-- THIS CODE USES SITE THEME COLORS + CUSTOM ACCENT
23. || Moonshine || F2U
=======================================================
ACCENT COLOR == #D83A62
Use "find & replace" to easily change the color
and icon name to another!
-->
<div class="pt-5 pb-4">
<div class="container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<!--
===========================
STICKY HEADER
===========================
-->
<div class="card border-0 col-12 py-2" style="border-radius: 0px; z-index: 10; position: sticky; top: 0px;">
<div style="border-radius: 0px; overflow: hidden;">
<div class="card bg-faded" style="border-radius: 0px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<div class="row no-gutters">
<!--
================================
PLAYLIST COLLAPSE BUTTON
================================
-->
<div class="col-auto align-items-center justify-content-center">
<a class="btn h-100 px-2" data-toggle="collapse" data-target="#playlist">
<i class="far fa-angle-down"></i></a>
</div>
<!-- VERTICAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1" style="width: 8px; border-radius: 0px;"></div>
<!--
================================
PLAYLIST
================================
-->
<div class="col col-lg-4">
<div class="tab-content">
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade in active show" id="song1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name1
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade" id="song2">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name2
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade" id="song3">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name3
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
</div>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1" style="width: 8px; border-radius: 0px;"></div>
<div class="col-auto align-items-center justify-content-center p-2">
<!-- FA ICON == Replace "moon" with another FA icon name -->
<i class="fal fa-moon" style="font-size: 20px; color: #D83A62;"></i>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<!-- PC NAVIGATION -->
<div class="col hidden-md-down align-items-center justify-content-center text-lowercase" style="font-variant: small-caps; font-size: 17px;">
<a href="#intro" style="color: #D83A62;">
Intro
</a>
<span class="text-muted mx-1">•</span>
<a href="#basics" style="color: #D83A62;">
Basics
</a>
<span class="text-muted mx-1">•</span>
<a href="#stats" style="color: #D83A62;">
Stats
</a>
<span class="text-muted mx-1">•</span>
<a href="#prefs" style="color: #D83A62;">
Prefs
</a>
<span class="text-muted mx-1">•</span>
<a href="#design" style="color: #D83A62;">
Design
</a>
<span class="text-muted mx-1">•</span>
<a href="#story" style="color: #D83A62;">
Story
</a>
<span class="text-muted mx-1">•</span>
<a href="#combat" style="color: #D83A62;">
Combat
</a>
<span class="text-muted mx-1">•</span>
<a href="#links" style="color: #D83A62;">
Related
</a>
</div>
</div>
</div>
</div>
<!--
====================================
COLLAPSE WITH PLAYLIST LINKS
====================================
-->
<div class="col-12 p-0 col-lg-4 mt-2 bg-faded collapse" id="playlist" style="position: absolute; top: 45px; border-radius: 0 0 0 1.7em; box-shadow: 0 2px 5px rgba(0, 0, 0, .15);">
<ul class="nav card bg-transparent border-left-0 border-bottom-0 row no-gutters p-2" style="font-variant: small-caps; border-radius: 0px;">
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0" style="border-radius: 0px;">
<a class="nav-link active text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song1">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name1
</a>
</li>
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0 mt-1" style="border-radius: 0px;">
<a class="nav-link text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song2">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name2
</a>
</li>
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0 mt-1" style="border-radius: 0px;">
<a class="nav-link text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song3">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name3
</a>
</li>
</ul>
</div>
</div>
<!--
===========================
MAIN CHARACTER CARD
===========================
-->
<div class="col-12" id="intro" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12 col-lg-4 mt-lg-3" style="border-radius: 0px;">
<div style="min-height: 300px;">
<div class="card border-0 h-100 w-100 p-3 m-lg-5 mt-lg-5" style="border-radius: 0px; position: absolute; z-index: 1;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<div class="card bg-transparent border-top-0 w-100 hidden-md-down" style="border-radius: 0px; height: 33px; position: absolute; bottom: 0px; left: 0px;"></div>
</div>
</div>
</div>
<!--
==================================
CHARACTER OVERVIEW + QUOTE
==================================
-->
<div class="col-12 col-lg-8 mb-3 mb-lg-0 mt-3">
<!--
================================
CHARACTER OVERVIEW BLOCK
================================
-->
<div class="card bg-faded mb-3 border-bottom-0 pl-lg-5" style="border-radius: 0px; min-height: 300px;">
<div class="card hidden-md-down" style="position: absolute; bottom: 0px; left: 0px; width: 48px; border-radius: 0px; height: calc(100% - 46px);"></div>
<div class="col p-2 h-100">
<!--
======================
CHARACTER NAME
======================
-->
<div class="row no-gutters justify-content-end pr-lg-2">
<div class="col-lg-auto text-center">
<p class="font-italic" style="font-size: 35px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Character Name
</p>
</div>
</div>
<!--
=====================
CIRCLE BADGES
=====================
-->
<div class="col-12 p-0">
<div class="row no-gutters justify-content-between">
<div class="col-12 col-lg-auto p-0 justify-content-center mt-3 mt-lg-0 order-1 order-lg-0">
<div class="row no-gutters">
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="Fandom OC">
<!-- FA ICON == Replace "snowflake" with another FA icon name -->
<i class="fal fa-snowflake" style="font-size: 20px;"></i>
</a>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="NFS/NFT">
<!-- FA ICON == Replace "dollar" with another FA icon name -->
<i class="fal fa-dollar" style="font-size: 20px;"></i>
</a>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="Open for RP/links/etc.">
<!-- FA ICON == Replace "dice-d20" with another FA icon name -->
<i class="fal fa-dice-d20" style="font-size: 20px;"></i>
</a>
</div>
<!-- You can add more badges above but better do not add more than 5 of them! -->
</div>
</div>
<div class="card col-12 col-lg-6 p-2 border-top-0 border-left-0" style="border-radius: 2em 0 0 2em; border-right-style: double; border-right-width: 6px;">
<span class="font-italic text-muted text-right">
adjective • adjective • adjective
</span>
</div>
</div>
</div>
<!--
=======================
OVERVIEW HEADER
=======================
-->
<p class="font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Overview
<span class="pull-right"><i class="fat fa-feather-alt"></i></span>
</p>
<!--
========================
OVERVIEW CONTENT
========================
-->
<div class="card p-2 py-3 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<p>
Write a small intro here. This box will grow with content. Lorem ipsum dolor sit amet, tetur adipis cing 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>
</div>
</div>
</div>
<!--
=============================
CHARACTER QUOTE BLOCK
=============================
-->
<div class="card bg-faded ml-lg-5 border-top-0 justify-content-center" style="border-radius: 0px; min-height: 120px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<i class="fal fa-quote-left" style="position: absolute; top: 2px; left: 5px; color: #D83A62;"></i>
<p class="small font-italic px-4 px-lg-5 text-center text-muted">
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.
</p>
<i class="fal fa-quote-right" style="position: absolute; bottom: 2px; right: 5px; color: #D83A62;"></i>
</div>
</div>
<!--
================================
CHARACTER BASICS
================================
-->
<div class="col-12" id="basics" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="card col-12 col-lg-5 mr-lg-3 bg-faded p-2 pt-lg-5 pb-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 200px;">
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Basics
<span class="pull-right"><i class="fat fa-snowflake"></i></span>
</p>
<div class="card p-2 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px; font-variant: small-caps; font-size: 16px;">
<!-- GENDER -->
<div class="row no-gutters">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-venus-mars fa-fw"></i>
Gender
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-comments fa-fw"></i>
Pronouns
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Cont/cont
</div>
</div>
<!-- AGE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-hourglass fa-fw"></i>
Age
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- DOB -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-birthday-cake fa-fw"></i>
DoB
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- SIGN -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-stars fa-fw"></i>
Sign
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- S.O. -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-heartbeat fa-fw"></i>
S.O.
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- RACE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-dna fa-fw"></i>
Race
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- HEIGHT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-ruler-vertical fa-fw"></i>
Height
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- BLOOD TYPE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-droplet fa-fw"></i>
Blood type
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- CLASS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-screen-users fa-fw"></i>
Class
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-scale-unbalanced fa-fw"></i>
Alignment
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- ROLE/OCCUPATION -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-suitcase fa-fw"></i>
Occupation
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
</div>
</div>
<!--
================================
CHARACTER BANNER
================================
-->
<div class="col-12 col-lg-4 mx-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 400px; overflow: hidden;">
<div class="card w-100" style="min-height: 15px; position: absolute; top: 0px; left: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card w-100" style="min-height: 15px; position: absolute; bottom: 0px; right: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card h-100 bg-faded p-2" style="border-radius: 0px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
===============================
MOODBOARD CARDS
===============================
-->
<div class="card col-12 col-lg ml-lg-3 border-left-0 border-right-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<div class="row no-gutters h-100">
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
========================================
PERSONALITY SECTION
========================================
-->
<div class="col-12" id="stats" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
==============================
PERSONALITY BASICS
==============================
-->
<div class="col-12 col-lg-4 mr-lg-3 pr-2 pr-lg-0 mb-2 mb-lg-0" style="border-radius: 0px;">
<div style="position: sticky; top: 54px;">
<!--
=======================================
ATTITUDE (OPTIMIST/PESSIMIST ETC.)
=======================================
-->
<div class="row no-gutters pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Attitude
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-masks-theater text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
DOMINANT HAND
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
dominant hand
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-hand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
MBTI (16 PERSONALITIES)
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
XXXX (Content)
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
MBTI
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-head-side-brain text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
TAROT
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Tarot
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-cards-blank text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
ARCHETYPE
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Archetype
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-dharmachakra text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
SPIRIT ANIMAL
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Spirit animal
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-paw text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
CHARACTER'S SETTING
The theme of the world your character is
settled in. Examples: sci-fi, futuristic,
steampunk, cyberpunk, fantasy, asian etc.
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Fantasy/sci-fi/etc.
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Setting
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-globe-stand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
==============================
PERSONALITY STATS
==============================
-->
<div class="card bg-faded col-12 col-lg mb-3 mb-lg-0 p-2 pb-4" style="border-radius: 0px; min-height: 100px; border-right-style: double; border-right-width: 6px;">
<!-- PERSONALITY HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Personality
<span class="pull-right"><i class="fat fa-sliders"></i></span>
</p>
<div class="card p-2 border-0" style="border-radius: 0px; font-variant: small-caps; font-size: 16px;">
<div class="row no-gutters">
<!--
==================================
DOUBLE STATS
==================================
-->
<div class="col-12 col-lg">
<!-- EXTROVERTED == INTROVERTED -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
extroverted
</span>
<span class="text-muted">
introverted
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
instinctive
</span>
<span class="text-muted">
calculated
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
deceptive
</span>
<span class="text-muted">
sincere
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- UNJUST == FAIR -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
unjust
</span>
<span class="text-muted">
fair
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
indifferent
</span>
<span class="text-muted">
emotional
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
reserved
</span>
<span class="text-muted">
affectionate
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- COOPERATIVE == LONE WOLF-->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
cooperative
</span>
<span class="text-muted">
lone wolf
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
</div>
<!-- LG VERTICAL DIVIDER -->
<div class="card bg-transparent col-auto hidden-md-down border-right-0 border-top-0 border-bottom-0 my-n2 mx-2" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;"></div>
<!--
==================================
STANDALONE STATS
==================================
-->
<div class="col-12 col-lg mt-3 mt-lg-0 text-lowercase">
<!-- CHARISMA STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Charisma
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Kindness
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Patience
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Integrity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Intellect
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MANNERS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Manners
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Maturity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Courage
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- HUMOUR STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Humour
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Temper
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Traits
<span class="pull-right"><i class="fat fa-masks-theater"></i></span>
</p>
<!--
=======================================
CHARACTER TRAITS
=======================================
-->
<div class="col p-0">
<div class="row no-gutters">
<!--
=================================
POSITIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEUTRAL TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-2 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEGATIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Favorites
<span class="pull-right"><i class="fat fa-circle-heart"></i></span>
</p>
<!--
=======================================
FAVORITE THINGS
=======================================
-->
<div class="col p-0 mt-2">
<div class="row no-gutters">
<!-- FAV FOOD -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Food
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-pot-food fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV DRINK -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Drink
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-cup-straw fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV SCENT -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Scent
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-spray-can-sparkles fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV COLOR -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Color
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-palette fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV FLOWER-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Flower
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-flower-tulip fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV SEASON-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Season
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clouds-sun fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV TIME OF DAY -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Time of day
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clock fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV CLOTHING ITEM -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Clothing item
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-scarf fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV GENRE (FILM/BOOK/ETC.) -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Genre
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-film fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV MUSIC -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Music
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-music fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2 mt-2">
<!-- DEMEANOR HEADER -->
<p class="font-italic mb-1" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Demeanor
<span class="pull-right"><i class="fat fa-brain-circuit"></i></span>
</p>
<!--
=======================================
DEMEANOR CONTENT
=======================================
-->
<div class="col-12 p-0">
<!-- QUIRKS & HABITS HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted" style="border-radius: 0 2em 2em 0; border-left: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Quirks & habits
</div>
<!-- QUIRKS & HABITS CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px #D83A62; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
<!-- COMMUNICATION SKILLS HEADER -->
<div class="d-flex justify-content-end">
<div class="card col-11 col-lg-6 border-left-0 border-top-0 p-1 pr-2 text-muted text-right mt-4" style="border-radius: 2em 0 0 2em; border-right: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Communication skills
</div>
</div>
<!-- COMMUNICATION SKILLS CONTENT -->
<div class="card mt-2 border-top-0 border-left-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-right: solid 2px #D83A62; box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
<!-- SHOWING AFFECTION HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted mt-4" style="border-radius: 0 2em 2em 0; border-left: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Showing affection
</div>
<!-- SHOWING AFFECTION CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px #D83A62; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
LIKES & DISLIKES SECTION
========================================
-->
<div class="col-12" id="prefs" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
LIKES SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
====================
LIKES HEADER
====================
-->
<div class="card border-top-0 border-left-0 col-6 col-lg-3 p-0" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mt-1" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
Likes <span class="pull-right">
<i class="fal fa-heartbeat"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=====================
LIKES CONTENT
=====================
-->
<div class="col-12 p-2">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
<!--
========================
DISLIKES SECTION
========================
-->
<div class="card col-12 col-lg mb-3 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=======================
DISLIKES HEADER
=======================
-->
<div class="card border-top-0 border-right-0 col-6 col-lg-3 p-0 order-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
<i class="fal fa-heart-crack"></i> <span class="pull-right">
Dislikes</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-1">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
========================
DISLIKES CONTENT
========================
-->
<div class="col-12 p-2 order-3">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
FEARS & HOBBIES SECTION
========================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
FEARS SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3 mb-lg-0" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=====================
FEARS HEADER
=====================
-->
<div class="card border-left-0 col-6 col-lg-3 p-0 order-lg-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mb-lg-1 mt-1 mt-lg-0" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
Fears <span class="pull-right">
<i class="fal fa-skull"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-lg-3">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
======================
FEARS CONTENT
======================
-->
<div class="col-12 p-2 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
<!--
=======================
HOBBIES SECTION
=======================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================
HOBBIES HEADER
======================
-->
<div class="card border-right-0 col-6 col-lg-3 p-0 order-3" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1 mt-lg-0 mb-lg-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
<i class="fal fa-circle-heart"></i> <span class="pull-right">
Hobbies</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-2">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=======================
HOBBIES CONTENT
=======================
-->
<div class="col-12 p-2 order-3 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
CHARACTER DESIGN SECTION
========================================
-->
<div class="col-12" id="design" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card bg-faded col-12 col-lg-5 p-2 mb-3 mb-lg-0 border-right-0" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;">
<!-- DESIGN NOTES HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Design notes
<span class="pull-right"><i class="fat fa-palette"></i></span>
</p>
<!--
=================================
DESIGN NOTES COLUMN
================================
-->
<div class="col p-0">
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis porta eros et velit blandit dapibus.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Curabitur ac finibus eros.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</span></li>
</ul>
<!-- YOU CAN COPY/PASTE MORE DESIGN NOTES ABOVE -->
</div>
<!--
=============================
DESIGNER STAT
=============================
-->
<div class="row no-gutters justify-content-between">
<!-- DESIGNER HYPERLINK -->
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px #D83A62; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
designer:
</span>
<a style="color: #D83A62;"
href="LINK_HERE">
Artist Name
</a>
</div>
</div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-pencil-paintbrush" style="font-size: 18px; color: #D83A62;"></i>
</div>
</div>
</div>
<!--
=============================
WORTH STAT
=============================
-->
<div class="row no-gutters justify-content-between mt-2">
<!-- WORTH AMOUNT -->
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px #D83A62; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
worth:
</span>
<span>
xx$
</span>
</div>
</div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-hands-holding-dollar" style="font-size: 18px; color: #D83A62;"></i>
</div>
</div>
</div>
</div>
<!--
=================================
CHARACTER IMAGE UNDER THE PALETTE
=================================
-->
<div class="col-12 col-lg mx-lg-3 mb-3 mb-lg-0" style="border-radius: 0 5em 5em 0; min-height: 400px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<!--
=================================
PALETTE BLOCK
=================================
-->
<div class="col-12 col-lg mb-3 py-lg-5" style="border-radius: 0px; font-variant: small-caps;">
<div class="h-100 ml-lg-n5 mr-lg-4">
<div class="col ml-lg-n3">
<!-- EYES HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Eyes
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- HAIR HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Hair
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- SKIN HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Skin
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- EXTRA HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Extra
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
STORY SECTION
========================================
-->
<div class="col-12" id="story" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-top-style: double; border-top-width: 6px;"></div>
<div class="col-12 px-2 px-lg-4 my-n5" style="z-index: 1;">
<div class="card border-0 col-12 p-0" style="border-radius: 0px; min-height: 100px;">
<div class="card w-100 border-bottom-0" style="border-radius: 0px; position: absolute; top: 0px; left: 0px; height: 48px;"></div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pr-lg-2 pb-lg-0 order-2 order-lg-0">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Childhood
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-left: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (RIGHT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1 order-lg-0" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3 order-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3 mt-2" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pl-lg-2 pb-lg-0 order-2">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Subheader
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-right: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (LEFT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pr-lg-2 pb-lg-0 order-2 order-lg-0">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Subheader
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-left: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (RIGHT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1 order-lg-0" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3 order-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!-- YOU CAN ADD MORE STORY BLOCKS ABOVE -->
<div class="card w-100 border-top-0" style="border-radius: 0px; position: absolute; bottom: 0px; left: 0px; height: 48px;"></div>
</div>
</div>
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-bottom-style: double; border-bottom-width: 6px;"></div>
</div>
</div>
<!--
========================================
COMBAT SECTION
========================================
-->
<div class="col-12" id="combat" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
========================================
COMBAT DETAILS
========================================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded p-2 pb-4" style="border-radius: 0px;">
<!-- COMBAT HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Combat
<span class="pull-right"><i class="fat fa-swords"></i></span>
</p>
<div class="row no-gutters pt-3">
<!--
===================================
STATS PIE CHART
===================================
-->
<div class="col-12 col-lg-7 justify-content-center align-items-center py-4">
<div class="rounded-circle" style="position: absolute; height: 225px; width: 225px; border: solid 2px #D83A62; opacity: .2;"></div>
<div class="card rounded-circle p-3 text-lowercase" style="height: 200px; width: 200px; font-variant: small-caps; color: #D83A62; font-weight: 600;">
<!-- ATTACK STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: -25px; left: 75px; z-index: 2;">
Attack
</span>
<!-- DEFENCE STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; right: -40px; z-index: 2;">
Defence
</span>
<!-- SPEED STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; right: -25px; z-index: 2;">
Speed
</span>
<!-- PROTECTION STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: -20px; left: 64px; z-index: 2;">
Protection
</span>
<!-- MAGIC STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; left: -30px; z-index: 2;">
Magic
</span>
<!-- SUPPORT STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; left: -42px; z-index: 2;">
Support
</span>
<!--
================================================
MAIN STATS PIE CHART
Stats chart is mage using clip-path poligon, so
you need to change it's values to change the stat positions.
I already did calculate the main circles for you so you'll find
the proper values for each circle below. Circle are counted 1-6
1 is the central one (the smallest radius)
6 is the outer one (the largest radius)
================================================
ATTACK STAT
================================================
Starting value = 50% 0%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 42% == 1st circle
50% 34% == 2nd circle
50% 25% == 3rd circle (half)
50% 16% == 4th circle
50% 8% == 5th circle
50% 0% == 6th circle (best)
================================================
DEFENCE STAT
================================================
Starting value = 93% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 47% == 1st circle
65% 43% == 2nd circle
75% 43% == 3rd circle (half)
81% 37% == 4th circle
87% 31% == 5th circle
93% 25% == 6th circle (best)
================================================
SPEED STAT
================================================
Starting value = 93% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 53% == 1st circle
64% 58% == 2nd circle
71% 63% == 3rd circle (half)
79% 66% == 4th circle
87% 70% == 5th circle
93% 75% == 6th circle (best)
================================================
PROTECTION STAT
================================================
Starting value = 50% 100%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 58% == 1st circle
50% 66% == 2nd circle
50% 75% == 3rd circle (half)
50% 84% == 4th circle
50% 92% == 5th circle
50% 100% == 6th circle (best)
================================================
MAGIC STAT
================================================
Starting value = 7% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 55% == 1st circle
38% 60% == 2nd circle
30% 65% == 3rd circle (half)
21% 68% == 4th circle
14% 71% == 5th circle
7% 75% == 6th circle (best)
================================================
SUPPORT STAT
================================================
Starting value = 7% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 45% == 1st circle
37% 41% == 2nd circle
30% 35% == 3rd circle (half)
21% 32% == 4th circle
14% 29% == 5th circle
7% 25% == 6th circle (best)
================================================
-->
<div class="h-100 w-100" style="position: absolute; left: 0px; top: 0px; z-index: 1; opacity: .5; background: #D83A62; clip-path: polygon(
50% 0%,
93% 25%,
93% 75%,
50% 100%,
7% 75%,
7% 25%);"></div>
<!-- PIE CHART CIRCLES -->
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===================================
WEAKNESSES
===================================
-->
<div class="col-12 col-lg-5 pl-2">
<div class="card h-100 border-left-0 border-bottom-0 px-2 pb-3" style="border-radius: 0px; border-top-style: double; border-top-width: 6px; border-right-width: 3px; color: #D83A62;">
<p class="mx-auto float-lg-right text-lowercase" style="font-variant: small-caps; font-size: 20px;">
Weaknesses
</p>
<ul class="list-group pl-4" style="font-size: 15px;">
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
</ul>
</div>
</div>
<!--
===================================
BASIC COMBAT INFO
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0" style="border-radius: 0px; font-variant: small-caps; border-bottom-style: double; border-bottom-width: 6px; font-size: 16px; border-left-width: 3px; border-right-width: 3px;">
<!--
===================================
BASICS
===================================
-->
<div class="row no-gutters">
<!-- TACTIC -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-swords fa-fw"></i>
Tactic
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- ATITUDE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-hand-holding-heart fa-fw"></i>
Attitude
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- DISTANCE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-bullseye-arrow fa-fw"></i>
Distance
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- WEAPON -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-sword fa-fw"></i>
Weapon
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
</div>
</div>
<!-- SKILLS & ABILITIES HEADER -->
<p class="col-12 font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Skills & abilities
<span class="pull-right"><i class="fat fa-sparkles"></i></span>
</p>
<!--
===================================
SKILLS & ABILITIES
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0 border-left-0 border-bottom-0" style="border-radius: 0px; border-right-style: double; border-right-width: 6px;">
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0 mt-4">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0 mt-4">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
<!--
========================================
GRAPHICS LINE
========================================
-->
<div class="col-12 col-lg-5 mb-3 mb-lg-0 px-2 px-lg-4" style="border-radius: 0px;">
<div class="h-100" style="position: sticky; top: 54px; max-height: calc(100vh - 65px);">
<div class="row no-gutters h-100">
<!--
======================================
UPPER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pr-1 pb-1" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0; background: #D83A62; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 83%); border-radius: 0;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
======================================
MIDDLE GRAPHIC BLOCK
======================================
-->
<div class="col-12 mr-n1 ml-1" style="border-radius: 0; clip-path: polygon(0 0, 100% 15%, 100% 70%, 0 100%); min-height: 120px;
background-image: url(URLHERE);
background-size: cover;
background-position: left;"></div>
<!--
======================================
LOWER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pl-1 pt-1 mt-n3" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0; background: #D83A62; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 33%, 100% 0, 100% 100%, 0 100%); border-radius: 0;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
RELATIONSHIPS SECTION
========================================
-->
<div class="col-12" id="links" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- YOU CAN ADD MORE RELATIONSHIP BLOCKS HERE -->
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end mt-lg-1 mt-n4">
<div class="card col-auto px-1 border-left-0 border-top-0 border-bottom-0" style="border-right: double 6px #D83A62; height: 15px; border-radius: 0px;">
<a href="https://toyhou.se/ChiiAka" style="color: #D83A62; font-variant: small-caps; margin-top: -6px; font-weight: 600;" class="text-lowercase">
Code by ChiiAka
</a>
</div>
</div>
</div>
</div>
<!-- THIS CODE USES SITE THEME COLORS + CUSTOM ACCENT
23. || Moonshine || F2U
=======================================================
ACCENT COLOR == #D83A62
Use "find & replace" to easily change the color
and icon name to another!
-->
<div class="pt-5 pb-4">
<div class="container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<!--
===========================
STICKY HEADER
===========================
-->
<div class="card border-0 col-12 py-2" style="border-radius: 0px; z-index: 10; position: sticky; top: 0px;">
<div style="border-radius: 0px; overflow: hidden;">
<div class="card bg-faded" style="border-radius: 0px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<div class="row no-gutters">
<!--
================================
PLAYLIST COLLAPSE BUTTON
================================
-->
<div class="col-auto align-items-center justify-content-center">
<a class="btn h-100 px-2" data-toggle="collapse" data-target="#playlist">
<i class="far fa-angle-down"></i></a>
</div>
<!-- VERTICAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1" style="width: 8px; border-radius: 0px;"></div>
<!--
================================
PLAYLIST
================================
-->
<div class="col col-lg-4">
<div class="tab-content">
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade in active show" id="song1">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name1
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade" id="song2">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name2
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
<!--
========================
SONG TAB
========================
-->
<div class="tab-pane fade" id="song3">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: #D83A62;">
Song name3
</span>
<span class="text-lowercase text-muted mt-n2">
Author
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/YOUTUBEVIDEO_ID"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
</div>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1" style="width: 8px; border-radius: 0px;"></div>
<div class="col-auto align-items-center justify-content-center p-2">
<!-- FA ICON == Replace "moon" with another FA icon name -->
<i class="fal fa-moon" style="font-size: 20px; color: #D83A62;"></i>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<!-- PC NAVIGATION -->
<div class="col hidden-md-down align-items-center justify-content-center text-lowercase" style="font-variant: small-caps; font-size: 17px;">
<a href="#intro" style="color: #D83A62;">
Intro
</a>
<span class="text-muted mx-1">•</span>
<a href="#basics" style="color: #D83A62;">
Basics
</a>
<span class="text-muted mx-1">•</span>
<a href="#stats" style="color: #D83A62;">
Stats
</a>
<span class="text-muted mx-1">•</span>
<a href="#prefs" style="color: #D83A62;">
Prefs
</a>
<span class="text-muted mx-1">•</span>
<a href="#design" style="color: #D83A62;">
Design
</a>
<span class="text-muted mx-1">•</span>
<a href="#story" style="color: #D83A62;">
Story
</a>
<span class="text-muted mx-1">•</span>
<a href="#combat" style="color: #D83A62;">
Combat
</a>
<span class="text-muted mx-1">•</span>
<a href="#links" style="color: #D83A62;">
Related
</a>
</div>
</div>
</div>
</div>
<!--
====================================
COLLAPSE WITH PLAYLIST LINKS
====================================
-->
<div class="col-12 p-0 col-lg-4 mt-2 bg-faded collapse" id="playlist" style="position: absolute; top: 45px; border-radius: 0 0 0 1.7em; box-shadow: 0 2px 5px rgba(0, 0, 0, .15);">
<ul class="nav card bg-transparent border-left-0 border-bottom-0 row no-gutters p-2" style="font-variant: small-caps; border-radius: 0px;">
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0" style="border-radius: 0px;">
<a class="nav-link active text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song1">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name1
</a>
</li>
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0 mt-1" style="border-radius: 0px;">
<a class="nav-link text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song2">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name2
</a>
</li>
<!--
===================================
SONG LINK
===================================
-->
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0 mt-1" style="border-radius: 0px;">
<a class="nav-link text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: #D83A62;"
href="#song3">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
Author - Song Name3
</a>
</li>
</ul>
</div>
</div>
<!--
===========================
MAIN CHARACTER CARD
===========================
-->
<div class="col-12" id="intro" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12 col-lg-4 mt-lg-3" style="border-radius: 0px;">
<div style="min-height: 300px;">
<div class="card border-0 h-100 w-100 p-3 m-lg-5 mt-lg-5" style="border-radius: 0px; position: absolute; z-index: 1;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<div class="card bg-transparent border-top-0 w-100 hidden-md-down" style="border-radius: 0px; height: 33px; position: absolute; bottom: 0px; left: 0px;"></div>
</div>
</div>
</div>
<!--
==================================
CHARACTER OVERVIEW + QUOTE
==================================
-->
<div class="col-12 col-lg-8 mb-3 mb-lg-0 mt-3">
<!--
================================
CHARACTER OVERVIEW BLOCK
================================
-->
<div class="card bg-faded mb-3 border-bottom-0 pl-lg-5" style="border-radius: 0px; min-height: 300px;">
<div class="card hidden-md-down" style="position: absolute; bottom: 0px; left: 0px; width: 48px; border-radius: 0px; height: calc(100% - 46px);"></div>
<div class="col p-2 h-100">
<!--
======================
CHARACTER NAME
======================
-->
<div class="row no-gutters justify-content-end pr-lg-2">
<div class="col-lg-auto text-center">
<p class="font-italic" style="font-size: 35px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Character Name
</p>
</div>
</div>
<!--
=====================
CIRCLE BADGES
=====================
-->
<div class="col-12 p-0">
<div class="row no-gutters justify-content-between">
<div class="col-12 col-lg-auto p-0 justify-content-center mt-3 mt-lg-0 order-1 order-lg-0">
<div class="row no-gutters">
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="Fandom OC">
<!-- FA ICON == Replace "snowflake" with another FA icon name -->
<i class="fal fa-snowflake" style="font-size: 20px;"></i>
</a>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="NFS/NFT">
<!-- FA ICON == Replace "dollar" with another FA icon name -->
<i class="fal fa-dollar" style="font-size: 20px;"></i>
</a>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="Open for RP/links/etc.">
<!-- FA ICON == Replace "dice-d20" with another FA icon name -->
<i class="fal fa-dice-d20" style="font-size: 20px;"></i>
</a>
</div>
<!-- You can add more badges above but better do not add more than 5 of them! -->
</div>
</div>
<div class="card col-12 col-lg-6 p-2 border-top-0 border-left-0" style="border-radius: 2em 0 0 2em; border-right-style: double; border-right-width: 6px;">
<span class="font-italic text-muted text-right">
adjective • adjective • adjective
</span>
</div>
</div>
</div>
<!--
=======================
OVERVIEW HEADER
=======================
-->
<p class="font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Overview
<span class="pull-right"><i class="fat fa-feather-alt"></i></span>
</p>
<!--
========================
OVERVIEW CONTENT
========================
-->
<div class="card p-2 py-3 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<p>
Write a small intro here. This box will grow with content. Lorem ipsum dolor sit amet, tetur adipis cing 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>
</div>
</div>
</div>
<!--
=============================
CHARACTER QUOTE BLOCK
=============================
-->
<div class="card bg-faded ml-lg-5 border-top-0 justify-content-center" style="border-radius: 0px; min-height: 120px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<i class="fal fa-quote-left" style="position: absolute; top: 2px; left: 5px; color: #D83A62;"></i>
<p class="small font-italic px-4 px-lg-5 text-center text-muted">
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.
</p>
<i class="fal fa-quote-right" style="position: absolute; bottom: 2px; right: 5px; color: #D83A62;"></i>
</div>
</div>
<!--
================================
CHARACTER BASICS
================================
-->
<div class="col-12" id="basics" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="card col-12 col-lg-5 mr-lg-3 bg-faded p-2 pt-lg-5 pb-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 200px;">
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Basics
<span class="pull-right"><i class="fat fa-snowflake"></i></span>
</p>
<div class="card p-2 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px; font-variant: small-caps; font-size: 16px;">
<!-- GENDER -->
<div class="row no-gutters">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-venus-mars fa-fw"></i>
Gender
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-comments fa-fw"></i>
Pronouns
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Cont/cont
</div>
</div>
<!-- AGE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-hourglass fa-fw"></i>
Age
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- DOB -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-birthday-cake fa-fw"></i>
DoB
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- SIGN -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-stars fa-fw"></i>
Sign
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- S.O. -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-heartbeat fa-fw"></i>
S.O.
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- RACE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-dna fa-fw"></i>
Race
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- HEIGHT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-ruler-vertical fa-fw"></i>
Height
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- BLOOD TYPE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-droplet fa-fw"></i>
Blood type
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- CLASS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-screen-users fa-fw"></i>
Class
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-scale-unbalanced fa-fw"></i>
Alignment
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
<!-- ROLE/OCCUPATION -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-suitcase fa-fw"></i>
Occupation
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
Content
</div>
</div>
</div>
</div>
<!--
================================
CHARACTER BANNER
================================
-->
<div class="col-12 col-lg-4 mx-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 400px; overflow: hidden;">
<div class="card w-100" style="min-height: 15px; position: absolute; top: 0px; left: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card w-100" style="min-height: 15px; position: absolute; bottom: 0px; right: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card h-100 bg-faded p-2" style="border-radius: 0px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
===============================
MOODBOARD CARDS
===============================
-->
<div class="card col-12 col-lg ml-lg-3 border-left-0 border-right-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<div class="row no-gutters h-100">
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
========================================
PERSONALITY SECTION
========================================
-->
<div class="col-12" id="stats" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
==============================
PERSONALITY BASICS
==============================
-->
<div class="col-12 col-lg-4 mr-lg-3 pr-2 pr-lg-0 mb-2 mb-lg-0" style="border-radius: 0px;">
<div style="position: sticky; top: 54px;">
<!--
=======================================
ATTITUDE (OPTIMIST/PESSIMIST ETC.)
=======================================
-->
<div class="row no-gutters pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Attitude
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-masks-theater text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
DOMINANT HAND
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
dominant hand
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-hand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
MBTI (16 PERSONALITIES)
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
XXXX (Content)
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
MBTI
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-head-side-brain text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
TAROT
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Tarot
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-cards-blank text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
ARCHETYPE
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Archetype
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-dharmachakra text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
SPIRIT ANIMAL
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Content
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Spirit animal
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-paw text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
CHARACTER'S SETTING
The theme of the world your character is
settled in. Examples: sci-fi, futuristic,
steampunk, cyberpunk, fantasy, asian etc.
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px #D83A62;">
<span style="font-size: 18px;">
Fantasy/sci-fi/etc.
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Setting
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-globe-stand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
==============================
PERSONALITY STATS
==============================
-->
<div class="card bg-faded col-12 col-lg mb-3 mb-lg-0 p-2 pb-4" style="border-radius: 0px; min-height: 100px; border-right-style: double; border-right-width: 6px;">
<!-- PERSONALITY HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Personality
<span class="pull-right"><i class="fat fa-sliders"></i></span>
</p>
<div class="card p-2 border-0" style="border-radius: 0px; font-variant: small-caps; font-size: 16px;">
<div class="row no-gutters">
<!--
==================================
DOUBLE STATS
==================================
-->
<div class="col-12 col-lg">
<!-- EXTROVERTED == INTROVERTED -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
extroverted
</span>
<span class="text-muted">
introverted
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
instinctive
</span>
<span class="text-muted">
calculated
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
deceptive
</span>
<span class="text-muted">
sincere
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- UNJUST == FAIR -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
unjust
</span>
<span class="text-muted">
fair
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
indifferent
</span>
<span class="text-muted">
emotional
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
reserved
</span>
<span class="text-muted">
affectionate
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
<!-- COOPERATIVE == LONE WOLF-->
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: #D83A62;">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
cooperative
</span>
<span class="text-muted">
lone wolf
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: #D83A62;">
</div>
</div>
</div>
</div>
</div>
<!-- LG VERTICAL DIVIDER -->
<div class="card bg-transparent col-auto hidden-md-down border-right-0 border-top-0 border-bottom-0 my-n2 mx-2" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;"></div>
<!--
==================================
STANDALONE STATS
==================================
-->
<div class="col-12 col-lg mt-3 mt-lg-0 text-lowercase">
<!-- CHARISMA STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Charisma
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Kindness
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Patience
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Integrity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Intellect
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MANNERS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Manners
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Maturity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Courage
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- HUMOUR STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Humour
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Temper
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Traits
<span class="pull-right"><i class="fat fa-masks-theater"></i></span>
</p>
<!--
=======================================
CHARACTER TRAITS
=======================================
-->
<div class="col p-0">
<div class="row no-gutters">
<!--
=================================
POSITIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #D83A62;"></i></span>
Pos. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEUTRAL TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-2 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-equals" style="color: #D83A62;"></i></span>
Neu. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEGATIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #D83A62;"></i></span>
Neg. trait </li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Favorites
<span class="pull-right"><i class="fat fa-circle-heart"></i></span>
</p>
<!--
=======================================
FAVORITE THINGS
=======================================
-->
<div class="col p-0 mt-2">
<div class="row no-gutters">
<!-- FAV FOOD -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Food
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-pot-food fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV DRINK -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Drink
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-cup-straw fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV SCENT -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Scent
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-spray-can-sparkles fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV COLOR -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Color
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-palette fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV FLOWER-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Flower
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-flower-tulip fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV SEASON-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Season
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clouds-sun fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV TIME OF DAY -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Time of day
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clock fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV CLOTHING ITEM -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Clothing item
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-scarf fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV GENRE (FILM/BOOK/ETC.) -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Genre
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-film fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
<!-- FAV MUSIC -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Music
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-music fa-fw mt-n3" style="font-size: 20px; color: #D83A62;"></i>
</div>
</div>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2 mt-2">
<!-- DEMEANOR HEADER -->
<p class="font-italic mb-1" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Demeanor
<span class="pull-right"><i class="fat fa-brain-circuit"></i></span>
</p>
<!--
=======================================
DEMEANOR CONTENT
=======================================
-->
<div class="col-12 p-0">
<!-- QUIRKS & HABITS HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted" style="border-radius: 0 2em 2em 0; border-left: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Quirks & habits
</div>
<!-- QUIRKS & HABITS CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px #D83A62; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
<!-- COMMUNICATION SKILLS HEADER -->
<div class="d-flex justify-content-end">
<div class="card col-11 col-lg-6 border-left-0 border-top-0 p-1 pr-2 text-muted text-right mt-4" style="border-radius: 2em 0 0 2em; border-right: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Communication skills
</div>
</div>
<!-- COMMUNICATION SKILLS CONTENT -->
<div class="card mt-2 border-top-0 border-left-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-right: solid 2px #D83A62; box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
<!-- SHOWING AFFECTION HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted mt-4" style="border-radius: 0 2em 2em 0; border-left: double 6px #D83A62; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Showing affection
</div>
<!-- SHOWING AFFECTION CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px #D83A62; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<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>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
LIKES & DISLIKES SECTION
========================================
-->
<div class="col-12" id="prefs" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
LIKES SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
====================
LIKES HEADER
====================
-->
<div class="card border-top-0 border-left-0 col-6 col-lg-3 p-0" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mt-1" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
Likes <span class="pull-right">
<i class="fal fa-heartbeat"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=====================
LIKES CONTENT
=====================
-->
<div class="col-12 p-2">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
<!--
========================
DISLIKES SECTION
========================
-->
<div class="card col-12 col-lg mb-3 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=======================
DISLIKES HEADER
=======================
-->
<div class="card border-top-0 border-right-0 col-6 col-lg-3 p-0 order-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
<i class="fal fa-heart-crack"></i> <span class="pull-right">
Dislikes</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-1">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
========================
DISLIKES CONTENT
========================
-->
<div class="col-12 p-2 order-3">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
FEARS & HOBBIES SECTION
========================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
FEARS SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3 mb-lg-0" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=====================
FEARS HEADER
=====================
-->
<div class="card border-left-0 col-6 col-lg-3 p-0 order-lg-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mb-lg-1 mt-1 mt-lg-0" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
Fears <span class="pull-right">
<i class="fal fa-skull"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-lg-3">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
======================
FEARS CONTENT
======================
-->
<div class="col-12 p-2 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
<!--
=======================
HOBBIES SECTION
=======================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================
HOBBIES HEADER
======================
-->
<div class="card border-right-0 col-6 col-lg-3 p-0 order-3" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1 mt-lg-0 mb-lg-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: #D83A62;">
<p class="text-white">
<i class="fal fa-circle-heart"></i> <span class="pull-right">
Hobbies</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-2">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=======================
HOBBIES CONTENT
=======================
-->
<div class="col-12 p-2 order-3 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: #D83A62;"></i></span>
Content </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
CHARACTER DESIGN SECTION
========================================
-->
<div class="col-12" id="design" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card bg-faded col-12 col-lg-5 p-2 mb-3 mb-lg-0 border-right-0" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;">
<!-- DESIGN NOTES HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Design notes
<span class="pull-right"><i class="fat fa-palette"></i></span>
</p>
<!--
=================================
DESIGN NOTES COLUMN
================================
-->
<div class="col p-0">
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis porta eros et velit blandit dapibus.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Curabitur ac finibus eros.
</span></li>
</ul>
<!-- DESIGN NOTE -->
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: #D83A62;"><span class="text-body">
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</span></li>
</ul>
<!-- YOU CAN COPY/PASTE MORE DESIGN NOTES ABOVE -->
</div>
<!--
=============================
DESIGNER STAT
=============================
-->
<div class="row no-gutters justify-content-between">
<!-- DESIGNER HYPERLINK -->
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px #D83A62; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
designer:
</span>
<a style="color: #D83A62;"
href="LINK_HERE">
Artist Name
</a>
</div>
</div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-pencil-paintbrush" style="font-size: 18px; color: #D83A62;"></i>
</div>
</div>
</div>
<!--
=============================
WORTH STAT
=============================
-->
<div class="row no-gutters justify-content-between mt-2">
<!-- WORTH AMOUNT -->
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px #D83A62; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
worth:
</span>
<span>
xx$
</span>
</div>
</div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-hands-holding-dollar" style="font-size: 18px; color: #D83A62;"></i>
</div>
</div>
</div>
</div>
<!--
=================================
CHARACTER IMAGE UNDER THE PALETTE
=================================
-->
<div class="col-12 col-lg mx-lg-3 mb-3 mb-lg-0" style="border-radius: 0 5em 5em 0; min-height: 400px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<!--
=================================
PALETTE BLOCK
=================================
-->
<div class="col-12 col-lg mb-3 py-lg-5" style="border-radius: 0px; font-variant: small-caps;">
<div class="h-100 ml-lg-n5 mr-lg-4">
<div class="col ml-lg-n3">
<!-- EYES HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Eyes
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- HAIR HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Hair
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- SKIN HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Skin
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- EXTRA HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Extra
</p>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
<!-- PALETTE COLOR -->
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-white
" style="border-radius: 2em 0 0 2em;
background: #ccc;">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
Color Name
</span>
<span class="pull-right">
#hexcode
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
STORY SECTION
========================================
-->
<div class="col-12" id="story" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-top-style: double; border-top-width: 6px;"></div>
<div class="col-12 px-2 px-lg-4 my-n5" style="z-index: 1;">
<div class="card border-0 col-12 p-0" style="border-radius: 0px; min-height: 100px;">
<div class="card w-100 border-bottom-0" style="border-radius: 0px; position: absolute; top: 0px; left: 0px; height: 48px;"></div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pr-lg-2 pb-lg-0 order-2 order-lg-0">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Childhood
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-left: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (RIGHT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1 order-lg-0" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3 order-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3 mt-2" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pl-lg-2 pb-lg-0 order-2">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Subheader
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-right: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (LEFT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pr-lg-2 pb-lg-0 order-2 order-lg-0">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Subheader
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-left: solid 3px #D83A62; border-bottom: solid 3px #D83A62; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- SMALL TRIVIA ITEM -->
<li style="color: #D83A62;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (RIGHT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1 order-lg-0" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3 order-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<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. 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>
</div>
<!-- YOU CAN ADD MORE STORY BLOCKS ABOVE -->
<div class="card w-100 border-top-0" style="border-radius: 0px; position: absolute; bottom: 0px; left: 0px; height: 48px;"></div>
</div>
</div>
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-bottom-style: double; border-bottom-width: 6px;"></div>
</div>
</div>
<!--
========================================
COMBAT SECTION
========================================
-->
<div class="col-12" id="combat" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
========================================
COMBAT DETAILS
========================================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded p-2 pb-4" style="border-radius: 0px;">
<!-- COMBAT HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Combat
<span class="pull-right"><i class="fat fa-swords"></i></span>
</p>
<div class="row no-gutters pt-3">
<!--
===================================
STATS PIE CHART
===================================
-->
<div class="col-12 col-lg-7 justify-content-center align-items-center py-4">
<div class="rounded-circle" style="position: absolute; height: 225px; width: 225px; border: solid 2px #D83A62; opacity: .2;"></div>
<div class="card rounded-circle p-3 text-lowercase" style="height: 200px; width: 200px; font-variant: small-caps; color: #D83A62; font-weight: 600;">
<!-- ATTACK STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: -25px; left: 75px; z-index: 2;">
Attack
</span>
<!-- DEFENCE STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; right: -40px; z-index: 2;">
Defence
</span>
<!-- SPEED STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; right: -25px; z-index: 2;">
Speed
</span>
<!-- PROTECTION STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: -20px; left: 64px; z-index: 2;">
Protection
</span>
<!-- MAGIC STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; left: -30px; z-index: 2;">
Magic
</span>
<!-- SUPPORT STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; left: -42px; z-index: 2;">
Support
</span>
<!--
================================================
MAIN STATS PIE CHART
Stats chart is mage using clip-path poligon, so
you need to change it's values to change the stat positions.
I already did calculate the main circles for you so you'll find
the proper values for each circle below. Circle are counted 1-6
1 is the central one (the smallest radius)
6 is the outer one (the largest radius)
================================================
ATTACK STAT
================================================
Starting value = 50% 0%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 42% == 1st circle
50% 34% == 2nd circle
50% 25% == 3rd circle (half)
50% 16% == 4th circle
50% 8% == 5th circle
50% 0% == 6th circle (best)
================================================
DEFENCE STAT
================================================
Starting value = 93% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 47% == 1st circle
65% 43% == 2nd circle
75% 43% == 3rd circle (half)
81% 37% == 4th circle
87% 31% == 5th circle
93% 25% == 6th circle (best)
================================================
SPEED STAT
================================================
Starting value = 93% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 53% == 1st circle
64% 58% == 2nd circle
71% 63% == 3rd circle (half)
79% 66% == 4th circle
87% 70% == 5th circle
93% 75% == 6th circle (best)
================================================
PROTECTION STAT
================================================
Starting value = 50% 100%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 58% == 1st circle
50% 66% == 2nd circle
50% 75% == 3rd circle (half)
50% 84% == 4th circle
50% 92% == 5th circle
50% 100% == 6th circle (best)
================================================
MAGIC STAT
================================================
Starting value = 7% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 55% == 1st circle
38% 60% == 2nd circle
30% 65% == 3rd circle (half)
21% 68% == 4th circle
14% 71% == 5th circle
7% 75% == 6th circle (best)
================================================
SUPPORT STAT
================================================
Starting value = 7% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 45% == 1st circle
37% 41% == 2nd circle
30% 35% == 3rd circle (half)
21% 32% == 4th circle
14% 29% == 5th circle
7% 25% == 6th circle (best)
================================================
-->
<div class="h-100 w-100" style="position: absolute; left: 0px; top: 0px; z-index: 1; opacity: .5; background: #D83A62; clip-path: polygon(
50% 0%,
93% 25%,
93% 75%,
50% 100%,
7% 75%,
7% 25%);"></div>
<!-- PIE CHART CIRCLES -->
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===================================
WEAKNESSES
===================================
-->
<div class="col-12 col-lg-5 pl-2">
<div class="card h-100 border-left-0 border-bottom-0 px-2 pb-3" style="border-radius: 0px; border-top-style: double; border-top-width: 6px; border-right-width: 3px; color: #D83A62;">
<p class="mx-auto float-lg-right text-lowercase" style="font-variant: small-caps; font-size: 20px;">
Weaknesses
</p>
<ul class="list-group pl-4" style="font-size: 15px;">
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
<!-- WEAK POINT-->
<li><span class="text-body">
Content
</span></li>
</ul>
</div>
</div>
<!--
===================================
BASIC COMBAT INFO
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0" style="border-radius: 0px; font-variant: small-caps; border-bottom-style: double; border-bottom-width: 6px; font-size: 16px; border-left-width: 3px; border-right-width: 3px;">
<!--
===================================
BASICS
===================================
-->
<div class="row no-gutters">
<!-- TACTIC -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-swords fa-fw"></i>
Tactic
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- ATITUDE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-hand-holding-heart fa-fw"></i>
Attitude
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- DISTANCE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-bullseye-arrow fa-fw"></i>
Distance
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
<!-- WEAPON -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: #D83A62;"><i class="fal fa-sword fa-fw"></i>
Weapon
</span>
<span class="text-lowercase">
Content
</span>
</div>
</div>
</div>
</div>
<!-- SKILLS & ABILITIES HEADER -->
<p class="col-12 font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: #D83A62;">
Skills & abilities
<span class="pull-right"><i class="fat fa-sparkles"></i></span>
</p>
<!--
===================================
SKILLS & ABILITIES
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0 border-left-0 border-bottom-0" style="border-radius: 0px; border-right-style: double; border-right-width: 6px;">
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0 mt-4">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
<div class="col p-0 mt-4">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px #D83A62;">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: #D83A62;">
<!-- FA ICON -->
<i class="fal fa-crown text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: #D83A62;">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
Skill name
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
skill/spell/racial/passive/etc.
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px #D83A62;"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px #D83A62;"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: #D83A62;">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="fas fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
<i class="far fa-star fa-fw"></i>
</span>
</div>
<hr class="my-1">
<p>
Write about this skill/spell/etc 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>
</div>
</div>
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
<!--
========================================
GRAPHICS LINE
========================================
-->
<div class="col-12 col-lg-5 mb-3 mb-lg-0 px-2 px-lg-4" style="border-radius: 0px;">
<div class="h-100" style="position: sticky; top: 54px; max-height: calc(100vh - 65px);">
<div class="row no-gutters h-100">
<!--
======================================
UPPER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pr-1 pb-1" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0; background: #D83A62; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 83%); border-radius: 0;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
======================================
MIDDLE GRAPHIC BLOCK
======================================
-->
<div class="col-12 mr-n1 ml-1" style="border-radius: 0; clip-path: polygon(0 0, 100% 15%, 100% 70%, 0 100%); min-height: 120px;
background-image: url(URLHERE);
background-size: cover;
background-position: left;"></div>
<!--
======================================
LOWER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pl-1 pt-1 mt-n3" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0; background: #D83A62; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 33%, 100% 0, 100% 100%, 0 100%); border-radius: 0;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
RELATIONSHIPS SECTION
========================================
-->
<div class="col-12" id="links" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: #D83A62; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="LINK_HERE">
Character Name
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
relationship
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: #D83A62; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
<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.
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- YOU CAN ADD MORE RELATIONSHIP BLOCKS HERE -->
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end mt-lg-1 mt-n4">
<div class="card col-auto px-1 border-left-0 border-top-0 border-bottom-0" style="border-right: double 6px #D83A62; height: 15px; border-radius: 0px;">
<a href="https://toyhou.se/ChiiAka" style="color: #D83A62; font-variant: small-caps; margin-top: -6px; font-weight: 600;" class="text-lowercase">
Code by ChiiAka
</a>
</div>
</div>
</div>
</div>
<!-- THIS CODE USES SITE THEME COLORS + CUSTOM ACCENT
23. || Moonshine || F2U
=======================================================
ACCENT COLOR == {{c!Accent color!}}
-->
<div class="pt-5 pb-4">
<div class="container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<!--
===========================
STICKY HEADER
===========================
-->
<div class="card border-0 col-12 py-2" style="border-radius: 0px; z-index: 10; position: sticky; top: 0px;">
<div style="border-radius: 0px; overflow: hidden;">
<div class="card bg-faded" style="border-radius: 0px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<div class="row no-gutters">
<!--
================================
PLAYLIST COLLAPSE BUTTON
================================
-->
<div class="col-auto align-items-center justify-content-center">
<a class="btn h-100 px-2" data-toggle="collapse" data-target="#playlist">
<i class="far fa-angle-down"></i></a>
</div>
<!-- VERTICAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1" style="width: 8px; border-radius: 0px;"></div>
<!--
================================
PLAYLIST
================================
-->
<div class="col col-lg-4">
<div class="tab-content">
<!--
========================
SONG TAB
========================
-->
{{%%First playlist song%
<div class="tab-pane fade in active show" id="{{%ID%}}">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: {{c!Accent color!}};">
{{%Song name%}}
</span>
<span class="text-lowercase text-muted mt-n2">
{{%Author%}}
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/{{%YT video ID%}}"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
%end%}}
{{%Playlist songs%
<div class="tab-pane fade" id="{{%ID%}}">
<div class="row no-gutters">
<div class="card border-0 bg-transparent col text-truncate px-1" style="font-variant: small-caps;">
<span class="text-uppercase" style="color: {{c!Accent color!}};">
{{%Song name%}}
</span>
<span class="text-lowercase text-muted mt-n2">
{{%Author%}}
</span>
</div>
<div class="card border-0 bg-transparent col-auto align-items-center justify-content-center p-2" style="overflow: hidden;">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/{{%YT video ID%}}"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
%end%}}
</div>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1" style="width: 8px; border-radius: 0px;"></div>
<div class="col-auto align-items-center justify-content-center p-2">
<!-- FA ICON == Replace "moon" with another FA icon name -->
<i class="fal fa-moon" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
<!-- DOUBLE VERTOCAL DIVIDER -->
<div class="card col-auto border-top-0 border-bottom-0 my-n1 mx-1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<div class="card col-auto border-top-0 border-bottom-0 my-n1 hidden-md-down" style="width: 8px; border-radius: 0px;"></div>
<!-- PC NAVIGATION -->
<div class="col hidden-md-down align-items-center justify-content-center text-lowercase" style="font-variant: small-caps; font-size: 17px;">
<a href="#intro" style="color: {{c!Accent color!}};">
Intro
</a>
<span class="text-muted mx-1">•</span>
<a href="#basics" style="color: {{c!Accent color!}};">
Basics
</a>
<span class="text-muted mx-1">•</span>
<a href="#stats" style="color: {{c!Accent color!}};">
Stats
</a>
<span class="text-muted mx-1">•</span>
<a href="#prefs" style="color: {{c!Accent color!}};">
Prefs
</a>
<span class="text-muted mx-1">•</span>
<a href="#design" style="color: {{c!Accent color!}};">
Design
</a>
<span class="text-muted mx-1">•</span>
<a href="#story" style="color: {{c!Accent color!}};">
Story
</a>
<span class="text-muted mx-1">•</span>
<a href="#combat" style="color: {{c!Accent color!}};">
Combat
</a>
<span class="text-muted mx-1">•</span>
<a href="#links" style="color: {{c!Accent color!}};">
Related
</a>
</div>
</div>
</div>
</div>
<!--
====================================
COLLAPSE WITH PLAYLIST LINKS
====================================
-->
<div class="col-12 p-0 col-lg-4 mt-2 bg-faded collapse" id="playlist" style="position: absolute; top: 45px; border-radius: 0 0 0 1.7em; box-shadow: 0 2px 5px rgba(0, 0, 0, .15);">
<ul class="nav card bg-transparent border-left-0 border-bottom-0 row no-gutters p-2" style="font-variant: small-caps; border-radius: 0px;">
<!--
===================================
SONG LINK
===================================
-->
{{%%First playlist song%
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0" style="border-radius: 0px;">
<a class="nav-link active text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: {{c!Accent color!}};"
href="#{{%ID%}}">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
{{%Author%}} - {{%Song name%}}
</a>
</li>
%end%}}
{{%Playlist songs%
<li class="nav-item card bg-transparent border-top-0 border-left-0 border-bottom-0 w-100 p-0 mt-1" style="border-radius: 0px;">
<a class="nav-link text-left btn btn-secondary border-0 text-truncate" data-toggle="tab" style="border-radius: 2em 0 0 2em; color: {{c!Accent color!}};"
href="#{{%ID%}}">
<i class="fad fa-circle-half-stroke fa-fw m-1 ml-n1"></i>
{{%Author%}} - {{%Song name%}}
</a>
</li>
%end%}}
</ul>
</div>
</div>
<!--
===========================
MAIN CHARACTER CARD
===========================
-->
<div class="col-12" id="intro" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12 col-lg-4 mt-lg-3" style="border-radius: 0px;">
<div style="min-height: 300px;">
<div class="card border-0 h-100 w-100 p-3 m-lg-5 mt-lg-5" style="border-radius: 0px; position: absolute; z-index: 1;">
<div class="h-100" style="
background-image: url('{{u!Character banner image url!}}');
background-size: cover;
background-position: center;"></div>
<div class="card bg-transparent border-top-0 w-100 hidden-md-down" style="border-radius: 0px; height: 33px; position: absolute; bottom: 0px; left: 0px;"></div>
</div>
</div>
</div>
<!--
==================================
CHARACTER OVERVIEW + QUOTE
==================================
-->
<div class="col-12 col-lg-8 mb-3 mb-lg-0 mt-3">
<!--
================================
CHARACTER OVERVIEW BLOCK
================================
-->
<div class="card bg-faded mb-3 border-bottom-0 pl-lg-5" style="border-radius: 0px; min-height: 300px;">
<div class="card hidden-md-down" style="position: absolute; bottom: 0px; left: 0px; width: 48px; border-radius: 0px; height: calc(100% - 46px);"></div>
<div class="col p-2 h-100">
<!--
======================
CHARACTER NAME
======================
-->
<div class="row no-gutters justify-content-end pr-lg-2">
<div class="col-lg-auto text-center">
<p class="font-italic" style="font-size: 35px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
{{!Character Name!}}
</p>
</div>
</div>
<!--
=====================
CIRCLE BADGES
=====================
-->
<div class="col-12 p-0">
<div class="row no-gutters justify-content-between">
<div class="col-12 col-lg-auto p-0 justify-content-center mt-3 mt-lg-0 order-1 order-lg-0">
<div class="row no-gutters">
<!-- CIRCLE BADGE -->
{{%%First circle badge%
<div class="col-auto mx-1 ml-lg-0">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="{{%Badge text%}}">
<i class="fal fa-{{%FA icon name%}}" style="font-size: 20px;"></i>
</a>
</div>
%end%}}
<!-- CIRCLE BADGE -->
{{%Circle badges%
<div class="col-auto mx-1">
<a class="card p-2 btn tooltipster text-muted rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;"
title="{{%Badge text%}}">
<i class="fal fa-{{%FA icon name%}}" style="font-size: 20px;"></i>
</a>
</div>
%end%}}
<!-- You can add more badges above but better do not add more than 5 of them! -->
</div>
</div>
<div class="card col-12 col-lg-6 p-2 border-top-0 border-left-0" style="border-radius: 2em 0 0 2em; border-right-style: double; border-right-width: 6px;">
{{%%Adjectives row%
<span class="font-italic text-muted text-right">
{{%first%}} • {{%second%}} • {{%third%}}
</span>
%end%}}
</div>
</div>
</div>
<!--
=======================
OVERVIEW HEADER
=======================
-->
<p class="font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Overview
<span class="pull-right"><i class="fat fa-feather-alt"></i></span>
</p>
<!--
========================
OVERVIEW CONTENT
========================
-->
<div class="card p-2 py-3 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
{{%Overview content%
<p>
{{l%paragraph%}}
</p>
%end%}}
</div>
</div>
</div>
<!--
=============================
CHARACTER QUOTE BLOCK
=============================
-->
<div class="card bg-faded ml-lg-5 border-top-0 justify-content-center" style="border-radius: 0px; min-height: 120px; border-right-style: double; border-right-width: 6px; border-left-style: double; border-left-width: 6px;">
<i class="fal fa-quote-left" style="position: absolute; top: 2px; left: 5px; color: {{c!Accent color!}};"></i>
<p class="small font-italic px-4 px-lg-5 text-center text-muted">
{{!Quote text!}}
</p>
<i class="fal fa-quote-right" style="position: absolute; bottom: 2px; right: 5px; color: {{c!Accent color!}};"></i>
</div>
</div>
<!--
================================
CHARACTER BASICS
================================
-->
<div class="col-12" id="basics" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="card col-12 col-lg-5 mr-lg-3 bg-faded p-2 pt-lg-5 pb-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 200px;">
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Basics
<span class="pull-right"><i class="fat fa-snowflake"></i></span>
</p>
<div class="card p-2 text-justify border-top-0" style="border-radius: 0px; border-width: 3px; border-bottom-style: double; border-bottom-width: 9px; font-variant: small-caps; font-size: 16px;">
<!-- GENDER -->
<div class="row no-gutters">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-venus-mars fa-fw"></i>
Gender
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Gender!}}
</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-comments fa-fw"></i>
Pronouns
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Pronouns!}}
</div>
</div>
<!-- AGE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-hourglass fa-fw"></i>
Age
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Age!}}
</div>
</div>
<!-- DOB -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-birthday-cake fa-fw"></i>
DoB
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!DoB!}}
</div>
</div>
<!-- SIGN -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-stars fa-fw"></i>
Sign
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Sign!}}
</div>
</div>
<!-- S.O. -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-heartbeat fa-fw"></i>
S.O.
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Orientation!}}
</div>
</div>
<!-- RACE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-dna fa-fw"></i>
Race
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Race!}}
</div>
</div>
<!-- HEIGHT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-ruler-vertical fa-fw"></i>
Height
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Height!}}
</div>
</div>
<!-- BLOOD TYPE -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-droplet fa-fw"></i>
Blood type
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Blood type!}}
</div>
</div>
<!-- CLASS -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-screen-users fa-fw"></i>
Class
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Class!}}
</div>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-scale-unbalanced fa-fw"></i>
Alignment
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Alignment!}}
</div>
</div>
<!-- ROLE/OCCUPATION -->
<div class="row no-gutters pt-1">
<div class="col text-left text-uppercase" style="color: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-suitcase fa-fw"></i>
Occupation
</div>
<div class="card col-auto">
</div>
<div class="col text-right text-lowercase">
{{!Occupation!}}
</div>
</div>
</div>
</div>
<!--
================================
CHARACTER BANNER
================================
-->
<div class="col-12 col-lg-4 mx-lg-4 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 400px; overflow: hidden;">
<div class="card w-100" style="min-height: 15px; position: absolute; top: 0px; left: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card w-100" style="min-height: 15px; position: absolute; bottom: 0px; right: -120px; transform: rotate(-45deg); z-index: 1;"></div>
<div class="card h-100 bg-faded p-2" style="border-radius: 0px;">
<div class="h-100" style="
background-image: url('{{u!Pre mood character banner image!}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
===============================
MOODBOARD CARDS
===============================
-->
{{%%Moodboard row%
<div class="card col-12 col-lg ml-lg-3 border-left-0 border-right-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<div class="row no-gutters h-100">
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url('{{u%Upper image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url('{{u%Center image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================
MOODBOARD IMAGE
=======================
-->
<div class="card col-12 bg-faded p-2 mt-2" style="border-radius: 0px; min-height: 100px;">
<div class="card border-0 h-100" style="border-radius: 0px;
background-image: url('{{u%Lower image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
%end%}}
<!--
========================================
PERSONALITY SECTION
========================================
-->
<div class="col-12" id="stats" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
==============================
PERSONALITY BASICS
==============================
-->
<div class="col-12 col-lg-4 mr-lg-3 pr-2 pr-lg-0 mb-2 mb-lg-0" style="border-radius: 0px;">
<div style="position: sticky; top: 54px;">
<!--
=======================================
ATTITUDE (OPTIMIST/PESSIMIST ETC.)
=======================================
-->
<div class="row no-gutters pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Attitude!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Attitude
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-masks-theater text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
DOMINANT HAND
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Dominant hand!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
dominant hand
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-hand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
MBTI (16 PERSONALITIES)
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!MBTI!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
MBTI
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-head-side-brain text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
TAROT
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Tarot!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Tarot
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-cards-blank text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
ARCHETYPE
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Archetype!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Archetype
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-dharmachakra text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
SPIRIT ANIMAL
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Spirit animal!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Spirit animal
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-paw text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
<!--
=======================================
CHARACTER'S SETTING
The theme of the world your character is
settled in. Examples: sci-fi, futuristic,
steampunk, cyberpunk, fantasy, asian etc.
=======================================
-->
<div class="row no-gutters mt-2 pr-2 justify-content-end">
<div class="col-12" style="border-radius: 0px; min-height: 50px; overflow: hidden;">
<div class="p-1 pl-2 card bg-faded h-100" style="border-radius: 0px; border-left: double 6px {{c!Accent color!}};">
<span style="font-size: 18px;">
{{!Setting!}}
</span>
<span class="text-lowercase mt-n2 text-muted" style="font-variant: small-caps;">
Setting
</span>
</div>
<div class="card bg-faded rounded-circle" style="height: 47px; width: 47px; position: absolute; right: -16px; bottom: -7px; z-index: 1; overflow: hidden;">
<div class="card border-0 h-100"></div></div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 mr-n3" style="margin-top: -40px; z-index: 2;">
<div class="rounded-circle p-1" style="width: 47px; height: 47px;">
<div class="card border-0 align-items-center justify-content-center rounded-circle h-100" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-globe-stand text-white" style="font-size: 18px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
==============================
PERSONALITY STATS
==============================
-->
<div class="card bg-faded col-12 col-lg mb-3 mb-lg-0 p-2 pb-4" style="border-radius: 0px; min-height: 100px; border-right-style: double; border-right-width: 6px;">
<!-- PERSONALITY HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Personality
<span class="pull-right"><i class="fat fa-sliders"></i></span>
</p>
<div class="card p-2 border-0" style="border-radius: 0px; font-variant: small-caps; font-size: 16px;">
<div class="row no-gutters">
<!--
==================================
DOUBLE STATS
==================================
-->
<div class="col-12 col-lg">
<!-- EXTROVERTED == INTROVERTED -->
{{%%Extroverted - Introverted%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
extroverted
</span>
<span class="text-muted">
introverted
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- INSTINCTIVE == CALCULATED -->
{{%%Instinctive - Calculated%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
instinctive
</span>
<span class="text-muted">
calculated
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- DECEPTIVE == SINCERE -->
{{%%Deceptive - Sincere%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
deceptive
</span>
<span class="text-muted">
sincere
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- UNJUST == FAIR -->
{{%%Unjust - Fair%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
unjust
</span>
<span class="text-muted">
fair
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- INDIFFERENT == EMOTIONAL -->
{{%%Indifferent - Emotional%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
indifferent
</span>
<span class="text-muted">
emotional
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- RESERVED == AFFECTIONATE -->
{{%%Reserved - Affectionate%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
reserved
</span>
<span class="text-muted">
affectionate
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
<!-- COOPERATIVE == LONE WOLF-->
{{%%Cooperative - Lone wolf%
<div class="col px-2">
<div class="row no-gutters justify-content-between text-lowercase" style="color: {{c!Accent color!}};">
<!-- STAT SIDES == Remove "text-muted from the stat that is prevailing"-->
<span class="text-muted">
cooperative
</span>
<span class="text-muted">
lone wolf
</span>
</div>
<div class="card bg-transparent progress border-bottom-0 border-left-0 border-right-0" style="border-radius: 0px; height: 8px; border-style: dotted; border-width: 7px; overflow: visible;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar justify-content-end" style="background: none;
width: {{%stat value 1-100%}}%
;">
<div class="card border-0 rounded-circle" style="height: 12px; min-width: 12px; margin-top: -10px; margin-right: -6px; padding: 2px; background: {{c!Accent color!}};">
</div>
</div>
</div>
</div>
%end%}}
</div>
<!-- LG VERTICAL DIVIDER -->
<div class="card bg-transparent col-auto hidden-md-down border-right-0 border-top-0 border-bottom-0 my-n2 mx-2" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;"></div>
<!--
==================================
STANDALONE STATS
==================================
-->
<div class="col-12 col-lg mt-3 mt-lg-0 text-lowercase">
<!-- CHARISMA STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Charisma
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Charisma 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Kindness
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Kindness 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Patience
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Patience 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Integrity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!integrity 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Intellect
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Intellect 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- MANNERS STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Manners
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Manners 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Maturity
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Maturity 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Courage
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Courage 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- HUMOUR STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Humour
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Humour 1-100!}}%
;"></div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="row no-gutters mb-n1">
<div class="col mb-1">
Temper
</div>
<div class="col-7 align-items-center">
<div class="progress w-100" style="border-radius: 2em 0 0 2em; height: 8px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{!Temper 1-100!}}%
;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Traits
<span class="pull-right"><i class="fat fa-masks-theater"></i></span>
</p>
<!--
=======================================
CHARACTER TRAITS
=======================================
-->
<div class="col p-0">
<div class="row no-gutters">
<!--
=================================
POSITIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
{{%Positive traits%
<li><span class="fa-li"><i class="fal fa-plus" style="color: {{c!Accent color!}};"></i></span>
{{%trait item%}} </li>
%end%}}
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEUTRAL TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-2 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
{{%Neutral traits%
<li><span class="fa-li"><i class="fal fa-equals" style="color: {{c!Accent color!}};"></i></span>
{{%trait item%}} </li>
%end%}}
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
<!--
=================================
NEGATIVE TRAITS LIST
=================================
-->
<div class="card col-12 col-lg border-left-0 border-right-0 border-bottom-0 mx-lg-1 pt-2 mt-3 mt-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
{{%Negative traits%
<li><span class="fa-li"><i class="fal fa-minus" style="color: {{c!Accent color!}};"></i></span>
{{%trait item%}} </li>
%end%}}
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2">
<!-- FAVORITES HEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Favorites
<span class="pull-right"><i class="fat fa-circle-heart"></i></span>
</p>
<!--
=======================================
FAVORITE THINGS
=======================================
-->
{{%%Favorite items%
<div class="col p-0 mt-2">
<div class="row no-gutters">
<!-- FAV FOOD -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Food
</span>
<span class="text-lowercase">
{{%Food%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-pot-food fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV DRINK -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Drink
</span>
<span class="text-lowercase">
{{%Drink%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-cup-straw fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV SCENT -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Scent
</span>
<span class="text-lowercase">
{{%Scent%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-spray-can-sparkles fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV COLOR -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Color
</span>
<span class="text-lowercase">
{{%Color%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-palette fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV FLOWER-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Flower
</span>
<span class="text-lowercase">
{{%Flower%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-flower-tulip fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV SEASON-->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Season
</span>
<span class="text-lowercase">
{{%Season%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clouds-sun fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV TIME OF DAY -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Time of day
</span>
<span class="text-lowercase">
{{%Time of day%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-clock fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV CLOTHING ITEM -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Clothing item
</span>
<span class="text-lowercase">
{{%Clothing item%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-scarf fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV GENRE (FILM/BOOK/ETC.) -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Genre
</span>
<span class="text-lowercase">
{{%Genre%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-film fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!-- FAV MUSIC -->
<div class="card border-0 bg-transparent col-12 col-lg-6 px-2 mb-2 justify-content-center">
<div class="card w-100" style="border-radius: 0px; font-variant: small-caps; border-top-style: double; border-top-width: 6px;">
<div class="row no-gutters justify-content-between p-1">
<span class="text-muted">
Music
</span>
<span class="text-lowercase">
{{%Music%}}
</span>
</div>
</div>
<div class="card-flex justify-content-center">
<div class="card p-2 border-top-0 justify-content-center align-items-center" style="border-radius: 0 0 2em 2em; width: 40px; height: 20px; margin-top: -1px;">
<!-- FA ICON -->
<i class="fal fa-music fa-fw mt-n3" style="font-size: 20px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
</div>
</div>
%end%}}
<!-- HORIZONTAL DIVIDER -->
<hr class="w-100 mb-2 mt-2">
<!-- DEMEANOR HEADER -->
<p class="font-italic mb-1" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Demeanor
<span class="pull-right"><i class="fat fa-brain-circuit"></i></span>
</p>
<!--
=======================================
DEMEANOR CONTENT
=======================================
-->
<div class="col-12 p-0">
<!-- QUIRKS & HABITS HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted" style="border-radius: 0 2em 2em 0; border-left: double 6px {{c!Accent color!}}; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Quirks & habits
</div>
<!-- QUIRKS & HABITS CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px {{c!Accent color!}}; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<p>
{{l!Quirks and Habits!}}
</p>
</div>
<!-- COMMUNICATION SKILLS HEADER -->
<div class="d-flex justify-content-end">
<div class="card col-11 col-lg-6 border-left-0 border-top-0 p-1 pr-2 text-muted text-right mt-4" style="border-radius: 2em 0 0 2em; border-right: double 6px {{c!Accent color!}}; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Communication skills
</div>
</div>
<!-- COMMUNICATION SKILLS CONTENT -->
<div class="card mt-2 border-top-0 border-left-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-right: solid 2px {{c!Accent color!}}; box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);">
<p>
{{l!Communication skills!}}
</p>
</div>
<!-- SHOWING AFFECTION HEADER -->
<div class="card col-11 col-lg-6 border-right-0 border-top-0 p-1 pl-2 text-muted mt-4" style="border-radius: 0 2em 2em 0; border-left: double 6px {{c!Accent color!}}; font-size: 20px; font-variant: small-caps; font-weight: 300;">
Showing affection
</div>
<!-- SHOWING AFFECTION CONTENT -->
<div class="card mt-2 border-top-0 border-right-0 border-bottom-0 p-2 text-justify" style="border-radius: 0px; border-left: solid 2px {{c!Accent color!}}; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);">
<p>
{{l!Showing affection!}}
</p>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
LIKES & DISLIKES SECTION
========================================
-->
<div class="col-12" id="prefs" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
LIKES SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
====================
LIKES HEADER
====================
-->
<div class="card border-top-0 border-left-0 col-6 col-lg-3 p-0" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mt-1" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: {{c!Accent color!}};">
<p class="text-white">
Likes <span class="pull-right">
<i class="fal fa-heartbeat"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=====================
LIKES CONTENT
=====================
-->
<div class="col-12 p-2">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
{{%Likes list%
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heartbeat" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}} </li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
<!--
========================
DISLIKES SECTION
========================
-->
<div class="card col-12 col-lg mb-3 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=======================
DISLIKES HEADER
=======================
-->
<div class="card border-top-0 border-right-0 col-6 col-lg-3 p-0 order-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: {{c!Accent color!}};">
<p class="text-white">
<i class="fal fa-heart-crack"></i> <span class="pull-right">
Dislikes</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-1">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
========================
DISLIKES CONTENT
========================
-->
<div class="col-12 p-2 order-3">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
{{%Dislikes list%
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-heart-crack" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}} </li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
FEARS & HOBBIES SECTION
========================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=====================
FEARS SECTION
=====================
-->
<div class="card col-12 bg-faded col-lg mr-lg-3 mb-3 mb-lg-0" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
=====================
FEARS HEADER
=====================
-->
<div class="card border-left-0 col-6 col-lg-3 p-0 order-lg-2" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 ml-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 mr-n5 mb-lg-1 mt-1 mt-lg-0" style="border-radius: 0 2em 2em 0; font-variant: small-caps; font-size: 18px; background: {{c!Accent color!}};">
<p class="text-white">
Fears <span class="pull-right">
<i class="fal fa-skull"></i></span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-lg-3">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
======================
FEARS CONTENT
======================
-->
<div class="col-12 p-2 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
{{%Fears list%
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-skull" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}} </li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
<!--
=======================
HOBBIES SECTION
=======================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================
HOBBIES HEADER
======================
-->
<div class="card border-right-0 col-6 col-lg-3 p-0 order-3" style="border-radius: 0; z-index: 2;">
<div class="card border-0 p-2 mt-n1 mt-lg-0 mb-lg-n1 mr-n1" style="border-radius: 0;">
<div class="p-1 text-uppercase px-2 ml-n5 mt-1 mt-lg-0 mb-lg-1" style="border-radius: 2em 0 0 2em; font-variant: small-caps; font-size: 18px; background: {{c!Accent color!}};">
<p class="text-white">
<i class="fal fa-circle-heart"></i> <span class="pull-right">
Hobbies</span>
</p>
</div>
</div>
</div>
<!-- DOUBLE HORIZONTAL DIVIDER -->
<div class="col-6 col-lg-9 align-items-center order-2">
<hr class="m-0 w-100" style="border-top-style: double; border-top-width: 12px;">
</div>
<!--
=======================
HOBBIES CONTENT
=======================
-->
<div class="col-12 p-2 order-3 order-lg-1">
<div class="card border-top-0 border-bottom-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
<ul class="fa-ul row no-gutters m-0 py-2 ml-5">
<!-- LIST ITEM -->
{{%Hobbies list%
<li class="col-12 col-lg-6"><span class="fa-li"><i class="fal fa-star" style="color: {{c!Accent color!}};"></i></span>
{{%list item%}} </li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
========================================
CHARACTER DESIGN SECTION
========================================
-->
<div class="col-12" id="design" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card bg-faded col-12 col-lg-5 p-2 mb-3 mb-lg-0 border-right-0" style="border-radius: 0px; border-left-style: double; border-left-width: 6px;">
<!-- DESIGN NOTES HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Design notes
<span class="pull-right"><i class="fat fa-palette"></i></span>
</p>
<!--
=================================
DESIGN NOTES COLUMN
================================
-->
<div class="col p-0">
<!-- DESIGN NOTE -->
{{%Design notes%
<ul class="list-group card p-2 border-top-0 border-left-0 border-bottom-0 mb-2" style="border-radius: 0px; border-style: double; border-width: 6px;">
<li class="ml-3 font-italic" style="color: {{c!Accent color!}};"><span class="text-body">
{{%list item%}}
</span></li>
</ul>
%end%}}
<!-- YOU CAN COPY/PASTE MORE DESIGN NOTES ABOVE -->
</div>
<!--
=============================
DESIGNER STAT
=============================
-->
<div class="row no-gutters justify-content-between">
<!-- DESIGNER HYPERLINK -->
{{%%Designer credits%
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px {{c!Accent color!}}; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
designer:
</span>
<a style="color: {{c!Accent color!}};"
href="{{%Artist link%}}">
{{%Artist Name%}}
</a>
</div>
</div>
</div>
%end%}}
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-pencil-paintbrush" style="font-size: 18px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
<!--
=============================
WORTH STAT
=============================
-->
<div class="row no-gutters justify-content-between mt-2">
<!-- WORTH AMOUNT -->
<div class="col-8">
<div class="card h-100 border-right-0 border-top-0" style="border-left: double 6px {{c!Accent color!}}; border-radius: 0 2em 2em 0; ">
<div class="card-flex h-100 align-items-center justify-content-between text-lowercase pl-1 pr-3" style="font-variant: small-caps;">
<span>
worth:
</span>
<span>
{{!Worth value!}}
</span>
</div>
</div>
</div>
<!-- CIRCLE BADGE -->
<div class="col-auto mx-1 ml-lg-0">
<div class="card align-items-center justify-content-center rounded-circle border-top-0 border-left-0" style="width: 37px; height: 37px;">
<!-- FA ICON -->
<i class="fal fa-hands-holding-dollar" style="font-size: 18px; color: {{c!Accent color!}};"></i>
</div>
</div>
</div>
</div>
<!--
=================================
CHARACTER IMAGE UNDER THE PALETTE
=================================
-->
<div class="col-12 col-lg mx-lg-3 mb-3 mb-lg-0" style="border-radius: 0 5em 5em 0; min-height: 400px;
background-image: url('{{!Character banner url!}}');
background-size: cover;
background-position: center;"></div>
<!--
=================================
PALETTE BLOCK
=================================
-->
<div class="col-12 col-lg mb-3 py-lg-5" style="border-radius: 0px; font-variant: small-caps;">
<div class="h-100 ml-lg-n5 mr-lg-4">
<div class="col ml-lg-n3">
<!-- EYES HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Eyes
</p>
<!-- PALETTE COLOR -->
{{%Eyes palette%
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-{{%dark or white%}}
" style="border-radius: 2em 0 0 2em;
background: {{c%palette color%}};">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
{{%Color name%}}
</span>
<span class="pull-right">
#{{%hexcode value 6 symbols%}}
</span>
</div>
</div>
%end%}}
<!-- HAIR HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Hair
</p>
{{%Hair palette%
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-{{%dark or white%}}
" style="border-radius: 2em 0 0 2em;
background: {{c%palette color%}};">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
{{%Color name%}}
</span>
<span class="pull-right">
#{{%hexcode value 6 symbols%}}
</span>
</div>
</div>
%end%}}
<!-- SKIN HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Skin
</p>
{{%Skin palette%
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-{{%dark or white%}}
" style="border-radius: 2em 0 0 2em;
background: {{c%palette color%}};">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
{{%Color name%}}
</span>
<span class="pull-right">
#{{%hexcode value 6 symbols%}}
</span>
</div>
</div>
%end%}}
<!-- EXTRA HEADER -->
<p class="ml-4 ml-lg-5 text-lowercase mb-n1" style="font-size: 18px;">
Extra
</p>
{{%Extra palette%
<div class="card border-0 p-1" style="border-radius: 2em 0 0 2em;">
<!-- TEXT ON PALETTE COLOR
If your color is pretty dark == leave text-white
If your color is quite light == change it to "text-dark" or "text-black" -->
<div class="p-1 pl-3 text-uppercase
text-{{%dark or white%}}
" style="border-radius: 2em 0 0 2em;
background: {{c%palette color%}};">
<!-- Insert your hexcode above and double it below -->
<span class="text-truncate">
{{%Color name%}}
</span>
<span class="pull-right">
#{{%hexcode value 6 symbols%}}
</span>
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
</div>
<!--
========================================
STORY SECTION
========================================
-->
<div class="col-12" id="story" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-top-style: double; border-top-width: 6px;"></div>
<div class="col-12 px-2 px-lg-4 my-n5" style="z-index: 1;">
<div class="card border-0 col-12 p-0" style="border-radius: 0px; min-height: 100px;">
<div class="card w-100 border-bottom-0" style="border-radius: 0px; position: absolute; top: 0px; left: 0px; height: 48px;"></div>
<!--
=========================================
STORY PART BLOCK
=========================================
-->
{{%Story section%
{{%%Left sided story part%
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pr-lg-2 pb-lg-0 order-2 order-lg-0">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
{{%Subheader%}}
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-left: solid 3px {{c!Accent color!}}; border-bottom: solid 3px {{c!Accent color!}}; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
{{%story trivia%
<li style="color: {{c!Accent color!}};"><span class="text-body">
{{%trivia item%}}
</span></li>
%end%}}
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (RIGHT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1 order-lg-0" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url('{{%story banner url%}}');
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3 order-lg-0" style="border-radius: 0px; border-style: double; border-width: 6px;">
{{%Story part text%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
%end%}}
<!--
=========================================
STORY PART BLOCK
=========================================
-->
{{%%Right sided story part%
<div class="row no-gutters p-3" style="z-index: 2;">
<!--
=======================================
STORY PART SUBHEADER & SMALL TRIVIA
=======================================
-->
<div class="col-12 col-lg pl-lg-2 pb-lg-0 order-2">
<!-- STORY SUBHEADER -->
<p class="font-italic mb-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
{{%Subheader%}}
<span class="pull-right"><i class="fat fa-bookmark"></i></span>
</p>
<!-- SMALL TRIVIA LIST -->
<div class="bg-faded p-2">
<div class="h-100 pr-1" style="border-right: solid 3px {{c!Accent color!}}; border-bottom: solid 3px {{c!Accent color!}}; min-height: 140px;">
<ul class="list-group font-italic pl-4">
<!-- SMALL TRIVIA ITEM -->
{{%story trivia%
<li style="color: {{c!Accent color!}};"><span class="text-body">
{{%trivia item%}}
</span></li>
%end%}}
</ul>
</div>
</div>
</div>
<!--
=======================================
STORY BANNER (LEFT)
=======================================
-->
<div class="card bg-faded col-12 col-lg-6 p-2 order-1" style="border-radius: 0px; min-height: 120px;">
<div class="h-100" style="
background-image: url('{{%story banner url%}}');
background-size: cover;
background-position: center;"></div>
</div>
<!--
=======================================
STORY PART CONTENT
=======================================
-->
<div class="card border-left-0 border-right-0 text-justify p-2 pr-lg-1 mt-2 order-3" style="border-radius: 0px; border-style: double; border-width: 6px;">
{{%Story part text%
<p>{{l%paragraph item%}}</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
%end%}}
%end%}}
<!-- YOU CAN ADD MORE STORY BLOCKS ABOVE -->
<div class="card w-100 border-top-0" style="border-radius: 0px; position: absolute; bottom: 0px; left: 0px; height: 48px;"></div>
</div>
</div>
<div class="card col-12 bg-faded" style="border-radius: 0px; height: 80px; border-bottom-style: double; border-bottom-width: 6px;"></div>
</div>
</div>
<!--
========================================
COMBAT SECTION
========================================
-->
<div class="col-12" id="combat" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
========================================
COMBAT DETAILS
========================================
-->
<div class="card col-12 col-lg mb-3 mb-lg-0 bg-faded p-2 pb-4" style="border-radius: 0px;">
<!-- COMBAT HEADER -->
<p class="font-italic" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Combat
<span class="pull-right"><i class="fat fa-swords"></i></span>
</p>
<div class="row no-gutters pt-3">
<!--
===================================
STATS PIE CHART
===================================
-->
<div class="col-12 col-lg-7 justify-content-center align-items-center py-4">
<div class="rounded-circle" style="position: absolute; height: 225px; width: 225px; border: solid 2px {{c!Accent color!}}; opacity: .2;"></div>
<div class="card rounded-circle p-3 text-lowercase" style="height: 200px; width: 200px; font-variant: small-caps; color: {{c!Accent color!}}; font-weight: 600;">
<!-- ATTACK STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: -25px; left: 75px; z-index: 2;">
Attack
</span>
<!-- DEFENCE STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; right: -40px; z-index: 2;">
Defence
</span>
<!-- SPEED STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; right: -25px; z-index: 2;">
Speed
</span>
<!-- PROTECTION STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: -20px; left: 64px; z-index: 2;">
Protection
</span>
<!-- MAGIC STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; bottom: 40px; left: -30px; z-index: 2;">
Magic
</span>
<!-- SUPPORT STAT NAME
delete [class="text-muted"] if this stat is
high/main/prevailing
(then it'll be colored in main accent color)
============================================
-->
<span class="text-muted"
style="position: absolute; top: 35px; left: -42px; z-index: 2;">
Support
</span>
<!--
================================================
MAIN STATS PIE CHART
Stats chart is mage using clip-path poligon, so
you need to change it's values to change the stat positions.
I already did calculate the main circles for you so you'll find
the proper values for each circle below. Circle are counted 1-6
1 is the central one (the smallest radius)
6 is the outer one (the largest radius)
================================================
ATTACK STAT
================================================
Starting value = 50% 0%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 42% == 1st circle
50% 34% == 2nd circle
50% 25% == 3rd circle (half)
50% 16% == 4th circle
50% 8% == 5th circle
50% 0% == 6th circle (best)
================================================
DEFENCE STAT
================================================
Starting value = 93% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 47% == 1st circle
65% 43% == 2nd circle
75% 43% == 3rd circle (half)
81% 37% == 4th circle
87% 31% == 5th circle
93% 25% == 6th circle (best)
================================================
SPEED STAT
================================================
Starting value = 93% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
57% 53% == 1st circle
64% 58% == 2nd circle
71% 63% == 3rd circle (half)
79% 66% == 4th circle
87% 70% == 5th circle
93% 75% == 6th circle (best)
================================================
PROTECTION STAT
================================================
Starting value = 50% 100%
Change values to following:
50% 50% == center of the 1st circle (worst)
50% 58% == 1st circle
50% 66% == 2nd circle
50% 75% == 3rd circle (half)
50% 84% == 4th circle
50% 92% == 5th circle
50% 100% == 6th circle (best)
================================================
MAGIC STAT
================================================
Starting value = 7% 75%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 55% == 1st circle
38% 60% == 2nd circle
30% 65% == 3rd circle (half)
21% 68% == 4th circle
14% 71% == 5th circle
7% 75% == 6th circle (best)
================================================
SUPPORT STAT
================================================
Starting value = 7% 25%
Change values to following:
50% 50% == center of the 1st circle (worst)
44% 45% == 1st circle
37% 41% == 2nd circle
30% 35% == 3rd circle (half)
21% 32% == 4th circle
14% 29% == 5th circle
7% 25% == 6th circle (best)
================================================
-->
{{%%Combat pie chart%
<div class="h-100 w-100" style="position: absolute; left: 0px; top: 0px; z-index: 1; opacity: .5; background: {{c!Accent color!}}; clip-path: polygon(
50% {{%Attack y 50-0%}}%,
{{%Defense x 50-93%}}% {{%Defense y 50-25%}}%,
{{%Speed x 50-93%}}% {{%Speed y 50-75%}}%,
50% {{%Protection y 50-100%}}%,
{{%Magic x 50-7%}}% {{%Magic y 50-75%}}%,
{{%Support x 50-7%}}% {{%Support y 50-25%}}%);"></div>
%end%}}
<!-- PIE CHART CIRCLES -->
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-3">
<div class="card h-100 rounded-circle p-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===================================
WEAKNESSES
===================================
-->
<div class="col-12 col-lg-5 pl-2">
<div class="card h-100 border-left-0 border-bottom-0 px-2 pb-3" style="border-radius: 0px; border-top-style: double; border-top-width: 6px; border-right-width: 3px; color: {{c!Accent color!}};">
<p class="mx-auto float-lg-right text-lowercase" style="font-variant: small-caps; font-size: 20px;">
Weaknesses
</p>
<ul class="list-group pl-4" style="font-size: 15px;">
<!-- WEAK POINT-->
{{%Weaknesses list%
<li><span class="text-body">
{{%list item%}}
</span></li>
%end%}}
</ul>
</div>
</div>
<!--
===================================
BASIC COMBAT INFO
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0" style="border-radius: 0px; font-variant: small-caps; border-bottom-style: double; border-bottom-width: 6px; font-size: 16px; border-left-width: 3px; border-right-width: 3px;">
<!--
===================================
BASICS
===================================
-->
<div class="row no-gutters">
<!-- TACTIC -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: {{c!Accent color!}};"><i class="fal fa-swords fa-fw"></i>
Tactic
</span>
<span class="text-lowercase">
{{!tactic!}}
</span>
</div>
</div>
<!-- ATITUDE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: {{c!Accent color!}};"><i class="fal fa-hand-holding-heart fa-fw"></i>
Attitude
</span>
<span class="text-lowercase">
{{!attitude!}}
</span>
</div>
</div>
<!-- DISTANCE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: {{c!Accent color!}};"><i class="fal fa-bullseye-arrow fa-fw"></i>
Distance
</span>
<span class="text-lowercase">
{{!distance!}}
</span>
</div>
</div>
<!-- WEAPON -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="color: {{c!Accent color!}};"><i class="fal fa-sword fa-fw"></i>
Weapon
</span>
<span class="text-lowercase">
{{!weapon!}}
</span>
</div>
</div>
</div>
</div>
<!-- SKILLS & ABILITIES HEADER -->
<p class="col-12 font-italic mt-2" style="font-size: 30px; font-variant: small-caps; font-weight: 300; color: {{c!Accent color!}};">
Skills & abilities
<span class="pull-right"><i class="fat fa-sparkles"></i></span>
</p>
<!--
===================================
SKILLS & ABILITIES
===================================
-->
<div class="card col-12 p-2 mt-3 border-top-0 border-left-0 border-bottom-0" style="border-radius: 0px; border-right-style: double; border-right-width: 6px;">
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
{{%%First skill block%
<div class="col p-0">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px {{c!Accent color!}};">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-{{%FA icon name%}} text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: {{c!Accent color!}};">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
{{%skill name%}}
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
{{%skill type%}}
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px {{c!Accent color!}};"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px {{c!Accent color!}};"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: {{c!Accent color!}};">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
{{%%Difficulty stars%
<i class="{{%1st FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%2nd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%3rd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%4th FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%5th FAS or FAR%}} fa-star fa-fw"></i>
%end%}}
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: {{c!Accent color!}};">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
{{%%Mastery stars%
<i class="{{%1st FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%2nd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%3rd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%4th FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%5th FAS or FAR%}} fa-star fa-fw"></i>
%end%}}
</span>
</div>
<hr class="my-1">
<p>
{{%text description%}}
</p>
</div>
</div>
</div>
</div>
%end%}}
<!--
=====================================
SKILL/ABILITY/SPELL BLOCK
=====================================
-->
{{%Skill blocks%
<div class="col p-0 mt-4">
<div class="row no-gutters">
<!--
===================================
SKILL CIRCLE ICON
===================================
-->
<div class="col-12 col-lg-auto justify-content-center" style="z-index: 2;">
<div class="card border-0 rounded-circle p-2">
<div class="rounded-circle p-1" style="height: 80px; width: 80px; border: solid 2px {{c!Accent color!}};">
<div class="h-100 rounded-circle align-items-center justify-content-center" style="background: {{c!Accent color!}};">
<!-- FA ICON -->
<i class="fal fa-{{%FA icon name%}} text-white fa-2x"></i>
</div>
</div>
</div>
</div>
<!--
===================================
SKILL NAME + SMALL BLURB
===================================
-->
<div class="col-12 col-lg py-2 mt-n5 mt-lg-0" style="font-size: 16px;">
<div class="bg-faded h-100 ml-lg-n4 pr-2 pt-4 pt-lg-0 pb-2" style="font-variant: small-caps;">
<div class="row no-gutters justify-content-end pt-3 pt-lg-0" style="font-size: 24px; font-weight: 300; color: {{c!Accent color!}};">
<div class="col-12 col-lg-auto">
<p class="text-uppercase text-center">
{{%skill name%}}
</p>
</div>
</div>
<div class="row no-gutters justify-content-end mt-n2">
<div class="col-12 col-lg-auto justify-content-center">
<span class="text-lowercase text-muted">
{{%skill type%}}
</span>
</div>
</div>
<!-- DECORATIVE DOUBLE DIVIDER -->
<hr class="m-0 mt-1 mr-n2" style="border-top-style: double; border-top-width: 15px;">
</div>
</div>
<!--
===================================
SKILL DESCRIPTION
===================================
-->
<div class="col-12 p-3" style="min-height: 100px;">
<!-- DECORATIVE BOX CORNERS -->
<div class="h-100 w-25 p-2 pr-5 pb-4" style="position: absolute; left: 0px; top: 0px;">
<div class="h-100 border-right-0 border-bottom-0" style="border: solid 2px {{c!Accent color!}};"></div></div>
<div class="h-100 w-25 p-2 pl-5 pt-4" style="position: absolute; right: 0px; top: 0px;">
<div class="h-100 border-left-0 border-top-0" style="border: solid 2px {{c!Accent color!}};"></div></div>
<div class="bg-faded h-100 p-2 px-3 text-justify">
<!-- DIFFICULTY STAT == How difficult this skill is to learn/use? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: {{c!Accent color!}};">
<span class="text-uppercase" style="font-weight: 600;">
Difficulty
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
{{%%Difficulty stars%
<i class="{{%1st FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%2nd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%3rd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%4th FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%5th FAS or FAR%}} fa-star fa-fw"></i>
%end%}}
</span>
</div>
<!-- MASTERY STAT == How good your character knows how to use it? (if applicable, can be removed) -->
<div class="row no-gutters justify-content-between" style="font-variant: small-caps; color: {{c!Accent color!}};">
<span class="text-uppercase" style="font-weight: 600;">
Mastery
</span>
<span>
<!-- FA STARS
Use "fal" for EMPTY
Use "fas" for SOLID
-->
{{%%Mastery stars%
<i class="{{%1st FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%2nd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%3rd FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%4th FAS or FAR%}} fa-star fa-fw"></i>
<i class="{{%5th FAS or FAR%}} fa-star fa-fw"></i>
%end%}}
</span>
</div>
<hr class="my-1">
<p>
{{%text description%}}
</p>
</div>
</div>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
<!--
========================================
GRAPHICS LINE
========================================
-->
{{%%Fraphics line%
<div class="col-12 col-lg-5 mb-3 mb-lg-0 px-2 px-lg-4" style="border-radius: 0px;">
<div class="h-100" style="position: sticky; top: 54px; max-height: calc(100vh - 65px);">
<div class="row no-gutters h-100">
<!--
======================================
UPPER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pr-1 pb-1" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0; background: {{c!Accent color!}}; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 85%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 83%); border-radius: 0;
background-image: url('{{u%upper graphic url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
======================================
MIDDLE GRAPHIC BLOCK
======================================
-->
<div class="col-12 mr-n1 ml-1" style="border-radius: 0; clip-path: polygon(0 0, 100% 15%, 100% 70%, 0 100%); min-height: 120px;
background-image: url('{{u%middle graphic url%}}');
background-size: cover;
background-position: left;"></div>
<!--
======================================
LOWER GRAPHIC BLOCK
======================================
-->
<div class="col-12 ml-n1 mr-1 pl-1 pt-1 mt-n3" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0; background: {{c!Accent color!}}; min-height: 120px;">
<div class="card border-0 p-2 h-100" style="clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); border-radius: 0px;">
<div class="h-100" style="clip-path: polygon(0 33%, 100% 0, 100% 100%, 0 100%); border-radius: 0;
background-image: url('{{u%lower graphic url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
%end%}}
</div>
</div>
<!--
========================================
RELATIONSHIPS SECTION
========================================
-->
<div class="col-12" id="links" style="margin-bottom: 55px; margin-top: -40px;"></div>
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
{{%Relationship blocks%
<div class="col-12 mb-3 mb-lg-0" style="border-radius: 0px; min-height: 100px;">
<div class="row no-gutters">
<!--
==============================
RELATIONSHIP IMAGE
==============================
-->
<div class="card col-auto mx-auto bg-faded rounded-circle mr-lg-n3 mb-n5 mb-lg-0">
<div class="card border-0 p-3 bg-faded rounded-circle" style="z-index: 2;">
<div class="rounded-circle" style="height: 200px; width: 200px;
background-image: url('{{u%related image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
==============================
RELATIONSHIP DETAILS
==============================
-->
<div class="col-12 col-lg ml-lg-n5 mt-n5 mt-lg-0">
<div class="card bg-faded ml-lg-n5 pl-lg-5 h-100 p-3 pr-lg-4 pt-5 pt-lg-0 mt-n3 mt-lg-0" style="border-radius: 0px;">
<div class="pl-lg-5 ml-lg-4 pt-5 pt-lg-0 pb-3 pb-lg-0">
<!--
======================================
CHARACTER NAME & RELATIONSHIP
======================================
-->
<div class="row no-gutters justify-content-between align-items-baseline" style="font-variant: small-caps; font-size: 18px;">
<div class="col-12 col-lg-auto text-center">
<a style="color: {{c!Accent color!}}; font-size: 28px; font-weight: 300; font-style: italic;" target="_BLANK"
href="{{%character page link%}}">
{{%Character name%}}
</a>
</div>
<div class="col-12 col-lg-auto text-center text-muted mt-n3 mt-lg-0">
•
{{%relationship%}}
•
</div>
</div>
<div class="card p-2" style="border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
RELATIONSHIP STATS
======================================
-->
<div class="col-12 col-lg p-2 text-lowercase">
<!-- AFFECTION STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
affection
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{%affection 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- RESPECT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{%respect 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- TRUST STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{%trust 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- CARING STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
caring
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{%caring 1-100%}}%
;"></div>
</div>
</div>
</div>
<!-- COMEFORT STAT -->
<div class="row no-gutters" style="font-variant: small-caps; font-size: 16px;">
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 mt-1" style="border-radius: 2em 0 0 2em; height: 12px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100% -->
<div class="progress-bar" style="background: {{c!Accent color!}}; width:
{{%comfort 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!--
======================================
VERTICAL DOUBLE DIVIDER
======================================
-->
<div class="card col-auto border-top-0 border-left-0 border-bottom-0 hidden-md-down" style="border-radius: 0px; border-style: double; border-width: 6px;"></div>
<!--
======================================
RELATIONSHIP DESCRIPTION
======================================
-->
<div class="card bg-transparent border-0 col-12 col-lg d-block d-lg-flex" style="flex: 1 1 158px; min-height: 140px;">
<div class="p-2 text-justify" style="flex: 1 1 0; overflow-y: auto;">
{{%relationship description%
<p>
{{l%paragraph item%}}
</p>
%end%}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE RELATIONSHIP BLOCKS HERE -->
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<div class="row no-gutters justify-content-end mt-lg-1 mt-n4">
<div class="card col-auto px-1 border-left-0 border-top-0 border-bottom-0" style="border-right: double 6px {{c!Accent color!}}; height: 15px; border-radius: 0px;">
<a href="https://toyhou.se/ChiiAka" style="color: {{c!Accent color!}}; font-variant: small-caps; margin-top: -6px; font-weight: 600;" class="text-lowercase">
Code by ChiiAka
</a>
</div>
</div>
</div>
</div>