<!-- THIS CODE USES CUSTOM COLORS
11. || Little Talks || F2U
MAIN COLOR == #cc795f
SECONDARY COLOR (DARK) == #765440
THIRD COLOR (LIGHT) == #ece4db
LIGHT CARD COLOR == #F6F0EA
LIST LINES == #D7CEC4
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<!--
=====================================
CHARACTER NAME BLOCK
=====================================
-->
<div class="card border-0 col-12 mb-0 mb-lg-n4 align-items-end" style="background: none;">
<div class="card border-0 col-12 col-lg-7 align-items-center" style="background: none;">
<p class="text-center" style="font-size: 30px; font-weight: 300; letter-spacing: 3px; color: #cc795f;">
Character Name
<!-- FA ICON -->
<i class="fad fa-reel"></i>
</p>
</div>
</div>
<!--
=====================================
CHARACTER IMAGE + RIBBON BLOCK
=====================================
-->
<div class="col-12 mt-0 mt-lg-n5 mb-n2 align-items-center" style="z-index: 2;">
<!-- RIBBON BLOCK
You can find & replace "flower" to change
it to another Font Awesome icon name
-->
<div class="col-12 p-0 pt-2 pb-2" style="position: absolute; height: 100px; background: #ece4db;">
<div class="h-100" style="border: dashed 2px #cc795f; border-right: none; border-left: none;">
<div class="row no-gutters h-100">
<div class="card-flex align-items-center col-4 col-lg-3" style="z-index: 10;">
<div class="col-12">
<div class="row no-gutters justify-content-between pr-4 hidden-sm-down" style="color: #cc795f;">
<i class="fad fa-flower fa-3x fa-fw hidden-lg-down"></i>
<i class="fad fa-flower fa-3x fa-fw"></i>
<i class="fad fa-flower fa-3x fa-fw"></i>
</div>
<div class="row no-gutters justify-content-left pr-4 ml-n2 ml-md-0 ml-lg-0 hidden-sm-up" style="color: #cc795f;">
<i class="fad fa-flower fa-3x fa-fw fa-flip-horizontal"></i>
</div>
</div>
</div>
<div class="col-4 col-lg-2"></div>
<div class="card-flex align-items-center col-4 col-lg-7" style="z-index: 10;">
<div class="col-12">
<div class="row no-gutters justify-content-between pl-4 hidden-sm-down" style="color: #cc795f;">
<i class="fad fa-flower fa-3x fa-fw hidden-lg-down"></i>
<i class="fad fa-flower fa-3x fa-fw hidden-md-down"></i>
<i class="fad fa-flower fa-3x fa-fw hidden-md-down"></i>
<i class="fad fa-flower fa-3x fa-fw hidden-md-down"></i>
<i class="fad fa-flower fa-3x fa-fw"></i>
<i class="fad fa-flower fa-3x fa-fw"></i>
</div>
<div class="row no-gutters justify-content-end pl-4 mr-n2 mr-md-0 mr-lg-0 hidden-sm-up" style="color: #cc795f;">
<i class="fad fa-flower fa-3x fa-fw"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-0 col-12 col-lg-8 align-items-center" style="background: none;">
<div class="card bg-faded rounded-circle p-2" style="width: 250px; height: 250px; background: #ece4db; border: solid 2px #cc795f;">
<div class="col p-0 align-items-center justify-content-center">
<div class="card border-0" style="height: 80px; width: 260px; position: absolute; background: #ece4db;"></div>
<!--
========================
CHARACTER IMAGE
========================
-->
<div class="card rounded-circle h-100 w-100 p-2" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="h-100 rounded-circle" style="border: dashed 2px #ece4db;"></div>
</div>
</div>
</div>
</div>
</div>
<!--
=====================================
QUOTE BLOCK
=====================================
-->
<div class="col-12 col-lg-4 mt-n5 pr-0 pr-lg-2">
<div class="card border-0 h-100" style="background: #765440; color: #cc795f;">
<i class="fad fa-quote-left fa-2x" style="position: absolute; left: 5px; top: 0px;"></i>
<i class="fad fa-quote-right fa-2x" style="position: absolute; right: 5px; bottom: 0px;"></i>
<div class="h-100 p-3 align-items-center mt-5 mt-lg-0 mb-5 mb-lg-0" style="font-family: Georgia, serif; font-size: 20px; font-style: italic;">
<!-- INSERT YOUR QUOTE HERE -->
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
<!--
=====================================
MAIN CONTENT BLOCK
=====================================
-->
<div class="col-12 col-lg-8 mt-3 mt-lg-n5 pl-0 pl-lg-2" >
<div class="card border-0 h-100" style="background: #ece4db;">
<div class="row no-gutters">
<!-- NAVIGATION BUTTONS -->
<div class="col-12 col-lg-1 pt-4 pt-lg-0 pb-2 pb-lg-0 card-flex align-items-center justify-content-center">
<div class="w-100" style="position: absolute;">
<ul class="nav row no-gutters justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#intro" style="color: #cc795f;"><i class="fad fa-portrait fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#stats" style="color: #cc795f;"><i class="fad fa-sliders-simple fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#look" style="color: #cc795f;"><i class="fad fa-swatchbook fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#story" style="color: #cc795f;"><i class="fad fa-memo-pad fa-2x fa-fw"></i></a>
</li>
</ul>
</div>
</div>
<div class="col pl-3 pl-lg-1 pr-3 pt-3 pb-3" style="height: 350px;">
<div class="rounded h-100 p-2" style="background: #F6F0EA;">
<div class="rounded h-100 p-1" style="border: dashed 2px #765440;">
<div class="card h-100" style="border: dashed 2px #cc795f; background: #F6F0EA; overflow: hidden;">
<div class="tab-content">
<!--
================================
BASICS TAB
================================
-->
<div class="tab-pane fade in active show" id="intro">
<div style="height: 286px; overflow: auto;">
<div class="row no-gutters">
<!--
============================
BASIC INFO
============================
-->
<div class="col-12 col-lg">
<div class="col p-2" style="height: 286px; position: sticky; top: 0px; font-size: 16px; color: #765440;">
<!-- GENDER -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-venus-mars fa-fw mr-1"></i></span>
Gender
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-comments fa-fw mr-1"></i></span>
Pronouns
</span>
<span style="color: #cc795f;">
Cont/Cont
</span>
</div>
<!-- AGE -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-hourglass fa-fw mr-1"></i></span>
Age
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- DOB -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-birthday-cake fa-fw mr-1"></i></span>
DoB
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- SIGN -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-star-shooting fa-fw mr-1"></i></span>
Sign
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-heartbeat fa-fw mr-1"></i></span>
S.O.
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- HEIGHT -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-ruler-vertical fa-fw mr-1"></i></span>
Height
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- ALIGNMENT -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-scale-unbalanced fa-fw mr-1"></i></span>
Alignment
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-suitcase fa-fw mr-1"></i></span>
Occupation
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- HOMETOWN -->
<div class="row no-gutters justify-content-between">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-home fa-fw mr-1"></i></span>
Hometown
</span>
<span style="color: #cc795f;">
Content
</span>
</div>
<!-- THEME -->
<div class="row no-gutters justify-content-between align-items-center p-1 pl-3 pr-3" style="background: #ece4db;">
<span style="font-family: Georgia, serif;"><span><i class="fad fa-music fa-fw mr-1"></i></span>
Theme
</span>
<div class="card border-0 align-items-center justify-content-center tooltipster" style="height: 20px; width: 20px; overflow: hidden; background: none;"
title="Of Monsters And Men - Little Talks">
<i class="fad fa-circle-play fa-fw" style="color: #cc795f;"></i>
<iframe style="opacity: 0.001; height: 700%; width: 850%; position: absolute; bottom: 0px; left: -2px;"
src="https://www.youtube.com/embed/ghb6eDopW8I"></iframe>
<!-- YOUTUBE EMBED == INSERT EMBED CODE OF YOUR VIDEO
If you are struggling with what YT video ID is, let
me show you an example on the song that is embedded
here in code's preview.
Here's the whole video link:
https://www.youtube.com/watch?v=ghb6eDopW8I&ab_channel=ChannelName
And what we need is a string between "=" and "&":
https://www.youtube.com/watch?v= ghb6eDopW8I &ab_channel=ChannelName
And we put it here:
https://www.youtube.com/embed/ghb6eDopW8I
That's it!
-->
</div>
</div>
</div>
</div>
<!--
================================
LITTLE CHAT
This content card is up to your
imagination! You can write an
everyday dialog, a little plot
chat between two characters or just
come up with a random conversation
that will show character's demeanor,
lifeview, some strenghts or weak points
and so on!
================================
-->
<div class="col-12 col-lg-6 pt-2 pb-4">
<div class="row no-gutters">
<!-- LIGHT BUBBLE -->
<div class="col-12 pr-5">
<div class="row no-gutters pl-2">
<div class="col-auto p-2 px-3 my-1" style="border-radius: 2em; background: #ece4db; color: #765440;">
Content
</div>
</div>
</div>
<!-- DARK BUBBLE -->
<div class="col-12 pl-5 justify-content-end">
<div class="row no-gutters pr-2">
<div class="col-auto p-2 px-3 my-1" style="border-radius: 2em; background: #cc795f; color: #fff;">
Content
</div>
</div>
</div>
<!-- LIGHT BUBBLE -->
<div class="col-12 pr-5">
<div class="row no-gutters pl-2">
<div class="col-auto p-2 px-3 my-1" style="border-radius: 2em; background: #ece4db; color: #765440;">
Content
</div>
</div>
</div>
<!-- DARK BUBBLE -->
<div class="col-12 pl-5 justify-content-end">
<div class="row no-gutters pr-2">
<div class="col-auto p-2 px-3 my-1" style="border-radius: 2em; background: #cc795f; color: #fff;">
Content
</div>
</div>
</div>
<!-- YOU CAN ADD MORE BUBBLES ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
================================
STATS TAB
================================
-->
<div class="tab-pane fade" id="stats">
<div style="height: 286px; overflow: auto;">
<div class="row no-gutters" style="font-family: Georgia, serif; font-size: 16px; color: #765440;">
<!--
==============================
PROGRESS BARS
==============================
-->
<div class="col-12 col-lg-6 p-1">
<!-- EXTROVERTED == INTROVERTED -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Extroverted</span>
<span>Introverted</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Instinctive</span>
<span>Calculated</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- POLITE == SASSY -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Polite</span>
<span>Sassy</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Deceptive</span>
<span>Sincere</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Indifferent</span>
<span>Emotional</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="col mb-2">
<div class="row no-gutters justify-content-between mb-1">
<span>Reserved</span>
<span>Affectionate</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
<!-- LONE WOLF == TEAM PLAYER -->
<div class="col">
<div class="row no-gutters justify-content-between mb-1">
<span>Lone wolf</span>
<span>Team player</span>
</div>
<div class="progress" style="height: 3px; overflow: visible; background: #765440;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: none; margin-top: -3px;
width: 50%
;">
<i class="fas fa-circle pull-right" style="color: #cc795f;"></i>
</div>
</div>
</div>
</div>
<!--
==============================
STANDALONE STATS
==============================
-->
<div class="col-12 col-lg-6 p-1" style="font-size: 20px;">
<!-- CHARISMA STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Charisma
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Courage
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- LOYALTY STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Loyalty
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Intellect
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Patience
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
Kindness
</div>
<div class="col justify-content-end" style="color: #cc795f;">
<div class="row no-gutters">
<!-- STAT CIRCLES == Use FAD for solid and FAL for empty -->
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fad fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
<i class="fal fa-circle-dot fa-fw"></i>
</div>
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters justify-content-between pr-2" style="font-size: 16px;">
<span style="font-family: Georgia, serif; color: #cc795f;"><span><i class="fad fa-head-side-brain fa-fw mr-1"></i></span>
MBTI
</span>
<span>
Content
</span>
</div>
<!-- ARCHETYPE -->
<div class="row no-gutters justify-content-between pr-2" style="font-size: 16px;">
<span style="font-family: Georgia, serif; color: #cc795f;"><span><i class="fad fa-circle-o fa-fw mr-1"></i></span>
Archetype
</span>
<span>
Content
</span>
</div>
<!-- LEADING TRAIT (POSITIVE TRAIT) -->
<div class="row no-gutters justify-content-between pr-2" style="font-size: 16px;">
<span style="font-family: Georgia, serif; color: #cc795f;"><span><i class="fad fa-smile fa-fw mr-1"></i></span>
Leading trait
</span>
<span>
Trait
</span>
</div>
<!-- BIGGEST FLAW (NEGATIVE TRAIT) -->
<div class="row no-gutters justify-content-between pr-2" style="font-size: 16px;">
<span style="font-family: Georgia, serif; color: #cc795f;"><span><i class="fad fa-frown fa-fw mr-1"></i></span>
Biggest flaw
</span>
<span>
Trait
</span>
</div>
</div>
</div>
</div>
</div>
<!--
================================
DESIGN TAB
================================
-->
<div class="tab-pane fade" id="look">
<div style="height: 286px; overflow: auto;">
<div class="row no-gutters">
<!--
============================
IMAGE + PALETTE
============================
-->
<div class="col-12 col-lg">
<div class="col p-2" style="height: 286px; position: sticky; top: 0px;">
<div class="card border-0 h-100 p-2" style="background: #765440;">
<div class="card h-100 p-1" style="background: #F6F0EA;">
<!-- CHARACTER IMAGE -->
<div class="card h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: top;
">
<!-- CHARACTER PALETTE -->
<div class="w-100 p-1" style="position: absolute; bottom: 0px;">
<div class="card" style="border-radius: 0px 0px 2px 2px; background: #765440; padding: 2px;">
<div class="row no-gutters" style="min-height: 15px;">
<!-- PALETTE COLOR -->
<div class="col" style="background: #ccc;"></div>
<!-- PALETTE COLOR -->
<div class="col" style="background: #aaa;"></div>
<!-- PALETTE COLOR -->
<div class="col" style="background: #999;"></div>
<!-- PALETTE COLOR -->
<div class="col" style="background: #777;"></div>
<!-- PALETTE COLOR -->
<div class="col" style="background: #555;"></div>
<!-- YOU CAN ADD MORE COLORS ABOVE -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
================================
DESIGN NOTES
================================
-->
<div class="col-12 col-lg-6 p-2">
<p class="text-center" style="font-family: Georgia, serif; font-size: 20px; color: #765440;">
Design notes <i class="fad fa-pencil fa-fw"></i>
</p>
<ul class="list-group ml-4">
<!-- LIST ITEM -->
<li style="color: #cc795f;"><span style="color: #765440;">
Lorem ipsum dolor sit amet, consec adipiscing elit.
</span></li>
<!-- LIST ITEM -->
<li style="color: #cc795f;"><span style="color: #765440;">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- LIST ITEM -->
<li style="color: #cc795f;"><span style="color: #765440;">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
<!-- LIST ITEM -->
<li style="color: #cc795f;"><span style="color: #765440;">
Duis porta eros et velit blandit dapibus.
</span></li>
<!-- LIST ITEM -->
<li style="color: #cc795f;"><span style="color: #765440;">
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</span></li>
<!-- YOU CAN ADD MORE ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<!--
================================
STORY TAB
================================
-->
<div class="tab-pane fade" id="story">
<div class="p-2 text-justify" style="height: 286px; overflow: auto; color: #765440;">
<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>
<!-- SUBHEADER -->
<p class="mb-0" style="font-family: Georgia, serif; font-size: 20px;"><i class="fad fa-bookmark fa-fw"></i>
Subheader
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- SUBHEADER -->
<p class="mb-0" style="font-family: Georgia, serif; font-size: 20px;"><i class="fad fa-bookmark fa-fw"></i>
Subheader
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=====================================
DIS/LIKES & HOBBIES BLOCK
=====================================
-->
<div class="col-12 col-lg-9 mt-3 pr-lg-3">
<div class="card border-0 h-100 pt-3 pl-3 pr-1 pb-1" style="background: #ece4db; color: #765440;">
<div class="h-100 pt-1 pl-1" style="border: dashed 2px #765440; border-right: 0px; border-bottom: 0px;">
<div class="h-100" style="border: dashed 2px #cc795f; border-right: 0px; border-bottom: 0px; overflow: auto;">
<div class="row no-gutters p-2 ">
<!-- LIKES SECTION -->
<div class="col-12 col-lg p-2 mr-0 mr-lg-2 mb-2 mb-lg-0" style="background: #F6F0EA;">
<span style="font-size: 20px; color: #cc795f;">
Likes
<span class="pull-right"><i class="fad fa-circle-heart"></i></span></span>
<ul class="list-group pl-4 mt-1 pb-3 p-2" style="font-family: Brush Script MT, cursive; border-top: dotted 6px #ece4db;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
</ul>
</div>
<!-- DISLIKES SECTION -->
<div class="col-12 col-lg p-2 mr-0 mr-lg-2 mb-2 mb-lg-0" style="background: #F6F0EA;">
<span style="font-size: 20px; color: #cc795f;">
Disikes
<span class="pull-right"><i class="fad fa-circle-x"></i></span></span>
<ul class="list-group pl-4 mt-1 pb-3 p-2" style="font-family: Brush Script MT, cursive; border-top: dotted 6px #ece4db;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
</ul>
</div>
<!-- HOBBIES SECTION -->
<div class="col-12 col-lg p-2 mr-0 mr-lg-2" style="background: #F6F0EA;">
<span style="font-size: 20px; color: #cc795f;">
Hobbies
<span class="pull-right"><i class="fad fa-circle-star"></i></span></span>
<ul class="list-group pl-4 mt-1 pb-3 p-2" style="font-family: Brush Script MT, cursive; border-top: dotted 6px #ece4db;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
<!-- LIST ITEM -->
<li>
Content
</li>
<hr class="w-100 m-0" style="background: #D7CEC4;">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=====================================
TOP AESTHETIC BLOCK
=====================================
-->
<div class="card border-0 col-12 col-lg-3 mt-3 p-2 order-1 order-lg-0" style="background: #765440; min-height: 220px;">
<div class="card h-100 p-2" style="border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="rounded h-100" style="border: dashed 2px #ece4db;"></div>
</div>
</div>
<!--
=====================================
RELATIONSHIPS BLOCK
=====================================
-->
<div class="card col-12 col-lg mt-3 mr-3 border-0" style="background: #ece4db;">
<div class="row no-gutters h-100 p-1 pl-3">
<!-- STITCHED BORDERS -->
<div class="col-auto h-100 pr-1" style="border-left: dashed 2px #765440; border-right: dashed 2px #cc795f;"></div>
<div class="col ml-3 mr-3" style="background: #F6F0EA;">
<!-- RELATIONSHIPS HEADER -->
<div class="row no-gutters p-1" style="font-size: 17px;">
<div class="col-auto align-items-center pl-2">
<a href="#beep" data-slide="prev" style="color: #cc795f;"><i class="fad fa-angles-left"></i></a>
</div>
<div class="col"><p class="text-center" style="color: #cc795f;">
Relationships
</p></div>
<div class="col-auto align-items-center pr-2">
<a href="#beep" data-slide="next" style="color: #cc795f;"><i class="fad fa-angles-right"></i></a>
</div>
</div>
<div class="carousel slide" id="beep" data-ride="false" data-pause="true" style="border-top: dotted 6px #ece4db;">
<div class="carousel-inner">
<!--
====================================
CHARACTER RELATIONSHIP BLOCK
====================================
-->
<div class="carousel-item active">
<div class="row no-gutters">
<!-- CHARACTER IMAGE CARD -->
<div class="col-12 col-lg-5 p-2 justify-content-center align-items-center">
<div class="card p-2 border-0" style="height: 155px; width: 150px; background: #765440;">
<!-- CHARACTER IMAGE -->
<div class="card h-100" style=" border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
<!-- NAME + INFO CARD -->
<div class="col-12 col-lg p-2">
<!-- CHARACTER NAME + RELATIONSHIP-->
<div class="row no-gutters justify-content-between" style="font-family: Georgia, serif; font-size: 18px;">
<a target="_BLANK" style="color: #cc795f;"
href="LINK_HERE">
Character Name
</a>
<i style="color: #cc795f; margin-top: 5px; animation-duration: 1.5s;"
title="Relationship"
class="fad fa-rings-wedding fa-beat fa-fw tooltipster"></i>
<!-- FA ICON == replace "rings-wedding" with other icon name -->
</div>
<div class="p-2 pl-lg-0 text-justify small" style="height: 128px; overflow: auto; color: #765440;">
<!-- RELATIONSHIP DESCRIPTION -->
<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.</p>
</div>
</div>
</div>
</div>
<!--
====================================
CHARACTER RELATIONSHIP BLOCK
====================================
-->
<div class="carousel-item">
<div class="row no-gutters">
<!-- CHARACTER IMAGE CARD -->
<div class="col-12 col-lg-5 p-2 justify-content-center align-items-center">
<div class="card p-2 border-0" style="height: 155px; width: 150px; background: #765440;">
<!-- CHARACTER IMAGE -->
<div class="card h-100" style=" border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
<!-- NAME + INFO CARD -->
<div class="col-12 col-lg p-2">
<!-- CHARACTER NAME + RELATIONSHIP-->
<div class="row no-gutters justify-content-between" style="font-family: Georgia, serif; font-size: 18px;">
<a target="_BLANK" style="color: #cc795f;"
href="LINK_HERE">
Character Name
</a>
<i style="color: #cc795f; margin-top: 5px; animation-duration: 1.5s;"
title="Relationship"
class="fad fa-handshake-angle fa-beat fa-fw tooltipster"></i>
<!-- FA ICON == replace "handshake-angle" with other icon name -->
</div>
<div class="p-2 pl-lg-0 text-justify small" style="height: 128px; overflow: auto; color: #765440;">
<!-- RELATIONSHIP DESCRIPTION -->
<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>
<!--
====================================
CHARACTER RELATIONSHIP BLOCK
====================================
-->
<div class="carousel-item">
<div class="row no-gutters">
<!-- CHARACTER IMAGE CARD -->
<div class="col-12 col-lg-5 p-2 justify-content-center align-items-center">
<div class="card p-2 border-0" style="height: 155px; width: 150px; background: #765440;">
<!-- CHARACTER IMAGE -->
<div class="card h-100" style=" border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
"></div>
</div>
</div>
<!-- NAME + INFO CARD -->
<div class="col-12 col-lg p-2">
<!-- CHARACTER NAME + RELATIONSHIP-->
<div class="row no-gutters justify-content-between" style="font-family: Georgia, serif; font-size: 18px;">
<a target="_BLANK" style="color: #cc795f;"
href="LINK_HERE">
Character Name
</a>
<i style="color: #cc795f; margin-top: 5px; animation-duration: 1.5s;"
title="Relationship"
class="fad fa-skull fa-beat fa-fw tooltipster"></i>
<!-- FA ICON == replace "skull" with other icon name -->
</div>
<div class="p-2 pl-lg-0 text-justify small" style="height: 128px; overflow: auto; color: #765440;">
<!-- RELATIONSHIP DESCRIPTION -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
</div>
<!-- ADD MORE RELATIONSHIP BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
=====================================
LEFT AESTHETIC BLOCK
=====================================
-->
<div class="card border-0 col-12 col-lg-3 mr-3 mt-3 p-2 order-2 order-lg-0" style="background: #765440; min-height: 220px;">
<div class="card h-100 p-2" style="border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: bottom;">
<div class="rounded h-100" style="border: dashed 2px #ece4db;"></div>
</div>
</div>
<!--
=====================================
CORNER AESTHETIC BLOCK
=====================================
-->
<div class="card border-0 col-12 col-lg-3 mt-3 p-2 order-1 order-lg-0" style="background: #765440; min-height: 220px;">
<div class="card h-100 p-2" style="border: solid 3px #ece4db;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="rounded h-100" style="border: dashed 2px #ece4db;"></div>
</div>
</div>
<!-- MY CREDIT == DO NOT REMOVE -->
<div class="card border-0 col-12 p-1 mt-3 align-items-center order-2 order-lg-0" style="background: #ece4db;">
<a title="Code by ChiiAka" class="tooltipster" style="color: #cc795f;" href="https://toyhou.se/ChiiAka"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>