borlaaq
created by:8byte
Mixed ColorsHTMLCharacter
Copy
<!---
==== borlaaq character
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#2b95b3 - blue
--->
<div class="mx-auto" style="max-width: 900px;">
<div style="height: 50px;"></div>
<div class="row no-gutters">
<div class="col-12 p-1">
<!--- top image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; background-attachment: fixed; height: 100px;" class="card rounded-0 flex-row justify-content-end">
<!--- pagedoll --->
<img src="IMGURL" style="height: calc(100% + 100px); margin-top: -50px;" />
</div>
<!--- name --->
<h1 class="display-4 font-weight-normal mb-0" style="color: #2b95b3;">Character Name</h1>
<div class="align-items-center">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<!--- title/nickname --->
<h3 class="font-weight-normal font-italic text-uppercase mb-0">title or nickname</h3>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-7 order-md-2 order-1 flex-column p-1">
<div class="align-items-center justify-content-end mb-2">
<h3 class="font-weight-normal text-uppercase mb-0">About</h3>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<div class="card bg-faded rounded-0 p-2">
<div class="row no-gutters m-n1">
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Name</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Pronouns</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Species</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Gender</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Age</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Orientation</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Occupation</strong>
<span>content</span>
</div>
<!--- basic info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Designer</strong>
<span>content</span>
</div>
<!--- end of basic info --->
</div>
</div>
<!--- quote box --->
<div class="flex-fill justify-content-center align-items-center text-center">
<div class="p-1"><i class="fas fa-quote-left mr-2" style="color: #2b95b3;"></i>
<!--- quote --->
<span style="font-size: 1.3rem;">Etiam ut dolor auctor mi posuere ultrices.</span>
<i class="fas fa-quote-right ml-2" style="color: #2b95b3;"></i>
</div>
</div>
<div class="card bg-faded rounded-0 p-2">
<div class="row no-gutters m-n1">
<!--- extended info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Tarot</strong>
<span>content</span>
</div>
<!--- extended info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Affiliation</strong>
<span>content</span>
</div>
<!--- extended info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Alignment</strong>
<span>content</span>
</div>
<!--- extended info --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Class</strong>
<span>content</span>
</div>
<!--- extended info --->
<div class="col-md-6 justify-content-between align-items-start p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Proficiencies</strong>
<div>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- extended info --->
<div class="col-md-6 justify-content-between align-items-start p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Languages</strong>
<div>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- end of basic info --->
</div>
</div>
<div class="align-items-center justify-content-end my-2">
<h3 class="font-weight-normal text-uppercase mb-0">Trivia</h3>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<div class="card bg-faded rounded-0 p-2">
<ul class="pl-3 mb-0">
<!--- trivia --->
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
</ul>
</div>
</div>
<div class="col-md-5 order-md-1 order-2 flex-column p-1">
<div class="row no-gutters m-n1">
<div class="col-4 p-1">
<!--- aesthetic image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative;" class="card rounded-0 justify-content-center align-items-center">
<div style="padding-top: 100%;"></div>
<!--- icon --->
<i class="fas fa-heart fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
</div>
<div class="col-4 p-1">
<!--- aesthetic image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative;" class="card rounded-0 justify-content-center align-items-center">
<div style="padding-top: 100%;"></div>
<!--- icon --->
<i class="fas fa-heart fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
</div>
<div class="col-4 p-1">
<!--- aesthetic image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative;" class="card rounded-0 justify-content-center align-items-center">
<div style="padding-top: 100%;"></div>
<!--- icon --->
<i class="fas fa-heart fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="d-flex flex-wrap m-n1">
<!--- aesthetic tags --->
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#aesthetic</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#aesthetic</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#longer aesthetic</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#even longer aesthetic</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#aesthetic</span>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="card rounded-0" style="position: relative;">
<!--- reference image --->
<div style="background-image: url('IMGURL'); background-size: contain; background-position: center; background-repeat: no-repeat; height: 250px;"></div>
<!--- link to full reference --->
<a href="LINK" style="background: #2b95b3; color: #ffffff; position: absolute; bottom: 0; right: 0;" class="d-block p-2"><i class="fas fa-image fa-fw"></i></a>
</div>
<div class="align-items-center my-2">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<h3 class="font-weight-normal text-uppercase mb-0">Design Notes</h3>
</div>
<div class="card bg-faded rounded-0 p-2">
<div class="row no-gutters m-n1">
<!--- height --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-ruler fa-fw mr-2"></i> Height</strong>
<span>00'00"</span>
</div>
<!--- weight --->
<div class="col-6 justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-weight-scale fa-fw mr-2"></i> Weight</strong>
<span>00lbs</span>
</div>
</div>
<ul class="pl-3 mb-0">
<!--- design notes --->
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
<li>Etiam ut dolor auctor mi posuere ultrices.</li>
</ul>
</div>
<div class="p-1"></div>
<div class="flex-row flex-fill m-n1">
<!--- color palette block --->
<div style="background: #000;" class="card rounded-0 flex-fill p-3 justify-content-center align-items-center m-1"><i class="fas fa-heart fa-fw" style="color: #ffffff;"></i></div>
<div style="background: #000;" class="card rounded-0 flex-fill p-3 justify-content-center align-items-center m-1"><i class="fas fa-heart fa-fw" style="color: #ffffff;"></i></div>
<div style="background: #000;" class="card rounded-0 flex-fill p-3 justify-content-center align-items-center m-1"><i class="fas fa-heart fa-fw" style="color: #ffffff;"></i></div>
<div style="background: #000;" class="card rounded-0 flex-fill p-3 justify-content-center align-items-center m-1"><i class="fas fa-heart fa-fw" style="color: #ffffff;"></i></div>
<div style="background: #000;" class="card rounded-0 flex-fill p-3 justify-content-center align-items-center m-1"><i class="fas fa-heart fa-fw" style="color: #ffffff;"></i></div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-4 order-md-1 order-2 p-1">
<div class="card bg-faded rounded-0 p-2">
<!--- personality text block --->
<p><strong style="color: #2b95b3;">Etiam ut dolor</strong> auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante. </p>
<p><strong style="color: #2b95b3;">Donec vulputate egestas</strong> metus non pellentesque. Morbi tincidunt urna ante, a eleifend urna pulvinar a. Proin eget imperdiet sem. Duis at fermentum purus, sed pulvinar elit. Vestibulum lobortis mauris sit amet tellus convallis, in luctus magna suscipit. Vivamus lobortis finibus eros, nec venenatis nisl aliquet in.</p>
</div>
<div class="d-none d-md-block" style="height: 150px;"></div>
</div>
<div class="col-md-8 order-md-2 order-1 p-1">
<div class="row no-gutters m-n1">
<div class="col-md-5 p-1">
<!--- center image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 300px;" class="card rounded-0 h-100"></div>
</div>
<div class="col-md-7 p-1">
<div class="align-items-center justify-content-end mb-2">
<h3 class="font-weight-normal text-uppercase mb-0">Personality</h3>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<!--- positive traits box --->
<div class="card bg-faded rounded-0 p-2">
<h3 class="text-center mb-0"><i class="fas fa-plus fa-fw" style="color: #2b95b3;"></i></h3>
<div class="row no-gutters">
<!--- positive traits --->
<div class="col-6 text-uppercase text-center p-1">Positive trait</div>
<div class="col-6 text-uppercase text-center p-1">Positive trait</div>
<div class="col-6 text-uppercase text-center p-1">Positive trait</div>
<div class="col-6 text-uppercase text-center p-1">Positive trait</div>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- neutral traits box --->
<div class="card bg-faded rounded-0 p-2">
<h3 class="text-center mb-0"><i class="fas fa-equals fa-fw" style="color: #2b95b3;"></i></h3>
<div class="row no-gutters">
<!--- neutral traits --->
<div class="col-6 text-uppercase text-center p-1">Neutral trait</div>
<div class="col-6 text-uppercase text-center p-1">Neutral trait</div>
<div class="col-6 text-uppercase text-center p-1">Neutral trait</div>
<div class="col-6 text-uppercase text-center p-1">Neutral trait</div>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- negative traits box --->
<div class="card bg-faded rounded-0 p-2">
<h3 class="text-center mb-0"><i class="fas fa-minus fa-fw" style="color: #2b95b3;"></i></h3>
<div class="row no-gutters">
<!--- negative traits --->
<div class="col-6 text-uppercase text-center p-1">Negative trait</div>
<div class="col-6 text-uppercase text-center p-1">Negative trait</div>
<div class="col-6 text-uppercase text-center p-1">Negative trait</div>
<div class="col-6 text-uppercase text-center p-1">Negative trait</div>
</div>
</div>
<!--- end of traits boxes --->
<!--- divider ---><div class="p-1"></div>
<div class="row no-gutters m-n1">
<div class="col-6 p-1">
<div class="card bg-faded rounded-0 p-2 h-100">
<h5 class="font-weight-normal text-center text-muted text-uppercase justify-content-center align-items-center mb-0"><i class="fas fa-heart fa-fw mr-2" style="color: #2b95b3; font-size: .7rem;"></i> Likes</h5>
<ul class="pl-3 mb-0">
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
</ul>
</div>
</div>
<div class="col-6 p-1">
<div class="card bg-faded rounded-0 p-2 h-100">
<h5 class="font-weight-normal text-center text-muted text-uppercase justify-content-center align-items-center mb-0"><i class="fas fa-heart-broken fa-fw mr-2" style="color: #2b95b3; font-size: .7rem;"></i> Dislikes</h5>
<ul class="pl-3 mb-0">
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
<li>Etiam ut dolor.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-8 order-md-1 order-2 p-1">
<div class="row no-gutters m-n1">
<div class="col-md-6 order-md-1 order-3 p-1" style="margin-top: -150px;">
<div class="d-block d-md-none" style="height: 150px;"></div>
<div class="align-items-center my-2">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<h3 class="font-weight-normal text-uppercase mb-0">Playlist</h3>
</div>
<!--- song --->
<div class="my-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- song --->
<div class="my-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- song --->
<div class="my-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- song --->
<div class="my-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- song --->
<div class="my-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- last song --->
<div class="mt-2">
<div class="flex-row">
<div class="card bg-faded rounded-0 p-2">
<!--- link to song --->
<a href="LINK" style="color: #2b95b3;"><i class="fas fa-play fa-fw"></i></a>
</div>
<div class="card bg-faded rounded-0 p-2 text-center ml-2 flex-fill">
<span>
<!--- song info --->
<span class="text-uppercase" style="color: #2b95b3;">Song Title</span>
<span> - Artist</span>
</span>
</div>
</div>
<div class="card bg-faded rounded-0 p-2 mt-2">
<!--- lyrics for song --->
<small class="text-muted font-italic">Some lyrics here...</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- end of songs --->
</div>
<div class="col-md-6 flex-column order-md-2 order-1 p-1">
<!--- stats --->
<div class="card bg-faded rounded-0 px-2 py-1">
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Strength</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Defense</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Constitution</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Intellect</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Wisdom</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- stat --->
<div class="my-1">
<div class="justify-content-between">
<small class="text-uppercase text-muted">Charisma</small>
<small class="text-muted">00</small>
</div>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- end of stat --->
</div>
<!--- divider ---><div class="p-1"></div>
<div class="row no-gutters flex-fill m-n1">
<div class="col-6 h-100 p-1">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 200px;" class="card rounded-0 h-100"></div>
</div>
<div class="col-6 h-100 p-1">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 200px;" class="card rounded-0 h-100"></div>
</div>
</div>
</div>
<div class="col-12 order-md-3 order-2 p-1">
<div class="align-items-center my-2">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<h3 class="font-weight-normal text-uppercase mb-0">Inventory</h3>
</div>
<div class="card bg-faded rounded-0 p-2">
<div id="INVENTORY" class="carousel slide mx-auto p-1" data-ride="carousel">
<div class="carousel-inner">
<!--- item --->
<div class="carousel-item active">
<div class="d-flex">
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-width: 125px; height: 125px;" class="card mx-2 rounded-0"></div>
<div>
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Item Name</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
</div>
</div>
<!--- item --->
<div class="carousel-item">
<div class="d-flex">
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-width: 125px; height: 125px;" class="card mx-2 rounded-0"></div>
<div>
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Item Name</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
</div>
</div>
<!--- item --->
<div class="carousel-item">
<div class="d-flex">
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-width: 125px; height: 125px;" class="card mx-2 rounded-0"></div>
<div>
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Item Name</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
</div>
</div>
<!--- end of items --->
</div>
<a class="carousel-control-prev" href="#INVENTORY" role="button" data-slide="prev" style="color: #2b95b3; width: inherit;">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-control-next" href="#INVENTORY" role="button" data-slide="next" style="color: #2b95b3; width: inherit;">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-column order-md-2 order-1 p-1">
<div class="align-items-center justify-content-end my-2">
<h3 class="font-weight-normal text-uppercase mb-0">Combat</h3>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<div class="card bg-faded rounded-0 p-1">
<!--- weapon --->
<div class="justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Weapon</strong>
<span>content</span>
</div>
<!--- range --->
<div class="justify-content-between p-1">
<strong class="align-items-center text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Range</strong>
<span>content</span>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- ability card --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Ability</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- ability card --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Ability</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- ability card --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Ability</strong>
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante.</p>
</div>
<!--- end of abilities --->
<div class="align-items-center flex-fill">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-5 flex-column p-1">
<div class="m-1"></div>
<!--- side image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 300px; height: 100%; max-height: calc(100vh - .5rem);" class="card rounded-0 sticky-top"></div>
</div>
<div class="col-md-7 p-1">
<div class="align-items-center justify-content-end my-2">
<h3 class="font-weight-normal text-uppercase mb-0">History</h3>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<div class="card bg-faded rounded-0 p-2">
<!--- summary --->
<p><strong class="text-uppercase" style="color: #2b95b3;">Summary</strong> Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante. </p>
<p>Donec vulputate egestas metus non pellentesque. Morbi tincidunt urna ante, a eleifend urna pulvinar a. Proin eget imperdiet sem. Duis at fermentum purus, sed pulvinar elit. Vestibulum lobortis mauris sit amet tellus convallis, in luctus magna suscipit. Vivamus lobortis finibus eros, nec venenatis nisl aliquet in.</p>
</div>
<!--- divider ---><div class="p-1"></div>
<div id="HISTORY-PARENT">
<!--- past --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase"><a href="#PAST" data-toggle="collapse" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Past</a></strong>
<div class="collapse" id="PAST" data-parent="#HISTORY-PARENT">
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante. Donec vulputate egestas metus non pellentesque. Morbi tincidunt urna ante, a eleifend urna pulvinar a. Proin eget imperdiet sem. Duis at fermentum purus, sed pulvinar elit. Vestibulum lobortis mauris sit amet tellus convallis, in luctus magna suscipit. Vivamus lobortis finibus eros, nec venenatis nisl aliquet in.</p>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- present --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase"><a href="#PRESENT" data-toggle="collapse" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Present</a></strong>
<div class="collapse" id="PRESENT" data-parent="#HISTORY-PARENT">
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante. Donec vulputate egestas metus non pellentesque. Morbi tincidunt urna ante, a eleifend urna pulvinar a. Proin eget imperdiet sem. Duis at fermentum purus, sed pulvinar elit. Vestibulum lobortis mauris sit amet tellus convallis, in luctus magna suscipit. Vivamus lobortis finibus eros, nec venenatis nisl aliquet in.</p>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- future --->
<div class="card bg-faded rounded-0 p-2">
<strong class="text-uppercase"><a href="#FUTURE" data-toggle="collapse" style="color: #2b95b3;"><i class="fas fa-star fa-fw mr-2"></i> Future</a></strong>
<div class="collapse" id="FUTURE" data-parent="#HISTORY-PARENT">
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta. Curabitur augue leo, pulvinar et enim et, interdum tempus ante. Donec vulputate egestas metus non pellentesque. Morbi tincidunt urna ante, a eleifend urna pulvinar a. Proin eget imperdiet sem. Duis at fermentum purus, sed pulvinar elit. Vestibulum lobortis mauris sit amet tellus convallis, in luctus magna suscipit. Vivamus lobortis finibus eros, nec venenatis nisl aliquet in.</p>
</div>
</div>
<!--- end of story sections --->
</div>
</div>
</div>
<div class="align-items-center my-2 ml-1">
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<h3 class="font-weight-normal text-uppercase mb-0">Relationships</h3>
</div>
<!--- main relationship --->
<div class="row no-gutters">
<div class="col-md-4 order-md-1 order-2 flex-column p-1">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 150px;" class="flex-fill justify-content-center align-items-center card rounded-0">
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff;"></i>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 150px;" class="flex-fill justify-content-center align-items-center card rounded-0">
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff;"></i>
</div>
</div>
<div class="col-md-8 flex-column order-md-2 order-1 p-1">
<div class="align-items-center justify-content-end my-2">
<!--- link to character --->
<h5 class="font-weight-normal text-uppercase mb-0"><a href="LINK" style="color: var(--text-color);">Character Name</a></h5>
<i class="fas fa-diamond fa-fw ml-2" style="color: #2b95b3;"></i>
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-left: -5px;"></div>
</div>
<div class="card bg-faded rounded-0 h-100 p-2">
<!--- relationship status --->
<div class="text-center font-weight-bold text-uppercase" style="color: #2b95b3;">Relationship Status</div>
<div class="d-flex flex-wrap mx-n1">
<!--- trope tags --->
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#trope</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#pretty long trope title</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#another trope</span>
</div>
<!---- more about relationship --->
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta.</p>
<div class="row no-gutters mx-n1 mt-auto mb-0">
<!--- trust stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Trust</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- communication stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Communication</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- affection stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Affection</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- compromise stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Compromise</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- end of stats --->
</div>
</div>
</div>
</div>
<!--- main relationship --->
<div class="row no-gutters">
<div class="col-md-4 order-2 flex-column p-1">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 150px;" class="flex-fill justify-content-center align-items-center card rounded-0">
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff;"></i>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; min-height: 150px;" class="flex-fill justify-content-center align-items-center card rounded-0">
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff;"></i>
</div>
</div>
<div class="col-md-8 order-1 flex-column p-1">
<div class="order-md-2 order-1 align-items-center my-2">
<!--- link to character --->
<div style="border-top: 2px solid #2b95b3; height: 1px; width: 75px; margin-right: -5px;"></div>
<i class="fas fa-diamond fa-fw mr-2" style="color: #2b95b3;"></i>
<h5 class="font-weight-normal text-uppercase mb-0"><a href="LINK" style="color: var(--text-color);">Character Name</a></h5>
</div>
<div class="order-md-1 order-2 card bg-faded h-100 rounded-0 p-2">
<!--- relationship status --->
<div class="text-center font-weight-bold text-uppercase" style="color: #2b95b3;">Relationship Status</div>
<div class="d-flex flex-wrap mx-n1">
<!--- trope tags --->
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#trope</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#pretty long trope title</span>
<span class="badge badge-pill flex-fill m-1" style="background: #2b95b3; color: #ffffff;">#another trope</span>
</div>
<!---- more about relationship --->
<p>Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt. Proin ultrices dapibus porta.</p>
<div class="row no-gutters mx-n1 mt-auto mb-0">
<!--- trust stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Trust</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- communication stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Communication</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- affection stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Affection</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- compromise stat --->
<div class="col-md-6 p-1">
<small class="text-uppercase text-muted">Compromise</small>
<div class="progress rounded-0" style="height: 8px;">
<!--- change width here --->
<div style="width: 30%; background: #2b95b3;" class="progress-bar"></div>
</div>
</div>
<!--- end of stats --->
</div>
</div>
</div>
</div>
<!--- other relationships --->
<div class="row no-gutters">
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="d-flex">
<!--- profile picture --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; min-width: 150px; min-height: 150px;" class="justify-content-center align-items-center card rounded-0">
<!--- icon --->
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
<div class="align-items-center">
<div class="card flex-fill bg-faded rounded-0 p-2 ml-n4">
<!--- link to character and blurb --->
<p><strong><a href="LINK" style="color: #2b95b3;">Character Name</a></strong> Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="d-flex">
<!--- profile picture --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; min-width: 150px; min-height: 150px;" class="justify-content-center align-items-center card rounded-0">
<!--- icon --->
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
<div class="align-items-center">
<div class="card flex-fill bg-faded rounded-0 p-2 ml-n4">
<!--- link to character and blurb --->
<p><strong><a href="LINK" style="color: #2b95b3;">Character Name</a></strong> Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="d-flex">
<!--- profile picture --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; min-width: 150px; min-height: 150px;" class="justify-content-center align-items-center card rounded-0">
<!--- icon --->
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
<div class="align-items-center">
<div class="card flex-fill bg-faded rounded-0 p-2 ml-n4">
<!--- link to character and blurb --->
<p><strong><a href="LINK" style="color: #2b95b3;">Character Name</a></strong> Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="d-flex">
<!--- profile picture --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative; min-width: 150px; min-height: 150px;" class="justify-content-center align-items-center card rounded-0">
<!--- icon --->
<i class="fas fa-heart fa-fw fa-4x" style="color: #ffffff; position: absolute;"></i>
</div>
<div class="align-items-center">
<div class="card flex-fill bg-faded rounded-0 p-2 ml-n4">
<!--- link to character and blurb --->
<p><strong><a href="LINK" style="color: #2b95b3;">Character Name</a></strong> Etiam ut dolor auctor mi posuere ultrices. Quisque sed ligula justo. Aliquam venenatis odio at scelerisque tincidunt.</p>
</div>
</div>
</div>
</div>
<!--- end of relationships --->
</div>
<div class="text-center"><small><a href="/8byte" style="color: #2b95b3;">code credits</a></small></div>
</div>