<!-- THIS CODE USES SITE THEME COLORS + CUSTOM ACCENT
16. || Mage || F2U
=======================================================
This code is a part of the set!
Healer == https://toyhou.se/15526828.15-healer-f2u
Mage == You're here!
Rogue == https://toyhou.se/15628798.17-rogue-f2u
Warrior == https://toyhou.se/15693699.18-warrior-f2u
=======================================================
ACCENT COLOR == #9F86C0
CLASS ICON NAME == staff
CHARACTER ICON NAME == snowflake
Use "find & replace" to easily change the color
and icon name to another!
NOTE: This code hides character profile header. If you don't want that, you
can take everything out of the first div and remove it then
-->
<div class="card border-0 pt-5 pb-5" style="margin-top: -60px; border-radius: 0px;">
<div class="container" style="max-width: 1100px;">
<div class="row no-gutters">
<!--
========================================
CHARACTER IMAGE + BASICS
========================================
-->
<div class="col-12 col-lg-4 p-1 order-lg-1">
<div class="row no-gutters h-100">
<!--
================================
CHARACTER IMAGE
================================
-->
<div class="bg-faded text-secondary col-9 p-2 border-left-0 border-bottom-0 order-2" style="min-height: 250px; border: solid 3px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
================================
CHARACTER PALETTE
================================
-->
<div class="col-3 pr-2 order-1">
<div class="h-100 bg-faded text-secondary p-2 border-left-0 border-right-0" style="border: solid 3px;">
<div class="bg-light h-100 p-1">
<div class="h-100">
<div class="row no-gutters h-100">
<!-- PALETTE COLOR -->
<div class="col-12 flex-grow-1" style="
background: #ccc;
"></div>
<!-- PALETTE COLOR -->
<div class="col-12 flex-grow-1" style="
background: #aaa;
"></div>
<!-- PALETTE COLOR -->
<div class="col-12 flex-grow-1" style="
background: #999;
"></div>
<!-- PALETTE COLOR -->
<div class="col-12 flex-grow-1" style="
background: #777;
"></div>
<!-- PALETTE COLOR -->
<div class="col-12 flex-grow-1" style="
background: #555;
"></div>
<!-- YOU CAN ADD MORE COLORS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
================================
CHARACTER QUOTE
================================
-->
<div class="col-9 pt-2 order-4" style="min-height: 85px;">
<div class="h-100 align-items-center bg-faded text-secondary p-2 px-4 font-italic border-top-0 border-bottom-0" style="border: solid 3px;">
<i class="fad fa-quote-left" style="position: absolute; left: 6px; top: 11px; color: #9F86C0;"></i>
<p class="text-center small" style="color: #9F86C0;">
Write a short quote here.
</p>
<i class="fad fa-quote-right" style="position: absolute; right: 6px; bottom: 1px; color: #9F86C0;"></i>
</div>
</div>
<!--
================================
CLASS FA ICON
================================
-->
<div class="col-3 pt-2 pr-2 order-3">
<div class="h-100 align-items-center justify-content-center bg-secondary text-secondary" style="opacity: .8;">
<i class="fas fa-staff fa-fw fa-3x text-white"></i>
</div>
</div>
<!--
================================
BASIC INFORMATION
================================
-->
<div class="col-12 mt-2 p-2 px-3 bg-faded text-secondary border-top-0 border-left-0 order-5" style="min-height: 300px; border: solid 3px; font-size: 16px;">
<!-- GENDER -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-venus-mars fa-fw"></span>
Gender
</span>
<span>
Content
</span>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-comments fa-fw"></span>
Pronouns
</span>
<span>
Content
</span>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-heartbeat fa-fw"></span>
S.O.
</span>
<span>
Content
</span>
</div>
<!-- AGE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-hourglass fa-fw"></span>
Age
</span>
<span>
Content
</span>
</div>
<!-- DOB -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-birthday-cake fa-fw"></span>
DOB
</span>
<span>
Content
</span>
</div>
<!-- SIGN -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-star-shooting fa-fw"></span>
Sign
</span>
<span>
Content
</span>
</div>
<!-- SPECIES/RACE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-dna fa-fw"></span>
Species
</span>
<span>
Content
</span>
</div>
<!-- ROLE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-hand-holding-magic fa-fw"></span>
Role
</span>
<span>
Content
</span>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase font-italic" style="color: #9F86C0;"><span class="fal fa-scale-unbalanced fa-fw"></span>
Alignment
</span>
<span>
Content
</span>
</div>
<!-- SONG AUTHOR + NAME -->
<div class="row no-gutters mt-2">
<div class="px-2 py-3 col-9 align-items-center justify-content-center text-uppercase text-center font-italic small">
Author - Song Name
</div>
<!-- PLAYING BUTTON -->
<div class="col-3 align-items-center justify-content-center">
<i class="fad fa-guitar fa-2x fa-shake" style="position: absolute; animation-delay: 3s; animation-duration: 4s; color: #9F86C0;"></i>
<div class="card border-0 tooltipster" style="width: 35px; height: 35px; background: none; overflow: hidden;">
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -2px; left: -2px;"
src="https://www.youtube.com/embed/bH5NlwQyLpA"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<a title="Code by ChiiAka" href="https://toyhou.se/ChiiAka" class="text-secondary tooltipster" style="position: absolute; bottom: 0px; right: 5px;"><i class="far fa-code"></i></a>
</div>
</div>
</div>
<!--
========================================
MAIN INFO COLUMN
========================================
-->
<div class="col-12 col-lg p-lg-1">
<div class="row no-gutters h-100">
<!--
================================
LEFT IMAGES + ICON
================================
-->
<div class="col-12 col-lg px-1 pl-lg-0 my-2 my-lg-0 order-3 order-lg-0">
<div class="row no-gutters h-100">
<!-- MOODBOARD IMAGE -->
<div class="card-flex col-12 bg-faded text-secondary border-right-0 border-bottom-0" style="min-height: 100px; border: solid 3px;">
<div class="h-100 p-2">
<div class="card h-100" style="border-radius: 0px; border-width: 3px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
<!-- CHARACTER FA ICON -->
<div class="card-flex col-12 bg-faded p-2 my-2 text-secondary border-top-0 border-bottom-0 border-right-0" style="min-height: 100px; border: solid 3px;">
<div class="card h-100 align-items-center justify-content-center" style="border-style: double; border-width: 10px; border-radius: 0px; background: none;">
<i class="fal fa-snowflake fa-3x" style="color: #9F86C0;"></i>
</div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="card-flex col-12 bg-faded p-2 text-secondary border-top-0 border-right-0" style="min-height: 100px; border: solid 3px;">
<div class="card h-100" style="border-radius: 0px; border-width: 3px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
</div>
<!--
================================
CHARACTER NAME + INFO
================================
-->
<div class="col-12 col-lg-7 px-1 order-2 order-lg-0">
<div class="row no-gutters h-100">
<!--
================================
CHARACTER NAME
================================
-->
<div class="col-12 px-3 px-lg-5 pb-1 text-secondary bg-faded border-left-0 border-right-0 border-bottom-0" style="border: solid 3px;">
<div class="card text-secondary border-top-0 px-2 pb-2" style="margin-top: -3px; border-radius: 0px 0px 2em 2em; border: solid 3px;">
<div class="col-12 bg-faded align-items-center justify-content-center py-1" style="border-radius: 0px 0px 1.4em 1.4em;">
<span class="text-uppercase font-italic" style="font-size: 25px; color: #9F86C0;">
Character Name
</span>
</div>
</div>
</div>
<!--
================================
SCROLLABLE INFO
================================
-->
<div class="bg-faded col-12 p-2 py-3" style="height: 580px;">
<div class="h-100 bg-faded">
<div class="w-100 h-100" style="position: absolute; top: 0px; left: 0px; background: linear-gradient(to top, #9F86C0 -150%, rgba(0, 0, 0, 0));"></div>
<div class="card h-100 border-left-0 border-right-0 p-2" style="border-width: 3px; border-radius: 0px; overflow: auto;">
<div class="row no-gutters">
<!--
================================
INTRODUCTION
================================
-->
<div class="col-12">
<div class="row no-gutters">
<div class="col"><hr class="border-right-0 border-left-0 border-bottom-0" style="border-style: double; border-width: 6px;"></div>
<div class="col-auto">
<!-- WIZARD HAT ICON -->
<i class="fal fa-hat-wizard fa-fw m-1 fa-2x" style="color: #9F86C0;"></i>
</div>
<div class="col"><hr class="border-right-0 border-left-0 border-bottom-0" style="border-style: double; border-width: 6px;"></div>
</div>
<p class="text-justify" style="font-size: 13px;">
Write a small intro 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>
<hr class="border-right-0 border-left-0 border-bottom-0" style="border-style: double; border-width: 6px;">
</div>
<!-- PERSONALITY HEADER -->
<div class="col-12 text-secondary border-top-0 border-bottom-0 justify-content-center align-items-center my-2" style="border: double 7px; background: linear-gradient(to right, #9F86C0 -200%, rgba(0, 0, 0, 0), #9F86C0 300%);">
<p class="text-uppercase font-italic" style="font-size: 18px; color: #9F86C0;"><i class="fal fa-feather-alt"></i>
Personality.
</p>
</div>
<!--
================================
DOUBLE PERSONALITY STATS
================================
-->
<div class="col-12">
<!-- EXTROVERTED == INTROVERTED -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Extroverted
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Introverted
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Instinctive
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Calculated
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Deceptive
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Sincere
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Indifferent
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Emotional
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Reserved
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Affectionate
</div>
</div>
<!-- COOPERATIVE == LONE WOLF -->
<div class="row no-gutters align-items-center">
<div class="col text-center text-truncate text-uppercase small">
Cooperative
</div>
<div class="col-4 col-lg-5">
<!-- STATS BAR == CHANGE 50% TO 1-100% -->
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<div class="progress-bar justify-content-end" style="background: none;
width: 50%
;"><div class="" style="height: 12px; min-width: 8px; border: solid 2px #9F86C0; margin-top: -6px; margin-right: -2px;"></div></div>
</div>
</div>
<div class="col text-center text-truncate text-uppercase small">
Lone wolf
</div>
</div>
</div>
<!--
================================
ATTITUDE/TAROT/MBTI
================================
-->
<div class="col-12 mt-2 px-lg-1">
<!-- ATTITUDE -->
<div class="row no-gutters pb-1">
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<div class="col align-items-center text-uppercase font-italic">
<div class="col p-0" style="color: #9F86C0;">
Attitude
</div>
</div>
<div class="col align-items-center pr-1 text-muted">
<div class="col p-0 justify-content-end text-right">
<span style="line-height: 90%;">
Optimist/Pessimist
</span>
</div>
</div>
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="fal fa-masks-theater fa-fw" style="font-size: 18px; color: #9F86C0;"></i></div>
</div>
</div>
<!-- TAROT -->
<div class="row no-gutters pb-1">
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<div class="col align-items-center text-uppercase font-italic">
<div class="col p-0" style="color: #9F86C0;">
Tarot
</div>
</div>
<div class="col align-items-center pr-1 text-muted">
<div class="col p-0 justify-content-end text-right">
<span style="line-height: 90%;">
Content
</span>
</div>
</div>
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="fal fa-cards fa-fw" style="font-size: 18px; color: #9F86C0;"></i></div>
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters pb-1">
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<div class="col align-items-center text-uppercase font-italic">
<div class="col p-0" style="color: #9F86C0;">
MBTI
</div>
</div>
<div class="col align-items-center pr-1 text-muted">
<div class="col p-0 justify-content-end text-right">
<span style="line-height: 90%;">
XXXX (Content)
</span>
</div>
</div>
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="fal fa-head-side-brain fa-fw" style="font-size: 18px; color: #9F86C0;"></i></div>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="col-12">
<div class="row no-gutters mb-n2">
<div class="col"><hr style="margin-top: 10px;"></div>
<div class="col-auto"><i class="fal fa-snowflake fa-fw mx-1" style="color: #9F86C0;"></i></div>
<div class="col"><hr style="margin-top: 10px;"></div>
</div>
</div>
<!-- CHARACTER DEMEANOR DESCRIPTION -->
<div class="col-12 text-justify" style="font-size: 13px;">
<p>
Write a bit about your character demeanor. 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.
</p>
</div>
<!--
================================
QUIRKS + HABITS
================================
-->
<div class="col-12 pt-3 mb-3">
<div class="card p-2" style="border-radius: 0px; border-width:3px; font-size: 13px;">
<!-- QUIRKS LINE -->
<span class="font-italic"><span class="text-uppercase" style="font-size: 15px; color: #9F86C0;">
Quirks:
</span>
one, two, three
</span>
<!-- HABITS LINE -->
<span class="font-italic"><span class="text-uppercase" style="font-size: 15px; color: #9F86C0;">
Habits:
</span>
one, two, three
</span>
</div>
</div>
<!--
================================
LIKES/DISLIKES/FEARS/HOBBIES
================================
-->
<div class="col-12">
<div class="row no-gutters">
<!-- LIKES LIST -->
<div class="col px-2">
<span class="text-uppercase font-italic text-muted" style="font-size: 18px;">
Likes<span class="fad fa-heartbeat pull-right fa-fw mt-1"></span></span>
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
</ul>
</div>
<!-- DIVIDER -->
<div class="col-auto align-self-stretch flex-column px-1">
<div class="card flex-grow-1 border-right-0 border-bottom-0"></div>
</div>
<!-- DISLIKES LIST -->
<div class="col px-2">
<span class="text-uppercase font-italic text-muted" style="font-size: 18px;">
Dislikes<span class="fad fa-heart-crack pull-right fa-fw mt-1"></span></span>
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
<!-- LIKE ITEM -->
<li>
Content
</li>
</ul>
</div>
<!-- DIVIDER -->
<hr class="w-100 m-0 my-1">
<!-- FEARS LIST -->
<div class="col px-2">
<span class="text-uppercase font-italic text-muted" style="font-size: 18px;">
Fears<span class="fad fa-skull pull-right fa-fw mt-1"></span></span>
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- FEAR ITEM -->
<li>
Content
</li>
<!-- FEAR ITEM -->
<li>
Content
</li>
<!-- FEAR ITEM -->
<li>
Content
</li>
<!-- FEAR ITEM -->
<li>
Content
</li>
</ul>
</div>
<!-- DIVIDER -->
<div class="col-auto align-self-stretch flex-column px-1">
<div class="card flex-grow-1 border-right-0 border-bottom-0"></div>
</div>
<!-- HOBBIES LIST -->
<div class="col px-2">
<span class="text-uppercase font-italic text-muted" style="font-size: 18px;">
Hobbies<span class="fad fa-paintbrush-pencil pull-right fa-fw mt-1"></span></span>
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- HOBBIES ITEM -->
<li>
Content
</li>
<!-- HOBBIES ITEM -->
<li>
Content
</li>
<!-- HOBBIES ITEM -->
<li>
Content
</li>
<!-- HOBBIES ITEM -->
<li>
Content
</li>
</ul>
</div>
</div>
</div>
<!-- ABILITIES HEADER -->
<div class="col-12 text-secondary border-top-0 border-bottom-0 justify-content-center align-items-center my-2 mt-4" style="border: double 7px; background: linear-gradient(to right, #9F86C0 -200%, rgba(0, 0, 0, 0), #9F86C0 300%);">
<p class="text-uppercase font-italic" style="font-size: 18px; color: #9F86C0;"><i class="fal fa-sparkles fa-flip-horizontal"></i>
Abilities.
</p>
</div>
<!--
================================
ABILITY SCORES
================================
-->
<div class="col-12">
<!--
==========================
STRENGHT
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- STRENGHT STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Strenght
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
<!--
==========================
DEXTERITY
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- DEXTERITY STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Dexterity
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
<!--
==========================
CONSTITUTION
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- CONSTITUTION STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Constitution
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
<!--
==========================
INTELLIGENCE
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- INTELLIGENCE STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Intelligence
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
<!--
==========================
WISDOM
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- WISDOM STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Wisdom
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
<!--
==========================
CHARISMA
==========================
-->
<div class="row no-gutters mb-1">
<!-- LEFT HORIZONTAL LINE -->
<div class="col-auto py-1 pr-2">
<div class="card h-100 border-left-0 border-top-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;"></div>
</div>
<!-- CHARISMA STAT -->
<div class="col align-items-center text-uppercase font-italic text-truncate">
<div class="col p-0 text-center text-muted text-truncate" style="font-size: 16px;">
Charisma
</div>
</div>
<!-- PROGRESS BAR VALUE (1-100%) -->
<div class="col-5 align-items-center px-2">
<div class="card col p-1 progress bg-faded border-top-0 border-bottom-0" style="border-radius: 0px;">
<!-- PROGRESS BAR == CHANGE 50% TO 1-100%-->
<div class="progress-bar" style="max-height: 8px; background: #9F86C0;
width: 50%
;"></div>
</div>
</div>
<!-- STAT NUMERIC VALUE (1-20) -->
<div class="col-auto">
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;">
<div class="row no-gutters" style="font-size: 18px; color: #9F86C0;">
<!-- NUMBERS == change only second "0" for numbers 1-9.
For numbers 10-20 change both "0" from top to bottom.
Example: for number "14" we change upper "0" to "1" and
lower "0" to "4"
c-->
<i class="fal fa-0 fa-fw mx-n1"></i>
<i class="fal fa-0 fa-fw mx-n1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="col-12">
<div class="row no-gutters mb-n2">
<div class="col"><hr style="margin-top: 10px;"></div>
<div class="col-auto"><i class="fal fa-snowflake fa-fw mx-1" style="color: #9F86C0;"></i></div>
<div class="col"><hr style="margin-top: 10px;"></div>
</div>
</div>
<!--
================================
WEAKNESSES LIST
================================
-->
<div class="col-12 px-2">
<!-- WEAKNESSES HEADER -->
<p class="text-uppercase font-italic text-muted text-center" style="font-size: 20px;">
Weaknesses
</p>
<!-- WEAKNESSES LIST GROUP -->
<div class="card bg-faded py-2 mt-1 border-top-0 border-right-0 border-bottom-0" style="border-radius: 0px; border-width: 3px;">
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- WEAK POINT ITEM -->
<li>
Content
</li>
<!-- WEAK POINT ITEM -->
<li>
Content
</li>
<!-- WEAK POINT ITEM -->
<li>
Content
</li>
<!-- WEAK POINT ITEM -->
<li>
Content
</li>
<!-- YOU CAN ADD MORE WEAK POINTS ABOVE-->
</ul>
</div>
</div>
<!--
================================
SPELLS/SKILLS/ETC SECTION
================================
-->
<div class="col-12">
<!--
=================================
SKILL/SPELL/ETC BLOCK
=================================
-->
<div class="card bg-faded border-right-0 my-3 pb-3" style="min-height: 120px; border-width: 3px; border-radius: 0px 0px 0px 3em;;">
<div class="row no-gutters">
<!-- CARD WITH FA ICON -->
<div class="card col-auto pr-1 pb-1 border-top-0 border-left-0" style="width: 105px; height: 105px; border-radius: 0px 0px 3em 0px; margin-top: -3px; margin-left: -3px; border-width: 3px;">
<div class="bg-secondary h-100 align-items-center justify-content-center" style="border-radius: 2.6em 0px 2.6em 0px; opacity: .8">
<!-- SKILL/SPELL FA ICON -->
<i class="text-white fal fa-book fa-3x"></i>
</div>
</div>
<!-- SKILL NAME + BASICS -->
<div class="col pt-2 px-2">
<!-- SKILL/SPELL NAME -->
<span class="text-uppercase font-italic" style="font-size: 20px; line-height: 80%;">
Spell Name
</span>
<!-- SKILL/SPELL DIFFICULTY == How difficult it is to use this spell/skill? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Difficulty
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- SKILL/SPELL MASTERY == How well character knows how to use it? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Mastery
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- LOWER DIVIDER -->
<hr class="ml-n2">
</div>
<!-- SKILL DESCRIPTION -->
<div class="col-12 text-justify p-1 pl-4 pr-2" style="font-size: 13px;">
<p>
Write about this skill/spell/etc. Duis sollicitudin elit sed tel lus 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.
</p>
</div>
</div>
</div>
<!--
=================================
SKILL/SPELL/ETC BLOCK
=================================
-->
<div class="card bg-faded border-right-0 my-3 pb-3" style="min-height: 120px; border-width: 3px; border-radius: 0px 0px 0px 3em;;">
<div class="row no-gutters">
<!-- CARD WITH FA ICON -->
<div class="card col-auto pr-1 pb-1 border-top-0 border-left-0" style="width: 105px; height: 105px; border-radius: 0px 0px 3em 0px; margin-top: -3px; margin-left: -3px; border-width: 3px;">
<div class="bg-secondary h-100 align-items-center justify-content-center" style="border-radius: 2.6em 0px 2.6em 0px; opacity: .8">
<!-- SKILL/SPELL FA ICON -->
<i class="text-white fal fa-book fa-3x"></i>
</div>
</div>
<!-- SKILL NAME + BASICS -->
<div class="col pt-2 px-2">
<!-- SKILL/SPELL NAME -->
<span class="text-uppercase font-italic" style="font-size: 20px; line-height: 80%;">
Spell Name
</span>
<!-- SKILL/SPELL DIFFICULTY == How difficult it is to use this spell/skill? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Difficulty
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- SKILL/SPELL MASTERY == How well character knows how to use it? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Mastery
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- LOWER DIVIDER -->
<hr class="ml-n2">
</div>
<!-- SKILL DESCRIPTION -->
<div class="col-12 text-justify p-1 pl-4 pr-2" style="font-size: 13px;">
<p>
Write about this skill/spell/etc. Duis sollicitudin elit sed tel lus 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.
</p>
</div>
</div>
</div>
<!--
=================================
SKILL/SPELL/ETC BLOCK
=================================
-->
<div class="card bg-faded border-right-0 my-3 pb-3" style="min-height: 120px; border-width: 3px; border-radius: 0px 0px 0px 3em;;">
<div class="row no-gutters">
<!-- CARD WITH FA ICON -->
<div class="card col-auto pr-1 pb-1 border-top-0 border-left-0" style="width: 105px; height: 105px; border-radius: 0px 0px 3em 0px; margin-top: -3px; margin-left: -3px; border-width: 3px;">
<div class="bg-secondary h-100 align-items-center justify-content-center" style="border-radius: 2.6em 0px 2.6em 0px; opacity: .8">
<!-- SKILL/SPELL FA ICON -->
<i class="text-white fal fa-book fa-3x"></i>
</div>
</div>
<!-- SKILL NAME + BASICS -->
<div class="col pt-2 px-2">
<!-- SKILL/SPELL NAME -->
<span class="text-uppercase font-italic" style="font-size: 20px; line-height: 80%;">
Spell Name
</span>
<!-- SKILL/SPELL DIFFICULTY == How difficult it is to use this spell/skill? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Difficulty
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- SKILL/SPELL MASTERY == How well character knows how to use it? -->
<div class="row no-gutters justify-content-between text-muted">
<span class="text-uppercase text-small">
Mastery
</span>
<div class="row no-gutters">
<!-- STARS == use "fal" for EMPTY and "fas" for SOLID -->
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fas fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
<i class="fal fa-star fa-fw mt-1"></i>
</div>
</div>
<!-- LOWER DIVIDER -->
<hr class="ml-n2">
</div>
<!-- SKILL DESCRIPTION -->
<div class="col-12 text-justify p-1 pl-4 pr-2" style="font-size: 13px;">
<p>
Write about this skill/spell/etc. Duis sollicitudin elit sed tel lus 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.
</p>
</div>
</div>
</div>
<!-- YOU CAN ADD MORE SKILLS/SPELLS/ETC ABOVE -->
</div>
<!-- STORY HEADER -->
<div class="col-12 text-secondary border-top-0 border-bottom-0 justify-content-center align-items-center my-2 mt-4" style="border: double 7px; background: linear-gradient(to right, #9F86C0 -200%, rgba(0, 0, 0, 0), #9F86C0 300%);">
<p class="text-uppercase font-italic" style="font-size: 18px; color: #9F86C0;"><i class="fal fa-scroll-old"></i>
Story.
</p>
</div>
<!--
================================
STORY BLOCK
================================
-->
<div class="col-12 text-justify" style="font-size: 13px;">
<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>
<!-- SUBHEADER -->
<div class="row no-gutters mt-1">
<div class="col-auto text-muted text-uppercase align-items-center mr-2" style="font-size: 18px;">
Subheader
</div>
<div class="col text-muted">
<i class="fal fa-bookmark fa-fw" style="position: absolute; right: 20px; top: 12px; font-size: 18px;"></i>
<hr class="border-left-0 border-right-0 border-bottom-0" style="border-style: double; border-width: 7px;"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- SUBHEADER -->
<div class="row no-gutters mt-1">
<div class="col-auto text-muted text-uppercase align-items-center mr-2" style="font-size: 18px;">
Subheader
</div>
<div class="col text-muted">
<i class="fal fa-bookmark fa-fw" style="position: absolute; right: 20px; top: 12px; font-size: 18px;"></i>
<hr class="border-left-0 border-right-0 border-bottom-0" style="border-style: double; border-width: 7px;"></div>
</div>
<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>
<!-- TRIVIA HEADER -->
<div class="col-12 text-secondary border-top-0 border-bottom-0 justify-content-center align-items-center my-2 mt-4" style="border: double 7px; background: linear-gradient(to right, #9F86C0 -200%, rgba(0, 0, 0, 0), #9F86C0 300%);">
<p class="text-uppercase font-italic" style="font-size: 18px; color: #9F86C0;"><i class="fal fa-circle-question"></i>
Trivia.
</p>
</div>
<!--
================================
TRIVIA LIST
================================
-->
<div class="col-12">
<ul class="list-group ml-4" style="font-size: 13px;">
<!-- FACT ITEM -->
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- FACT ITEM -->
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!-- FACT ITEM -->
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- FACT ITEM -->
<li>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>
<!-- FACT ITEM -->
<li>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE FACTS ABOVE-->
</ul>
</div>
<!-- RELATIONSHIPS HEADER -->
<div class="col-12 text-secondary border-top-0 border-bottom-0 justify-content-center align-items-center my-2 mt-4" style="border: double 7px; background: linear-gradient(to right, #9F86C0 -200%, rgba(0, 0, 0, 0), #9F86C0 300%);">
<p class="text-uppercase font-italic" style="font-size: 18px; color: #9F86C0;"><i class="fal fa-users"></i>
Related.
</p>
</div>
<!--
================================
RELATIONSHIPS
================================
-->
<div class="col-12">
<!--
===========================
RELATIONSHIP BLOCK
===========================
-->
<div class="row no-gutters mb-4">
<!-- RELATIONSHIP IMAGE + DESCRIPTION -->
<div class="col-12 mb-2">
<div class="row no-gutters">
<!-- CHARACTER RELATIONSHIP IMAGE -->
<div class="card bg-faded col-5 p-2 border-right-0 border-top-0" style="height: 140px; border-radius: 0px; border-width: 3px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
<!-- RELATIONSHIP DESCRIPTION
This one is intended for medium size info. If you have
just a bit info, check if the box scrolls on PC. If it
doesn't, you need to remove "mr-lg-n2" or a small part
of the description will be cut.
The reason is that this box uses some code twists so the
scrollbar will be pretty and small.
Don't forget to add "mr-lg-n2" back if you add info
and the scrollbar on PC will appear!
-->
<div class="card col ml-2 bg-faded border-top-0 border-left-0 border-right-0" style="max-height: 140px; overflow: hidden; border-radius: 0px; border-width: 3px;">
<div class="mr-lg-n2" style="margin-top: -15px;">
<div class="px-1 text-justify" style="height: 168px; overflow: auto; font-size: 11px;">
<div style="min-height:18px;"></div>
<p>
Write about their relationship. Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
</p>
<p>
Another paragraph. Duis solli citudin 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 style="min-height:18px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIP ICON + TITLE -->
<div class="col-auto">
<!-- RELATIONSHIP ICON -->
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="tooltipster fal
fa-rings-wedding
fa-fw fa-beat" style="font-size: 20px; color: #9F86C0; animation-duration: 2s;"
title="Relationship"
></i></div>
</div>
<!-- CHARACTER NAME -->
<div class="col bg-faded ml-2 align-items-center justify-content-center">
<a style="color: #9F86C0;" target="_BLANK"
href="LINK_HERE"
><p class="text-uppercase font-italic align-items-center">
Character Name
</p></a>
</div>
</div>
<!--
===========================
RELATIONSHIP BLOCK
===========================
-->
<div class="row no-gutters mb-4">
<!-- RELATIONSHIP IMAGE + DESCRIPTION -->
<div class="col-12 mb-2">
<div class="row no-gutters">
<!-- CHARACTER RELATIONSHIP IMAGE -->
<div class="card bg-faded col-5 p-2 border-right-0 border-top-0" style="height: 140px; border-radius: 0px; border-width: 3px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
<!-- RELATIONSHIP DESCRIPTION
This one is intended for medium size info. If you have
just a bit info, check if the box scrolls on PC. If it
doesn't, you need to remove "mr-lg-n2" or a small part
of the description will be cut.
The reason is that this box uses some code twists so the
scrollbar will be pretty and small.
Don't forget to add "mr-lg-n2" back if you add info
and the scrollbar on PC will appear!
-->
<div class="card col ml-2 bg-faded border-top-0 border-left-0 border-right-0" style="max-height: 140px; overflow: hidden; border-radius: 0px; border-width: 3px;">
<div class="mr-lg-n2" style="margin-top: -15px;">
<div class="px-1 text-justify" style="height: 168px; overflow: auto; font-size: 11px;">
<div style="min-height:18px;"></div>
<p>
Write about their relationship. Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
</p>
<p>
Another paragraph. Duis solli citudin 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 style="min-height:18px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIP ICON + TITLE -->
<div class="col-auto">
<!-- RELATIONSHIP ICON -->
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="tooltipster fal
fa-handshake-angle
fa-fw fa-beat" style="font-size: 20px; color: #9F86C0; animation-duration: 2s;"
title="Relationship"
></i></div>
</div>
<!-- CHARACTER NAME -->
<div class="col bg-faded ml-2 align-items-center justify-content-center">
<a style="color: #9F86C0;" target="_BLANK"
href="LINK_HERE"
><p class="text-uppercase font-italic align-items-center">
Character Name
</p></a>
</div>
</div>
<!--
===========================
RELATIONSHIP BLOCK
===========================
-->
<div class="row no-gutters mb-4">
<!-- RELATIONSHIP IMAGE + DESCRIPTION -->
<div class="col-12 mb-2">
<div class="row no-gutters">
<!-- CHARACTER RELATIONSHIP IMAGE -->
<div class="card bg-faded col-5 p-2 border-right-0 border-top-0" style="height: 140px; border-radius: 0px; border-width: 3px;">
<div class="h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
<!-- RELATIONSHIP DESCRIPTION
This one is intended for medium size info. If you have
just a bit info, check if the box scrolls on PC. If it
doesn't, you need to remove "mr-lg-n2" or a small part
of the description will be cut.
The reason is that this box uses some code twists so the
scrollbar will be pretty and small.
Don't forget to add "mr-lg-n2" back if you add info
and the scrollbar on PC will appear!
-->
<div class="card col ml-2 bg-faded border-top-0 border-left-0 border-right-0" style="max-height: 140px; overflow: hidden; border-radius: 0px; border-width: 3px;">
<div class="mr-lg-n2" style="margin-top: -15px;">
<div class="px-1 text-justify" style="height: 168px; overflow: auto; font-size: 11px;">
<div style="min-height:18px;"></div>
<p>
Write about their relationship. Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Duis porta eros et velit blandit dapibus.
</p>
<p>
Another paragraph. Duis solli citudin 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 style="min-height:18px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIP ICON + TITLE -->
<div class="col-auto">
<!-- RELATIONSHIP ICON -->
<div class="card p-2 bg-faded" style="border-radius: 0px; border-width: 3px;"><i class="tooltipster fal
fa-skull
fa-fw fa-beat" style="font-size: 20px; color: #9F86C0; animation-duration: 2s;"
title="Relationship"
></i></div>
</div>
<!-- CHARACTER NAME -->
<div class="col bg-faded ml-2 align-items-center justify-content-center">
<a style="color: #9F86C0;" target="_BLANK"
href="LINK_HERE"
><p class="text-uppercase font-italic align-items-center">
Character Name
</p></a>
</div>
</div>
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!-- BOTTOM BORDER -->
<div class="card col-12 border-top-0 border-left-0 border-right-0 text-secondary" style="border: solid 3px; border-radius: 0px;"></div>
</div>
</div>
<!--
================================
RIGHT IMAGES
================================
-->
<div class="col-12 col-lg px-1 pr-lg-0 my-2 my-lg-0 order-1 order-lg-0">
<div class="row no-gutters h-100">
<!-- MOODBOARD IMAGE -->
<div class="col-12 bg-faded text-secondary border-right-0 border-left-0 border-bottom-0 mb-1" style="min-height: 100px; border: solid 3px;">
<div class="h-100 p-2">
<div class="card h-100" style="border-radius: 0px; border-width: 3px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col-12 bg-faded p-2 text-secondary border-top-0 border-left-0 border-right-0 mt-1" style="min-height: 100px; border: solid 3px;">
<div class="card h-100" style="border-radius: 0px; border-width: 3px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>