Profile
<!-- ===================================================
06. GRAVEYARD by misschainsawktn
> comments are a bit rushed on this one, sorry... orz
> all extra decor is properly marked for easier editing/removal
== colors: bootstrap + one accent; ==
> accent color: #6F586F
> text in accent: text-white
- can be replaced with [ text-dark ] if the accent is very light
== image/link heavy code; ==
> border images: BORDER_IMG_URL
> "normal" images: IMG_URL
> "full ref" button: REF_URL
> character links: CHARA_LINK
^ use ctrl + f to find and replace colors/images/links easily! ^
==================================================== -->
<!-- card hiding the profile header, can be removed - recommended if using a custom image background -->
<div class="card py-4 border-0" style="margin-top:-60px">
<div class="container-fluid pt-5" style="max-width:1050px;">
<div class="row no-gutters">
<!-- ===================
STICKY SIDEBAR
- icon
- quote
- music player
- credit (do not remove)
=====================-->
<div class="col-lg-3 pr-lg-2 pb-3">
<div class="card p-2 rounded-0 bg-faded h-100 align-items-center" style="min-height:250px; border:none; border-top: double 4px #6F586F">
<div class="mt-n5 w-100" style="position:sticky; top:50px">
<!-- === icon === -->
<!-- border image -->
<div class="card rounded-0 border-0 p-2 mb-3 mt-n1 mx-auto" style="width:170px; height:170px; background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center;">
<!-- icon image -->
<div class="card rounded-0 h-100 bg-faded" style="border: double 4px #6F586F;
background:url('IMG_URL') no-repeat;
background-size:cover;
background-position:center"></div>
<!-- decor icons -->
<i class="fa-light fa-ghost text-white" style="font-size:3em; position:absolute; left:-4px; bottom:45px; transform:rotate(15deg); text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000"></i>
<i class="fa-light fa-ghost text-white" style="font-size:2em; position:absolute; left:2px; bottom:10px; transform:rotate(-10deg); text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000"></i>
<!-- end decor icons -->
</div>
<!-- === end icon === -->
<!-- === quote === -->
<!-- border image -->
<div class="card p-2 mb-3 rounded-0 border-0" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<div class="card p-2 px-3 bg-faded h-100 rounded-0 text-muted text-center font-italic" style="border-width: 0 4px; border-style:double; border-color:#6F586F">
<i class="fa-light fa-quote-left" style="color:#6F586F; position:absolute; top:5px; left:5px"></i>
<p style="font-variant:small-caps">Write a quote here. This little box will grow with content.</p>
<i class="fa-light fa-quote-right" style="color:#6F586F; position:absolute; bottom:5px; right:5px"></i>
</div>
</div>
<!-- === end quote === -->
<!-- === music box === -->
<!-- border image -->
<div class="card p-2 mb-2 rounded-0 border-0" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<div class="card p-2 bg-faded h-100 rounded-0" style="border: double 4px #6F586F">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-gramophone" style="font-size:1.1em"></i> </div>
<hr class="my-1 w-100" style="border-top: double 4px #6F586F">
<!-- == song title + artist - dont worry about the lenght, the box will grow but the music player WILL still work fine! == -->
<p class="my-0 text-center" style="font-variant:small-caps">Song Title<span class="text-muted">- Artist</span></p>
<!-- ================
YT EMBED
- replace [ SOhICfem_8g ] with your youtube id (found after https://www.youtube.com/watch?v=)
- keep the [ ?controls=0 ] at the end for a nicer preformance
================== -->
<div class="w-100 h-100" style="position:absolute; top:-1px; right:0; overflow:hidden;">
<iframe src="https://www.youtube.com/embed/SOhICfem_8g?controls=0"
class="w-100" frameborder="0" style="position:absolute; top:-110px; left:0; height:300px; opacity:0.001;"></iframe>
</div>
</div>
</div>
<!-- === end music box === -->
<!-- === credit - do not remove please === -->
<div class="row no-gutters align-items-center justify-content-center">
<div class="col"> <hr style="border-top-width:4px; border-top-style:double"> </div>
<div class="col-auto px-2"> <a class="text-muted tooltipster" href="/misschainsawktn" title="code by misschainsawktn"><i class="fa-light fa-telescope"></i> <i class="fa-light fa-planet-ringed"></i></a> </div>
<div class="col"> <hr style="border-top-width:4px; border-top-style:double"> </div>
</div>
<!-- === end credit === -->
</div>
<!-- === end sticky === -->
</div>
</div>
<!-- ===================
MAIN CONTENT
- basics
- personality
- design
- trivia
- history
- relationships
=====================-->
<div class="col-lg-9 pl-lg-2">
<div class="row no-gutters">
<!-- === HEADER - name + title === -->
<div class="col-lg-12 pb-3">
<!-- image border -->
<div class="card py-3 rounded-0 border-0" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center; ">
<div class="card h-100 p-2 rounded-0" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2.5em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-cross"></i>
Character Name
</p>
<p class="text-muted mt-0 text-center" style="font-size:1.5em; font-variant:small-caps">A Title Of Sorts.</p>
</div>
</div>
</div>
<!-- ==============
SECTION 1
- basics
- personality
================ -->
<!-- === basics + image === -->
<div class="col-lg-12 pb-3">
<div class="card px-2 py-3 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<div class="row no-gutters">
<!-- basics -->
<div class="col-lg-6 pr-lg-2 pb-2 pb-lg-0">
<div class="card p-2 h-100 rounded-0" style=" border: double 4px #6F586F; border-bottom:none; border-right:none; font-variant:small-caps">
<!-- full name -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-signature fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">full name</p>
</div>
</div>
<!-- gender -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-venus-mars fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">gender</p>
</div>
</div>
<!-- pronouns -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-comments fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">pro/nouns</p>
</div>
</div>
<!-- age -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-hourglass-half fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">age</p>
</div>
</div>
<!-- birthday -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-birthday-cake fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">birthday</p>
</div>
</div>
<!-- star sign -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-star-shooting fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">star sign</p>
</div>
</div>
<!-- race/species -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-dna fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">race/species</p>
</div>
</div>
<!-- orientation -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-heart-pulse fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">orientation</p>
</div>
</div>
<!-- occupation -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-briefcase fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">occupation</p>
</div>
</div>
<!-- === add more above this line === -->
</div>
</div>
<!-- image -->
<div class="col-lg-6 pl-lg-2">
<div class="card p-2 h-100 rounded-0" style="min-height:150px; border: double 4px #6F586F; border-top:none; border-left:none; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center"></div>
<!-- decor icons -->
<i class="fa-light fa-tombstone text-white" style="font-size:3.5em; position:absolute; right:60px; bottom:0px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000"></i>
<i class="fa-light fa-tombstone text-white" style="font-size:5em; position:absolute; right:-4px; bottom:0px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000"></i>
<!-- end decor icons -->
</div>
</div>
</div>
</div>
<!-- === personality + sticky column == -->
<div class="col-lg-12 row no-gutters pb-3">
<!-- === sticky column with image === -->
<div class="col-lg-5 px-0 pl-lg-1 pr-lg-3 pb-3 pb-lg-0 mt-lg-n5 order-lg-2">
<!-- image border -->
<div class="card p-3 rounded-0 border-0" style="height:calc(100vh - 50px); position:sticky; top:25px; background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<!-- sticky image -->
<div class="card p-2 h-100 rounded-0" style="border: double 4px #6F586F; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center">
<!-- decor icons -->
<i class="fa-light fa-cross text-white" style="font-size:5em; position:absolute; left:-10px; top:-10px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000; transform:rotate(5deg)"></i>
<i class="fa-light fa-cross text-white" style="font-size:6em; position:absolute; right:-5px; bottom:0px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000; transform:rotate(-5deg)"></i>
<i class="fa-light fa-crow text-white" style="font-size:3em; position:absolute; left:-5px; bottom:0px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000;"></i>
<!-- end decor icons -->
</div>
</div>
</div>
<!-- === personality === -->
<div class="col-lg-7 pr-lg-1 order-lg-1">
<div class="row no-gutters text-justify">
<!-- === personality header === -->
<div class="col-lg-12 pb-3">
<!-- image border -->
<div class="card py-3 rounded-0 border-0" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<div class="card h-100 p-2 rounded-0" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-crystal-ball"></i>
The Mirror</p>
<p class="text-muted mt-0 text-center" style="font-size:1.3em; font-variant:small-caps">Know Thyself.</p>
</div>
</div>
</div>
<!-- =======================
MAIN PERSONALITY CONTENT
> traits
> written content
> personality basics
> stats (standalone + double side)
> likes/dislikes/fears/hobbies
========================= -->
<div class="col-lg-12 pb-3">
<div class="card p-2 pb-4 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<!-- === traits + written content + basics === -->
<div class="card px-1 py-2 rounded-0 border-0">
<div class="row no-gutters">
<!-- positive traits -->
<div class="col-lg-4 px-1 pb-2">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-plus" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">pos. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">pos. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">pos. trait </span></li>
</ul>
</div>
<!-- neutral traits -->
<div class="col-lg-4 px-1 pb-2">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-equals" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">neu. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">neu. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">neu. trait </span></li>
</ul>
</div>
<!-- negative traits -->
<div class="col-lg-4 px-1 pb-2">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-minus" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">neg. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">neg. trait </span></li>
<li style="color:#6F586F"><span class="text-muted">neg. trait </span></li>
</ul>
</div>
<!-- written content -->
<div class="col-lg-12 px-1 pb-2">
<p>Write something about your character's personality here; this can be as long or short as you'd like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- basics -->
<div class="col-lg-12 px-1" style="font-variant:small-caps">
<!-- attitude -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-masks-theater fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">attitude</p>
</div>
</div>
<!-- mbti -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-head-side-brain fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">mbti (content)</p>
</div>
</div>
<!-- tarot -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-cards-blank fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">tarot</p>
</div>
</div>
<!-- archetype -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-dharmachakra fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">archetype</p>
</div>
</div>
<!-- vice/sin -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-hands-bound fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">vice/sin</p>
</div>
</div>
<!-- virtue -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-hands-holding-heart fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">virtue</p>
</div>
</div>
<!-- alignment -->
<div class="row no-gutters py-1 align-items-center">
<div class="col-auto pl-2" style="border-left: double 4px #6F586F">
<div class="card p-2 align-items-center justify-content-center text-white rounded-0 border-0" style="background-color:#6F586F">
<i class="fa-light fa-scale-unbalanced fa-fw" style="font-size:1.1em"></i>
</div>
</div>
<div class="col">
<p class="text-muted text-right">alignment</p>
</div>
</div>
</div>
</div>
</div>
<hr class="w-100 my-2" style="border-top-style: double; border-top-width:4px">
<!-- === stats === -->
<div class="card p-2 rounded-0 border-0">
<div class="row no-gutters">
<!-- ===============
STANDALONE STATS
the five "points" can be adjusted to fit your character's stats.
> for filled in points, use [ <i class="fa-solid fa-diamond"></i> ]
> for blank points, use [ <i class="fa-regular fa-diamond"></i> ]
! you can replace [ fa-diamond ] with any other fontawesome icon !
================= -->
<!-- charisma -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Charisma</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- kindness -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Kindness</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- patience -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Patience</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- maturity -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Maturity</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- intellect -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Intellect</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- integrity -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Integrity</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- courage -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Courage</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- empathy -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Empathy</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<!-- loyalty -->
<div class="col-lg-4 px-1 pb-2">
<p class="text-muted text-center mb-0" style="font-variant:small-caps">Loyalty</p>
<p class="text-center mt-0" style="color:#6F586F; font-size:90%">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
<i class="fa-light fa-diamond"></i>
</p>
</div>
<hr class="w-100 my-1" style="border-top-width:4px; border-top-style:double">
<!-- ===============
DOUBLE SIDE STATS
these use a faux progress bar, made with positioning on an icon.
> to adjust the icon's position, change the [ 50% ] in [ left:calc(50% - 5%) ]. leave the rest untouched or it may break.
> remove [ text-muted ] from the class of the prevailing stat if you want it to appear as the accent color (optional)
! you can replace [ fa-diamond ] with any other fontawesome icon !
================= -->
<div class="col-lg-12 px-1">
<!-- EXTROVERTED // INTROVERTED -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Extroverted</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Introverted</div>
</div>
<!-- INSTINCTIVE // CALCULATED -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Instinctive</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Calculated</div>
</div>
<!-- SINCERE // DECEPTIVE -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Sincere</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Deceptive</div>
</div>
<!-- CHAOTIC // PREDICTABLE -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Chaotic</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Predictable</div>
</div>
<!-- RESERVED // AFFECTIONATE -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Reserved</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Affectionate</div>
</div>
<!-- INDIFFERENT // EMOTIONAL -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Indifferent</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Emotional</div>
</div>
<!-- REALISTIC // DAYDREAMER -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Realistic</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Daydreamer</div>
</div>
<!-- COOPERATIVE // LONE WOLF -->
<div class="row no-gutters p-1" style="font-variant:small-caps; font-size:1.05em; color:#6F586F">
<div class="col-3 text-muted text-left text-truncate">Cooperative</div>
<div class="col px-2 w-100 align-items-center">
<div class="w-100 bg-faded align-items-center " style="height:3px">
<i class="fa-solid fa-diamond" style="color:#6F586F; position:absolute;
left:calc(50% - 5%)"
></i>
</div>
</div>
<div class="col-3 text-muted text-right text-truncate">Lone Wolf</div>
</div>
</div>
</div>
</div>
<hr class="w-100 my-2" style="border-top-style: double; border-top-width:4px">
<!-- === likes/dislikes/fears/hobbies === -->
<div class="card p-2 rounded-0 border-0">
<div class="row no-gutters">
<!-- likes -->
<div class="col-lg-6 px-1 pb-2">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-heart" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">content</span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
</ul>
</div>
<!-- dislikes -->
<div class="col-lg-6 px-1 pb-2">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-heart-crack" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
</ul>
</div>
<!-- fears -->
<div class="col-lg-6 px-1 pb-2 pb-lg-0">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-skull" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
</ul>
</div>
<!-- interests/hobbies -->
<div class="col-lg-6 px-1">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-star" style="font-size:1.1em"></i> </div>
<hr class="my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square; font-size:90%">
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
<li style="color:#6F586F"><span class="text-muted">content </span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ===================
LIL BOX CAROUSEL
> demeanor
> motivations
> morals
> beliefs
> carousel control button
> lil image
==================== -->
<div class="col-lg-8 pt-lg-3 mt-lg-n5 mb-2 mb-lg-0">
<!-- image border -->
<div class="card py-3 px-2 h-100 rounded-0 border-0" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<!-- carousel -->
<div class="card h-100 p-2 rounded-0 bg-faded" style="min-height:200px; border: double 4px #6F586F; border-left:none; border-right:none">
<div class="carousel slide carousel-fade h-100" id="personality" data-pause="true">
<div class="carousel-inner h-100">
<!-- demeanor -->
<div class="carousel-item active h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-person-rays"></i>
</span>
Write about your character's general demeanor here - there's space to talk about the demeanor towards specific groups of people in the relationships section. Do they put a front up or are they completely honest? Any personality quirks or peculiar behaviours that set them apart from others, or maybe even normal little things that somehow characterize them?</p>
</div>
<!-- motivations -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-head-side-heart"></i>
</span>
Write about your character's motivations here. Why do they take the actions they take? What are their goals, their aspirations, their deepest desires, if they have any significant enough? How do they affect their behaviour, and is it for the better or for the worse?</p>
</div>
<!-- morals -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-head-side-brain"></i>
</span>
Write about your character's morals here. Do they have a strict moral code, or are they more chaotic in how they act? Maybe they enforce their own morals onto others, believing it to be the only right one? Or are they more lenient about it? What is the thing they hold up above all, and what is the one they look down on the most?</p>
</div>
<!-- beliefs -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-person-praying"></i>
</span>
Write about your character's beliefs here. Are they religious, and if so, which deity or deities do they worship? Or maybe they don't have any religious beliefs, but have other strongly held ideals? If so, what are those? How do they relate to their personality, to their history and to their story as a person?</p>
</div>
<!-- === add more above this line - make sure only the first one has the [ active ] class or the whole thing will break === -->
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 pl-lg-2 flex-column">
<div class="card p-3 rounded-0 mb-3 bg-faded" style="height:100px; border:double 4px #6F586F; border-top:none; border-bottom:none">
<!-- carousel button -->
<div class="card h-100 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F;">
<a class="text-white" href="#personality" data-slide="next"> <i class="fa-light fa-chevron-right fa-xl"></i> </a>
</div>
</div>
<!-- aesthetic image -->
<div class="card p-2 rounded-0 flex-fill" style="height:100px; border: double 4px #6F586F; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
- design
- trivia
- history
- relationships
================ -->
<div class="col-lg-12 pb-3">
<div class="row no-gutters">
<!-- ===============
DESIGN CAROUSEL
- reference
- scars/marks
- tattoos/piercings
- outfit/accessories
- additional design notes
================ -->
<div class="col-lg-6 pr-1 pb-3 pb-lg-2">
<div class="card p-2 rounded-0 h-100 bg-faded" style="border: double 4px #6F586F; border-top:none; border-bottom:none">
<div class="card p-2 rounded-0 h-100 border-0">
<div class="card h-100 rounded-0 border-0 pb-1">
<!-- carousel -->
<div class="carousel slide carousel-fade h-100 text-justify" id="design" data-pause="true">
<div class="carousel-inner h-100">
<!-- reference image - works best if landscape/horizontal -->
<div class="carousel-item active h-100">
<div class="card h-100 rounded-0 border-0" style="min-height:200px; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center top">
<div class="card rounded-0 border-0 align-items-center justify-content-center" style="background:#6F586F; height:30px; width:30px; position:absolute; bottom:0px; right:0px">
<!-- full ref link -->
<a class="text-white" href="REF_URL">
<i class="fa-light fa-paintbrush"></i>
</a>
</div>
</div>
</div>
<!-- scars/marks -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-claw-marks"></i>
</span>
Write about your character's scars or marks, if applicable. Where are they on their body, and what do they look like? What is their origin story - is it something grandiose? Something mundane? Or maybe something incredibly silly? Or maybe your character has a mark of some kind, be it a simple birthmark or something otherwordly? If they do, this is the place to talk about that, too.</p>
</div>
<!-- tattoos -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-pen-nib"></i>
</span>
Write about your character's tattoos, if applicable. Where are they, and what do they look like? Do they hold any special significance to them, in their origins, in what they depict, or in their deeper meaning, if they even have one? Or maybe they got them just because they were pretty, or they thought it was funny?</p>
</div>
<!-- outfit/accessories -->
<div class="carousel-item h-100">
<p>
<span class="float-left p-3 mr-2 text-white" style="font-size:1.5em; background-color:#6F586F;">
<i class="fa-light fa-clothes-hanger"></i>
</span>
Write about your character's outfit(s) and accessories. Do they have a main outfit, and if so, what does it look like? Or maybe they're always wearing different outfits? Do any of their clothes hold some special significance to them? Perhaps they were a beloved gift, or special in another way. And what about accessories? Do they wear jewelry or make-up of any kind? Do they have any piercings? </p>
</div>
<!-- design notes -->
<div class="carousel-item h-100">
<div class="row no-gutters">
<div class="col-lg-auto pr-1">
<div class="h-100 p-3 text-white justify-content-center" style="background-color:#6F586F; font-size:1.5em">
<i class="fa-light fa-pencil"></i>
</div>
</div>
<!-- === design notes column === -->
<div class="col-lg pl-1">
<div class="h-100">
<ul class="list-group ml-4" style="list-style:square">
<li style="color:#6F586F"><span class="text-body">Design note here. Lorem ipsum dolor sit amet.</span></li>
<li style="color:#6F586F"><span class="text-body">Design note here. Lorem ipsum dolor sit amet.</span></li>
<li style="color:#6F586F"><span class="text-body">Design note here. Lorem ipsum dolor sit amet.</span></li>
<li style="color:#6F586F"><span class="text-body">You can add as many of these as you want.</span></li>
<!-- === add more above this line === -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="w-100 my-1" style="border-top: double 4px #6F586F">
<!-- decor icon + carousel control -->
<div class="card px-2 row no-gutters rounded-0 border-0 justify-content-around align-items-center text-white" style="background-color:#6F586F">
<div class="col-6 justify-content-start">
<i class="fa-light fa-swatchbook" style="font-size:1.1em"></i>
</div>
<div class="col-6 justify-content-end">
<a class="text-white" href="#design" data-slide="next">
<i class="fa-light fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- === trivia === -->
<div class="col-lg-6 px-2 pb-lg-0 pb-3 mb-lg-n4" style="z-index:1">
<!-- image border -->
<div class="card px-2 py-3 rounded-0 border-0 h-100" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<!-- content -->
<div class="card p-2 h-100 rounded-0" style="border: double 4px #6F586F; border-top:none; border-bottom:none">
<div class="card p-2 rounded-0 border-0 align-items-center justify-content-center text-white" style="background-color:#6F586F"> <i class="fa-light fa-question" style="font-size:1.1em"></i></div>
<hr class="w-100 my-1" style="border-top: double 4px #6F586F">
<ul class="list-group ml-4" style="list-style:square;">
<li style="color:#6F586F"><span class="text-muted">Write a trivia item here. This box will grow with content. </span></li>
<li style="color:#6F586F"><span class="text-muted">You can add as many as you want, the boxes should adjust on their own. If something looks odd, try adjusting the padding or the margins of this box and of the history box.</span></li>
<li style="color:#6F586F"><span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<!-- ==== add more above this line ==== -->
</ul>
</div>
</div>
</div>
<!-- === history === -->
<div class="col-lg-12 pb-3">
<div class="card py-4 px-2 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:0; border-right:0">
<div class="card rounded-0 border-0 my-2 h-100 py-3 text-justify">
<!-- chapter zero -->
<!-- header -->
<div class="card py-3 rounded-0 border-0 mb-2" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center; ">
<div class="card h-100 p-1 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-book-bible"></i>
Chapter Zero: Prologue.</p>
<p class="text-muted mt-0 text-center" style="font-size:1.2em; font-variant:small-caps">A Subtitle, If You'd Like.</p>
</div>
</div>
<!-- content -->
<div class="pl-2 pr-3 mb-3">
<p> <span class="float-left p-3 mr-2 text-white" style="font-variant:small-caps;font-size:1.5em; font-weight:700; background-color:#6F586F; font-family:Georgia, serif">F</span>irst letter of the whole chapter, cue all the rest. This code is kinda geared towards characters with a lot of info, so the more you write, the better! This section is meant as a tl;dr, a short summary, or simply a prologue, but you can change this to your liking. You can also add as many paragraphs as you want, or even more sections! The world is yours, if you want it to be.</p>
</div>
<!-- chapter one -->
<!-- header -->
<div class="card py-3 rounded-0 border-0 mb-2" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center; ">
<div class="card h-100 p-1 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-bookmark"></i>
Chapter One: Title.</p>
<p class="text-muted mt-0 text-center" style="font-size:1.2em; font-variant:small-caps">A Subtitle, If You'd Like.</p>
</div>
</div>
<!-- content -->
<div class="pl-2 pr-3 mb-3">
<p> <span class="float-left p-3 mr-2 text-white" style="font-variant:small-caps;font-size:1.5em; font-weight:700; background-color:#6F586F; font-family:Georgia, serif">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida neque sed libero pellentesque dapibus. Integer feugiat erat est, in sodales arcu bibendum vel. Suspendisse sem felis, lacinia eu consequat quis, venenatis vel leo. Fusce euismod enim eu ipsum pretium, nec semper nisl fringilla. Curabitur sollicitudin quam eu eros sagittis feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec interdum tristique magna, et luctus felis congue quis. Quisque lobortis diam ut massa varius porttitor. Mauris venenatis tempus leo, posuere facilisis lorem vulputate sed. Aliquam blandit neque et eros imperdiet, ut dictum ante vehicula. Fusce in purus in felis sagittis dignissim vel quis urna. Aliquam in dui lorem. Curabitur a facilisis ipsum, eget sollicitudin neque. Vestibulum nec odio lorem.</p>
<p> Suspendisse quam tortor, commodo vel consequat quis, euismod id elit. Aliquam vitae velit a arcu varius venenatis eu a mauris. Donec accumsan facilisis dolor a facilisis. Phasellus nec aliquet magna, eu facilisis neque. Morbi mollis nulla vel metus faucibus faucibus. Donec turpis diam, bibendum ut mollis ut, condimentum pharetra nulla. Ut lacinia metus sit amet lacus venenatis convallis. Proin consequat odio non posuere iaculis. Nullam consequat, diam a mattis fermentum, justo erat egestas ex, eu porttitor mauris nisi et ipsum. Integer consequat neque nibh, tempus lacinia arcu aliquet at. Vestibulum gravida tempor ante vel efficitur. Curabitur sollicitudin quam in odio hendrerit, id feugiat magna malesuada. Aliquam vel quam quis ex vulputate malesuada. Cras viverra nunc quis nisi laoreet dapibus.
</p>
</div>
<!-- chapter two -->
<!-- header -->
<div class="card py-3 rounded-0 border-0 mb-2" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center; ">
<div class="card h-100 p-1 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-bookmark"></i>
Chapter Two: Title.</p>
<p class="text-muted mt-0 text-center" style="font-size:1.2em; font-variant:small-caps">A Subtitle, If You'd Like.</p>
</div>
</div>
<!-- content -->
<div class="pl-2 pr-3 mb-3">
<p> <span class="float-left p-3 mr-2 text-white" style="font-variant:small-caps;font-size:1.5em; font-weight:700; background-color:#6F586F; font-family:Georgia, serif">N</span>am fringilla tristique tellus, quis congue mauris lobortis nec. Praesent consectetur odio quis libero convallis, vel aliquam lorem dapibus. In sed sagittis nulla. Donec consequat lectus vitae fringilla eleifend. Vestibulum aliquam venenatis nisl. Phasellus feugiat, quam vel hendrerit convallis, sem risus ultrices velit, sit amet porttitor tortor felis eu dui. Phasellus mollis augue dui, ut maximus magna tristique in. Sed vel est vel sem varius malesuada non egestas erat. Mauris efficitur odio laoreet nisi vehicula, eget aliquam metus sollicitudin. Quisque at mollis tellus. Quisque porttitor sagittis eros, ac fringilla turpis vehicula nec.</p>
<p> In commodo mollis enim eu dignissim. Donec ornare arcu non eros volutpat, in accumsan neque placerat. Aliquam nec semper tellus. Phasellus bibendum feugiat purus sed fermentum. Praesent eleifend ipsum eu purus suscipit efficitur. Cras leo lorem, sollicitudin eu vulputate vitae, fermentum sit amet metus. Donec sit amet quam nec sapien sollicitudin aliquam. Nam justo lorem, tincidunt et turpis vitae, luctus rhoncus metus. Sed volutpat turpis eget rutrum euismod. Maecenas nunc purus, ultrices ut efficitur non, faucibus eu lectus. Phasellus eu viverra nunc, a fermentum diam. Nulla facilisi. Donec sit amet lacinia mi.
</p>
</div>
<!-- chapter three -->
<!-- header -->
<div class="card py-3 rounded-0 border-0 mb-2" style="background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center; ">
<div class="card h-100 p-1 rounded-0 bg-faded" style="border: double 4px #6F586F; border-left:none; border-right:none">
<p class="text-center mb-0" style="font-size:2em; font-family: Georgia, times; color:#6F586F">
<i class="fa-light fa-bookmark"></i>
Chapter Three: Title.</p>
<p class="text-muted mt-0 text-center" style="font-size:1.2em; font-variant:small-caps">A Subtitle, If You'd Like.</p>
</div>
</div>
<!-- content -->
<div class="pl-2 pr-3">
<p> <span class="float-left p-3 mr-2 text-white" style="font-variant:small-caps;font-size:1.5em; font-weight:700; background-color:#6F586F; font-family:Georgia, serif">C</span>urabitur ac felis vel nisl sollicitudin condimentum commodo eu tellus. Sed sodales nisl sapien, nec condimentum neque dapibus a. Morbi ac ligula nunc. Etiam ante quam, malesuada blandit nunc et, sodales pulvinar sem. Vestibulum nec leo tincidunt, efficitur lacus non, maximus risus. Praesent vel accumsan elit. Aliquam condimentum nunc eget ornare scelerisque. Vivamus augue est, tincidunt eu mollis ac, vehicula eget neque. Pellentesque non nulla quis orci ullamcorper fringilla vitae at ante. Quisque venenatis pellentesque justo, vitae vestibulum felis fermentum vitae. In ultrices mi lacus, et molestie magna egestas vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas ullamcorper ex neque, ut venenatis purus condimentum in. Donec facilisis lectus in lacinia molestie.
</p>
</div>
<!-- ==== add chapters above this line - make sure the last content section does not have the [ mb-3 ] class ==== -->
</div>
</div>
</div>
<!-- === relationships === -->
<!-- === tabbed attitudes - will scroll if they get so long they dont fit the sticky anymore === -->
<div class="col-lg-5 pt-lg-3 pr-lg-1 pb-3 pb-lg-0 mt-lg-n5">
<!-- image border -->
<div class="card p-3 rounded-0 border-0" style="height:calc(100vh - 50px); position:sticky; top:25px; background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center">
<div class="card rounded-0 bg-faded h-100" style="border: double 4px #6F586F; border-top:0;">
<!-- decor icon -->
<i class="fa-light fa-crow text-white" style="font-size:3em; position:absolute; left:-5px; bottom:0px; text-shadow: 1.5px 1.5px #6F586F, 0 0 5px #000;"></i>
<!-- end decor icon -->
<!-- tabs -->
<ul class="nav row no-gutters text-center justify-content-center">
<!-- lovers -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-heartbeat text-white"></i>
<a class="nav-link active btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#lovers" data-toggle="tab"></a>
</li>
<!-- family -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-family text-white"></i>
<a class="nav-link btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#family" data-toggle="tab"></a>
</li>
<!-- friends -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-users text-white"></i>
<a class="nav-link btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#friends" data-toggle="tab"></a>
</li>
<!-- acquaintances -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-user text-white"></i>
<a class="nav-link btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#acquaintances" data-toggle="tab"></a>
</li>
<!-- strangers -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-question text-white"></i>
<a class="nav-link btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#strangers" data-toggle="tab"></a>
</li>
<!-- enemies -->
<li class="nav-item col p-2 align-items-center justify-content-center" style="background-color:#6F586F;">
<i class="fa-light fa-skull text-white"></i>
<a class="nav-link btn btn-outline-secondary border-0 rounded-0 w-100 h-100" style="position:absolute; mix-blend-mode:screen; filter:grayscale(1) brightness(1000%); opacity:0.15" href="#enemies" data-toggle="tab"></a>
</li>
</ul>
<!-- tab content -->
<div class="tab-content text-justify h-100" style="overflow:auto">
<!-- lovers -->
<div class="tab-pane fade show active" id="lovers">
<div class="py-1 px-2">
<p>Lovers tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
<!-- family -->
<div class="tab-pane fade" id="family">
<div class="py-1 px-2">
<p>Family tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
<!-- friends -->
<div class="tab-pane fade" id="friends">
<div class="py-1 px-2">
<p>Friends tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
<!-- acquaintances -->
<div class="tab-pane fade" id="acquaintances">
<div class="py-1 px-2">
<p>Acquaintances tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
<!-- strangers -->
<div class="tab-pane fade" id="strangers">
<div class="py-1 px-2">
<p>Strangers tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
<!-- enemies -->
<div class="tab-pane fade" id="enemies">
<div class="py-1 px-2">
<p>Enemies tab. Write about your character's attitude towards this group of people! This box will scroll once it's filled with enough content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit augue. Proin sem orci, eleifend sit amet ornare nec, tincidunt ut velit. Duis nec tincidunt sem. Curabitur accumsan augue in finibus gravida. Quisque quis libero arcu. Nulla ac velit consequat, consectetur dui sit amet, blandit metus. Nunc efficitur, orci in tempor fringilla, justo ex feugiat eros, at tempor justo quam at mauris. Pellentesque ut sodales orci, eu tristique magna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 pl-lg-2">
<div class="row no-gutters">
<!-- 1 -->
<div class="col-12 pb-3 text-justify">
<!-- border image -->
<div class="card py-3 rounded-0 border-0" style=" background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center;">
<!-- content -->
<div class="card p-2 rounded-0" style="border: double 4px #6F586F; border-right:none; border-left:none">
<div class="row no-gutters">
<div class="col-lg-4 pb-2 pb-lg-0 pr-lg-1">
<div style="position:sticky; top:15px;">
<!-- icon image -->
<div class="card rounded-0" style="min-height:150px; border: double 4px #6F586F; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center"></div>
<hr class="w-100 my-1" style="border-top: double 4px #6F586F">
<!-- symbol -->
<div class="card p-2 rounded-0 border-0 text-white align-items-center justify-content-center" style="background:#6F586F; font-size:1.1em">
<i class="fa-light fa-circle-heart"></i>
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-2">
<!-- name + relationship -->
<p class="text-center mb-0" style="font-size:1.7em; font-family: Georgia, times;">
<a href="CHARA_LINK" target="_BLANK" style="color:#6F586F">Character Name</a>
</p>
<p class="text-muted my-0 text-center text-lowercase" style="font-size:1.1em; font-variant:small-caps">Relationship.</p>
<hr class="w-100 my-1" style="border-top-style: double; border-top-width:4px">
<!-- ===============
STATS
the five "points" can be adjusted to fit your character's stats.
> for filled in points, use [ <i class="fa-solid fa-diamond"></i> ]
> for blank points, use [ <i class="fa-regular fa-diamond"></i> ]
! you can replace [ fa-diamond ] with any other fontawesome icon !
================= -->
<!-- affection -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Affection</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- respect -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Respect</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- trust -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Trust</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- honesty -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Honesty</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- communication -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Communication</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- comfort -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Comfort</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2" style="border-top-style: double; border-top-width:4px">
<!-- === written content === -->
<p>Write about the characters' relationship here. This box will grow; the side icon is sticky. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="col-12 pb-3 text-justify">
<!-- border image -->
<div class="card py-3 rounded-0 border-0" style=" background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center;">
<!-- content -->
<div class="card p-2 rounded-0" style="border: double 4px #6F586F; border-right:none; border-left:none">
<div class="row no-gutters">
<div class="col-lg-4 pb-2 pb-lg-0 pr-lg-1">
<div style="position:sticky; top:15px;">
<!-- icon image -->
<div class="card rounded-0" style="min-height:150px; border: double 4px #6F586F; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center"></div>
<hr class="w-100 my-1" style="border-top: double 4px #6F586F">
<!-- symbol -->
<div class="card p-2 rounded-0 border-0 text-white align-items-center justify-content-center" style="background:#6F586F; font-size:1.1em">
<i class="fa-light fa-handshake"></i>
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-2">
<!-- name + relationship -->
<p class="text-center mb-0" style="font-size:1.7em; font-family: Georgia, times;">
<a href="CHARA_LINK" target="_BLANK" style="color:#6F586F">Character Name</a>
</p>
<p class="text-muted my-0 text-center text-lowercase" style="font-size:1.1em; font-variant:small-caps">Relationship.</p>
<hr class="w-100 my-1" style="border-top-style: double; border-top-width:4px">
<!-- ===============
STATS
the five "points" can be adjusted to fit your character's stats.
> for filled in points, use [ <i class="fa-solid fa-diamond"></i> ]
> for blank points, use [ <i class="fa-regular fa-diamond"></i> ]
! you can replace [ fa-diamond ] with any other fontawesome icon !
================= -->
<!-- affection -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Affection</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- respect -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Respect</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- trust -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Trust</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- honesty -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Honesty</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- communication -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Communication</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- comfort -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Comfort</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2" style="border-top-style: double; border-top-width:4px">
<!-- === written content === -->
<p>Write about the characters' relationship here. This box will grow; the side icon is sticky. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="col-12 text-justify">
<!-- border image -->
<div class="card py-3 rounded-0 border-0" style=" background:url('BORDER_IMG_URL') no-repeat; background-size:cover; background-position:center;">
<!-- content -->
<div class="card p-2 rounded-0" style="border: double 4px #6F586F; border-right:none; border-left:none">
<div class="row no-gutters">
<div class="col-lg-4 pb-2 pb-lg-0 pr-lg-1">
<div style="position:sticky; top:15px;">
<!-- icon image -->
<div class="card rounded-0" style="min-height:150px; border: double 4px #6F586F; background:url('IMG_URL') no-repeat; background-size:cover; background-position:center"></div>
<hr class="w-100 my-1" style="border-top: double 4px #6F586F">
<!-- symbol -->
<div class="card p-2 rounded-0 border-0 text-white align-items-center justify-content-center" style="background:#6F586F; font-size:1.1em">
<i class="fa-light fa-skull"></i>
</div>
</div>
</div>
<div class="col-lg-8 pl-lg-2">
<!-- name + relationship -->
<p class="text-center mb-0" style="font-size:1.7em; font-family: Georgia, times;">
<a href="CHARA_LINK" target="_BLANK" style="color:#6F586F">Character Name</a>
</p>
<p class="text-muted my-0 text-center text-lowercase" style="font-size:1.1em; font-variant:small-caps">Relationship.</p>
<hr class="w-100 my-1" style="border-top-style: double; border-top-width:4px">
<!-- ===============
STATS
the five "points" can be adjusted to fit your character's stats.
> for filled in points, use [ <i class="fa-solid fa-diamond"></i> ]
> for blank points, use [ <i class="fa-regular fa-diamond"></i> ]
! you can replace [ fa-diamond ] with any other fontawesome icon !
================= -->
<!-- affection -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Affection</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- respect -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Respect</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- trust -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Trust</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- honesty -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Honesty</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- communication -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Communication</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<!-- comfort -->
<div class="row no-gutters py-1">
<div class="col-6 text-muted text-truncate" style="font-variant:small-caps">Comfort</div>
<div class="col-6 text-right" style="color:#6F586F">
<i class="fa-solid fa-diamond"></i>
<i class="fa-solid fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
<i class="fa-regular fa-diamond"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2" style="border-top-style: double; border-top-width:4px">
<!-- === written content === -->
<p>Write about the characters' relationship here. This box will grow; the side icon is sticky. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- === add more above this line - make sure the last one does not have the [ pb-3 ] class === -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>