Profile
<!-- ===================================================
10. SOL INVICTUS by misschainsawktn
== colors: bootstrap + one accent; ==
> accent color: #B8161B
== image/link heavy code; ==
> images: IMG_URL
> excluding fontmeme headers, which have the default fontmeme permalink, and ribbons, which have a placeholder ribbon
> links: URL
^ use ctrl + f or ctrl + h 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-2 text-justify" style="max-width:1050px; font-size:90%">
<div class="row no-gutters">
<!-- ============== HEADER ============== -->
<div class="col-lg-12 pb-2">
<div class="card p-2 rounded-0 bg-faded" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0 justify-content-center" style="overflow:hidden">
<!-- IMAGE -->
<div class="card p-5 h-100 rounded-0 border-0" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center;
filter:blur(3px);
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.35)"></div>
<!-- SPINNING ICON -->
<i class="fa-thin fa-gear text-white fa-spin" style="font-size:5rem; opacity: 0.35; position:absolute; left:15px; animation-duration:15s"></i>
</div>
</div>
</div>
<!-- ============== MAIN CONTENT ============== -->
<div class="col-lg-12 pb-2">
<div class="tab-content">
<!-- ============== TAB ONE: BASICS ============== -->
<div class="tab-pane fade show active" id="ONE">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + NAME
> BASIC INFO
> QUOTE or TAGLINE
> INTRODUCTION
> MOODBOARD IMAGES
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> NAME
============== -->
<div class="col-lg-5 pr-lg-1 flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-sun" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- NAME -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME NAME
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230821/2dd896c6b4c3703dd19290a135be0c51.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> BASIC INFO
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- NAME -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-signature" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">content</span>
</div>
</div>
<!-- AGE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-hourglass-half" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">content</span>
</div>
</div>
<!-- SPECIES -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-dna" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">content</span>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-heart-pulse" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">content</span>
</div>
</div>
<!-- GENDER -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-venus-mars" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">content</span>
</div>
</div>
<!-- PRONOUNS -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-comments" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">con / tent</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> QUOTE or TAGLINE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Morbi blandit <span class="font-weight-bold font-italic" style="color:#B8161B">ornare dolor</span>.
</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
<!-- ==============
SECTION 4
> INTRODUCTION
> MOODBOARD IMAGES
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales felis vitae lorem maximus venenatis. Mauris nec nibh est. Aenean rhoncus, ligula eget ornare vehicula, felis lacus sodales tortor, at tincidunt dui purus eu magna. Sed cursus eros sit amet facilisis convallis. Aenean consequat augue nec justo pharetra, id faucibus diam volutpat. Praesent nec massa vel augue bibendum bibendum. Pellentesque ac nunc dui.</p>
<p class="mb-2">In suscipit, nisi ac viverra dapibus, metus nibh pellentesque arcu, non tincidunt ligula massa et justo. Fusce sed magna arcu. Phasellus in elementum mi, vel dapibus justo. Cras eu magna libero. Donec a pharetra elit. Phasellus facilisis nulla quis hendrerit posuere. Phasellus aliquam odio eget ligula interdum placerat. Nullam non consequat felis. Nam a mi libero. Cras interdum velit id porttitor sodales. Praesent ut leo dolor. Sed sed pulvinar mi. Ut a eros a nisl tempor fermentum. Etiam feugiat sollicitudin turpis vel porta. Vestibulum eu eros non diam maximus dictum.</p>
<p>Praesent nec auctor diam, ullamcorper accumsan massa. Maecenas fermentum mauris ut risus tempor, et placerat tortor ullamcorper. Donec quis magna eros. Integer at dignissim purus. Donec eu nulla fringilla, hendrerit dui in, vehicula sem. Integer sodales enim ultricies pretium pulvinar.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-lg-column flex-row">
<!-- IMAGE ONE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-lg-2 mr-lg-0 mr-1" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- IMAGE TWO -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill ml-lg-0 ml-1" style="border-bottom: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> FOCAL IMAGE
> MUSIC PLAYER
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> FOCAL IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:300px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: solid 1px #B8161B"></div>
</div>
</div>
<!-- ==============
SECTION 2
> MUSIC PLAYER
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 border-0">
<div class="carousel slide h-100" id="music" data-pause="true">
<div class="carousel-inner h-100">
<!-- SONG ONE -->
<div class="carousel-item active">
<!-- PLAYER -->
<div class="row no-gutters">
<!-- PLAY BUTTON -->
<div class="col-3 pr-1">
<div class="card p-2 h-100 rounded-0 align-items-center justify-content-center" style="border: solid 1px #B8161B">
<i class="fa-light fa-compact-disc fa-spin" style="font-size:2rem; color:#B8161B; animation-duration:4s"></i>
<!-- ================
YT EMBED
> replace [ KUZ7jG7BKE8 ] 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/KUZ7jG7BKE8?controls=0"
class="w-100" frameborder="0" style="position:absolute; top:-110px; left:0; height:300px; opacity:0.001;"></iframe>
</div>
</div>
</div>
<!-- SONG TITLE + ARTIST -->
<div class="col-9 pl-1">
<p class="my-0 text-right text-truncate font-weight-bold" style="font-family: Georgia, times; font-size:1.5rem; font-variant:small-caps; letter-spacing:0.5px; color:#B8161B">Song Title</p>
<p class="text-right mt-n2" style="font-variant:small-caps">Artist</p>
</div>
</div>
<hr class="w-100 my-2">
<!-- LYRICS - looks best with two lines! -->
<p class="pl-2 font-italic" style="border-left: double 4px #B8161B">
lorem ipsum dolor sit amet <br>
consectetur adipiscing elit
</p>
<!-- CAROUSEL CONTROLS -->
<div class="mt-1 row no-gutters align-items-center justify-content-center">
<div class="col-auto">
<a href="#music" data-slide="prev" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-backward"></i>
</a>
</div>
<div class="col px-2"> <hr class="w-100" style="border-top: double 4px #B8161B;"> </div>
<div class="col-auto">
<a href="#music" data-slide="next" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-forward"></i>
</a>
</div>
</div>
</div>
<!-- SONG TWO -->
<div class="carousel-item">
<!-- PLAYER -->
<div class="row no-gutters">
<!-- PLAY BUTTON -->
<div class="col-3 pr-1">
<div class="card p-2 h-100 rounded-0 align-items-center justify-content-center" style="border: solid 1px #B8161B">
<i class="fa-light fa-compact-disc fa-spin" style="font-size:2rem; color:#B8161B; animation-duration:4s"></i>
<!-- ================
YT EMBED
> replace [ L0yc9tGBtf4 ] 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/L0yc9tGBtf4?controls=0"
class="w-100" frameborder="0" style="position:absolute; top:-110px; left:0; height:300px; opacity:0.001;"></iframe>
</div>
</div>
</div>
<!-- SONG TITLE + ARTIST -->
<div class="col-9 pl-1">
<p class="my-0 text-right text-truncate font-weight-bold" style="font-family: Georgia, times; font-size:1.5rem; font-variant:small-caps; letter-spacing:0.5px; color:#B8161B">Song Title</p>
<p class="text-right mt-n2" style="font-variant:small-caps">Artist</p>
</div>
</div>
<hr class="w-100 my-2">
<!-- LYRICS - looks best with two lines! -->
<p class="pl-2 font-italic" style="border-left: double 4px #B8161B">
lorem ipsum dolor sit amet <br>
consectetur adipiscing elit
</p>
<!-- CAROUSEL CONTROLS -->
<div class="mt-1 row no-gutters align-items-center justify-content-center">
<div class="col-auto">
<a href="#music" data-slide="prev" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-backward"></i>
</a>
</div>
<div class="col px-2"> <hr class="w-100" style="border-top: double 4px #B8161B;"> </div>
<div class="col-auto">
<a href="#music" data-slide="next" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-forward"></i>
</a>
</div>
</div>
</div>
<!-- SONG THREE -->
<div class="carousel-item">
<!-- PLAYER -->
<div class="row no-gutters">
<!-- PLAY BUTTON -->
<div class="col-3 pr-1">
<div class="card p-2 h-100 rounded-0 align-items-center justify-content-center" style="border: solid 1px #B8161B">
<i class="fa-light fa-compact-disc fa-spin" style="font-size:2rem; color:#B8161B; animation-duration:4s"></i>
<!-- ================
YT EMBED
> replace [ 5Ex6JWHqI1Q ] 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/5Ex6JWHqI1Q?controls=0"
class="w-100" frameborder="0" style="position:absolute; top:-110px; left:0; height:300px; opacity:0.001;"></iframe>
</div>
</div>
</div>
<!-- SONG TITLE + ARTIST -->
<div class="col-9 pl-1">
<p class="my-0 text-right text-truncate font-weight-bold" style="font-family: Georgia, times; font-size:1.5rem; font-variant:small-caps; letter-spacing:0.5px; color:#B8161B">Song Title</p>
<p class="text-right mt-n2" style="font-variant:small-caps">Artist</p>
</div>
</div>
<hr class="w-100 my-2">
<!-- LYRICS - looks best with two lines! -->
<p class="pl-2 font-italic" style="border-left: double 4px #B8161B">
lorem ipsum dolor sit amet <br>
consectetur adipiscing elit
</p>
<!-- CAROUSEL CONTROLS -->
<div class="mt-1 row no-gutters align-items-center justify-content-center">
<div class="col-auto">
<a href="#music" data-slide="prev" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-backward"></i>
</a>
</div>
<div class="col px-2"> <hr class="w-100" style="border-top: double 4px #B8161B;"> </div>
<div class="col-auto">
<a href="#music" data-slide="next" style="color:#B8161B; font-size:1.5em">
<i class="fa-light fa-forward"></i>
</a>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB TWO: PERSONALITY ============== -->
<div class="tab-pane fade" id="TWO">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + TITLE
> TRAITS
> LONG IMAGE
> PERSONALITY SUMMARY + THREE FACES
> LEADING TRAITS DESCRIPTION
> DEMEANOR + MOTIVATIONS + MORALS + BELIEFS
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-crown" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="col-lg-12 pb-2">
<div class="card h-100 py-2 pr-2 pl-0 rounded-0 bg-faded" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230805/cefcbaf335be8ae212c10d97e6eb1bb7.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> TRAITS
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- ==============
LEADING TRAITS - meant to be the ones that define your character the most!
============== -->
<!-- POSITIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-plus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center font-weight-bold font-italic" style="font-family: Georgia, times">positive</span>
</div>
</div>
<!-- NEUTRAL -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-equals" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center font-weight-bold font-italic" style="font-family: Georgia, times">neutral</span>
</div>
</div>
<!-- NEGATIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-minus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center font-weight-bold font-italic" style="font-family: Georgia, times">negative</span>
</div>
</div>
<!-- ==============
SECONDARY TRAITS
============== -->
<!-- POSITIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-plus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">positive</span>
</div>
</div>
<!-- NEUTRAL -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-equals" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">neutral</span>
</div>
</div>
<!-- NEGATIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-minus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">negative</span>
</div>
</div>
<!-- POSITIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-plus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">positive</span>
</div>
</div>
<!-- NEUTRAL -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-equals" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">neutral</span>
</div>
</div>
<!-- NEGATIVE -->
<div class="col-lg-4 col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-minus" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">negative</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> LONG IMAGE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0" style="min-height:50px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- ==============
SECTION 4
> PERSONALITY SUMMARY + THREE FACES
> LEADING TRAITS DESCRIPTION
> LITTLE IMAGE
> DEMEANOUR + MOTIVATIONS + MORALS + BELIEFS
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<!-- PERSONALITY SUMMARY -->
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">N</span>
ullam facilisis blandit neque, nec suscipit augue condimentum vitae. Curabitur leo risus, laoreet in varius sed, finibus nec est. Donec consectetur tortor nec velit fermentum accumsan. Praesent facilisis rutrum nunc, semper condimentum diam varius semper. In scelerisque ornare justo eu pharetra. Curabitur tristique sem vel lectus condimentum laoreet. Donec vehicula tellus metus, sed ornare velit posuere porta. Sed et ante et dolor auctor dapibus. Donec tempus et neque et ultricies. Nullam ullamcorper mollis leo, laoreet ultrices tellus lacinia ut. Praesent tristique, ante quis facilisis varius, metus velit pretium felis, eget eleifend ipsum mi et purus. Nulla ut dignissim magna. Fusce congue suscipit massa, sed tempus urna finibus et.</p>
<hr class="my-3 w-100">
<!-- THREE FACES CAROUSEL -->
<div class="carousel slide" id="faces" data-pause="true">
<div class="carousel-inner">
<!-- FIRST FACE -->
<div class="carousel-item active">
<p class="mb-2" style="font-family: Georgia, times;">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; color:#B8161B">â… </span>
<i><span class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">The World.</span> How does your character behave generally? What do they do if the world has a camera on them?</i>
<!-- CAROUSEL CONTROL -->
<a href="#faces" data-slide="next" style="color:#B8161B"> <i class="fa-solid fa-chevron-right"></i> </a>
</p>
<p class="mb-2">Donec elit magna, malesuada at tincidunt non, sollicitudin ac ante. Sed et facilisis diam. Donec tempus ornare vulputate. Nunc tincidunt eros vitae leo condimentum, eget suscipit nunc vulputate. Proin sit amet elit enim. Mauris placerat est a finibus dictum. Praesent viverra bibendum tellus vitae malesuada. Pellentesque eget mi placerat, lobortis ipsum in, ornare dui. Nulla et metus leo. Mauris vehicula pulvinar accumsan. Ut efficitur lobortis neque eget vulputate. Nulla nec dictum massa, id lacinia quam. Nullam viverra felis at nunc efficitur vehicula vel vitae lacus. Vestibulum vel ante at ex mattis molestie sit amet id diam. In commodo eleifend augue, nec maximus dui vehicula a. In metus sem, laoreet viverra nunc non, malesuada efficitur nunc.</p>
<p>Quisque dignissim et arcu id placerat. Mauris non tempor odio. Fusce ultrices faucibus odio et egestas. Vivamus vel lorem enim. Nam vehicula quis quam eget ullamcorper. Sed quis diam egestas, molestie justo at, imperdiet est. Aenean eget quam condimentum, fringilla mauris sed, pretium quam.</p>
</div>
<!-- SECOND FACE -->
<div class="carousel-item">
<p class="mb-2" style="font-family: Georgia, times;">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; color:#B8161B">â…¡</span>
<i><span class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"><i>Close Ones.</i></span> How does your character behave in front of friends and family? Anything different? Are they more affectionate or a plain asshole?</i>
<!-- CAROUSEL CONTROL -->
<a href="#faces" data-slide="next" style="color:#B8161B"> <i class="fa-solid fa-chevron-right"></i> </a>
</p>
<p class="mb-2">Nulla lacinia tristique neque ac condimentum. Praesent urna elit, posuere et congue quis, accumsan sed risus. Nulla in sapien a nisi consequat suscipit. Donec sapien nisl, tincidunt at vulputate a, cursus luctus erat. Sed vel urna ligula. Sed quis ante egestas, congue arcu nec, pulvinar ante. Cras ac tellus lorem. Etiam placerat mauris eget condimentum gravida. Aenean commodo nibh nisi, in ornare massa laoreet sit amet. Morbi sed tellus a dolor porta gravida vitae sit amet mauris. Cras in porta libero. Nulla semper sollicitudin bibendum. Sed id arcu ut nunc iaculis lacinia. Proin vitae quam in ante iaculis laoreet vel quis leo.</p>
<p>Etiam bibendum fermentum volutpat. Phasellus laoreet nisi vitae hendrerit suscipit. Sed auctor est pulvinar est tempor, eu congue nibh accumsan. Proin pellentesque risus ut nisl elementum, sed pharetra mauris vehicula. Phasellus nec nunc eget augue posuere accumsan. Sed non quam eget erat elementum hendrerit. Sed ut nibh porta, tincidunt libero vel, sodales sapien. Sed neque mi, venenatis vitae viverra at, aliquet eget odio. Integer efficitur mi sit amet purus fringilla gravida. </p>
</div>
<!-- THIRD FACE -->
<div class="carousel-item">
<p class="mb-2" style="font-family: Georgia, times;">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; color:#B8161B">â…¢</span>
<i><span class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">True Reflection.</span> How does your character behave by themselves? What is done from the depths of their hearts, reserved for themselves alone and has never manifested in front of anybody? Do they think they are scum or do they truely think everyone around them is scum?</i>
<!-- CAROUSEL CONTROL -->
<a href="#faces" data-slide="next" style="color:#B8161B"> <i class="fa-solid fa-chevron-right"></i> </a>
</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis convallis odio nec dolor consectetur, sed ornare neque porttitor. Fusce non diam eu tellus venenatis gravida. Phasellus velit libero, feugiat non nibh id, dignissim dignissim arcu. Fusce nec lorem urna. Mauris rhoncus, mi non vehicula tempus, arcu quam ullamcorper velit, nec viverra enim nulla ac ipsum. Vivamus vestibulum, mi eget dapibus finibus, ex sem vulputate tellus, efficitur elementum sem nisi sit amet nisi. Ut hendrerit, sem vitae scelerisque imperdiet, lorem augue aliquet est, ac fringilla nisi nunc vel justo. Praesent fringilla dui rhoncus velit aliquet placerat. Donec auctor eros ac orci vehicula, eu dapibus enim vestibulum. Aliquam pellentesque sodales dolor, eu sollicitudin magna dictum sit amet. Fusce metus eros, pulvinar eget euismod at, ullamcorper eget tellus. Suspendisse fringilla, sem nec sodales egestas, ipsum lacus varius nisi, a tempor massa arcu a mauris. Curabitur lectus purus, congue ac maximus quis, feugiat in quam. Maecenas hendrerit elit eget purus cursus, quis venenatis magna ultricies. Nam pharetra sit amet urna non lobortis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- LEADING TRAITS DESCRIPTION -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-grow-2 mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- CAROUSEL -->
<div class="carousel slide" id="traits" data-pause="true">
<div class="carousel-inner">
<!-- POSITIVE -->
<div class="carousel-item active">
<p>
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-solid fa-plus"></i> </span>
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Positive.</span> Integer in laoreet libero. Duis pharetra sagittis erat, non volutpat neque gravida eget. Vestibulum odio mi, pellentesque sit amet arcu facilisis, hendrerit dapibus nulla. Mauris tempor in sapien in sodales. Aliquam tincidunt tempus ante quis mattis. Quisque id sapien augue. Nunc ornare ex felis, nec pellentesque enim porttitor at.
</p>
</div>
<!-- NEUTRAL -->
<div class="carousel-item">
<p>
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-solid fa-equals"></i> </span>
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Neutral.</span> Integer in laoreet libero. Duis pharetra sagittis erat, non volutpat neque gravida eget. Vestibulum odio mi, pellentesque sit amet arcu facilisis, hendrerit dapibus nulla. Mauris tempor in sapien in sodales. Aliquam tincidunt tempus ante quis mattis. Quisque id sapien augue. Nunc ornare ex felis, nec pellentesque enim porttitor at.
</p>
</div>
<!-- NEGATIVE -->
<div class="carousel-item">
<p>
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-solid fa-minus"></i> </span>
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Negative.</span> Integer in laoreet libero. Duis pharetra sagittis erat, non volutpat neque gravida eget. Vestibulum odio mi, pellentesque sit amet arcu facilisis, hendrerit dapibus nulla. Mauris tempor in sapien in sodales. Aliquam tincidunt tempus ante quis mattis. Quisque id sapien augue. Nunc ornare ex felis, nec pellentesque enim porttitor at.
</p>
</div>
</div>
</div>
<hr class="w-100 my-2">
<!-- CAROUSEL CONTROLS -->
<div class="justify-content-around" style="font-size:1.2em">
<a class="px-1" href="#traits" data-slide="prev" style="color:#B8161B"> <i class="fa-light fa-caret-left"></i> </a>
<a class="px-1" href="#traits" data-slide-to="0" style="color:#B8161B"> <i class="fa-solid fa-plus"></i> </a>
<a class="px-1" href="#traits" data-slide-to="1" style="color:#B8161B"> <i class="fa-solid fa-equals"></i> </a>
<a class="px-1" href="#traits" data-slide-to="2" style="color:#B8161B"> <i class="fa-solid fa-minus"></i> </a>
<a class="px-1" href="#traits" data-slide="next" style="color:#B8161B"> <i class="fa-light fa-caret-right"></i> </a>
</div>
</div>
</div>
<!-- LITTLE IMAGE -->
<div class="card rounded-0 p-1 mb-2" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
<!-- DEMEANOUR + MOTIVATIONS + MORALS + BELIEFS -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-grow-1" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- CAROUSEL CONTROLS -->
<div class="justify-content-around" style="font-size:1.2em">
<a class="px-1" href="#core" data-slide="prev" style="color:#B8161B"> <i class="fa-light fa-caret-left"></i> </a>
<a class="px-1" href="#core" data-slide-to="0" style="color:#B8161B"> <i class="fa-light fa-person-rays"></i> </a>
<a class="px-1" href="#core" data-slide-to="1" style="color:#B8161B"> <i class="fa-light fa-head-side-heart"></i> </a>
<a class="px-1" href="#core" data-slide-to="2" style="color:#B8161B"> <i class="fa-light fa-head-side-brain"></i> </a>
<a class="px-1" href="#core" data-slide-to="3" style="color:#B8161B"> <i class="fa-light fa-person-praying"></i> </a>
<a class="px-1" href="#core" data-slide="next" style="color:#B8161B"> <i class="fa-light fa-caret-right"></i> </a>
</div>
<hr class="w-100 my-2">
<!-- CAROUSEL -->
<div class="carousel slide" id="core" data-pause="true">
<div class="carousel-inner">
<!-- DEMEANOUR -->
<div class="carousel-item active">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <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">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <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? <br>
</p>
</div>
<!-- MORALS -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <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? <br>
</p>
</div>
<!-- BELIEFS -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <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? <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> STANDALONE STATS + DOUBLE SIDED STATS
> IMAGE
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> STANDALONE STATS
> DOUBLE SIDED STATS
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-1 h-100 rounded-0 border-0">
<!-- STANDALONE -->
<div class="row no-gutters justify-content-center">
<!-- CHARISMA -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">charisma.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- CONFIDENCE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">confidence.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- INTELLECT -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">intellect.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- INTEGRITY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">integrity.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- PATIENCE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">patience.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- KINDNESS -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">kindness.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- COURAGE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">courage.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- MATURITY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">maturity.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- EMPATHY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">empathy.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- LOYALTY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">loyalty.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
<hr class="mx-1 my-2">
<!-- DOUBLE SIDED
> if you want, you can add [ class="faded" ] to the span tag of the non-leading trait for some extra flair
-->
<div class="px-1">
<!-- OPTIMIST / PESSIMIST -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>optimist.</span>
<span>pessimist.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- INTROVERT / EXTROVERT -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>introvert.</span>
<span>extrovert.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- DAREDEVIL / CAUTIOUS -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>daredevil.</span>
<span>cautious.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- CHAOTIC / PREDICTABLE -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>chaotic.</span>
<span>predictable.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- LOGICAL / EMOTIONAL -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>logical.</span>
<span>emotional.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- MESSY / ORGANIZED -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>messy.</span>
<span>organized.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- HONEST / DECEIVING -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>honest.</span>
<span>deceiving.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- LEADER / FOLLOWER -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>leader.</span>
<span>follower.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- AFFECTIONATE / STOIC -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>affectionate.</span>
<span>stoic.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- STUBBORN / YIELDING -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>stubborn.</span>
<span>yielding.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- GROUNDED / DREAMER -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>grounded.</span>
<span>dreamer.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- COOPERATIVE / LONE WOLF -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>cooperative.</span>
<span>lone wolf.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- MOVES ON / STAYS IN THE PAST -->
<div class="mb-2">
<!-- items -->
<div class="justify-content-between font-weight-bold font-italic" style="font-family: Georgia, times">
<span>moves on.</span>
<span>stays in the past.</span>
</div>
<!-- marker -->
<div class="mt-1">
<div class="progress bg-faded align-items-center" style="height:2px; overflow:visible">
<div class="progress-bar bg-transparent" style="
width:50%">
</div>
<i class="fa-solid fa-sun" style="color:#B8161B; font-size:1.2em"></i>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:200px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: solid 1px #B8161B"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB THREE: APPEARANCE ============== -->
<div class="tab-pane fade" id="THREE">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + NAME
> META INFO
> PALETTE
> DESIGN DESCRIPTION
> IMAGE
> DESIGN NOTES
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1 flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-paintbrush" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230805/0e688b91641c83574c5cefd47b29d887.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> META INFO
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- DESIGNER -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-pen" style="font-size:1.3em; color: #B8161B"></i>
<a class="mt-n1 text-center text-reset" href="URL">designer</a>
</div>
</div>
<!-- OBTAINED VIA -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-messages-dollar" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">obtained via</span>
</div>
</div>
<!-- WORTH -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-sack-dollar" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">worth</span>
</div>
</div>
<!-- FULL REFERENCE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-image" style="font-size:1.3em; color: #B8161B"></i>
<a href="URL" class="mt-n1 text-center text-reset">full reference</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> PALETTE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 flex-row">
<!-- COLOR -->
<div class="card rounded-0 border-0 p-2 flex-grow-1" style="background:#aaa"></div>
<!-- COLOR -->
<div class="card rounded-0 border-0 p-2 flex-grow-1" style="background:#bbb"></div>
<!-- COLOR -->
<div class="card rounded-0 border-0 p-2 flex-grow-1" style="background:#ccc"></div>
<!-- COLOR -->
<div class="card rounded-0 border-0 p-2 flex-grow-1" style="background:#ddd"></div>
<!-- COLOR -->
<div class="card rounded-0 border-0 p-2 flex-grow-1" style="background:#eee"></div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
<!-- ==============
SECTION 4
> DESIGN DESCRIPTION
> IMAGE
> DESIGN NOTES
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<!-- BUILD -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-ruler pr-1"></i> Build.</span> <br>
— Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
— Fusce luctus turpis et risus pretium dictum.
</p>
<hr class="w-100 my-2">
<!-- HAIR -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-scissors pr-1"></i> Hair.</span> <br>
— Curabitur eget interdum leo. <br>
— Phasellus vehicula nulla et eleifend viverra.
</p>
<hr class="w-100 my-1">
<!-- COMPLEXION -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-palette pr-1"></i> Complexion.</span> <br>
— Maecenas convallis tempus libero vitae maximus. <br>
— Morbi eget lorem et eros porta porta.
</p>
<hr class="w-100 my-2">
<!-- FACE -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-head-side pr-1"></i> Face.</span> <br>
— Interdum et malesuada fames ac ante ipsum primis in faucibus. <br>
— Aenean vestibulum dolor at posuere feugiat.
</p>
<hr class="w-100 my-2">
<!-- EYES -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-eye pr-1"></i> Eyes.</span> <br>
— Curabitur rutrum, eros vel molestie malesuada, elit velit venenatis massa, at ultricies eros augue eu enim.
</p>
<hr class="w-100 my-2">
<!-- STYLE -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-clothes-hanger pr-1"></i> Style.</span> <br>
— Sed suscipit tristique ante, ac lacinia tellus tincidunt quis. <br>
— Integer sem tellus, tincidunt in sodales vitae, auctor a dui.
</p>
<hr class="w-100 my-2">
<!-- ACCESSORIES -->
<p class="mb-1">
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px"> <i class="fa-light fa-ring pr-1"></i> Acessories.</span> <br>
— Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <br>
— Nam euismod eu risus id porta.
</p>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-grow-2 mb-lg-2 mr-lg-0 mr-1" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- DESIGN NOTES -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-grow-1 ml-lg-0 ml-1" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Header.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Suspendisse congue sem at vestibulum faucibus.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Nulla laoreet accumsan auctor.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Aenean id venenatis neque, non tempor quam.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Etiam vel lectus sed odio sollicitudin imperdiet.</span> </li>
</ul>
<!-- delete from here to the next marker if you dont need the extra list -->
<hr class="w-100 my-2">
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Header.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Fusce at fermentum felis.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Pellentesque sit amet hendrerit enim.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Nulla ornare orci pretium vulputate vulputate.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Curabitur iaculis orci nec neque pretium, maximus fringilla ex lacinia.</span> </li>
</ul>
<!-- delete until here if you dont need the extra list -->
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> FOCAL IMAGE
> PERMISSIONS
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> FOCAL IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:300px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center top;
border: solid 1px #B8161B"></div>
</div>
</div>
<!-- ==============
SECTION 2
> PERMISSIONS
> you can use [ fa-check ] for "yes"; [ fa-question ] for "maybe" and [ fa-times ] for "no"!
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 border-0">
<ul class="fa-ul row no-gutters ml-4 mb-0">
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-check" style="color: #B8161B;"></i></span>
allowed </li>
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-check" style="color: #B8161B;"></i></span>
allowed </li>
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-question" style="color: #B8161B;"></i></span>
ask first </li>
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-question" style="color: #B8161B;"></i></span>
ask first </li>
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-times" style="color: #B8161B;"></i></span>
not allowed </li>
<!-- LIST ITEM -->
<li class="col-lg-6"><span class="fa-li"><i class="fa-light fa-times" style="color: #B8161B;"></i></span>
not allowed </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB FOUR: HISTORY ============== -->
<div class="tab-pane fade" id="FOUR">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + NAME
> WARNINGS
> STORY CAROUSEL (CHAPTER TITLE + CAROUSEL CONTROLS + CHAPTER CONTENT + QUOTE / SUBTITLE + IMAGE)
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1 pb-2flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-pen-nib" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230805/093ebf2871bca24f817685aeba17c146.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> WARNINGS
- i took the icons from sealkitty's list for one of their warning codes [ https://toyhou.se/19711420.f2u-let-the-living-beware/19711694.icon-codes ], feel free to customize them to your liking!
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- WARNING -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-triangle-exclamation" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">warning</span>
</div>
</div>
<!-- WARNING -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-triangle-exclamation" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">warning</span>
</div>
</div>
<!-- WARNING -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-triangle-exclamation" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">warning</span>
</div>
</div>
<!-- WARNING -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-triangle-exclamation" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">warning</span>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> STORY CAROUSEL
============== -->
<div class="col-lg-12">
<div class="carousel slide" id="story" data-pause="true">
<div class="carousel-inner">
<!-- CHAPTER ZERO -->
<div class="carousel-item active">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> CHAPTER TITLE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#story" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-bookmark mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#story" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Chapter Zero: <span class="font-weight-bold font-italic" style="color:#B8161B">Prologue.</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> CHAPTER CONTENT
> QUOTE/SUBTITLE
> IMAGE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">I</span>n et lobortis quam. Nunc eget efficitur nisi. Cras consectetur, dui nec pellentesque fermentum, tortor nulla hendrerit lorem, ac ullamcorper quam purus et arcu. Nunc facilisis consequat metus, quis aliquet augue molestie eget. Nullam vehicula, turpis et porttitor lacinia, enim sem sodales ex, sit amet maximus mi lorem vitae odio. Donec sollicitudin risus vitae aliquam vestibulum. Sed sed tincidunt est. Etiam non mi eleifend, vestibulum risus et, porttitor libero. Mauris augue massa, suscipit et odio non, feugiat dictum sem. Suspendisse sit amet gravida quam. Suspendisse maximus finibus mauris non sodales. In hac habitasse platea dictumst. Donec gravida leo ut semper facilisis. Vivamus vehicula tincidunt elit in imperdiet. Sed sapien mauris, accumsan sed nisi ut, rhoncus interdum est. Pellentesque dapibus, leo sed viverra tristique, nulla risus vulputate leo, quis imperdiet mi eros sed velit.</p>
<p>Aenean cursus tortor risus, ac sollicitudin metus luctus posuere. Fusce nec leo libero. Ut pretium bibendum arcu. Curabitur feugiat lectus eu diam pretium, sit amet porta sapien mattis. Cras posuere justo et velit sollicitudin eleifend. Ut blandit nisi a mi porta consequat id nec nulla. Mauris in tempor nibh. Mauris commodo urna non dignissim facilisis. Maecenas purus orci, maximus eget porta eu, vehicula eget velit. Nam nec interdum augue, eget placerat elit. Suspendisse nulla leo, volutpat tincidunt risus sed, eleifend aliquet nulla. Nulla fermentum nulla at ipsum egestas ultrices. Nam mauris dolor, facilisis consectetur elementum quis, fringilla non turpis. Nulla facilisi. Fusce sed commodo velit.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">lorem ipsum <span class="font-weight-bold" style="color:#B8161B">dolor sit amet</span>, consectetur adipiscing elit.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- CHAPTER ONE -->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> CHAPTER TITLE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#story" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-bookmark mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#story" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Chapter One: <span class="font-weight-bold font-italic" style="color:#B8161B">Title.</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> CHAPTER CONTENT
> QUOTE/SUBTITLE
> IMAGE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">D</span>onec laoreet magna ac feugiat hendrerit. Curabitur malesuada erat lacus, in faucibus turpis sollicitudin at. Donec molestie ac sapien quis ullamcorper. Suspendisse tristique lectus ac ligula malesuada, sit amet auctor urna ullamcorper. Morbi ipsum nulla, euismod id purus ut, sagittis consequat quam. Ut turpis nunc, condimentum non ante eget, viverra lobortis libero. Fusce vestibulum, purus ut rhoncus consequat, arcu erat pretium ipsum, nec viverra ante ex vel nisl. Suspendisse sit amet semper ante, vel ultrices tellus. Nulla suscipit, metus aliquet elementum fringilla, tellus libero vehicula metus, nec convallis dolor felis eget justo. Aliquam a nulla mattis tellus mattis commodo. Etiam ut gravida eros, condimentum rhoncus mi. Fusce ut nulla placerat, ornare sem ut, sodales tellus. Mauris a tincidunt risus. Vivamus lectus orci, ullamcorper et quam et, mollis condimentum neque. Donec purus orci, dapibus sed nunc auctor, gravida congue purus. Pellentesque eu massa blandit, dictum arcu vitae, vulputate justo.</p>
<p>Curabitur commodo, leo id rutrum porta, lacus sem ultricies nulla, at lacinia mi mi vehicula tellus. Fusce in mattis elit. Mauris bibendum quam a luctus efficitur. Nullam augue dui, rhoncus a sem sed, condimentum malesuada dui. Donec non tristique sem, non luctus urna. Etiam malesuada sapien lorem, sed imperdiet diam consectetur et. Etiam nec eros in ex elementum interdum. Sed volutpat fermentum tincidunt. Phasellus ac nisl quam. Integer mollis urna ex, nec varius purus convallis vitae. Quisque ut diam nunc. Donec luctus sed arcu id egestas. In scelerisque quam vitae risus maximus pretium. Quisque vel tristique magna. Vestibulum convallis elit sapien, rutrum tincidunt nulla sollicitudin non.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">duis sollicitudin elit <span class="font-weight-bold" style="color:#B8161B">sed tellus blandit viverra</span>, sed eget odio.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- CHAPTER TWO -->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> CHAPTER TITLE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#story" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-bookmark mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#story" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Chapter Two: <span class="font-weight-bold font-italic" style="color:#B8161B">Title.</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> CHAPTER CONTENT
> QUOTE/SUBTITLE
> IMAGE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">N</span>unc quam felis, ornare quis ante in, dapibus volutpat libero. Donec vehicula lorem nec enim maximus, quis mollis magna sagittis. Donec ac purus dapibus, cursus sem in, gravida nunc. Nam elementum, magna et congue tempor, dui orci cursus arcu, nec viverra turpis diam ac dui. Cras quis sapien ac augue bibendum ultricies. Donec ut dapibus dui. Praesent vulputate dictum lacus, non condimentum metus gravida in. Maecenas eleifend auctor magna, ut efficitur dui faucibus et.</p>
<p class="mb-2">Vivamus ut nibh facilisis, consequat felis quis, vehicula erat. In dapibus condimentum neque, dignissim imperdiet odio pulvinar a. In aliquet facilisis magna eu tincidunt. Nullam ut risus quis lectus hendrerit dignissim in a eros. Sed in eros sit amet eros suscipit iaculis. Suspendisse potenti.</p>
<p>Sed vel ligula et ante ultricies egestas. Donec pulvinar augue id arcu condimentum, eu commodo arcu facilisis. Duis cursus tincidunt velit sit amet egestas. Aliquam placerat, sapien vel consectetur tristique, libero nibh sagittis justo, eu convallis nibh metus nec est. Proin sit amet neque sapien. Integer non congue enim. Cras luctus fringilla mauris fringilla aliquam. Curabitur a mi vulputate, viverra felis eu, vehicula libero. Ut in tincidunt orci. Duis quis mi tempus, interdum nulla nec, fringilla nibh. Mauris rhoncus in eros id hendrerit. Ut auctor justo vel ex molestie rutrum. Donec sit amet auctor mauris, ut fermentum dui. Phasellus id tristique urna. Donec in vulputate lacus, ut imperdiet est.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">donec accumsan tempor lacus, et venenatis elit <span class="font-weight-bold" style="color:#B8161B">feugiat non</span>.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- CHAPTER THREE -->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> CHAPTER TITLE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#story" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-bookmark mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#story" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Chapter Three: <span class="font-weight-bold font-italic" style="color:#B8161B">Title.</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> CHAPTER CONTENT
> QUOTE/SUBTITLE
> IMAGE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">S</span>ed vel ligula et ante ultricies egestas. Donec pulvinar augue id arcu condimentum, eu commodo arcu facilisis. Duis cursus tincidunt velit sit amet egestas. Aliquam placerat, sapien vel consectetur tristique, libero nibh sagittis justo, eu convallis nibh metus nec est. Proin sit amet neque sapien. Integer non congue enim. Cras luctus fringilla mauris fringilla aliquam. Curabitur a mi vulputate, viverra felis eu, vehicula libero. Ut in tincidunt orci. Duis quis mi tempus, interdum nulla nec, fringilla nibh. Mauris rhoncus in eros id hendrerit. Ut auctor justo vel ex molestie rutrum. Donec sit amet auctor mauris, ut fermentum dui. Phasellus id tristique urna. Donec in vulputate lacus, ut imperdiet est.</p>
<p class="mb-2">Aenean accumsan sollicitudin mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras semper lorem sed imperdiet semper. In hac habitasse platea dictumst. Mauris vestibulum, risus quis laoreet egestas, sem quam pulvinar risus, in cursus diam mauris non diam. Suspendisse ut fringilla dui, in elementum dolor. Integer lacus orci, porta euismod risus eget, mollis laoreet nunc. Suspendisse sed diam sit amet sem ullamcorper tincidunt. Curabitur arcu nunc, posuere ac ultrices quis, tincidunt in sapien. Phasellus euismod quis nunc id tempor. Aenean interdum nunc in pharetra iaculis. Vivamus pretium ligula vitae risus rhoncus, sit amet ullamcorper lectus finibus.</p>
<p>Ut tincidunt commodo nunc, eu vehicula odio scelerisque id. Quisque quis quam id erat consequat aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ut efficitur nibh, in scelerisque odio. Nunc vel diam non velit euismod volutpat. Integer luctus metus at lectus eleifend viverra. Ut vel elementum lorem. Vestibulum vitae ex quis mi consectetur fringilla.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">duis porta eros <span class="font-weight-bold" style="color:#B8161B">et velit blandit</span> dapibus.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> BULLET POINT SUMMARY
> IMAGE
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> BULLET POINT SUMMARY
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100">
<!-- TITLE -->
<p class="text-center" style="font-size:1.5em; font-variant:small-caps; font-family: Georgia, times; z-index:3">
TL;DR: <span class="font-weight-bold font-italic" style="color:#B8161B">Summary.</span>
</p>
<!-- BULLET POINTS -->
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Vivamus cursus venenatis nisl, nec dictum dui faucibus et. Aliquam erat volutpat.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Phasellus commodo scelerisque ante pretium lobortis. Duis tristique pulvinar enim.</span> </li>
<li style="color:#B8161B"> <span class="text-body">The Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; donec pharetra viverra orci eget lacinia. In nec eleifend eros.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Praesent aliquam viverra condimentum. Sed et nibh suscipit, malesuada tortor ut, finibus odio.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Pellentesque sit amet lectus at neque ullamcorper tincidunt. Curabitur maximus, arcu ut convallis sagittis, eros arcu semper leo, quis efficitur magna felis vel erat.</span> </li>
</ul>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:75px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: solid 1px #B8161B"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB FIVE: COMBAT ============== -->
<div class="tab-pane fade" id="FIVE">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + NAME
> BASIC COMBAT INFO + QUOTE
> SKILLS CAROUSEL (SKILL NAME + CAROUSEL CONTROLS + DESCRIPTION CONTENT + TAGLINE + MASTERY / STRENGHTS / WEAKNESSES)
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1 flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-crosshairs" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230805/1987c25c9fb7037ef870358b1a0e22be.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> BASIC COMBAT INFO
> QUOTE
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- TACTIC -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-swords" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">tactic</span>
</div>
</div>
<!-- ATTITUDE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-masks-theater" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">attitude</span>
</div>
</div>
<!-- RANGE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-bullseye-arrow" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">range </span>
</div>
</div>
<!-- WEAPON -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-sword" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">weapon</span>
</div>
</div>
<!-- QUOTE -->
<div class="col-12 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-quote-left" style="font-size:1.3em; color: #B8161B; opacity: .35; position:absolute; top:5px; left:5px"></i>
<span class="px-2" style="font-family: Georgia, times; z-index:3">Vivamus rhoncus id tortor et volutpat. Mauris ultrices est sit amet turpis tempus <span class="font-weight-bold font-italic" style="color:#B8161B">varius at quam</span>.
</span>
<i class="fa-light fa-quote-right" style="font-size:1.3em; color: #B8161B; opacity: .35; position:absolute; bottom:5px; right:5px"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> SKILLS CAROUSEL
============== -->
<div class="col-lg-12">
<div class="carousel slide" id="skills" data-pause="true">
<div class="carousel-inner">
<!-- SKILL ONE -->
<div class="carousel-item active">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> SKILL NAME
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#skills" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<!-- replace with icon better fitting the skill -->
<i class="fa-light fa-sparkles mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#skills" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- NAME -->
<div class="col-lg-11">
<p class="text-right font-weight-bold font-italic" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3; color:#B8161B">
Skill Name
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> SKILL DESCRIPTION
> TAGLINE
> MASTERY / STRENGHTS / WEAKNESSES
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">E</span>tiam bibendum fermentum volutpat. Phasellus laoreet nisi vitae hendrerit suscipit. Sed auctor est pulvinar est tempor, eu congue nibh accumsan. Proin pellentesque risus ut nisl elementum, sed pharetra mauris vehicula. Phasellus nec nunc eget augue posuere accumsan. Sed non quam eget erat elementum hendrerit. Sed ut nibh porta, tincidunt libero vel, sodales sapien. Sed neque mi, venenatis vitae viverra at, aliquet eget odio. Integer efficitur mi sit amet purus fringilla gravida. Sed pharetra nulla a augue pulvinar, sit amet sodales nibh cursus. Sed ac facilisis enim, et ultrices est. Sed accumsan elit ultrices turpis faucibus, et porttitor ex viverra. Nunc nec congue tortor. Quisque ac est sit amet tortor ullamcorper auctor.</p>
<p>Vivamus cursus venenatis nisl, nec dictum dui faucibus et. Aliquam erat volutpat. Phasellus commodo scelerisque ante pretium lobortis. Duis tristique pulvinar enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra viverra orci eget lacinia. In nec eleifend eros. Praesent aliquam viverra condimentum. Sed et nibh suscipit, malesuada tortor ut, finibus odio. Pellentesque sit amet lectus at neque ullamcorper tincidunt. Curabitur maximus, arcu ut convallis sagittis, eros arcu semper leo, quis efficitur magna felis vel erat.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- TAGLINE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-grow-2 mb-2" style="border-top: double 4px #B8161B; min-height:150px">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">Ut tincidunt commodo nunc, eu vehicula odio scelerisque id. Quisque quis quam id erat consequat aliquet.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- MASTERY / STRENGHTS / WEAKNESSES -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<div class="justify-content-between">
<!-- MASTERY -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Mastery.</span>
<!--
- use [ fa-solid fa-circle ] for full dots
- use [ fa-regular fa-circle ] for empty dots
- use [ fa-regular fa-circle-half-stroke ] for halved dots
-->
<span class="px-2" style="color:#B8161B;font-size:90%;">
<i class="fa-solid fa-circle fa-fw"></i>
<i class="fa-solid fa-circle fa-fw"></i>
<i class="fa-regular fa-circle-half-stroke fa-fw"></i>
<i class="fa-regular fa-circle fa-fw"></i>
<i class="fa-regular fa-circle fa-fw"></i>
</span>
</div>
<hr class="w-100 my-2">
<!-- STRENGHTS -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Strenghts.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Integer metus at lectus eleifend viverra.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Ut vel elementum lorem.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Vestibulum vitae ex quis mi fringilla.</span> </li>
</ul>
<hr class="w-100 my-2">
<!-- WEAKNESSES -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Weaknesses.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Vivamus rhoncus id tortor et volutpat.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Mauris ultrices est sit amet turpis tempus varius at at quam.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Nulla sed ultricies urna.</span> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- SKILL TWO -->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> SKILL NAME
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#skills" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<!-- replace with icon better fitting the skill -->
<i class="fa-light fa-sparkles mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#skills" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- NAME -->
<div class="col-lg-11">
<p class="text-right font-weight-bold font-italic" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3; color:#B8161B">
Skill Name
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> SKILL DESCRIPTION
> TAGLINE
> MASTERY / STRENGHTS / WEAKNESSES
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B">E</span>tiam bibendum fermentum volutpat. Phasellus laoreet nisi vitae hendrerit suscipit. Sed auctor est pulvinar est tempor, eu congue nibh accumsan. Proin pellentesque risus ut nisl elementum, sed pharetra mauris vehicula. Phasellus nec nunc eget augue posuere accumsan. Sed non quam eget erat elementum hendrerit. Sed ut nibh porta, tincidunt libero vel, sodales sapien. Sed neque mi, venenatis vitae viverra at, aliquet eget odio. Integer efficitur mi sit amet purus fringilla gravida. Sed pharetra nulla a augue pulvinar, sit amet sodales nibh cursus. Sed ac facilisis enim, et ultrices est. Sed accumsan elit ultrices turpis faucibus, et porttitor ex viverra. Nunc nec congue tortor. Quisque ac est sit amet tortor ullamcorper auctor.</p>
<p>Vivamus cursus venenatis nisl, nec dictum dui faucibus et. Aliquam erat volutpat. Phasellus commodo scelerisque ante pretium lobortis. Duis tristique pulvinar enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra viverra orci eget lacinia. In nec eleifend eros. Praesent aliquam viverra condimentum. Sed et nibh suscipit, malesuada tortor ut, finibus odio. Pellentesque sit amet lectus at neque ullamcorper tincidunt. Curabitur maximus, arcu ut convallis sagittis, eros arcu semper leo, quis efficitur magna felis vel erat.</p>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- TAGLINE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-grow-2 mb-2" style="border-top: double 4px #B8161B; min-height:150px">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">Ut tincidunt commodo nunc, eu vehicula odio scelerisque id. Quisque quis quam id erat consequat aliquet.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
<!-- MASTERY / STRENGHTS / WEAKNESSES -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<div class="justify-content-between">
<!-- MASTERY -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Mastery.</span>
<!--
- use [ fa-solid fa-circle ] for full dots
- use [ fa-regular fa-circle ] for empty dots
- use [ fa-regular fa-circle-half-stroke ] for halved dots
-->
<span class="px-2" style="color:#B8161B;font-size:90%;">
<i class="fa-solid fa-circle fa-fw"></i>
<i class="fa-solid fa-circle fa-fw"></i>
<i class="fa-regular fa-circle-half-stroke fa-fw"></i>
<i class="fa-regular fa-circle fa-fw"></i>
<i class="fa-regular fa-circle fa-fw"></i>
</span>
</div>
<hr class="w-100 my-2">
<!-- STRENGHTS -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Strenghts.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Integer metus at lectus eleifend viverra.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Ut vel elementum lorem.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Vestibulum vitae ex quis mi fringilla.</span> </li>
</ul>
<hr class="w-100 my-2">
<!-- WEAKNESSES -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.2em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Weaknesses.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">Vivamus rhoncus id tortor et volutpat.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Mauris ultrices est sit amet turpis tempus varius at at quam.</span> </li>
<li style="color:#B8161B"> <span class="text-body">Nulla sed ultricies urna.</span> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> BATTLE STATS + COMBAT INFO
> IMAGE
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> BATTLE STATS + COMBAT INFO
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-1 border-0 rounded-0 h-100">
<!-- BATTLE STATS -->
<div class="row no-gutters justify-content-center">
<!-- ATTACK -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">attack.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- DEFENCE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">defence.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- ACCURACY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">accuracy.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- HEALTH -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">health.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- AGILITY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">agility.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- STAMINA -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #B8161B">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">stamina.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#B8161B;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#B8161B; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
<!-- little legend -->
<div class="m-1 text-right">
<i class="fa-solid fa-circle px-1" style="color:#B8161B"></i> Normal
<i class="fa-solid fa-circle px-1" style="color:#B8161B; opacity: .35"></i> Boosted
</div>
<hr class="m-1">
<!-- COMBAT INFO -->
<div class="p-1">
<p class="mb-2">Vivamus cursus venenatis nisl, nec dictum dui faucibus et. Aliquam erat volutpat. Phasellus commodo scelerisque ante pretium lobortis. Duis tristique pulvinar enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra viverra orci eget lacinia. In nec eleifend eros. Praesent aliquam viverra condimentum. Sed et nibh suscipit, malesuada tortor ut, finibus odio. Pellentesque sit amet lectus at neque ullamcorper tincidunt.</p>
<p>Suspendisse tincidunt sapien ac pellentesque suscipit. Aenean eleifend justo non mauris sodales mollis. Nullam euismod metus vel pharetra bibendum. Aliquam eleifend odio ac lectus iaculis luctus ac eu orci. Vestibulum ornare facilisis turpis, sed feugiat metus. Integer eu cursus mauris. Nullam eget mollis leo.</p>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:150px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: solid 1px #B8161B"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB SIX: EXTRAS ============== -->
<div class="tab-pane fade" id="SIX">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + TITLE
> TRAITS
> TRIVIA BLOCK
> LIKES / DISLIKES / FEARS / AMBITIONS / HOBBIES
> MOODBOARD IMAGES
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1 flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-gears" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230805/3bf55b356dc9955ddd1490aac767890b.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> TRAITS
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0">
<div class="row no-gutters my-auto justify-content-center">
<!-- MBTI -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-brain" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">mbti</span>
</div>
</div>
<!-- ARCHETYPE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-dharmachakra" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">archetype</span>
</div>
</div>
<!-- ENNEATYPE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-dice-d20" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">enneatype</span>
</div>
</div>
<!-- TEMPERAMENT -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-head-side-brain" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">temperament</span>
</div>
</div>
<!-- ALIGNMENT -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-scale-balanced" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">alignment</span>
</div>
</div>
<!-- TAROT -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-cards-blank" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">tarot
<!-- OPTIONAL EXTRA CARDS COLLAPSE LINK -->
<a style="color:#B8161B" data-toggle="collapse" href="#tarot"> <i class="fa-solid fa-chevron-down"></i> </a>
</span>
<!-- OPTIONAL EXTRA CARDS COLLAPSE LINK -->
<div class="collapse text-center" id="tarot">
extra tarot <br>
extra tarot <br>
extra tarot <br>
extra tarot
</div>
</div>
</div>
<!-- VIRTUE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-hands-holding-heart" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">virtue</span>
</div>
</div>
<!-- VICE -->
<div class="col-6 p-1">
<div class="card p-1 h-100 rounded-0 justify-content-center align-items-center" style="border-left: double 4px #B8161B">
<i class="fa-light fa-hands-bound" style="font-size:1.3em; color: #B8161B"></i>
<span class="mt-n1 text-center">vice</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3
> QUOTE or TAGLINE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Vivamus rhoncus id <span class="font-weight-bold font-italic" style="color:#B8161B">tortor et volutpat</span>. Turpis tempus varius at quam.
</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
<!-- ==============
SECTION 4
> TRIVIA BLOCK
> LIKES / DISLIKES / FEARS / AMBITIONS / HOBBIES
> MOODBOARD IMAGES
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<p class="mb-2"> <span class="float-left px-3 py-2 mr-2" style="font-size:1.5rem; border: solid 1px #B8161B; color:#B8161B"> <i class="fa-light fa-question"></i> </span>
<span class="font-weight-bold font-italic" style="color:#B8161B; font-size:1.5em; font-family: Georgia, times; font-variant:small-caps; letter-spacing:1px">Trivia.</span>
</p>
<ul class="pl-3 mb-0">
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Ut tincidunt commodo nunc, eu vehicula odio scelerisque id. Quisque quis quam id erat consequat aliquet.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ut efficitur nibh, in scelerisque odio.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Nunc vel diam non velit euismod volutpat. Integer luctus metus at lectus eleifend viverra. Ut vel elementum lorem. Vestibulum vitae ex quis mi consectetur fringilla.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Phasellus dictum blandit ultrices. Suspendisse ligula ex, dictum id interdum a, lacinia et tellus. Duis ac nulla non arcu gravida varius at sed nibh. Phasellus consectetur quam ac neque tempus, in finibus leo lacinia. In et pulvinar mi. Praesent maximus vehicula dolor, sed malesuada dui convallis ut. Aenean mi enim, feugiat sed mattis nec, commodo quis ante.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Ut maximus mauris ex, quis feugiat metus venenatis quis. Cras quis lorem nec felis fermentum fermentum. Nunc a dui a libero sagittis lacinia.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Nullam et leo aliquet arcu egestas porttitor. Mauris tellus mauris, finibus id vestibulum nec, laoreet non sapien. Mauris id arcu dapibus, maximus eros eu, pulvinar ante. Donec dictum pulvinar erat, eget lobortis ex varius sit amet. Aenean accumsan eu orci in ultrices.</span> </li>
<li class="mb-1" style="color:#B8161B"> <span class="text-body">Nulla id metus vitae metus rhoncus sagittis. Aliquam dictum quam ac venenatis tincidunt. Vestibulum egestas elit sit amet est sollicitudin, nec sollicitudin orci pellentesque. Vivamus volutpat nisi sed purus egestas, sed pretium ligula volutpat. Vivamus felis ante, pharetra a maximus sed, mollis vitae nisi. Donec mattis tortor nec diam pellentesque, sed euismod ligula efficitur.</span> </li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- LIKES / DISLIKES / FEARS / AMBITIONS / HOBBIES -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-grow-2 mb-2" style="border-top: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- CAROUSEL -->
<div class="carousel slide" id="prefs" data-pause="true">
<div class="carousel-inner">
<!-- LIKES -->
<div class="carousel-item active">
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-heart"></i> </span>
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Likes.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
</ul>
</div>
<!-- DISLIKES -->
<div class="carousel-item">
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-heart-crack"></i> </span>
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Dislikes.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
</ul>
</div>
<!-- FEARS -->
<div class="carousel-item">
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-skull"></i> </span>
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Fears.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
</ul>
</div>
<!-- AMBITIONS -->
<div class="carousel-item">
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-list-check"></i> </span>
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Ambitions.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
</ul>
</div>
<!-- HOBBIES -->
<div class="carousel-item">
<span class="float-right px-3 py-2 ml-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-icons"></i> </span>
<!-- HEADER (opt) -->
<span class="font-weight-bold font-italic" style="color:#B8161B; font-family: Georgia, times; font-size:1.2em; font-variant:small-caps; letter-spacing:1px">Hobbies.</span>
<ul class="pl-3 mb-0">
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
<li style="color:#B8161B"> <span class="text-body">content.</span> </li>
</ul>
</div>
</div>
</div>
<hr class="w-100 my-2">
<!-- CAROUSEL CONTROLS -->
<div class="justify-content-around" style="font-size:1.2em">
<a class="px-1" href="#prefs" data-slide="prev" style="color:#B8161B"> <i class="fa-light fa-caret-left"></i> </a>
<a class="px-1" href="#prefs" data-slide-to="0" style="color:#B8161B"> <i class="fa-light fa-heart"></i> </a>
<a class="px-1" href="#prefs" data-slide-to="1" style="color:#B8161B"> <i class="fa-light fa-heart-crack"></i> </a>
<a class="px-1" href="#prefs" data-slide-to="2" style="color:#B8161B"> <i class="fa-light fa-skull"></i> </a>
<a class="px-1" href="#prefs" data-slide-to="3" style="color:#B8161B"> <i class="fa-light fa-list-check"></i> </a>
<a class="px-1" href="#prefs" data-slide-to="4" style="color:#B8161B"> <i class="fa-light fa-icons"></i> </a>
<a class="px-1" href="#prefs" data-slide="next" style="color:#B8161B"> <i class="fa-light fa-caret-right"></i> </a>
</div>
</div>
</div>
<!-- MOODBOARD -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-grow-1" style="border-bottom: double 4px #B8161B">
<div class="card p-1 h-100 rounded-0 border-0">
<div class="row no-gutters my-auto flex-column">
<!-- IMAGE ONE -->
<div class="col-6 p-1">
<div class="card p-2 flex-fill rounded-0 h-100" style="min-height:110px; border: solid 1px #B8161B;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
<!-- IMAGE TWO -->
<div class="col-6 p-1">
<div class="card p-2 flex-fill rounded-0 h-100" style="min-height:110px; border: solid 1px #B8161B;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
<!-- IMAGE THREE -->
<div class="col-6 p-1">
<div class="card p-2 flex-fill rounded-0 h-100" style="min-height:110px; border: solid 1px #B8161B;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
<!-- IMAGE FOUR -->
<div class="col-6 p-1">
<div class="card p-2 flex-fill rounded-0 h-100" style="min-height:110px; border: solid 1px #B8161B;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> FOCAL IMAGE
> RIBBONS
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> FOCAL IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:200px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: solid 1px #B8161B"></div>
</div>
</div>
<!-- ==============
SECTION 2
> RIBBONS
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 border-0">
<p class="text-center">
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!--RIBBON-->
<img class="m-1 tooltipster" style="width:60px; height:60px; object-fit:contain;"
title="Ribbon description"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png"> <!--ribbon end-->
<!-- ============== add more above this line ============== -->
<!-- ribbons credit - not removing preferred -->
<br>
<a href="#" style="color:#B8161B" class="px-1"> <i class="fa-light fa-award fa-lg"></i> </a>
<!-- if using ribbons from multiple sources, feel free to copy and paste as many links as you need above this line -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== TAB SEVEN: RELATIONSHIPS ============== -->
<div class="tab-pane fade" id="SEVEN">
<div class="row no-gutters">
<!-- ==============
PART 1
> ICON IMAGE + DECOR ICON + TITLE
> IMAGE
> RELATIONSHIPS CAROUSEL (INFO + ICON IMAGE + QUOTE)
============== -->
<div class="col-lg-8 pr-lg-1">
<div class="row no-gutters">
<!-- ==============
SECTION 1
> ICON IMAGE
> DECOR ICON
> TITLE
============== -->
<div class="col-lg-5 pr-lg-1 flex-column">
<div class="row no-gutters">
<!-- ICON IMAGE -->
<div class="col-8 mt-n3 pb-2 pr-1">
<div class="card p-2 rounded-0 mt-n5" style="border-bottom: double 4px #B8161B">
<div class="card p-5 h-100 rounded-0" style="border-color: #B8161B; min-height:130px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- FONTAWESOME ICON -->
<div class="col-4 pb-2 pl-1">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border:double 4px #B8161B;">
<div class="card h-100 align-items-center justify-content-center rounded-0 border-0">
<i class="fa-light fa-heart-pulse" style="font-size:2.5rem; color:#B8161B"></i>
</div>
</div>
</div>
<!-- TITLE -->
<div class="card py-2 pr-2 pl-0 mb-2 rounded-0 bg-faded d-flex flex-fill" style="border-left: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0">
<!-- FONTMEME TITLE
> font used is [ https://fontmeme.com/serif-fonts/ ] (Playfair Display Black)
-->
<img src="https://fontmeme.com/permalink/230820/8da48055bfe562179ededb9a897a58ef.png" class="pl-2 my-auto">
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> IMAGE
============== -->
<div class="col-lg-7 pl-lg-1 pb-2">
<div class="card p-2 h-100 rounded-0 bg-faded" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card h-100 rounded-0" style="border: solid 1px #B8161B; min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
</div>
<!-- ==============
SECTION 3
> RELATIONSHIP CAROUSEL
============== -->
<div class="col-lg-12">
<div class="carousel slide" id="links" data-pause="true">
<div class="carousel-inner">
<!-- LG RELATIONSHIP ONE
> accent color: #20487F
-->
<div class="carousel-item active">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> NAME LINK
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#links" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-heart-pulse mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#links" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
<a href="URL" class="font-weight-bold font-italic" style="color:#20487F">Character Name.</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> STATS + RELATIONSHIP DESCRIPTION
> IMAGE
> QUOTE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-1 rounded-0 border-0">
<!-- descriptor(s) -->
<p class="p-1 text-center" style="font-family: Georgia, times">relationship</p>
<hr class="my-2 mx-1">
<!-- stats -->
<div class="row no-gutters justify-content-center">
<!-- RESPECT -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">respect.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- TRUST -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">trust.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- HONESTY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">honesty.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- COMPROMISE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">compromise.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- UNDERSTANDING -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">understanding.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- COMMUNICATION -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #20487F">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">communication.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#20487F;
width:50%"></div>
<!-- optional extra bar -->
<div class="progress-bar" style="background-color:#20487F; opacity: .35;
width:25%"></div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
<hr class="my-2 mx-1">
<!-- written content -->
<div class="px-1">
<!-- past -->
<p class="mb-1" style="font-family: Georgia, times;">
<span class="font-weight-bold" style="color:#20487F; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"> â… - <i> The Past.</i> </span> <i>First encounter and impressions.</i>
</p>
<p class="mb-2">Suspendisse tincidunt sapien ac pellentesque suscipit. Aenean eleifend justo non mauris sodales mollis. Nullam euismod metus vel pharetra bibendum. Aliquam eleifend odio ac lectus iaculis luctus ac eu orci. Vestibulum ornare facilisis turpis, sed feugiat metus. Integer eu cursus mauris. Nullam eget mollis leo. Vivamus iaculis urna eu tristique pharetra. Nunc quis lectus non enim pulvinar egestas.</p>
<p>Vivamus cursus venenatis nisl, nec dictum dui faucibus et. Aliquam erat volutpat. Phasellus commodo scelerisque ante pretium lobortis. Duis tristique pulvinar enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra viverra orci eget lacinia. In nec eleifend eros. Praesent aliquam viverra condimentum.</p>
<hr class="my-2">
<!-- present -->
<p class="mb-1" style="font-family: Georgia, times;">
<span class="font-weight-bold" style="color:#20487F; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"> â…¡ - <i> The Present.</i> </span> <i>Attitudes and dynamic.</i>
</p>
<p>Vivamus rhoncus id tortor et volutpat. Mauris ultrices est sit amet turpis tempus varius at at quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam fringilla ornare orci tincidunt scelerisque. Phasellus dapibus nisi id vestibulum volutpat. Phasellus volutpat sapien id mauris egestas eleifend. Vestibulum ac nulla ac neque semper ultrices ac sit amet lorem. Nulla sed ultricies urna. Donec dignissim dolor vel ligula scelerisque convallis. Nunc sed massa nunc. Integer suscipit hendrerit quam. Donec dignissim congue mauris et imperdiet. Nam et vulputate tortor.</p>
<hr class="my-2 mx-1">
<!-- future -->
<p class="mb-1" style="font-family: Georgia, times;">
<span class="font-weight-bold" style="color:#20487F; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"> â…¢ - <i> The Future.</i> </span> <i>Hopes.</i>
</p>
<p>Ut tincidunt commodo nunc, eu vehicula odio scelerisque id. Quisque quis quam id erat consequat aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ut efficitur nibh, in scelerisque odio. Nunc vel diam non velit euismod volutpat. Integer luctus metus at lectus eleifend viverra. Ut vel elementum lorem. Vestibulum vitae ex quis mi consectetur fringilla.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- LITTLE IMAGE -->
<div class="card rounded-0 p-1 mb-2" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">praesent aliquam viverra condimentum. sed et nibh suscipit, malesuada tortor ut, finibus odio.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
</div>
</div>
<!-- MD RELATIONSHIP ONE
> accent color: #91E8D3
-->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> NAME LINK
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#links" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-handshake mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#links" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
<a href="URL" class="font-weight-bold font-italic" style="color:#91E8D3">Character Name.</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> STATS + RELATIONSHIP DESCRIPTION
> IMAGE
> QUOTE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-1 rounded-0 border-0">
<!-- descriptor(s) -->
<p class="p-1 text-center" style="font-family: Georgia, times">relationship</p>
<hr class="my-2 mx-1">
<!-- stats -->
<div class="row no-gutters justify-content-center">
<!-- RESPECT -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">respect.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- TRUST -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">trust.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- HONESTY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">honesty.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- COMPROMISE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">compromise.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- UNDERSTANDING -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">understanding.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- COMMUNICATION -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #91E8D3">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">communication.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#91E8D3;
width:50%"></div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
<hr class="my-2 mx-1">
<!-- written content -->
<div class="px-1">
<p class="mb-1" style="font-family: Georgia, times;">
<span class="font-weight-bold" style="color:#91E8D3; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"> <i> Relationship.</i> </span> <i>Background and interactions.</i>
</p>
<p>Phasellus dictum blandit ultrices. Suspendisse ligula ex, dictum id interdum a, lacinia et tellus. Duis ac nulla non arcu gravida varius at sed nibh. Phasellus consectetur quam ac neque tempus, in finibus leo lacinia. In et pulvinar mi. Praesent maximus vehicula dolor, sed malesuada dui convallis ut. Aenean mi enim, feugiat sed mattis nec, commodo quis ante. Ut maximus mauris ex, quis feugiat metus venenatis quis. Cras quis lorem nec felis fermentum fermentum. Nunc a dui a libero sagittis lacinia. Nullam et leo aliquet arcu egestas porttitor. Mauris tellus mauris, finibus id vestibulum nec, laoreet non sapien. Mauris id arcu dapibus, maximus eros eu, pulvinar ante. Donec dictum pulvinar erat, eget lobortis ex varius sit amet. Aenean accumsan eu orci in ultrices.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- LITTLE IMAGE -->
<div class="card rounded-0 p-1 mb-2" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">donec rhoncus nulla nec sapien commodo pharetra. phasellus consectetur lorem vitae dui ultrices pellentesque.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
</div>
</div>
<!-- MD RELATIONSHIP TWO
> accent color: #9EDC9A
-->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> NAME LINK
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#links" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-user mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#links" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
<a href="URL" class="font-weight-bold font-italic" style="color:#9EDC9A">Character Name.</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> STATS + RELATIONSHIP DESCRIPTION
> IMAGE
> QUOTE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-1 rounded-0 border-0">
<!-- descriptor(s) -->
<p class="p-1 text-center" style="font-family: Georgia, times">relationship</p>
<hr class="my-2 mx-1">
<!-- stats -->
<div class="row no-gutters justify-content-center">
<!-- RESPECT -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">respect.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- TRUST -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">trust.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- HONESTY -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">honesty.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- COMPROMISE -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">compromise.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- UNDERSTANDING -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">understanding.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- COMMUNICATION -->
<div class="col-6 p-1">
<div class="card pt-2 rounded-0" style="border-left: double 4px #9EDC9A">
<span class="text-center mb-1 font-weight-bold font-italic" style="font-family: Georgia, times">communication.</span>
<div class="progress rounded-0 bg-faded" style="height:3px">
<div class="progress-bar" style="background-color:#9EDC9A;
width:50%"></div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
<hr class="my-2 mx-1">
<!-- written content -->
<div class="px-1">
<p class="mb-1" style="font-family: Georgia, times;">
<span class="font-weight-bold" style="color:#9EDC9A; font-size:1.2em; font-variant:small-caps; letter-spacing:1px"> <i> Relationship.</i> </span> <i>Background and interactions.</i>
</p>
<p>Nullam interdum ligula vitae vehicula tristique. Vestibulum porttitor in sapien et interdum. Suspendisse nulla felis, luctus sed eros et, hendrerit rutrum sapien. Praesent ac laoreet lacus, ut commodo orci. Nullam fermentum, enim et vehicula tempus, dui nunc faucibus magna, at aliquet mi odio eu eros. Pellentesque efficitur urna non turpis sollicitudin, in laoreet velit pharetra. Suspendisse ultrices, arcu eu tempor elementum, dolor urna gravida risus, a sollicitudin velit sapien interdum justo. Ut rutrum velit odio, sed pharetra enim ultricies nec. Proin pellentesque lacus vitae est lacinia, et vestibulum lectus dapibus.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- LITTLE IMAGE -->
<div class="card rounded-0 p-1 mb-2" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
</div>
</div>
<!-- SM RELATIONSHIPS
> this section does not have individual accent colors, but feel free to customize them to your liking
-->
<div class="carousel-item">
<div class="row no-gutters">
<!-- ==============
SECTION 3.1
> CAROUSEL CONTROLS
> CHAPTER TITLE
============== -->
<div class="col-lg-12 pb-2">
<div class="card pl-2 py-2 bg-faded rounded-0" style="border-right: double 4px #B8161B">
<div class="card p-2 pr-3 h-100 rounded-0 border-0">
<div class="row no-gutters">
<!-- ICON + CONTROLS -->
<div class="col-lg-1 align-items-center justify-content-center">
<a href="#links" data-slide="prev" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-left"></i>
</a>
<i class="fa-light fa-link mx-2" style="font-size:1.7em; color:#B8161B"></i>
<a href="#links" data-slide="next" style="color:#B8161B; font-size:1.2em">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<!-- TITLE -->
<div class="col-lg-11">
<p class="text-right" style="font-size:1.75em; font-variant:small-caps; font-family: Georgia, times; letter-spacing:0.5px; z-index:3">
Other Relationships.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 3.2
> RELATIOSHIPS
> QUOTE
> IMAGE
============== -->
<div class="col-lg-7 pr-lg-1 pb-lg-0 pb-2">
<div class="card h-100 p-2 bg-faded rounded-0" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card h-100 p-2 rounded-0 border-0">
<!-- sm relationship one -->
<p class="mb-0">
<!-- image - works best if squared -->
<img src="IMG_URL" class="img-thumbnail float-left mr-2 rounded-0" style="height:75px; border-color:#B8161B">
<a href="URL" class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px; font-family: Georgia, times"> <i> Character Name.</i></a> <br>
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>
<hr class="w-100 my-2">
<!-- sm relationship two -->
<p class="mb-0">
<!-- image - works best if squared -->
<img src="IMG_URL" class="img-thumbnail float-left mr-2 rounded-0" style="height:75px; border-color:#B8161B">
<a href="URL" class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px; font-family: Georgia, times"> <i> Character Name.</i></a> <br>
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>
<hr class="w-100 my-2">
<!-- sm relationship three -->
<p class="mb-0">
<!-- image - works best if squared -->
<img src="IMG_URL" class="img-thumbnail float-left mr-2 rounded-0" style="height:75px; border-color:#B8161B">
<a href="URL" class="font-weight-bold" style="color:#B8161B; font-size:1.2em; font-variant:small-caps; letter-spacing:1px; font-family: Georgia, times"> <i> Character Name.</i></a> <br>
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>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
<div class="col-lg-5 pl-lg-1 pb-lg-0 pb-2 flex-column">
<!-- IMAGE -->
<div class="card bg-faded rounded-0 px-2 pb-2 flex-fill mb-2" style="border-top: double 4px #B8161B">
<div class="card h-100 rounded-0 border-0" style="min-height:100px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
</div>
<!-- LITTLE IMAGE -->
<div class="card rounded-0 p-1 mb-2" style="background-image:url(IMG_URL);
background-size:cover;
background-position:center"></div>
<!-- QUOTE -->
<div class="card bg-faded rounded-0 px-2 pt-2 flex-fill" style="border-bottom: double 4px #B8161B">
<div class="card p-2 h-100 rounded-0 border-0 justify-content-center align-items-center text-center">
<i class="fa-light fa-quote-left" style="font-size:1.7em; position:absolute; top: 5px; left: 5px; color:#B8161B; opacity: 0.35"></i>
<p class="font-italic" style="font-size:1.4em; font-family: Georgia, times; z-index:3">vivamus cursus venenatis nisl, nec dictum dui faucibus et.</p>
<i class="fa-light fa-quote-right" style="font-size:1.7em; position:absolute; bottom: 5px; right: 5px; color:#B8161B; opacity: 0.35"></i>
</div>
</div>
</div>
</div>
</div>
<!-- ============== add more above this line ============== -->
</div>
</div>
</div>
</div>
</div>
<!-- ==============
PART 2
> RELATIONSHIP ATTITUDES
> IMAGE
============== -->
<div class="col-lg-4 pl-lg-1 flex-column">
<!-- ==============
SECTION 1
> RELATIONSHIP ATTITUDES
============== -->
<div class="flex-grow-2 flex-column">
<div class="card p-2 mb-2 bg-faded rounded-0 flex-grow-1" style="border-top: double 4px #B8161B; border-bottom: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100">
<!-- CAROUSEL CONTROLS -->
<div class="justify-content-around" style="font-size:1.2em">
<a class="px-1" href="#attitude" data-slide="prev" style="color:#B8161B"> <i class="fa-light fa-caret-left"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="0" style="color:#B8161B"> <i class="fa-light fa-heart"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="1" style="color:#B8161B"> <i class="fa-light fa-family"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="2" style="color:#B8161B"> <i class="fa-light fa-users"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="3" style="color:#B8161B"> <i class="fa-light fa-user"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="4" style="color:#B8161B"> <i class="fa-light fa-question"></i> </a>
<a class="px-1" href="#attitude" data-slide-to="5" style="color:#B8161B"> <i class="fa-light fa-skull"></i> </a>
<a class="px-1" href="#attitude" data-slide="next" style="color:#B8161B"> <i class="fa-light fa-caret-right"></i> </a>
</div>
<hr class="w-100 my-2">
<!-- CAROUSEL -->
<div class="carousel slide" id="attitude" data-pause="true">
<div class="carousel-inner">
<!-- LOVERS -->
<div class="carousel-item active">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-heart"></i> </span>
Lovers. Write about your character's attitude towards this group of people! 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>
<!-- FAMILY -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-family"></i> </span>
Family. Write about your character's attitude towards this group of people! 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>
<!-- FRIENDS -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-users"></i> </span>
Friends. Write about your character's attitude towards this group of people! 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.<br>
</p>
</div>
<!-- ACQUAINTANCES -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-user"></i> </span>
Acquaintances. Write about your character's attitude towards this group of people! 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. <br>
</p>
</div>
<!-- STRANGERS -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-question"></i> </span>
Strangers. Write about your character's attitude towards this group of people! 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. <br>
</p>
</div>
<!-- ENEMIES -->
<div class="carousel-item">
<p class="mb-0">
<span class="float-left px-3 py-2 mr-2 font-weight-bold" style="font-size:1.5rem; border: solid 1px #B8161B; font-family: georgia; color:#B8161B"> <i class="fa-light fa-skull"></i> </span>
Enemies. Write about your character's attitude towards this group of people! 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. <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============
SECTION 2
> IMAGE
============== -->
<div class="flex-grow-1 flex-column">
<div class="card p-2 bg-faded rounded-0 flex-grow-1" style="border-right: double 4px #B8161B; border-left: double 4px #B8161B">
<div class="card p-2 rounded-0 h-100" style="min-height:150px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center top;
border: solid 1px #B8161B"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============== NAV BUTTONS ============== -->
<div class="col-lg-12">
<div class="card p-2 rounded-0 bg-faded" style="border-left: double 4px #B8161B; border-right: double 4px #B8161B">
<div class="card p-1 h-100 rounded-0 border-0">
<ul class="nav row no-gutters text-center justify-content-center">
<!-- BASICS -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#ONE" class="nav-link active" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-user" style="font-size:1.7em"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#TWO" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-brain-circuit" style="font-size:1.7em"></i>
</a>
</li>
<!-- APPEARANCE -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#THREE" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-swatchbook" style="font-size:1.7em"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#FOUR" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-books" style="font-size:1.7em"></i>
</a>
</li>
<!-- COMBAT -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#FIVE" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-swords" style="font-size:1.7em"></i>
</a>
</li>
<!-- EXTRAS -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#SIX" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-sparkles" style="font-size:1.7em"></i>
</a>
</li>
<!-- RELATIONSHIPS -->
<li class="nav-item col px-1 align-items-center justify-content-center">
<a href="#SEVEN" class="nav-link" style="color:#B8161B" data-toggle="tab">
<i class="fa-light fa-link" style="font-size:1.7em"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- ============== CREDITS - DO NOT REMOVE ============== -->
<div class="col-lg-12 mt-2">
<div class="row no-gutters align-items-center">
<div class="col"><hr class="w-100 my-0"></div>
<div class="col-auto px-3">
<a href="/misschainsawktn" class="text-muted tooltipster" title="code by misschainsawktn"> <i class="fa-light fa-telescope"></i> <i class="fa-light fa-planet-ringed"></i> </a>
<span class="text-muted faded"> | </span>
<a href="/Togo" class="text-muted tooltipster" title="layout by Togo"> <i class="fa-light fa-table-layout"></i> </a>
</div>
<div class="col"><hr class="w-100 my-0"></div>
</div>
</div>
</div>
</div>
</div>
