<!-- THIS CODE USES THEME COLORS
21. || Florem || F2U
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-4" style="margin-top: -60px;">
<div class="container px-2 px-lg-0" style="max-width: 920px;">
<div class="row no-gutters">
<!--
==========================================
CHARACTER IMAGE & BASICS
==========================================
-->
<div class="col-12 col-lg-3 pr-lg-1 mb-4 mb-lg-0">
<!--
=================================
CHARACTER IMAGE
=================================
-->
<div class="bg-faded p-2" style="height: 210px; border-radius: 3em 0em 0em 0em; position: relative;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="text-white h-100 w-100" style="border: solid 2px; border-radius: 2.5em 0em 0em 0em; text-shadow: 0px 0px 5px #111; box-shadow: 0px 0px 5px #999;">
<i class="fab fa-pagelines fa-4x text-success" style="position: absolute; right: -5px; bottom: -11px; transform: rotate(15deg); z-index: 2;"></i>
<i class="fab fa-pagelines fa-4x text-success" style="position: absolute; left: -5px; top: -11px; transform: rotate(-165deg); z-index: 2;"></i>
</div>
</div>
<!--
=================================
BASIC INFO
=================================
-->
<div class="bg-faded mt-2 p-2" style="min-height: 350px; border-radius: 0em 0em 0em 3em;">
<!-- CHARACTER NAME -->
<div class="col text-center">
<span style="font-size: 16px;">
Character name
</span>
<div class="row no-gutters mt-n2 mb-n2">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto">
<!-- FA ICON -->
<i class="fal fa-sprout fa-fw mx-1" style="margin-top: 7px; opacity: .4"></i>
</div>
<div class="col"><hr class="mb-0"></div>
</div>
<span class="text-success text-uppercase small font-italic">
Name
</span>
</div>
<!-- GENDER -->
<div class="col text-center">
<span style="font-size: 16px;">
Content
</span>
<div class="row no-gutters mt-n2 mb-n2">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto">
<!-- FA ICON -->
<i class="fal fa-venus-mars fa-fw mx-1" style="margin-top: 7px; opacity: .4"></i>
</div>
<div class="col"><hr class="mb-0"></div>
</div>
<span class="text-success text-uppercase small font-italic">
Gender
</span>
</div>
<!-- AGE -->
<div class="col text-center">
<span style="font-size: 16px;">
Content
</span>
<div class="row no-gutters mt-n2 mb-n2">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto">
<!-- FA ICON -->
<i class="fal fa-hourglass-empty fa-fw mx-1" style="margin-top: 7px; opacity: .4"></i>
</div>
<div class="col"><hr class="mb-0"></div>
</div>
<span class="text-success text-uppercase small font-italic">
Age
</span>
</div>
<!-- SPECIES -->
<div class="col text-center">
<span style="font-size: 16px;">
Content
</span>
<div class="row no-gutters mt-n2 mb-n2">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto">
<!-- FA ICON -->
<i class="fal fa-paw fa-fw mx-1" style="margin-top: 7px; opacity: .4"></i>
</div>
<div class="col"><hr class="mb-0"></div>
</div>
<span class="text-success text-uppercase small font-italic">
Species
</span>
</div>
<!-- OCUPPATION -->
<div class="col text-center">
<span style="font-size: 16px;">
Content
</span>
<div class="row no-gutters mt-n2 mb-n2">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto">
<!-- FA ICON -->
<i class="fal fa-suitcase fa-fw mx-1" style="margin-top: 7px; opacity: .4"></i>
</div>
<div class="col"><hr class="mb-0"></div>
</div>
<span class="text-success text-uppercase small font-italic">
Occupation
</span>
</div>
<!-- THEME -->
<div class="card border-0 mt-2 bg-success" style="border-radius: 0em 0em 0em 2.5em; overflow: hidden;">
<div class="row no-gutters text-white" style="min-height: 56px;">
<div class="d-flex col-auto align-items-center justify-content-center p-2">
<i class="fal fa-compact-disc fa-2x fa-spin" style="position: absolute;"></i>
<div class="card border-0" style="width: 32px; height: 32px; overflow: hidden; background: none; position: relative;">
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -2px; left: -2px;"
src="https://www.youtube.com/embed/VIDEOIDHERE"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
<div class="col h-100 text-center font-italic mt-1 text-truncate">
<p class="text-truncate">
Song name
</p>
<hr class="mb-n1 mx-2 bg-white" style="opacity: .4; margin-top: 2px;">
<i class="text-uppercase text-truncate" style="font-size: 11px;">
Author
</i>
</div>
</div>
</div>
</div>
</div>
<!--
==========================================
MAIN INFORMATION ROW
==========================================
-->
<div class="col-12 col-lg-9 pl-lg-1" style="border-radius: 0em 3em 3em 0em; overflow: hidden;">
<div class="row no-gutters">
<div class="col-12 bg-faded mb-2">
<div class="row no-gutters">
<!--
===================================
MAIN INFO NAV BUTTONS
===================================
-->
<div class="col-12 col-lg-1 order-1 order-lg-0">
<ul class="nav row no-gutters h-100">
<li class="col col-lg-12 p-0 nav-item">
<a class="nav-link active text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#intro">
<i class="fal fa-sprout" style="font-size: 25px;"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item">
<a class="nav-link text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#stats">
<i class="fal fa-sliders" style="font-size: 25px;"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item">
<a class="nav-link text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#story">
<i class="fal fa-book" style="font-size: 25px;"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item">
<a class="nav-link text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#links">
<i class="fal fa-users" style="font-size: 25px;"></i>
</a>
</li>
</ul>
</div>
<!--
===================================
MAIN INFO TABS
===================================
-->
<div class="col-12 col-lg-11 py-2 pr-2" style="height: 340px;">
<div class="h-100 border-left-0 py-2 pr-2 text-success" style="border-radius: 0em 2.5em 0em 0em; border: solid 3px; overflow: hidden; ">
<!-- TABS BACKGROUND
The default one kinda fits the greenhouse/nature theme
but you're free to change it to another!
-->
<div class="tab-content h-100" style="border-radius: 0em 2.1em 0em 0em; overflow: hidden; position: relative; text-shadow: 0px 0px 5px black; font-weight: 600;
background-image: url(https://images.unsplash.com/uploads/1411901100260f56b39b9/ab70b250?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
background-size: cover;
background-position: center;">
<div class="w-100 h-100 bg-dark" style="position: absolute; left: 0px; top: 0px; opacity: .7;"></div>
<div class="card border-0 tab-content h-100 text-white" style="background: none;">
<!--
===================================================
OVERVIEW TAB
===================================================
-->
<div class="tab-pane fade in active show h-100" id="intro" style="overflow: auto;">
<div class="row no-gutters">
<div class="col-12 col-lg-6 mt-4 mt-lg-0">
<div class="p-2 px-3" style="height: 302px; position: sticky; top: 0px;">
<div class="h-100 p-4" style="border: solid 2px; position: relative; font-size: 15px; box-shadow: 0px 0px 5px black;">
<!-- DECORATIVE BRANCHES IN THE BOX CORNERS -->
<i class="fab fa-pagelines" style="position: absolute; top: 15px; left: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-rotate-180" style="position: absolute; top: 0px; left: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-vertical" style="position: absolute; bottom: 15px; left: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-horizontal" style="position: absolute; bottom: 0px; left: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-horizontal" style="position: absolute; top: 15px; right: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-vertical" style="position: absolute; top: 0px; right: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-rotate-180" style="position: absolute; bottom: 15px; right: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines" style="position: absolute; bottom: 0px; right: 10px; font-size: 20px;"></i>
<!-- DOB -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
DoB
</span>
<span>
Content
</span>
</div>
<!-- SIGN -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Sign
</span>
<span>
Content
</span>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Pronouns
</span>
<span>
Cont/Cont
</span>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
S.O.
</span>
<span>
Content
</span>
</div>
<!-- DIVIDER -->
<div class="row no-gutters">
<div class="col"><hr class="w-100" style="border-top: solid 1px #fff;"></div>
<div class="col-auto"><i class="fal fa-sprout m-1 mt-2"></i></div>
<div class="col"><hr class="w-100" style="border-top: solid 1px #fff;"></div>
</div>
<!-- HEIGHT -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Height
</span>
<span>
Content
</span>
</div>
<!-- BUILD -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Build
</span>
<span>
Content
</span>
</div>
<!-- EYES COLOR -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Eyes
</span>
<span>
Color
</span>
</div>
<!-- SKIN COLOR -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Skin
</span>
<span>
Color
</span>
</div>
<!-- HAIR COLOR -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Hair
</span>
<span>
Color
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 text-justify p-2">
<!-- CHARACTER OVERVIEW -->
<div class="col p-0">
<h1 class="text-uppercase text-success font-italic pr-lg-2" style="font-size: 25px;">
Overview
<!-- FA ICON == You can replace "leaf" with another FA icon name -->
<span class="pull-right"><i class="fal fa-leaf fa-fw"></i></span></h1>
<p>
Write a small intro for your character. 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. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
</div>
<!-- CHARACTER TRIVIA -->
<div class="col p-0 pt-4">
<h1 class="text-uppercase text-success font-italic pr-lg-2" style="font-size: 25px;">
Trivia
<!-- FA ICON -->
<span class="pull-right"><i class="fal fa-circle-question fa-fw"></i></span></h1>
<ul class="list-group pl-3">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>
<li>
Curabitur ac finibus eros.
</li>
<li>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE TRIVIA ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<!--
===================================================
PERSONALITY TAB
===================================================
-->
<div class="tab-pane fade h-100 p-2 py-3 pr-lg-3" id="stats" style="overflow: auto;">
<div class="row no-gutters">
<!--
==================================
STANDALONE STATS PLANTS
==================================
-->
<div class="col-12">
<div class="row no-gutters justify-content-around">
<!-- CHARISMA PLANT -->
<div class="col-4 col-lg-auto px-1 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Charisma
</div>
</div>
</div>
<!-- PATIENCE PLANT -->
<div class="col-4 col-lg-auto px-1 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Patience
</div>
</div>
</div>
<!-- COURAGE PLANT -->
<div class="col-4 col-lg-auto px-1 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Courage
</div>
</div>
</div>
<!-- INTELLECT PLANT -->
<div class="col-4 col-lg-auto px-1 mt-3 mt-lg-0 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Intellect
</div>
</div>
</div>
<!-- MANNERS PLANT -->
<div class="col-4 col-lg-auto px-1 mt-3 mt-lg-0 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Manners
</div>
</div>
</div>
<!-- HUMOUR PLANT -->
<div class="col-4 col-lg-auto px-1 mt-3 mt-lg-0 align-items-end" style="height: 175px;">
<div class="col p-0">
<div class="row no-gutters justify-content-center" style="font-size: 25px;">
<div class="card border-0 col-auto text-success" style="background: none;">
<!-- SPROUTS ICONS
Use FAL for EMPTY ones, FAS for SOLID
-->
<i class="fal fa-sprout fa-fw"></i>
<i class="fal fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-sprout fa-fw"></i>
<i class="fas fa-mug fa-fw text-white" style="margin-left: 3px;"></i>
</div>
</div>
<div class="text-center text-uppercase px-2" style="border: solid 2px; font-size: 11px;">
Humour
</div>
</div>
</div>
</div>
</div>
<!-- DIVIDER WITH SPROUT -->
<div class="col-12">
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 2px; box-shadow: 0px 0px 5px black;"></div>
<div class="col-auto">
<i class="far fa-sprout fa-fw m-1 mt-2 text-success"></i>
</div>
<div class="col"><hr class="text-success" style="border-top: solid 2px; box-shadow: 0px 0px 5px black;"></div>
</div>
</div>
<!--
==================================
TWO-SIDED STATS
==================================
-->
<div class="col-12 col-lg-5">
<!-- EXTROVERTED == INTROVERTED -->
<div class="col p-0 px-lg-1 mb-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Extroverted
</span>
<span>
Introverted
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="col p-0 px-lg-1 mb-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Instinctive
</span>
<span>
Calculated
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="col p-0 px-lg-1 mb-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Deceptive
</span>
<span>
Sincere
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="col p-0 px-lg-1 mb-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Indifferent
</span>
<span>
Emotional
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="col p-0 px-lg-1 mb-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Reserved
</span>
<span>
Affectionate
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
<!-- COOPERATIVE == LONE WOLF -->
<div class="col p-0 px-lg-1">
<div class="row no-gutters justify-content-between text-uppercase small">
<span>
Cooperative
</span>
<span>
Lone wolf
</span>
</div>
<div class="progress border-left-0 border-right-0 py-1" style="background: none; border-radius: 0px; border: double 1px;">
<div class="progress-bar bg-success" style=" height: 4px;
width: 50%;"></div>
</div>
</div>
</div>
<!--
==================================
PERSONALITY INFO
==================================
-->
<div class="col-12 col-lg-7 p-2 mt-lg-1">
<div class="p-4" style="border: solid 2px; border-top: double 6px; border-bottom: double 6px; box-shadow: 0px 0px 5px black; position: relative;">
<!-- DECORATIVE BRANCHES IN THE BOX CORNERS -->
<i class="fab fa-pagelines" style="position: absolute; top: 15px; left: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-rotate-180" style="position: absolute; top: 0px; left: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-vertical" style="position: absolute; bottom: 15px; left: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-horizontal" style="position: absolute; bottom: 0px; left: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-horizontal" style="position: absolute; top: 15px; right: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-flip-vertical" style="position: absolute; top: 0px; right: 10px; font-size: 20px;"></i>
<i class="fab fa-pagelines fa-rotate-180" style="position: absolute; bottom: 15px; right: 0px; font-size: 20px;"></i>
<i class="fab fa-pagelines" style="position: absolute; bottom: 0px; right: 10px; font-size: 20px;"></i>
<!-- DOMINANT HAND -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Dom. hand
</span>
<span>
Left/right
</span>
</div>
<!-- ATTITUDE (PESSIMIST/OPTIMIST/REALIST/ETC.) -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Attitude
</span>
<span>
Content
</span>
</div>
<!-- MBTI -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
MBTI
</span>
<span>
XXXX (Content)
</span>
</div>
<!-- ARCHETYPE -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Archetype
</span>
<span>
Content
</span>
</div>
<!-- LEADING TRAIT (TRAIT) -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Leading trait
</span>
<span>
Trait
</span>
</div>
<!-- BIGGEST FLAW (TRAIT) -->
<div class="row no-gutters justify-content-between">
<span class="text-success text-uppercase font-italic">
Biggest flaw
</span>
<span>
Trait
</span>
</div>
</div>
</div>
<!-- DIVIDER WITH SPROUT -->
<div class="col-12">
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 2px; box-shadow: 0px 0px 5px black;"></div>
<div class="col-auto">
<i class="far fa-sprout fa-fw m-1 mt-2 text-success"></i>
</div>
<div class="col"><hr class="text-success" style="border-top: solid 2px; box-shadow: 0px 0px 5px black;"></div>
</div>
</div>
<!--
==================================
FAVORITE STUFF
==================================
-->
<div class="col-12 mt-n1">
<h2 class="text-center text-uppercase font-italic">
Favorite:
</h2>
<div class="row no-gutters">
<!-- FAV FOOD -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Food name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-pot-food fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV DRINK/BEVERAGE -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Beverage name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-cup-straw fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV SCENT -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Scent name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-spray-can-sparkles fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV COLOR -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Color name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-palette fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV FLOWER -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Flower name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-flower fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV ANIMAL -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Animal name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-paw fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV SEASON -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Season name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-clouds-sun fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV NUMBER -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Number
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-input-numeric fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV CLOTHING ITEM -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Cloth/misc item name
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-scarf fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
<!-- FAV MUSIC GENRE -->
<div class="col-12 col-lg-6 px-1 px-lg-2">
<h4 class="text-center m-0">
Genre
</h4>
<div class="row no-gutters">
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
<div class="col-auto"><i class="far fa-music fa-fw m-1 mt-2 text-success"></i></div>
<div class="col"><hr class="text-success" style="border-top: solid 1px; box-shadow: 0px 0px 3px black;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===================================================
STORY TAB
===================================================
-->
<div class="tab-pane fade h-100 text-justify p-2 py-3 pr-lg-3" id="story" style="overflow: auto;">
<!-- SUBHEADER -->
<h1 class="text-success text-uppercase font-italic">
Subheader
<span class="pull-left mr-1"><i class="fal fa-bookmark"></i></span></h1>
<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 -->
<h1 class="text-success text-uppercase font-italic">
Subheader
<span class="pull-left mr-1"><i class="fal fa-bookmark"></i></span></h1>
<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>
</div>
<!--
===================================================
RELATIONSHIPS TAB
===================================================
-->
<div class="tab-pane fade h-100 p-2 py-3 pr-lg-3" id="links" style="overflow: auto;">
<div class="row no-gutters">
<!--
=====================================
RELATIONSHIP BLOCK (LEFT)
=====================================
-->
<div class="col-12 mb-3">
<!--
=======================================
RELATED CHARACTER IMAGE
=======================================
-->
<div class="float-lg-left pr-lg-2">
<div class="d-block mx-auto rounded-circle p-1" style="border: solid 2px; height: 150px; width: 150px;">
<div class="rounded-circle h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="row no-gutters justify-content-between align-items-baseline mt-1" style="font-size: 16px;">
<!--
=======================================
CHARACTER NAME + LINK
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center">
<a class="text-success" target="_BLANK" style="font-size: 25px; font-weight: 400;"
href="LINK_HERE">
Character Name
</a>
</div>
<!--
=======================================
CHARACTER RELATIONSHIP
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center order-1 order-lg-0 mt-n2 mt-lg-0 mb-2 mb-lg-0">
[ relationship ]
</div>
<!--
=======================================
DIVIDER WITH RELATIONSHIP ICON
=======================================
-->
<div class="col-12 mt-n2">
<div class="row no-gutters">
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
<div class="col-auto">
<!-- RELATIONSHIP ICON == Replace "rings-wedding" with another FA icon name -->
<i class="far fa-rings-wedding fa-fw mx-1" style="margin-top: 7px;"></i>
</div>
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
</div>
</div>
</div>
<!--
=======================================
RELATIONSHIP DESCRIPTION
=======================================
-->
<p class="text-justify">
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. 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>
</div>
<!--
=====================================
RELATIONSHIP BLOCK (RIGHT)
=====================================
-->
<div class="col-12 mb-3">
<!--
=======================================
RELATED CHARACTER IMAGE
=======================================
-->
<div class="float-lg-right pl-lg-2">
<div class="d-block mx-auto rounded-circle p-1" style="border: solid 2px; height: 150px; width: 150px;">
<div class="rounded-circle h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="row no-gutters justify-content-between align-items-baseline mt-1" style="font-size: 16px;">
<!--
=======================================
CHARACTER NAME + LINK
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center">
<a class="text-success" target="_BLANK" style="font-size: 25px; font-weight: 400;"
href="LINK_HERE">
Character Name
</a>
</div>
<!--
=======================================
CHARACTER RELATIONSHIP
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center order-1 order-lg-0 mt-n2 mt-lg-0 mb-2 mb-lg-0">
[ relationship ]
</div>
<!--
=======================================
DIVIDER WITH RELATIONSHIP ICON
=======================================
-->
<div class="col-12 mt-n2">
<div class="row no-gutters">
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
<div class="col-auto">
<!-- RELATIONSHIP ICON == Replace "handshake-angle" with another FA icon name -->
<i class="far fa-handshake-angle fa-fw mx-1" style="margin-top: 7px;"></i>
</div>
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
</div>
</div>
</div>
<!--
=======================================
RELATIONSHIP DESCRIPTION
=======================================
-->
<p class="text-justify">
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. 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>
</div>
<!--
=====================================
RELATIONSHIP BLOCK (LEFT)
=====================================
-->
<div class="col-12 mb-3">
<!--
=======================================
RELATED CHARACTER IMAGE
=======================================
-->
<div class="float-lg-left pr-lg-2">
<div class="d-block mx-auto rounded-circle p-1" style="border: solid 2px; height: 150px; width: 150px;">
<div class="rounded-circle h-100" style="
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="row no-gutters justify-content-between align-items-baseline mt-1" style="font-size: 16px;">
<!--
=======================================
CHARACTER NAME + LINK
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center">
<a class="text-success" target="_BLANK" style="font-size: 25px; font-weight: 400;"
href="LINK_HERE">
Character Name
</a>
</div>
<!--
=======================================
CHARACTER RELATIONSHIP
=======================================
-->
<div class="col-12 col-lg-auto justify-content-center order-1 order-lg-0 mt-n2 mt-lg-0 mb-2 mb-lg-0">
[ relationship ]
</div>
<!--
=======================================
DIVIDER WITH RELATIONSHIP ICON
=======================================
-->
<div class="col-12 mt-n2">
<div class="row no-gutters">
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
<div class="col-auto">
<!-- RELATIONSHIP ICON == Replace "skull" with another FA icon name -->
<i class="far fa-skull fa-fw mx-1" style="margin-top: 7px;"></i>
</div>
<div class="col"><hr class="text-white" style="border-top: solid 1px;"></div>
</div>
</div>
</div>
<!--
=======================================
RELATIONSHIP DESCRIPTION
=======================================
-->
<p class="text-justify">
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. 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>
</div>
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===================================
LIKES/DISLIKES
===================================
-->
<div class="col-12 col-lg-7 bg-faded" style="min-height: 220px;">
<div class="row no-gutters">
<!-- LIKES HEADER -->
<div class="col-12 col-lg-6 bg-success p-1 px-2" style="height: 37px;">
<p class="text-uppercase text-white font-italic" style="font-size: 18px;">
Likes
<span class="pull-right"><i class="fal fa-heartbeat"></i></span></p>
</div>
<!-- DISLIKES HEADER -->
<div class="col-12 col-lg-6 bg-success p-1 px-2 order-1 order-lg-0" style="height: 37px;">
<p class="text-uppercase text-white font-italic" style="font-size: 18px;">
Dislikes
<span class="pull-right"><i class="fal fa-heartbeat"></i></span></p>
</div>
<!-- LIKES LIST -->
<div class="col-12 col-lg p-1" style="min-height: 183px;">
<ul class="list-group pl-4">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
<!-- DIVIDER -->
<div class="col-auto align-self-stretch flex-column ">
<div class="card flex-grow-1 border-right-0 border-bottom-0"></div>
</div>
<!-- DISLIKES LIST -->
<div class="col-12 col-lg p-1 order-2 order-lg-0" style="min-height: 183px;">
<ul class="list-group pl-4">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
</div>
</div>
<!--
=============================
NAV BUTTONS
=============================
-->
<div class="col-12 col-lg-1 px-lg-2 py-2 py-lg-0">
<ul class="nav row no-gutters h-100">
<li class="col col-lg-12 p-0 nav-item mb-lg-2 mr-2 mr-lg-0">
<a class="nav-link p-0 py-2 py-lg-0 active text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#firstmood">
<i class="fas fa-1"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item mb-lg-2 mr-2 mr-lg-0">
<a class="nav-link p-0 text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#secondmood">
<i class="fas fa-2"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item mb-lg-2 mr-2 mr-lg-0">
<a class="nav-link p-0 text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#thirdmood">
<i class="fas fa-3"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item mb-lg-2 mr-2 mr-lg-0">
<a class="nav-link p-0 text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#fourthmood">
<i class="fas fa-4"></i>
</a>
</li>
<li class="col col-lg-12 p-0 nav-item">
<a class="nav-link p-0 text-white btn btn-success h-100 align-items-center justify-content-center" data-toggle="tab" style="border-radius: 0px;"
href="#fifthmood">
<i class="fas fa-5"></i>
</a>
</li>
</ul>
</div>
<!--
=============================
MOOD + QUOTE TAB
=============================
-->
<div class="col-12 col-lg bg-faded">
<div class="tab-content h-100 text-white">
<!--
=======================================
FIRST MOODBOARD (QUOTE)
=======================================
-->
<div class="tab-pane fade in active show h-100" id="firstmood" style="min-height: 120px;">
<div class="h-100 d-flex align-items-center" style="text-shadow: 0px 0px 5px black;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<i class="far fa-quote-left" style="position: absolute; left: 15px; top: 15px; font-size: 18px;"></i>
<p class="text-center font-italic p-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<i class="far fa-quote-right" style="position: absolute; right: 15px; bottom: 15px; font-size: 18px;"></i>
</div>
</div>
<!--
=======================================
SECOND MOODBOARD (ICON)
=======================================
-->
<div class="tab-pane fade h-100" id="secondmood" style="min-height: 120px;">
<div class="h-100 p-3" style="text-shadow: 0px 0px 5px black;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="text-white h-100 w-100 d-flex align-items-center justify-content-center" style="border: solid 2px; border-radius: 0em 0em 2.5em 0em; box-shadow: 0px 0px 5px black;">
<!-- FA ICON == Replace "flower" with other FA icon name -->
<i class="fal fa-flower fa-5x"></i>
</div>
</div>
</div>
<!--
=======================================
THIRD MOODBOARD (ICON)
=======================================
-->
<div class="tab-pane fade h-100" id="thirdmood" style="min-height: 120px;">
<div class="h-100 p-3" style="text-shadow: 0px 0px 5px black;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="text-white h-100 w-100 d-flex align-items-center justify-content-center" style="border: solid 2px; border-radius: 0em 0em 2.5em 0em; box-shadow: 0px 0px 5px black;">
<!-- FA ICON == Replace "leaf" with other FA icon name -->
<i class="fal fa-leaf fa-5x"></i>
</div>
</div>
</div>
<!--
=======================================
FOURTH MOODBOARD (ICON)
=======================================
-->
<div class="tab-pane fade h-100" id="fourthmood" style="min-height: 120px;">
<div class="h-100 p-3" style="text-shadow: 0px 0px 5px black;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="text-white h-100 w-100 d-flex align-items-center justify-content-center" style="border: solid 2px; border-radius: 0em 0em 2.5em 0em; box-shadow: 0px 0px 5px black;">
<!-- FA ICON == Replace "flower-tulip" with other FA icon name -->
<i class="fal fa-flower-tulip fa-5x"></i>
</div>
</div>
</div>
<!--
=======================================
FIFTH MOODBOARD (ICON)
=======================================
-->
<div class="tab-pane fade h-100" id="fifthmood" style="min-height: 120px;">
<div class="h-100 p-3" style="text-shadow: 0px 0px 5px black;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="text-white h-100 w-100 d-flex align-items-center justify-content-center" style="border: solid 2px; border-radius: 0em 0em 2.5em 0em; box-shadow: 0px 0px 5px black;">
<!-- FA ICON == Replace "sprout" with other FA icon name -->
<i class="fal fa-sprout fa-5x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CODE CREDIT == DO NOT REMOVE -->
<p class="text-center">
<a class="text-success tooltipster" href="https://toyhou.se/ChiiAka" title="Code by ChiiAka"><i class="fas fa-code"></i></a>
</p>
</div>