<!-- THIS CODE USES CUSTOM COLORS & THEME COLORS + CUSTOM ACCENT
31. || Scales || F2U
================================================================
FIRST GRADIENT COLOR + MAIN ACCENT == #65A0A6
SECOND GRADIENT COLOR == #C2D2C9
THIRD GRADIENT COLOR == #ECF6EF
PATTERN URL == https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png
Find & replace to change the pattern everywhere! Just be sure to use Black & white seamless pattern or it might not look good!
-->
<div class="py-5">
<div class="container p-0" style="max-width: 1000px;">
<div class="row no-gutters">
<!--
=========================================================
LEFT BLOCK (CHARACTER BANNER + BASICS)
=========================================================
-->
<div class="col-12 col-lg-4 p-2 flex-column">
<!--
=========================================================
CHARACTER BANNER
=========================================================
-->
<div class="card rounded-0 border-0 flex-grow-1 mb-3 px-4 pt-4" style="background: linear-gradient(to bottom, #65A0A6, #C2D2C9, #ECF6EF); overflow: hidden;">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply;"></div>
<div class="card border-0 h-100 px-1 pt-1" style="border-radius: 10em 10em 0 0; background-color: #f9f9f9; box-shadow: 0 0 10px rgba(51,51,51, .3);">
<div class="h-100" style="border-radius: 10em 10em 0 0; box-shadow: inset 0 0 10px rgba(51,51,51, .3); min-height: 300px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
=========================================================
CHARACTER BASICS
=========================================================
-->
<div class="card rounded-0 border-0 px-4" style="background-color: #ECF6EF; overflow: hidden;">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply;"></div>
<div class="card rounded-0 border-0 px-1" style="background-color: #f9f9f9; box-shadow: 0 0 10px rgba(51,51,51, .3);">
<div class="card rounded-0 border-0" style="background-color: #65A0A6;">
<div class="card rounded-0 border-0 rounded-0 bg-transparent align-items-center justify-content-center text-center">
<a data-toggle="collapse" data-target=".basics" style="font-size: 25px; color: #f9f9f9;">
<i class="fal fa-angle-up"></i>
</a>
<div class="card rounded-0 border-0 w-100 h-100 align-items-center justify-content-center text-center collapse fade basics" style="position: absolute; top: 0px; left: 0px; transition-duration: .1s; background-color: #65A0A6;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target=".basics">
<i class="fal fa-angle-down mt-2" style="font-size: 25px; color: #f9f9f9;"></i>
</a>
</div>
</div>
<div class="collapse basics">
<div class="px-2 pt-2 text-lowercase" style="color: #f9f9f9; font-variant: small-caps; font-size: 17px;">
<!-- GENDER -->
<div class="row no-gutters">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-venus-mars fa-fw fa-xs"></i></div>
<div class="col-auto">
gender
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-comments fa-fw fa-xs"></i></div>
<div class="col-auto">
pronouns
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- AGE -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-hourglass fa-fw fa-xs"></i></div>
<div class="col-auto">
age
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-heartbeat fa-fw fa-xs"></i></div>
<div class="col-auto">
S.O.
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- DOB -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-birthday-cake fa-fw fa-xs"></i></div>
<div class="col-auto">
dob
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- SIGN -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-star-shooting fa-fw fa-xs"></i></div>
<div class="col-auto">
sign
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- ROLE -->
<div class="row no-gutters mt-n2">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-suitcase fa-fw fa-xs"></i></div>
<div class="col-auto">
role
</div>
<div class="col px-2"><hr style="border-top: dotted 4px #ECF6EF; margin-top: 13px; opacity: .6;"></div>
<div class="col-auto">
content
</div>
</div>
<!-- MUSIC THEME -->
<div class="col card border-0" style="border-radius: 2em 2em 0 0; color: #65A0A6;">
<div class="row no-gutters pt-1">
<div class="col">
<p class="text-left text-truncate font-italic mb-n2 ml-2">
Song name
</p>
<p class="text-left text-truncate text-muted small">
author
</p>
</div>
<div class="col-auto align-items-center">
<div class="card mx-auto mt-1 justify-content-center align-items-center bg-transparent border-0" style="height: 25px; width: 25px; overflow: hidden;">
<i class="fal fa-circle-play" style="font-size: 22px; color: #65A0A6;"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -2px; left: -2px;"
src="https://www.youtube.com/embed/VIDEOIDGOESHERE"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================================
RIGHT BLOCK (CHARACTER INFO + MOODBOARD)
=========================================================
-->
<div class="col-12 col-lg-8 p-2">
<div class="row no-gutters">
<!--
=========================================================
CHARACTER NAME + BADGES ROW
=========================================================
-->
<div class="col-12">
<div class="card rounded-0 border-0" style="background-color: #65A0A6; position: relative; min-height: 100%;">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply;"></div>
<div class="h-100 w-100" style="position: absolute; left: 0; top: 0; background: linear-gradient(to right, rgba(0,0,0, 0), #65A0A6 70%);"></div>
<div class="row no-gutters">
<div class="col-12 col-lg-8 p-2 order-1 order-lg-0" style="font-variant: small-caps;">
<p class="font-italic display-3 mb-0" style="text-shadow: 0 0 8px rgba(51,51,51, .4); font-weight: 400; color: #f9f9f9;">
Character name
</p>
<p class="text-lowercase display-4" style="color: #C2D2C9; font-size: 20px; text-shadow: 0 0 8px rgba(51,51,51, .4); font-weight: 400;">
character title or sorta
</p>
</div>
<!--
==================================================
BADGES ROW
==================================================
-->
<div class="col-12 col-lg-4 px-2 px-lg-0 pr-lg-4 ml-lg-n1">
<div class="card border-0 p-1" style="border-radius: 0 0 2em 2em; font-size: 23px;">
<div class="row no-gutters justify-content-around mt-lg-n2 mb-1">
<!-- BADGE ITEM -->
<a class="text-secondary tooltipster"
title="Main/secondary character, fandom/original OC etc.">
<i class="fal fa-circle-heart fa-fw"></i>
</a>
<!-- BADGE ITEM -->
<a class="text-secondary tooltipster"
title="NFS/NFT">
<i class="fal fa-dollar fa-fw"></i>
</a>
<!-- BADGE ITEM -->
<a class="text-secondary tooltipster"
title="Open for rp/rinks/etc.">
<i class="fal fa-dice-d20 fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================================
MAIN INFO BLOCK
=========================================================
-->
<div class="col-12 col-lg-7 mt-3">
<div class="row no-gutters">
<!--
=========================================
RELATIONSHIPS CAROUSEL
=========================================
-->
<div class="card rounded-0 bg-faded col-12 mb-3">
<div class="carousel slide" id="beep" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item active p-2">
<div class="row no-gutters">
<!--
=========================================
RELATED CHARACTER IMAGE + RELATIONSHIP
=========================================
-->
<div class="col-12 col-lg-4 p-1 card rounded-0 mb-1 mx-auto" style="max-width: 200px;">
<div class="align-items-end justify-content-center" style="min-height: 165px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="card px-1 pt-1 border-0" style="border-radius: 2em 2em 0 0; margin-bottom: -4px;">
<div class="card pt-1 px-2 border-bottom-0 bg-faded" style="border-radius: 2em 2em 0 0; margin-bottom: -1px;">
<a class="text-muted tooltipster mb-n2"
title="Relationship goes here">
<!-- RELATIONSHIP ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding"></i>
</a>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATED CHARACTER NAME + STATS + QUOTE
=========================================
-->
<div class="col-12 col-lg-8 pl-lg-2 flex-column">
<p class="text-center text-lowercase font-italic" style="font-variant: small-caps; font-size: 20px;"><a style="color: #65A0A6;" target="_BLANK"
href="LINK_HERE">
Character name
</a></p>
<hr class="m-0" style="border-top-style: dotted; border-top-width: 4px;">
<!-- RELATIONSHIP STATS -->
<div class="row no-gutters text-lowercase mb-1" style="font-variant: small-caps;">
<!-- RESPECT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
respect
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- TRUST STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
trust
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- FONDNESS STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
fondness
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- COMFORT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
comfort
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RELATIONSHIP QUOTE -->
<div class="card rounded-0 flex-grow-1 text-muted small font-italic align-items-center justify-content-center text-center px-3 py-2 py-lg-0">
<i class="fad fa-quote-left fa-xs" style="position: absolute; left: 4px; top: 5px; color: #65A0A6;"></i>
<i>
A small quote about the relationship! Like, really small! Keep it shorter than the one that is present here already.
</i>
<i class="fad fa-quote-right fa-xs" style="position: absolute; right: 4px; bottom: 5px; color: #65A0A6;"></i>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item p-2">
<div class="row no-gutters">
<!--
=========================================
RELATED CHARACTER IMAGE + RELATIONSHIP
=========================================
-->
<div class="col-12 col-lg-4 p-1 card rounded-0 mb-1 mx-auto" style="max-width: 200px;">
<div class="align-items-end justify-content-center" style="min-height: 165px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="card px-1 pt-1 border-0" style="border-radius: 2em 2em 0 0; margin-bottom: -4px;">
<div class="card pt-1 px-2 border-bottom-0 bg-faded" style="border-radius: 2em 2em 0 0; margin-bottom: -1px;">
<a class="text-muted tooltipster mb-n2"
title="Relationship goes here">
<!-- RELATIONSHIP ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding"></i>
</a>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATED CHARACTER NAME + STATS + QUOTE
=========================================
-->
<div class="col-12 col-lg-8 pl-lg-2 flex-column">
<p class="text-center text-lowercase font-italic" style="font-variant: small-caps; font-size: 20px;"><a style="color: #65A0A6;" target="_BLANK"
href="LINK_HERE">
Character name
</a></p>
<hr class="m-0" style="border-top-style: dotted; border-top-width: 4px;">
<!-- RELATIONSHIP STATS -->
<div class="row no-gutters text-lowercase mb-1" style="font-variant: small-caps;">
<!-- RESPECT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
respect
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- TRUST STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
trust
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- FONDNESS STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
fondness
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- COMFORT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
comfort
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RELATIONSHIP QUOTE -->
<div class="card rounded-0 flex-grow-1 text-muted small font-italic align-items-center justify-content-center text-center px-3 py-2 py-lg-0">
<i class="fad fa-quote-left fa-xs" style="position: absolute; left: 4px; top: 5px; color: #65A0A6;"></i>
<i>
A small quote about the relationship! Like, really small! Keep it shorter than the one that is present here already.
</i>
<i class="fad fa-quote-right fa-xs" style="position: absolute; right: 4px; bottom: 5px; color: #65A0A6;"></i>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item p-2">
<div class="row no-gutters">
<!--
=========================================
RELATED CHARACTER IMAGE + RELATIONSHIP
=========================================
-->
<div class="col-12 col-lg-4 p-1 card rounded-0 mb-1 mx-auto" style="max-width: 200px;">
<div class="align-items-end justify-content-center" style="min-height: 165px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<div class="card px-1 pt-1 border-0" style="border-radius: 2em 2em 0 0; margin-bottom: -4px;">
<div class="card pt-1 px-2 border-bottom-0 bg-faded" style="border-radius: 2em 2em 0 0; margin-bottom: -1px;">
<a class="text-muted tooltipster mb-n2"
title="Relationship goes here">
<!-- RELATIONSHIP ICON == Change "rings-wedding" to another FA icon name -->
<i class="fal fa-rings-wedding"></i>
</a>
</div>
</div>
</div>
</div>
<!--
=========================================
RELATED CHARACTER NAME + STATS + QUOTE
=========================================
-->
<div class="col-12 col-lg-8 pl-lg-2 flex-column">
<p class="text-center text-lowercase font-italic" style="font-variant: small-caps; font-size: 20px;"><a style="color: #65A0A6;" target="_BLANK"
href="LINK_HERE">
Character name
</a></p>
<hr class="m-0" style="border-top-style: dotted; border-top-width: 4px;">
<!-- RELATIONSHIP STATS -->
<div class="row no-gutters text-lowercase mb-1" style="font-variant: small-caps;">
<!-- RESPECT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
respect
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- TRUST STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
trust
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- FONDNESS STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
fondness
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- COMFORT STAT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-muted">
comfort
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
</div>
<!-- RELATIONSHIP QUOTE -->
<div class="card rounded-0 flex-grow-1 text-muted small font-italic align-items-center justify-content-center text-center px-3 py-2 py-lg-0">
<i class="fad fa-quote-left fa-xs" style="position: absolute; left: 4px; top: 5px; color: #65A0A6;"></i>
<i>
A small quote about the relationship! Like, really small! Keep it shorter than the one that is present here already.
</i>
<i class="fad fa-quote-right fa-xs" style="position: absolute; right: 4px; bottom: 5px; color: #65A0A6;"></i>
</div>
</div>
</div>
</div>
<!-- YOU CAN ADD MPRE RELATIONSHIPS ABOVE -->
</div>
</div>
</div>
<!--
=========================================
RELATIONSHIP BUTTONS
=========================================
-->
<div class="card rounded-0 bg-faded col-12 px-2">
<hr class="w-100 text-secondary mt-2 mb-1" style="border-top: dotted 4px; opacity: .3;">
<div class="row no-gutters justify-content-between">
<div class="col-auto" style="z-index: 20;">
<a href="#beep" data-slide="prev" style="color: #65A0A6;"><i class="fal fa-arrow-left-long fa-fw fa-2x"></i></a>
</div>
<div class="col-auto" style="z-index: 20;">
<a href="#beep" data-slide="next" style="color: #65A0A6;"><i class="fal fa-arrow-right-long fa-fw fa-2x"></i></a>
</div>
</div>
</div>
<!--
=========================================
NAV BUTTONS ROW
=========================================
-->
<div class="col-12 my-n4" style="z-index: 2;">
<div class="row no-gutters justify-content-center">
<div class="card col-auto align-items-center justify-content-center" style="border-radius: 2em; position: relative;">
<div class="card rounded-0 border-0" style="position: absolute; height: 17%; width: 104%;"></div>
<ul class="nav row no-gutters p-1" style="font-size: 20px;">
<!-- BUTTON -->
<li class="nav-item align-items-center justify-content-center p-1">
<a class="nav-link active btn btn-outline-danger border-0" style="mix-blend-mode: luminosity; height: 40px; width: 40px; z-index: 2; border-radius: 50%; opacity: .12;" data-toggle="tab"
href="#stats"></a>
<i class="fal fa-sliders fa-fw" style="color: #65A0A6; position: absolute;"></i>
</li>
<!-- BUTTON -->
<li class="nav-item align-items-center justify-content-center p-1">
<a class="nav-link btn btn-outline-danger border-0" style="mix-blend-mode: luminosity; height: 40px; width: 40px; z-index: 2; border-radius: 50%; opacity: .12;" data-toggle="tab"
href="#prefs"></a>
<i class="fal fa-heart-half-stroke fa-fw" style="color: #65A0A6; position: absolute;"></i>
</li>
<!-- BUTTON -->
<li class="nav-item align-items-center justify-content-center p-1">
<a class="nav-link btn btn-outline-danger border-0" style="mix-blend-mode: luminosity; height: 40px; width: 40px; z-index: 2; border-radius: 50%; opacity: .12;" data-toggle="tab"
href="#design"></a>
<i class="fal fa-swatchbook fa-fw" style="color: #65A0A6; position: absolute;"></i>
</li>
<!-- BUTTON -->
<li class="nav-item align-items-center justify-content-center p-1">
<a class="nav-link btn btn-outline-danger border-0" style="mix-blend-mode: luminosity; height: 40px; width: 40px; z-index: 2; border-radius: 50%; opacity: .12;" data-toggle="tab"
href="#story"></a>
<i class="fal fa-books fa-fw" style="color: #65A0A6; position: absolute;"></i>
</li>
</ul>
</div>
</div>
</div>
<!--
=========================================
MAIN INFO WITH TABS
=========================================
-->
<div class="card rounded-0 bg-faded col-12 mb-3 mb-lg-0">
<div class="tab-content">
<!--
=======================================================
PERSONALITY TAB
=======================================================
-->
<div class="tab-pane fade p-3 pb-lg-1 text-lowercase in active show" id="stats" style="height: 300px; overflow: auto;">
<!-- EXTROVERTED == INTROVERTED -->
<div class="row no-gutters mt-4" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
extroverted
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
introverted
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="row no-gutters mt-1 mt-lg-0" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
instinctive
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
calculated
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="row no-gutters mt-1 mt-lg-0" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
deceptive
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
sincere
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="row no-gutters mt-1 mt-lg-0" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
indifferent
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
emotional
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="row no-gutters mt-1 mt-lg-0" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
reserved
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
affectionate
</div>
</div>
<!-- COOPERATIVE == LONE WOLF -->
<div class="row no-gutters mt-1 mt-lg-0" style="font-variant: small-caps; font-size: 16px;">
<div class="col-6 col-lg">
cooperative
</div>
<div class="col-12 col-lg align-items-center order-1 order-lg-0">
<div class="progress w-100 rounded-0 mt-1" style="overflow: visible; height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="width:
50%
; height: 8px;">
<div style="width: 4px; margin-right: -2px; margin-top: -4px; background-color: #65A0A6;"></div>
</div>
</div>
</div>
<div class="col-6 col-lg text-right">
lone wolf
</div>
</div>
<!-- DIVIDER -->
<hr style="border-top-style: dotted; border-top-width: 4px;">
<!--
==========================================
STANDALONE STATS
==========================================
-->
<div class="row no-gutters text-lowercase" style="font-variant: small-caps; font-size: 16px;">
<!-- CHARISMA STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
charisma
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
kindness
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
patience
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
integrity
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
intellect
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- LOYALTY STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
loyalty
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
maturity
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="col-12 col-lg-6 p-1 px-lg-2">
<p class="text-center">
courage
</p>
<div class="progress rounded-0" style="height: 4px;">
<!-- PROGRESS BAR VALUE == Change 50% to 1-100% -->
<div class="progress-bar" style="background-color: #65A0A6; width:
50%
;"></div>
</div>
</div>
</div>
<!-- DIVIDER -->
<hr style="border-top-style: dotted; border-top-width: 4px;">
<!-- ATTITUDE (OPTIMIST/PESSIMIST/REALIST ETC.) -->
<div class="row no-gutters align-items-baseline" style="font-variant: small-caps; font-size: 17px; color: #65A0A6;">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-masks-theater fa-fw" style="font-size: 25px;"></i></div>
<div class="col-auto">
attitude
</div>
<div class="col px-2"><hr style="border-top-style: dotted; border-top-width: 4px; opacity: .6; margin-bottom: 2px;"></div>
<div class="col-auto text-body">
content
</div>
</div>
<!-- DOMINANT HAND -->
<div class="row no-gutters align-items-baseline mt-1" style="font-variant: small-caps; font-size: 17px; color: #65A0A6;">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-pen-clip fa-fw" style="font-size: 25px;"></i></div>
<div class="col-auto">
dom. hand
</div>
<div class="col px-2"><hr style="border-top-style: dotted; border-top-width: 4px; opacity: .6; margin-bottom: 2px;"></div>
<div class="col-auto text-body">
content
</div>
</div>
<!-- MBTI -->
<div class="row no-gutters align-items-baseline mt-1" style="font-variant: small-caps; font-size: 17px; color: #65A0A6;">
<div class="col-auto" style="margin-top: 2px; margin-right: 3px;"><i class="fal fa-head-side-brain fa-fw" style="font-size: 25px;"></i></div>
<div class="col-auto">
MBTI
</div>
<div class="col px-2"><hr style="border-top-style: dotted; border-top-width: 4px; opacity: .6; margin-bottom: 2px;"></div>
<div class="col-auto text-body">
XXXX-X (Content)
</div>
</div>
<!-- DIVIDER -->
<hr style="border-top-style: dotted; border-top-width: 4px;">
<!--
==========================================
CHARACTER TRAITS
==========================================
-->
<div class="row no-gutters">
<!--
=============================================
POSITIVE TRAITS LIST
=============================================
-->
<div class="col-12 col-lg-6 p-1">
<ul class="fa-ul font-italic">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-plus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
=============================================
NEGATIVE TRAITS LIST
=============================================
-->
<div class="col-12 col-lg-6 p-1">
<ul class="fa-ul font-italic">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
<!-- QUIRKS LIST-->
<p><span class="text-lowercase font-italic" style="font-variant: small-caps; color: #65A0A6; font-size: 18px;">Quirks & Habits:</span>
one, two, three
</p>
</div>
<!--
=======================================================
PREFERENCES TAB
=======================================================
-->
<div class="tab-pane fade p-3 pt-4" id="prefs" style="height: 300px; overflow: auto;">
<div class="row no-gutters">
<!--
======================================
LIKES LIST
======================================
-->
<div class="col-12 col-lg rounded-0 bg-transparent mt-4 mr-lg-1">
<p class="text-lowercase mt-n4 mb-0 mx-2" style="font-variant: small-caps; font-size: 22px; color: #65A0A6;"><span class="pull-right"><i class="fal fa-heartbeat"></i></span>
likes
</p>
<hr class="mt-0 mb-1" style="border-top-style: dotted; border-top-width: 4px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!-- DIVIDER -->
<div class="card rounded-0 hidden-md-down bg-transparent border-left-0 border-top-0 border-bottom-0"></div>
<!--
======================================
DISLIKES LIST
======================================
-->
<div class="col-12 col-lg rounded-0 bg-transparent mt-4 ml-lg-1">
<p class="text-lowercase mt-n4 mb-0 mx-2" style="font-variant: small-caps; font-size: 22px; color: #65A0A6;"><span class="pull-right"><i class="fal fa-heart-crack"></i></span>
dislikes
</p>
<hr class="mt-0 mb-1" style="border-top-style: dotted; border-top-width: 4px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!-- DIVIDER -->
<div class="col-12"><hr class="m-0"></div>
<!--
======================================
FEARS LIST
======================================
-->
<div class="col-12 col-lg rounded-0 bg-transparent mt-4 mr-lg-1">
<p class="text-lowercase mt-n4 mb-0 mx-2" style="font-variant: small-caps; font-size: 22px; color: #65A0A6;"><span class="pull-right"><i class="fal fa-skull"></i></span>
fears
</p>
<hr class="mt-0 mb-1" style="border-top-style: dotted; border-top-width: 4px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!-- DIVIDER -->
<div class="card rounded-0 hidden-md-down bg-transparent border-left-0 border-top-0 border-bottom-0"></div>
<!--
======================================
HOBBIES LIST
======================================
-->
<div class="col-12 col-lg rounded-0 bg-transparent mt-4 ml-lg-1">
<p class="text-lowercase mt-n4 mb-0 mx-2" style="font-variant: small-caps; font-size: 22px; color: #65A0A6;"><span class="pull-right"><i class="fal fa-icons"></i></span>
hobbies
</p>
<hr class="mt-0 mb-1" style="border-top-style: dotted; border-top-width: 4px;">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Content </li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
<!--
===================================================
FAVORITES LIST
===================================================
-->
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 25px; color: #65A0A6;">
favorites
</p>
<hr class="mt-0" style="border-top-style: dotted; border-top-width: 4px;">
<div class="row no-gutters">
<!-- FAV FOOD -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
food
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-pot-food fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV DRINK -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
drink
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-cup-straw fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV SCENT -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
scent
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-spray-can-sparkles fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV COLOR -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
color
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-palette fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV FLOWER -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
flower
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-flower-tulip fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV ANIMAL -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
animal
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-paw fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV SEASON -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
season
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-clouds-sun fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
<!-- FAV MUSIC -->
<div class="col-12 col-lg-6 p-1">
<p class="text-center text-lowercase font-italic mb-n2" style="font-variant: small-caps; color: #65A0A6; font-size: 16px;">
music
</p>
<div class="row no-gutters">
<div class="col"><hr></div>
<div class="col-auto"><i class="fal fa-music fa-fw mt-2 mx-1" style="opacity: .4;"></i></div>
<div class="col"><hr></div>
</div>
</div>
</div>
<!--
===================================================
TRIVIA LIST
===================================================
-->
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 25px; color: #65A0A6;">
trivia
</p>
<hr class="mt-0" style="border-top-style: dotted; border-top-width: 4px;">
<ul class="fa-ul ml-3">
<!-- LIST ITEM -->
<li><span><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- LIST ITEM -->
<li><span><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- LIST ITEM -->
<li><span><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>
<!-- LIST ITEM -->
<li><span><i class="fal fa-minus" style="color: #65A0A6;"></i></span>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
=======================================================
DESIGN/APPEARANCE TAB
=======================================================
-->
<div class="tab-pane fade p-3" id="design" style="height: 300px; overflow: auto;">
<div class="row no-gutters mt-3">
<!--
========================================
CHARACTER PALETTE
========================================
-->
<div class="col-12 col-lg-2 p-2 pl-lg-0">
<div class="flex-row flex-lg-column justify-content-center">
<!-- PALETTE COLOR (EYES) -->
<div class="col-2 col-lg-12 p-1">
<div class="card align-items-center justify-content-center" style="border-radius: 50%; padding: 50%;
background-color: #ccc
;">
<!-- FA ICON -->
<i class="fal fa-eye text-dark tooltipster" style="position: absolute; font-size: 20px;"
title="Eyes"></i>
</div>
</div>
<!-- PALETTE COLOR (SKIN) -->
<div class="col-2 col-lg-12 p-1">
<div class="card align-items-center justify-content-center" style="border-radius: 50%; padding: 50%;
background-color: #ccc
;">
<!-- FA ICON -->
<i class="fal fa-hand text-dark tooltipster" style="position: absolute; font-size: 20px;"
title="Skin"></i>
</div>
</div>
<!-- PALETTE COLOR (HAIR) -->
<div class="col-2 col-lg-12 p-1">
<div class="card align-items-center justify-content-center" style="border-radius: 50%; padding: 50%;
background-color: #ccc
;">
<!-- FA ICON -->
<i class="fal fa-wind text-dark tooltipster" style="position: absolute; font-size: 20px;"
title="Hair"></i>
</div>
</div>
</div>
</div>
<!--
========================================
DESIGN BASICS
========================================
-->
<div class="col-12 col-lg-5 p-2 align-items-cener">
<div>
<!-- HEIGHT -->
<div class="text-center text-lowercase" style="font-variant: small-caps;">
<p class="m-0 font-italic" style="color: #65A0A6;">
Content
</p>
<hr class="my-0">
<p class="text-muted small mt-n1">
height
</p>
</div>
<!-- WEIGHT -->
<div class="text-center text-lowercase" style="font-variant: small-caps;">
<p class="m-0 font-italic" style="color: #65A0A6;">
Content
</p>
<hr class="my-0">
<p class="text-muted small mt-n1">
weight
</p>
</div>
<!-- BODY TYPE -->
<div class="text-center text-lowercase" style="font-variant: small-caps;">
<p class="m-0 font-italic" style="color: #65A0A6;">
Content
</p>
<hr class="my-0">
<p class="text-muted small mt-n1">
body type
</p>
</div>
<!-- HAIR TYPE -->
<div class="text-center text-lowercase" style="font-variant: small-caps;">
<p class="m-0 font-italic" style="color: #65A0A6;">
Content
</p>
<hr class="my-0">
<p class="text-muted small mt-n1">
hair type
</p>
</div>
</div>
</div>
<!--
========================================
SMALL CHARACTER BANNER
========================================
-->
<div class="card rounded-0 col-12 col-lg-5 p-1 mx-auto" style="max-width: 150px;">
<div class="card rounded-0 h-100" style="min-height: 150px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!-- DIVIDER -->
<div class="col-12"><hr class="my-2" style="border-top-style: dotted; border-top-width: 4px;"></div>
<!--
========================================
DESIGN NOTES
========================================
-->
<div class="col-12">
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 22px; color: #65A0A6;">
design notes
</p>
<hr class="w-75">
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
ContentLorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fal fa-diamond" style="color: #65A0A6;"></i></span>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE DESIGN NOTES ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=======================================================
STORY TAB
=======================================================
-->
<div class="tab-pane fade p-3" id="story" style="height: 300px; overflow: auto;">
<!--
===========================================
STORY PART
===========================================
-->
<div class="mt-2 mb-2 text-justify">
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 25px; color: #65A0A6;">
subheader
</p>
<hr class="my-0" style="border-top-style: dotted; border-top-width: 4px;">
<p class="text-muted text-lwoercase text-center font-italic" style="font-variant: small-caps;">
a comment, quote or tagline
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!--
===========================================
STORY PART
===========================================
-->
<div class="mb-2 text-justify">
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 25px; color: #65A0A6;">
subheader
</p>
<hr class="my-0" style="border-top-style: dotted; border-top-width: 4px;">
<p class="text-muted text-lwoercase text-center font-italic" style="font-variant: small-caps;">
a comment, quote or tagline
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!--
===========================================
STORY PART
===========================================
-->
<div class="mb-2 text-justify">
<p class="text-lowercase text-center mb-n3" style="font-variant: small-caps; font-size: 25px; color: #65A0A6;">
subheader
</p>
<hr class="my-0" style="border-top-style: dotted; border-top-width: 4px;">
<p class="text-muted text-lwoercase text-center font-italic" style="font-variant: small-caps;">
a comment, quote or tagline
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- YOU CAN ADD MORE STORY PARTS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
=========================================================
MOODBOARD SECTION
=========================================================
-->
<div class="col-12 col-lg-5 flex-column pl-lg-3 mb-lg-n3">
<div class="card rounded-0 border-0 h-100 px-4" style="background: linear-gradient(to top, #C2D2C9, #ECF6EF); position: relative; overflow: hidden;">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply;"></div>
<div class="card rounded-0 border-0 h-100 px-1" style="background-color: #f9f9f9; box-shadow: 0 0 10px rgba(51,51,51, .3);">
<div class="h-100 flex-column py-3" style="background-color: #65A0A6; overflow: hidden;">
<!-- MOODBOARD IMAGE -->
<div class="card border-0 rounded-0 flex-grow-1 mb-3 py-1" style="background-color: #f9f9f9;">
<div class="h-100" style="min-height: 100px;
background-image: url(URLHERE);
background-size: cover;
background-position: center; box-shadow: inset 0 0 10px rgba(51,51,51, .4);"></div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="card border-0 rounded-0 flex-grow-1 mb-3 py-1" style="background-color: #f9f9f9;">
<div class="h-100" style="min-height: 100px;
background-image: url(URLHERE);
background-size: cover;
background-position: center; box-shadow: inset 0 0 10px rgba(51,51,51, .4);"></div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="card border-0 rounded-0 flex-grow-1 py-1" style="background-color: #f9f9f9;">
<div class="h-100" style="min-height: 100px;
background-image: url(URLHERE);
background-size: cover;
background-position: center; box-shadow: inset 0 0 10px rgba(51,51,51, .4);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================================
LOWER LEFT LINE (QUOTE)
=========================================================
-->
<div class="col-12 col-lg-8 p-2">
<div class="card rounded-0 border-0 px-4 pr-lg-0 pl-lg-4 h-100" style="background-color: #ECF6EF; position: relative; overflow: hidden;">
<div class="card border-0 rounded-0 w-100" style="position: absolute; left: 0; top: -2px; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply; height: calc(100% + 2px);"></div>
<div class="card rounded-0 border-0 h-100 pl-lg-1 px-1 pr-lg-0" style="background-color: #f9f9f9; box-shadow: 0 0 10px rgba(51,51,51, .3);">
<div class="h-100 text-white text-center align-items-center justify-content-center p-3 p-lg-0" style="background-color: #65A0A6;">
<i><i class="fad fa-quote-left fa-xs fa-fw"></i>
A little quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fad fa-quote-right fa-xs fa-fw"></i></i>
</div>
</div>
</div>
</div>
<!--
=========================================================
LOWER RIGHT LINE
=========================================================
-->
<div class="col-12 col-lg-4 p-2">
<div class="card rounded-0 border-0 pr-lg-4" style="height: 50px; background-color: #C2D2C9; position: relative; overflow: hidden;">
<div class="card border-0 rounded-0" style="position: absolute; right: 0; top: -2px; background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/embossed-diamond.png); mix-blend-mode: multiply; width: 80.8%; height: calc(100% + 2px);"></div>
<div class="card rounded-0 border-0 h-100 pr-lg-1" style="background-color: #f9f9f9; box-shadow: 0 0 10px rgba(51,51,51, .3);">
<div class="h-100 align-items-end" style="background-color: #65A0A6;">
<!-- CREDITS == DO NOT REMOVE -->
<div class="w-100 px-4">
<div class="card p-2 border-0 mb-n2" style="border-radius: 2em 2em 0 0; font-variant: small-caps;">
<div class="row no-gutters text-lowercase justify-content-center small">
<a class="text-muted" href="https://toyhou.se/ChiiAka">
code by chiiaka
</a>
<span class="mx-1 text-muted">
||
</span>
<a class="text-muted" href="https://toyhou.se/togo">
layout by togo
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
