[F2U] Deluxe Profile
created by:BigGayFish
HTMLCustom ColorsBootstrapCharacter
Copy
<!--DELUXE CODE
HUZZAH! I've spent several days on this behemoth of a code (not to mention even more days to come up with the layout), but it's finally here! I might make a revamp of this in the future with even more content, but for now I'm happy with everything I put in here. I learned a lot during the making of this code, but there might be a spot or two that may need tweaking, so if you know what you're doing, go for it. Otherwise, everything's marked clearly for easy editing.
COLOR KEY: -primary - change this to any of the other bootstras colors to get a different effect (like secondary, success, danger, info, etc)
INDEX:
CHARACTER ICON - The main character icon
CHARACTER TEXT - Includes the QUOTE, CHARACTER NAME, and CHARACTER SUBTITLE (which can be deleted if you don't need/want it)
QUICK INFO - All of your character's quick information
CHARACTER ABOUT SECTION - A summary of your character's about, think of it as an overview
PERSONALITY SECTION - Your character's personality section that includes a paragraph and stat section
TRIVIA SECTION - Just as it says, it has the trivia, likes/dislikes, an accent image, as well as a ribbon showcase area
BIO SECTION - Your character's biography, it has a fixed height so you can write as much as you want without fear of making the profile too long
MOODBOARD SECTION - There are three images, perfect for a moodboard. I don't really suggest deleting it but you can if you want
DESIGN SECTION - A really detailed overview of your characters design, including a COLOR PALLETTE as well as Design Notes and two forms overview
CHARACTER REF IMG - This is where the actual images of your character goes, it's on a carasoul so if you have multiple forms/outfits, you chan just shove them in there
ABILITIES TAB - Your character's abilities, you can repeat them so you can have a long list, or you can keep it short
STATS TAB - Your characters physical stats (or well abilities based ones), as well as combat info if that's applicable to you
INVENTORY TAB - An inventory section for your character, you can subdivide them into different groups but you can take out the grouping headers if you prefer
RELATIONSHIP SECTION - Your character's relationships, each relationship is labeled as CHARACTER LINK, so you can copy and paste as much as you need
-->
<div class="container-fluid" style="font-size:14pt;">
<!--NAVIGATION BAR-->
<div class="sticky-top mb-3 bg-faded" style="z-index: 100;">
<!--TOP DECOR-->
<div class="col-12 bg-primary d-none d-lg-flex" style="height:7px;"></div>
<div class="col-12 bg-faded d-none d-lg-flex" style="height:5px;"></div>
<div class="col-12 bg-primary d-none d-lg-flex" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<div class="d-none d-lg-flex card flex-row justify-content-center bg-faded p-3 border-0 rounded-0" style="font-family: Century Gothic; font-variant:small-caps;">
<!--NAVLINKS-->
<a href="#info" class="mx-2">Info</a>|
<a href="#about" class="mx-2">About</a>|
<a href="#personality" class="mx-2">Personality</a>|
<a href="#trivia" class="mx-2">Trivia</a>|
<a href="#bio" class="mx-2">Biography</a>|
<a href="#design" class="mx-2">Design</a>|
<a href="#abilities" class="mx-2">Abilities</a>|
<a href="#relationships" class="mx-2">Relationships</a>
<!--END OF NAVLINKS-->
</div>
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary d-none d-lg-flex" style="height:2px;"></div>
<div class="col-12 bg-faded d-none d-lg-flex" style="height:5px;"></div>
<div class="col-12 bg-primary d-none d-lg-flex" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--NAVIGATION BAR-->
<!--HEADER SECTION-->
<div class="row no-gutters align-items-center bg-faded mb-3">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<!--CHARACTOR ICON-->
<div class="col-md-3 m-3">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF CHARACTOR ICON-->
<!--CHARACTER TEXT-->
<div class="col-lg m-3">
<!--QUOTE-->
<small style="font-variant:small-caps;"><i class="fas fa-quote-left"></i> Quote text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<i class="fas fa-quote-right"></i></small>
<!--END OF QUOTE-->
<!--CHARACTER NAME-->
<h1 class="display-1 text-center font-italic" style="font-family: Century Gothic;">Character Name</h1>
<!--END OF CHARACTER NAME-->
<!--CHARACTER SUBTITLE-->
<p class="text-right" style="font-variant:small-caps;">Character Subtitle or Title</p>
<!--END OF CHARACTER SUBTITLE-->
</div>
<!--END OF CHARACTER TEXT-->
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF HEADER SECTION-->
<!--EVERYTHING ELSE-->
<div class="row">
<!--INFO SECTION-->
<div class="col-md-4 mb-3" id="info">
<div class="sticky-top bg-faded" style="z-index: 1;">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<!--QUICK INFO-->
<div class="p-2 bg-faded">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Info</h1>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
</div>
<!--END OF INFO SECTION-->
<!--ABOUT SECTION-->
<div class="col-lg-8">
<!--CHARACTER ABOUT SECTION-->
<div class="row no-gutters mb-3" id="about">
<!--LEFT DECOR-->
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<!--END OF LEFT DECOR-->
<!--ABOUT-->
<div class="col">
<div class="card bg-faded border-0 rounded-0 p-2">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!--END OF ABOUT-->
<!--RIGHT DECOR-->
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<!--END OF RIGHT DECOR-->
</div>
<!--END OF CHARACTER ABOUT SECTION-->
<!--CHARACTER PERSONALITY SECTION-->
<div class="row no-gutters mb-3" id="personality">
<!--LEFT DECOR-->
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<!--END OF LEFT DECOR-->
<!--PERSONALITY-->
<div class="col">
<div class="card bg-faded border-0 rounded-0 p-2">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Personality</h1>
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text text-muted d-flex justify-content-center mt-n2 mb-1 align-items-center">
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="row mt-3">
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Charisma</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Courage</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Intelligence</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
</div>
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Empathy</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Humor</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Integrity</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
</div>
</div>
</div>
</div>
<!--END OF PERSONALITY-->
<!--RIGHT DECOR-->
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<!--END OF RIGHT DECOR-->
</div>
<!--END OF CHARACTER PERSONALITY SECTION-->
<!--TRIVIA SECTION-->
<div class="row no-gutters mb-3" id="trivia">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<!--TRIVA-->
<div class="col-lg-12">
<div class="card bg-faded border-0 rounded-0 p-2">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Trivia</h1>
<ul class="pl-4 list-unstyled">
<li><i class="fas text-primary fa-greater-than"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
</ul>
<!--TASTES-->
<div class="row mt-2">
<!--LIKES-->
<div class="col-md-4">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Likes</h1>
<div class="col-12 bg-primary" style="height:2px;"></div>
<ul class="pl-4 list-unstyled">
<li><i class="fas text-primary fa-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas text-primary fa-check"></i> Information</li>
<li><i class="fas text-primary fa-check"></i> Information</li>
<li><i class="fas text-primary fa-check"></i> Information</li>
</ul>
</div>
<!--END OF LIKES-->
<!--IMG-->
<div class="col-md-4 mb-2">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG-->
<!--DISLIKES-->
<div class="col-md-4">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Dislikes</h1>
<div class="col-12 bg-primary" style="height:2px;"></div>
<ul class="pl-4 list-unstyled">
<li><i class="fas text-primary fa-x"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas text-primary fa-x"></i> Information</li>
<li><i class="fas text-primary fa-x"></i> Information</li>
<li><i class="fas text-primary fa-x"></i> Information</li>
</ul>
</div>
<!--END OF DISLIKES-->
</div>
<!--END OF TASTES-->
<!--RIBBON SHOWCASE-->
<center><a class="mx-2" data-toggle="collapse" href="#ribbons">
<div class="card bg-faded d-flex text-center card-outline-primary rounded-0 w-50 p-2" style="border-width: 2px; max-width:200px;">
<h1>Ribbons <i class="fas fa-caret-down"></i></h1>
</div>
</a></center>
<div class="collapse" id="ribbons">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<p><small class="text-muted">Ribbon Credits</small></p>
<small><a href="CREDITHERE">x</a> | <a href="CREDITHERE">x</a></small>
</div>
</div>
<!--END OF RIBBONS SHOWCASE-->
</div>
</div>
<!--END OF TRIVIA-->
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF TRIVIA SECTION-->
</div>
<!--END OF ABOUT SECTION-->
<!--BIO SECTION-->
<div class="col-lg-12" id="bio">
<div class="row no-gutters mb-3 overflow-auto" style="height: 400px;">
<!--LEFT DECOR-->
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<!--END OF LEFT DECOR-->
<!--BIOGRAPHY-->
<div class="col">
<div class="card bg-faded border-0 rounded-0 p-2">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Biography</h1>
<p>Story overview/backstory can go here, or delete it if you only want arcs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="row p-3">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Subheader</h1>
<div class="col-lg-12 bg-primary" style="height:2px;"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra vitae congue eu. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Adipiscing elit pellentesque habitant morbi. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Morbi tristique senectus et netus et malesuada fames ac turpis. Ac orci phasellus egestas tellus. Phasellus vestibulum lorem sed risus ultricies. Sed velit dignissim sodales ut eu sem. Egestas quis ipsum suspendisse ultrices gravida dictum. Pulvinar elementum integer enim neque volutpat ac. Odio facilisis mauris sit amet. Ultrices sagittis orci a scelerisque purus. Velit egestas dui id ornare.</p>
<p>Vulputate dignissim suspendisse in est ante in nibh. Vel eros donec ac odio. Lacus sed viverra tellus in hac. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Lacus suspendisse faucibus interdum posuere. Integer vitae justo eget magna fermentum iaculis. Vitae et leo duis ut diam quam nulla. Facilisis sed odio morbi quis commodo odio aenean. Duis at tellus at urna condimentum mattis.</p>
<p>Lacus luctus accumsan tortor posuere ac. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Nullam non nisi est sit amet facilisis magna etiam. Nec sagittis aliquam malesuada bibendum. Magna ac placerat vestibulum lectus mauris ultrices. Nunc lobortis mattis aliquam faucibus purus in. Sed enim ut sem viverra aliquet eget sit amet tellus. Quam elementum pulvinar etiam non quam. Bibendum enim facilisis gravida neque convallis a cras semper auctor.</p>
</div>
</div>
<!--END OF BIOGRAPHY-->
<!--RIGHT DECOR-->
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<!--END OF RIGHT DECOR-->
</div>
</div>
<!--END OF BIO SECTION-->
<!--MOODBOARD SECTION-->
<!--IMG ONE-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG THREE-->
<!--MOODBOARD SECTION-->
<!--DESIGN SECTION-->
<div class="col-lg-8 mb-3" id="design">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<!--CONTENT BOX-->
<div class="p-2 bg-faded">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Design</h1>
<!--COLOR PALETTE
INSTRUCTIONS: You want to change the hex code #A1A1A1 to whatever color you have for the palette. If it ends up that the text is too light, add "color: #000;" after "letter-spacing: 3px;" in the full style tag. Don't forget to actually write the hex code in the text portion as well, so that people know what the actual color is.-->
<div class="row">
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 1: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 2: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 1: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 2: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-head-side"></i> skintone: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye-dropper-half"></i> details: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-clothes-hanger"></i> outfit 1: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-shirt"></i> outfit 2: #hex_code</div>
</div>
<div class="col-12 bg-primary" style="height:2px;"></div>
</div>
</div>
<!--END OF COLOR PALETTE-->
<div class="row mb-3 p-2">
<div class="col-md-6">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form One</h1>
<p>Give a description of your character's default form/outfit here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<div class="col-md-6">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form Two</h1>
<p>Give a description of your character's default form/outfit here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Design Notes</h1>
<ul class="pl-4 list-unstyled">
<li><i class="fas text-primary fa-greater-than"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
<li><i class="fas text-primary fa-greater-than"></i> Information</li>
</ul>
</div>
<!--END OF CONTENT BOX-->
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF DESIGN SECTION-->
<!--CHARACTER REF IMG SECTION-->
<div class="col-md-4 mb-3">
<div class="sticky-top bg-faded" style="z-index:1;">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<!--CHARACTER IMG-->
<div class="card my-2 rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div id="FORMS" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-primary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters w-100">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 bg-primary" style="font-family:Impact, fantasy; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6 p-2">
</div>
<!--RB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 bg-primary" style="font-family:Impact, fantasy; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--END OF CHARACTER IMG-->
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
</div>
<!--END OF CHARACTER REF IMG SECTION-->
<!--TAB BUTTONS-->
<div class="col-sm-2 btn-col d-flex mb-3">
<ul class="nav d-flex flex-md-column my-nav">
<li class="nav-item col mb-md-4">
<a class="nav-link active btn btn-primary" data-toggle="tab" title="Abilities" href="#ABILITIES">
<i class="fas fa-sparkles fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Abilities</span></a>
</li>
<li class="nav-item col mb-md-4">
<a class="nav-link btn btn-primary" data-toggle="tab" title="Stats" href="#STATS">
<i class="fas fa-heartbeat fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Stats</span></a>
</li>
<li class="nav-item col mb-md-4">
<a class="nav-link btn btn-primary" data-toggle="tab" title="Inventory" href="#INVENTORY">
<i class="fas fa-swords fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Inventory</span></a>
</li>
</ul>
</div>
<!--TAB BUTTONS-->
<!--TAB CONTENT SECTION-->
<div class="col-lg-10 mb-3" id="abilities">
<!--TOP DECOR-->
<div class="col-12 bg-primary" style="height:7px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:2px;"></div>
<!--END OF TOP DECOR-->
<div class="tab-content bg-faded" style="height: 350px; overflow: auto;">
<!--ABILITIES TAB-->
<div class="tab-pane fade active show m-3" id="ABILITIES" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Abilities</h1>
<p>You can give a brief explanation of your character's abiities here or delete this part entirely. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="row no gutters align-items-center mt-3">
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card rounded-0 p-2 card-outline-primary text-center" style="border-width:2px;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card rounded-0 p-2 card-outline-primary text-center" style="border-width:2px;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card rounded-0 p-2 card-outline-primary text-center" style="border-width:2px;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
</div>
</div>
<!--END OF ABILITIES TAB-->
<!--STATS TAB-->
<div class="tab-pane fade m-3" id="STATS" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Stats and Info</h1>
<div class="row my-3">
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Health</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Strength</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Agility</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Stamina</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Dexterity</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
</div>
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Defense</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Attack</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Luck</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Magic</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Speed</h6>
<div class="progress my-1" style="border: 1px solid;">
<div class="progress-bar text-light" role="progressbar" style="width: 25%;">25%</div>
</div>
</div>
</div>
<h1 style="font-variant:small-caps; font-family: Century Gothic;">Combat style</h1>
<div class="col-12 bg-primary" style="height:2px;"></div>
Explain how your character fights here. 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.
</div>
<!--END OF STATS TAB-->
<!--INVENTORY TAB-->
<div class="tab-pane fade m-3" id="INVENTORY" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Inventory</h1>
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Weapons</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<!--WEAPONS ROW-->
<div class="row no gutters align-items-center mt-3">
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
</div>
<!--END OF WEAPONS ROW-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Daily Use</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<!--EVERY DAY ITEMS ROW-->
<div class="row no gutters align-items-center mt-3">
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card rounded-0 p-2 card-outline-primary text-center mb-2" style="border-width:2px;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left text-primary" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12 bg-primary mb-1" style="height:2px;"></div>
<p class="text-muted text-center" style="font-variant:small-caps; font-family: Century Gothic;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
</div>
<!--END OF EVERY DAY ITEMS ROW-->
</div>
<!--END OF INVENTORY TAB-->
</div>
<!--BOTTOM DECOR-->
<div class="col-12 bg-primary" style="height:2px;"></div>
<div class="col-12 bg-faded" style="height:5px;"></div>
<div class="col-12 bg-primary" style="height:7px;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF TAB CONTENT SECTION-->
<!--RELATIONSHIP SECTION-->
<div class="col-lg-12" id="relationships">
<div class="row no-gutters mb-3">
<!--LEFT DECOR-->
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<!--END OF LEFT DECOR-->
<!--RELATIONSHIP-->
<div class="col">
<div class="card bg-faded border-0 rounded-0 p-2">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Relationships</h1>
<!--CHARACTER LINK-->
<div class="row p-3 align-items-center">
<!--ICON-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic;">
Name
</a>
<div class="col-lg-12 bg-primary mb-2" style="height:2px;"></div>
<h5 class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row p-3 align-items-center">
<!--ICON-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic;">
Name
</a>
<div class="col-lg-12 bg-primary mb-2" style="height:2px;"></div>
<h5 class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row p-3 align-items-center">
<!--ICON-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic;">
Name
</a>
<div class="col-lg-12 bg-primary mb-2" style="height:2px;"></div>
<h5 class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row p-3 align-items-center">
<!--ICON-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 p-2 card-outline-primary" style="border-width:2px;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic;">
Name
</a>
<div class="col-lg-12 bg-primary mb-2" style="height:2px;"></div>
<h5 class="text-muted" style="font-variant:small-caps; font-family: Century Gothic;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE CHARACTER LINKS ABOVE HERE-->
</div>
</div>
<!--END OF RELATIONSHIP-->
<!--RIGHT DECOR-->
<div class="col-1 bg-primary" style="max-width:2px;"></div>
<div class="col-1 bg-faded" style="max-width:5px;"></div>
<div class="col-1 bg-primary" style="max-width:7px;"></div>
<!--END OF RIGHT DECOR-->
</div>
</div>
<!--END OF RELATIONSHIP SECTION-->
</div>
<!--END OF EVERYTHING ELSE-->
<a class="pull-right mb-4" href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>Copy
<!--DELUXE CODE
HUZZAH! I've spent several days on this behemoth of a code (not to mention even more days to come up with the layout), but it's finally here! I might make a revamp of this in the future with even more content, but for now I'm happy with everything I put in here. I learned a lot during the making of this code, but there might be a spot or two that may need tweaking, so if you know what you're doing, go for it. Otherwise, everything's marked clearly for easy editing.
COLOR KEY: #A11019 - PRIMARY ACCENT COLOR (DECOR, UNDERLINES, BUTTONS, IMG CREDIT LINKS, ETC)
#5ED1FF - LINKS
#212121 - BACKGROUND COLOR
#FFE7E7 - TEXT COLOR + PROGRESS BARS (THE CHANGEABLE PARTS)
#C48B8D - TEXT MUTED + PROGRESS BARS (THE BACKGROUND)
#060606 - TEXT ON PROGRESS BARS
INDEX:
CHARACTER ICON - The main character icon
CHARACTER TEXT - Includes the QUOTE, CHARACTER NAME, and CHARACTER SUBTITLE (which can be deleted if you don't need/want it)
QUICK primary - All of your character's quick primaryrmation
CHARACTER ABOUT SECTION - A summary of your character's about, think of it as an overview
PERSONALITY SECTION - Your character's personality section that includes a paragraph and stat section
TRIVIA SECTION - Just as it says, it has the trivia, likes/dislikes, and an accent image
BIO SECTION - Your character's biography, it has a fixed height so you can write as much as you want without fear of making the profile too long
MOODBOARD SECTION - There are three images, perfect for a moodboard. I don't really suggest deleting it but you can if you want
DESIGN SECTION - A really detailed overview of your characters design, including a COLOR PALLETTE as well as Design Notes and two forms overview
CHARACTER REF IMG - This is where the actual images of your character goes, it's on a carasoul so if you have multiple forms/outfits, you chan just shove them in there
ABILITIES TAB - Your character's abilities, you can repeat them so you can have a long list, or you can keep it short
STATS TAB - Your characters physical stats (or well abilities based ones), as well as combat primary if that's applicable to you
INVENTORY TAB - An inventory section for your character, you can subdivide them into different groups but you can take out the grouping headers if you prefer
RELATIONSHIP SECTION - Your character's relationships, each relationship is labeled as CHARACTER LINK, so you can copy and paste as much as you need
-->
<div class="container-fluid" style="font-size:14pt; color: #FFE7E7;">
<!--NAVIGATION BAR-->
<div class="sticky-top mb-3" style="z-index: 100; background-color: #212121;">
<!--TOP DECOR-->
<div class="col-12 d-none d-lg-flex" style="height:7px; background-color: #A11019;"></div>
<div class="col-12 d-none d-lg-flex" style="height:5px; background-color: #212121;"></div>
<div class="col-12 d-none d-lg-flex" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<div class="d-none d-lg-flex card flex-row justify-content-center p-3 border-0 rounded-0" style="font-family: Century Gothic; font-variant:small-caps; background-color: #212121;">
<!--NAVLINKS-->
<a href="#info" class="mx-2" style="color: #5ED1FF;">Info</a>|
<a href="#about" class="mx-2" style="color: #5ED1FF;">About</a>|
<a href="#personality" class="mx-2" style="color: #5ED1FF;">Personality</a>|
<a href="#trivia" class="mx-2" style="color: #5ED1FF;">Trivia</a>|
<a href="#bio" class="mx-2" style="color: #5ED1FF;">Biography</a>|
<a href="#design" class="mx-2" style="color: #5ED1FF;">Design</a>|
<a href="#abilities" class="mx-2" style="color: #5ED1FF;">Abilities</a>|
<a href="#relationships" class="mx-2" style="color: #5ED1FF;">Relationships</a>
<!--END OF NAVLINKS-->
</div>
<!--BOTTOM DECOR-->
<div class="col-12 d-none d-lg-flex" style="height:2px; background-color: #A11019;"></div>
<div class="col-12 d-none d-lg-flex" style="height:5px; background-color: #212121;"></div>
<div class="col-12 d-none d-lg-flex" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--NAVIGATION BAR-->
<!--HEADER SECTION-->
<div class="row no-gutters align-items-center mb-3" style="background-color: #212121;">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<!--CHARACTOR ICON-->
<div class="col-md-3 m-3">
<div class="card bg-transparent rounded-0 p-2" style="border: 2px solid;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF CHARACTOR ICON-->
<!--CHARACTER TEXT-->
<div class="col-lg m-3">
<!--QUOTE-->
<small style="font-variant:small-caps;"><i class="fas fa-quote-left"></i> Quote text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<i class="fas fa-quote-right"></i></small>
<!--END OF QUOTE-->
<!--CHARACTER NAME-->
<h1 class="display-1 text-center font-italic" style="font-family: Century Gothic;">Character Name</h1>
<!--END OF CHARACTER NAME-->
<!--CHARACTER SUBTITLE-->
<p class="text-right" style="font-variant:small-caps;">Character Subtitle or Title</p>
<!--END OF CHARACTER SUBTITLE-->
</div>
<!--END OF CHARACTER TEXT-->
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF HEADER SECTION-->
<!--EVERYTHING ELSE-->
<div class="row">
<!--INFO SECTION-->
<div class="col-md-4 mb-3" id="info">
<div class="sticky-top" style="background-color: #212121; z-index: 1;">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<!--QUICK INFO-->
<div class="p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Info</h1>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> name
</div>
<div class="col card bg-transparent justify-content-center pr-2" style="text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #5ED1FF; font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #A11019 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #A11019; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #5ED1FF; font-weight: bold;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
</div>
<!--END OF INFO SECTION-->
<!--ABOUT SECTION-->
<div class="col-lg-8">
<!--CHARACTER ABOUT SECTION-->
<div class="row no-gutters mb-3" id="about">
<!--LEFT DECOR-->
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<!--END OF LEFT DECOR-->
<!--ABOUT-->
<div class="col">
<div class="card border-0 rounded-0 p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!--END OF ABOUT-->
<!--RIGHT DECOR-->
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<!--END OF RIGHT DECOR-->
</div>
<!--END OF CHARACTER ABOUT SECTION-->
<!--CHARACTER PERSONALITY SECTION-->
<div class="row no-gutters mb-3" id="personality">
<!--LEFT DECOR-->
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<!--END OF LEFT DECOR-->
<!--PERSONALITY-->
<div class="col">
<div class="card border-0 rounded-0 p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Personality</h1>
<!--PERSONALITY DESCRIPTORS-->
<div class="card-text d-flex justify-content-center mt-n2 mb-1 align-items-center" style="color: #C48B8D;">
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
<i style="font-size:5px;" class="fa-solid fa-circle mx-1"></i>
adjective
</div>
<!--END OF PERSONALITY DESCRIPTORS-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="row mt-3">
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Charisma</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Courage</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Intelligence</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
</div>
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Empathy</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Humor</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Integrity</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
</div>
</div>
</div>
</div>
<!--END OF PERSONALITY-->
<!--RIGHT DECOR-->
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<!--END OF RIGHT DECOR-->
</div>
<!--END OF CHARACTER PERSONALITY SECTION-->
<!--TRIVIA SECTION-->
<div class="row no-gutters mb-3" id="trivia">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<!--TRIVA-->
<div class="col-lg-12">
<div class="card border-0 rounded-0 p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Trivia</h1>
<ul class="pl-4 list-unstyled">
<li><i class="fas fa-greater-than"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
</ul>
<!--TASTES-->
<div class="row mt-2">
<!--LIKES-->
<div class="col-md-4">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Likes</h1>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<ul class="pl-4 list-unstyled">
<li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-check"></i> Information</li>
<li><i class="fas fa-check"></i> Information</li>
<li><i class="fas fa-check"></i> Information</li>
</ul>
</div>
<!--END OF LIKES-->
<!--IMG-->
<div class="col-md-4 mb-2">
<div class="card rounded-0 p-2 bg-transparent" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG-->
<!--DISLIKES-->
<div class="col-md-4">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Dislikes</h1>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<ul class="pl-4 list-unstyled">
<li><i class="fas fa-x"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-x"></i> Information</li>
<li><i class="fas fa-x"></i> Information</li>
<li><i class="fas fa-x"></i> Information</li>
</ul>
</div>
<!--END OF DISLIKES-->
</div>
<!--END OF TASTES-->
<!--RIBBON SHOWCASE-->
<center><a class="mx-2" data-toggle="collapse" href="#ribbons">
<div class="card d-flex text-center border-0 rounded-0 w-50 p-2" style="background-color: #A11019; color: #FFE7E7; max-width:200px;">
<h1>Ribbons <i class="fas fa-caret-down"></i></h1>
</div>
</a></center>
<div class="collapse" id="ribbons">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://cdn.discordapp.com/attachments/796502758067798046/944319665348427846/ribbon_empty.png">
<!--END OF RIBBON-->
<p><small style="color: #C48B8D;">Ribbon Credits</small></p>
<small><a href="CREDITHERE" style="color: #5ED1FF;">x</a> | <a href="CREDITHERE" style="color: #5ED1FF;">x</a></small>
</div>
</div>
<!--END OF RIBBONS SHOWCASE-->
</div>
</div>
<!--END OF TRIVIA-->
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF TRIVIA SECTION-->
</div>
<!--END OF ABOUT SECTION-->
<!--BIO SECTION-->
<div class="col-lg-12" id="bio">
<div class="row no-gutters mb-3 overflow-auto" style="height: 400px;">
<!--LEFT DECOR-->
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<!--END OF LEFT DECOR-->
<!--BIOGRAPHY-->
<div class="col">
<div class="card border-0 rounded-0 p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Biography</h1>
<p>Story overview/backstory can go here, or delete it if you only want arcs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="row p-3">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Subheader</h1>
<div class="col-lg-12" style="height:2px; background-color: #A11019;"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra vitae congue eu. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Adipiscing elit pellentesque habitant morbi. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Morbi tristique senectus et netus et malesuada fames ac turpis. Ac orci phasellus egestas tellus. Phasellus vestibulum lorem sed risus ultricies. Sed velit dignissim sodales ut eu sem. Egestas quis ipsum suspendisse ultrices gravida dictum. Pulvinar elementum integer enim neque volutpat ac. Odio facilisis mauris sit amet. Ultrices sagittis orci a scelerisque purus. Velit egestas dui id ornare.</p>
<p>Vulputate dignissim suspendisse in est ante in nibh. Vel eros donec ac odio. Lacus sed viverra tellus in hac. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Lacus suspendisse faucibus interdum posuere. Integer vitae justo eget magna fermentum iaculis. Vitae et leo duis ut diam quam nulla. Facilisis sed odio morbi quis commodo odio aenean. Duis at tellus at urna condimentum mattis.</p>
<p>Lacus luctus accumsan tortor posuere ac. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Nullam non nisi est sit amet facilisis magna etiam. Nec sagittis aliquam malesuada bibendum. Magna ac placerat vestibulum lectus mauris ultrices. Nunc lobortis mattis aliquam faucibus purus in. Sed enim ut sem viverra aliquet eget sit amet tellus. Quam elementum pulvinar etiam non quam. Bibendum enim facilisis gravida neque convallis a cras semper auctor.</p>
</div>
</div>
<!--END OF BIOGRAPHY-->
<!--RIGHT DECOR-->
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<!--END OF RIGHT DECOR-->
</div>
</div>
<!--END OF BIO SECTION-->
<!--MOODBOARD SECTION-->
<!--IMG ONE-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2" style="border: 2px solid; background-color: #212121;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2" style="border: 2px solid; background-color: #212121;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2" style="border: 2px solid; background-color: #212121;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<!--END OF IMG THREE-->
<!--MOODBOARD SECTION-->
<!--DESIGN SECTION-->
<div class="col-lg-8 mb-3" id="design">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<!--CONTENT BOX-->
<div class="p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Design</h1>
<!--COLOR PALETTE
INSTRUCTIONS: You want to change the hex code #A1A1A1 to whatever color you have for the palette. If it ends up that the text is too light, add "color: #000;" after "letter-spacing: 3px;" in the full style tag. Don't forget to actually write the hex code in the text portion as well, so that people know what the actual color is.-->
<div class="row">
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 1: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 2: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 1: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 2: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-head-side"></i> skintone: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye-dropper-half"></i> details: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-clothes-hanger"></i> outfit 1: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
<div class="col-md-6 mb-3">
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<div class="card rounded-0" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-shirt"></i> outfit 2: #hex_code</div>
</div>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
</div>
</div>
<!--END OF COLOR PALETTE-->
<div class="row p-2">
<div class="col-md-6 mb-3">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form One</h1>
<p>Give a description of your character's default form/outfit here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<div class="col-md-6 mb-3 ">
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Form Two</h1>
<p>Give a description of your character's default form/outfit here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Design Notes</h1>
<ul class="pl-4 list-unstyled">
<li><i class="fas fa-greater-than"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
<li><i class="fas fa-greater-than"></i> Information</li>
</ul>
</div>
<!--END OF CONTENT BOX-->
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF DESIGN SECTION-->
<!--CHARACTER REF IMG SECTION-->
<div class="col-md-4 mb-3">
<div class="sticky-top" style="z-index:1; background-color: #212121;">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<!--CHARACTER IMG-->
<div class="card my-2 rounded-0 p-2" style="border: 2px solid; background-color: #212121;">
<div id="FORMS" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters w-100">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="background-color: #A11019; font-family: Century Gothic; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6 p-2">
</div>
<!--RB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="background-color: #A11019; font-family: Century Gothic; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--END OF CHARACTER IMG-->
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
</div>
<!--END OF CHARACTER REF IMG SECTION-->
<!--TAB BUTTONS-->
<div class="col-sm-2 btn-col d-flex mb-3">
<ul class="nav d-flex flex-md-column my-nav">
<li class="nav-item col mb-md-4">
<a class="nav-link active btn" data-toggle="tab" title="Abilities" href="#ABILITIES" style="background-color: #A11019; color:#FFE7E7;">
<i class="fas fa-sparkles fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Abilities</span></a>
</li>
<li class="nav-item col mb-md-4">
<a class="nav-link btn" data-toggle="tab" title="Stats" href="#STATS" style="background-color: #A11019; color:#FFE7E7;">
<i class="fas fa-heartbeat fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Stats</span></a>
</li>
<li class="nav-item col mb-md-4">
<a class="nav-link btn" data-toggle="tab" title="Inventory" href="#INVENTORY" style="background-color: #A11019; color:#FFE7E7;">
<i class="fas fa-swords fa-fw fa-2x"></i> <br>
<span style="font-size:15pt; font-variant:small-caps; font-family: Century Gothic;">Inventory</span></a>
</li>
</ul>
</div>
<!--TAB BUTTONS-->
<!--TAB CONTENT SECTION-->
<div class="col-lg-10 mb-3" id="abilities">
<!--TOP DECOR-->
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<!--END OF TOP DECOR-->
<div class="tab-content" style="height: 350px; overflow: auto; background-color: #212121;">
<!--ABILITIES TAB-->
<div class="tab-pane fade active show m-3" id="ABILITIES" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Abilities</h1>
<p>You can give a brief explanation of your character's abiities here or delete this part entirely. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="row no gutters align-items-center mt-3">
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card bg-transparent rounded-0 p-2 text-center" style="border: 2px solid;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 mb-1" style="background-color: #A11019; height:2px;"></div>
<p style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card bg-transparent rounded-0 p-2 text-center" style="border: 2px solid;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 mb-1" style="background-color: #A11019; height:2px;"></div>
<p style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
<!--ABILITY-->
<div class="col-sm-3 mb-3">
<!--ABILITY ICON-->
<div class="card bg-transparent rounded-0 p-2 text-center" style="border: 2px solid;">
<div style="min-height:150px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<i class="text-white fas fa-heartbeat fa-fw fa-5x mt-4"></i>
</div>
</div>
<!--END OF ABILITY ICON-->
</div>
<div class="col-lg-9 mb-3">
<!--ABILITY DESCRIPTION-->
<h1 class="font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Ability</h1>
<div class="col-12 mb-1" style="background-color: #A11019; height:2px;"></div>
<p style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your character's ability description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!--END OF ABILITY DESCRIPTION-->
</div>
<!--END OF ABILITY-->
</div>
</div>
<!--END OF ABILITIES TAB-->
<!--STATS TAB-->
<div class="tab-pane fade m-3" id="STATS" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Stats and primary</h1>
<div class="row my-3">
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Health</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Strength</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Agility</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Stamina</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Dexterity</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
</div>
<div class="col-6">
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Defense</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Attack</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Luck</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Magic</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Speed</h6>
<div class="progress my-1" style="border: 1px solid; background-color: #C48B8D;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #FFE7E7; color: #060606;">25%</div>
</div>
</div>
</div>
<h1 style="font-variant:small-caps; font-family: Century Gothic;">Combat style</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
Explain how your character fights here. 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.
</div>
<!--END OF STATS TAB-->
<!--INVENTORY TAB-->
<div class="tab-pane fade m-3" id="INVENTORY" role="tabpanel">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Inventory</h1>
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Weapons</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<!--WEAPONS ROW-->
<div class="row no gutters align-items-center mt-3">
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
</div>
<!--END OF WEAPONS ROW-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Daily Use</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<!--EVERY DAY ITEMS ROW-->
<div class="row no gutters align-items-center mt-3">
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
<!--ITEM-->
<div class="col-md-4 mb-3">
<!--ITEM IMAGE-->
<div class="card bg-transparent rounded-0 p-2 text-center mb-2" style="border: 2px solid;">
<div style="min-height:200px; background-image:url(https://cdn.pixabay.com/photo/2022/09/13/11/30/pattern-7451714_1280.jpg); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 pull-left" title="IMG CREDIT" href="#" style="color: #A11019; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<!--END OF ITEM IMAGE-->
<!--ITEM DESCRIPTION-->
<h1 class="font-weight-bold text-center" style="font-variant:small-caps; font-family: Century Gothic;">Item Name</h1>
<div class="col-12" style="background-color: #A11019; height:2px;"></div>
<p class="text-center" style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">[element] | [effect] | [rarity]</p>
<p>Your item description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!--END OF ITEM DESCRIPTION-->
</div>
<!--END OF ITEM-->
</div>
<!--END OF EVERY DAY ITEMS ROW-->
</div>
<!--END OF INVENTORY TAB-->
</div>
<!--BOTTOM DECOR-->
<div class="col-12" style="height:2px; background-color: #A11019;"></div>
<div class="col-12" style="height:5px; background-color: #212121;"></div>
<div class="col-12" style="height:7px; background-color: #A11019;"></div>
<!--END OF BOTTOM DECOR-->
</div>
<!--END OF TAB CONTENT SECTION-->
<!--RELATIONSHIP SECTION-->
<div class="col-lg-12" id="relationships">
<div class="row no-gutters mb-3">
<!--LEFT DECOR-->
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<!--END OF LEFT DECOR-->
<!--RELATIONSHIP-->
<div class="col">
<div class="card border-0 rounded-0 p-2" style="background-color: #212121;">
<h1 class="display-4 font-weight-bold" style="font-variant:small-caps; font-family: Century Gothic;">Relationships</h1>
<!--CHARACTER LINK-->
<div class="row align-items-center p-3">
<!--ICON-->
<div class="col-md-3">
<div class="card bg-transparent rounded-0 p-2" style="border: 2px solid;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic; color: #5ED1FF;">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #A11019; height:2px;"></div>
<h5 style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">
Relationship <br class="d-lg-none">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row align-items-center p-3">
<!--ICON-->
<div class="col-md-3">
<div class="card bg-transparent rounded-0 p-2" style="border: 2px solid;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic; color: #5ED1FF;">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #A11019; height:2px;"></div>
<h5 style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">
Relationship <br class="d-lg-none">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row align-items-center p-3">
<!--ICON-->
<div class="col-md-3">
<div class="card bg-transparent rounded-0 p-2" style="border: 2px solid;">
<div style="min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--END OF ICON-->
<div class="col-lg">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="font-variant:small-caps; font-family: Century Gothic; color: #5ED1FF;">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #A11019; height:2px;"></div>
<h5 style="font-variant:small-caps; font-family: Century Gothic; color: #C48B8D;">
Relationship <br class="d-lg-none">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE CHARACTER LINKS ABOVE HERE-->
</div>
</div>
<!--END OF RELATIONSHIP-->
<!--RIGHT DECOR-->
<div class="col-1" style="max-width:2px; background-color: #A11019;"></div>
<div class="col-1" style="max-width:5px; background-color: #212121;"></div>
<div class="col-1" style="max-width:7px; background-color: #A11019;"></div>
<!--END OF RIGHT DECOR-->
</div>
</div>
<!--END OF RELATIONSHIP SECTION-->
</div>
<!--END OF EVERYTHING ELSE-->
<a class="pull-right mb-4" href="https://toyhou.se/BigGayFish"><i class="fas fa-copyright"></i></a>
</div>