<div class="pt-5 pb-4 container" style="background-image: url(https://i.ibb.co/QP5kcZC/Skyward-Clouds-BG.jpg); max-width:1100px;background-attachment: fixed; background-repeat: no-repeat;background-size: cover;box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);">
<div class="container px-2 px-lg-0" style="max-width: 900px; font-size:14.9px; font-family: 'Cambria', serif; color: #2D4C60;">
<div class="row">
<!--- (ABOVE) code container -->
<!---
"Skyward" code by J-Haskell on Toyhouse. Make sure that you have the WYSIWYG editor disabled before editing this! If you don't have that disabled, this code will likely break.
Use color:#458395; on the links to have them match the rest of this theme’s colours.
-->
<!---
========================================
========================================
SECTION 1 || BASIC CHARACTER INFORMATION
========================================
========================================
-->
<!---
================
Top banner image
================
-->
<div class="m-1 rounded-0" style="width:450px; min-height: calc(40vh - 40px);
background-image: url(https://i.ibb.co/CwRkYXt/Skyward-Forest-BG.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: center;
box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); padding-right:15px;"></div>
<div class="m-1 flex-column" style="width:450px;">
<div class="card border-0 rounded-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); margin-bottom:7px; background-color: rgba(232, 235, 242, 0.65);">
<!--- Character name - text will wrap & box will expand to fit, but really long names will look a bit odd like this. -->
<div class="justify-content-between text-break" style="color:#2D4C60;font-weight:600;border-bottom:1px solid;"><i class="fad fa-wind fa-fw" style="font-size:1.5em;"></i><h1 style="font-size:1.5em;letter-spacing:1px;">
Character Name
</h1></div>
<!--- Character subtitle - feel free to add different text! Box will expand to fit content, but this is meant to be a one-line blurb. -->
<p class="text-uppercase" align="center" style="margin-top:8px; font-size: 13px; color:#8798a1;">
Age | pronouns | species
</p>
</div>
<!---
===============
Character blurb
===============
-->
<!--- Large title -->
<div class="card border-0 rounded-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);margin-bottom:7px; background-color: rgba(232, 235, 242, 0.65);"><p class="text-uppercase d-flex justify-content-between" style="color:#8798a1;margin-bottom:8px; border-bottom:1px dotted;"><span><i class="fad fa-circle-info" style="font-size:1.2em;"></i></span> Introduction</p>
<p>
Write a brief blurb about your character here! Try to sum them up in a few sentences. 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.
</p>
</div>
<!--- End title -->
<!---
===============
BASICS BOX
Section contains fields for very basic character information. Try to keep these at 1-2 words, these look best when they're very short. If certain labels aren't really applicable to your character, feel free to change or remove them.
===============
-->
<div class="card rounded-0 border-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); background-color: rgba(232, 235, 242, 0.65);">
<p class="ext-uppercase d-flex justify-content-between" style="color:#8798a1;margin-bottom:8px; border-bottom:1px dotted;"><span><i class="fad fa-book-open" style="font-size:1.2em;"></i></span> Basics</p>
<div style="margin-bottom:8px;font-size:13px;">
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-dragon"></i> Species</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-mars-and-venus-burst"></i> Gender</span> <i>
content (pron/ouns)
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-heart"></i> Sexuality </span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-calendars"></i> D.O.B </span> <i>
content (## y.o.)
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-briefcase"></i> Occupation </span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-map-location"></i> Location </span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-house-chimney-heart"></i> Birthplace </span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1 text-break" style="background-color:#E8EBF2;margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-globe"></i> setting</span> <i>
content
</i></p></div>
</div>
</div>
</div>
<!--- End basics section-->
<!---
====================================
====================================
SECTION 2 || CHARARCTERIZATION INFO
====================================
====================================
-->
<!--- Large title -->
<div class="m-1 flex-column" style="width:450px;">
<div class="card border-0 rounded-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);background-color: rgba(232, 235, 242, 0.65); margin-bottom: 7px;"><div class="d-flex justify-content-between" style="color:#2D4C60;font-weight:600;border-bottom:1px solid; margin-bottom:8px;"><h1 style="font-size:1.5em;letter-spacing:1px;">Characterization</h1><i class="fa-duotone fa-masks-theater fa-fw" style="font-size:1.5em;"></i></div>
<!--- End title-->
<!---
====================================
BASIC CHARACTERIZATION FIELDS
Quick info on your character and how they behave. Try to keep things to 1-2 words long, boxes can expand but things look best if you keep it short.
====================================
-->
<div class="text-break" style="font-size:13px; margin-bottom:7px;">
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-head-side-brain"></i> MBTI</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-award"></i> Greatest Strength</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-person-falling"></i> Fatal Flaw </span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-music"></i> Theme song </span> <i>
<a href="Music_url_here" target="_blank" style="color:#458395;">
Song - artist
</a></i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; margin-bottom: 4px; background-color: #E8EBF2;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-comment-lines"></i> Voiceclaim </span> <i>
<a href="Voice_clip_url_here" target="_blank" style="color:#458395;">
Character/person
</a></i></p></div>
<div class="card border-0 rounded-0 p-1" style="background-color: #E8EBF2; border-bottom: 2px dotted; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-images"></i> Aesthetic</span> <i>
content
</i></p></div>
</div>
<!---
==================
PERSONALITY TRAITS
Describe your character's man personality traits here. Box will expand with extra information so you can get more in-depth if you'd like. By default I've included 3 traits for each, but you're welcome to add more/less as applicable.
Try to keep the headers all to one-line in length, though, as they look best that way.
==================
-->
<!--- Positive traits -->
<p class="text-uppercase text-break d-flex justify-content-between" style="margin-bottom:8px; border-bottom:1px dotted; color:#8798a1">
Trait, Trait, trait
<span><i class="fa-duotone fa-circle-plus tooltipster" title="Positive Traits" style="font-size:1.2em;"></i></span></p>
<p>Describe your character's positive personality traits 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.</p>
<!--- Neutral traits - think what traits your character has that can be an asset or disadvantage in different situations, or simply provide neither. -->
<p class="text-uppercase text-break d-flex justify-content-between" style="margin-bottom:8px; color:#8798a1; border-bottom:1px dotted;">
Trait, Trait, trait
<span><i class="fa-duotone fa-circle-ellipsis tooltipster" title="Neutral Traits" style="font-size:1.2em;"></i></span></p>
<p>Describe your character's more neutral personality traits 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.</p>
<!--- Negative traits -->
<p class="text-uppercase text-break d-flex justify-content-between" style="margin-bottom:8px; color:#8798a1; border-bottom:1px dotted;">
Trait, Trait, trait
<span><i class="fa-duotone fa-circle-minus tooltipster" title="Negative Traits" style="font-size:1.2em;"></i></span></p>
<p>Describe your character's negative personality traits 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.</p>
</div>
<!---
==============================
LIKES & DISLIKES SECTION
Boxes can expand and wrap with longer text, but this will look nicest with 1-2 words for each bullet point.
These do not expand to match eachother, so keep that in mind and try to keep them at equal lengths when filling this out.
If you'd rather, you could also swap the heading here out for Strengths & Weaknesses rather than Likes & Dislikes!
==============================
-->
<div class="row no-gutters">
<!---
=============
LIKES SECTION
=============
-->
<div class="col-6 pr-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);background-color: rgba(232, 235, 242, 0.65);">
<p class="text-uppercase d-flex justify-content-between" style="margin-bottom:8px; border-bottom:1px dotted; color:#8798a1;"> Likes <span><i class="fa-duotone fa-heart" style="font-size:1.2em;"></i></span></p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-plus" style="color:#8798a1;"></i></span>
Like
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-plus" style="color:#8798a1;"></i></span>
Like
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-plus" style="color:#8798a1;"></i></span>
Like
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-plus" style="color:#8798a1;"></i></span>
Like
</p>
</div>
</div>
<!---
================
DISLIKES SECTION
================
-->
<div class="col-6 pl-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);background-color: rgba(232, 235, 242, 0.65);">
<p class="text-uppercase d-flex justify-content-between" style="margin-bottom:8px; color:#8798a1; border-bottom:1px dotted;"> Dislikes <span><i class="fa-duotone fa-heart-crack" style="font-size:1.2em;"></i></span></p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-minus" style="color:#8798a1;"></i></span>
Disike
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-minus" style="color:#8798a1;"></i></span>
Dislike
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-minus" style="color:#8798a1;"></i></span>
Dislike
</p>
<p class="justify-content-between">
<span><i class="fa-light fa-circle-minus" style="color:#8798a1;"></i></span>
Dislike
</p>
</div>
</div>
</div>
<!--- END LIKES & DISLIKES SECTION -->
<!---
==============================
CHARACTER STORY/HISTORY SECTION
This section is meant for a brief snippet summing up the main parts of your character's story. It will expand to fit what you put in here, but it will probably work best to keep it brief.
I've included a button for linking a google doc/dedicated backstory section - I'd highly reccomend using that instead of including long paragraphs of text.
==============================
-->
<div class="card rounded-0 border-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);background-color: rgba(232, 235, 242, 0.65);"><p class="text-uppercase d-flex justify-content-between" style="color:#8798a1; margin-bottom:8px; border-bottom:1px dotted;">Backstory <span><i class="fa-duotone fa-book" style="font-size:1.2em;"></i></span></p>
<p>
Write a little bit about your character's background here!
<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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!--- -->
<p align="center"><a class="btn btn-default border-0 rounded-0" style="color:#fff; background-color:#9EAFB7;" href="Bio url here" target ="_BLANK" role="button"><i class="fas fa-book-open"></i> Extended story</a></p>
</div>
</div>
<!---
Characterization section banner image.
-->
<div class="m-1" style="width:450px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); min-height: calc(40vh - 40px);
background-image: url(https://i.ibb.co/CwRkYXt/Skyward-Forest-BG.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: center;
padding-right:15px;"></div>
<!---
================================
================================
SECTION 3 || DESIGN & AESTHETICS
================================
================================
-->
<!---
Design section banner image. (If your character does not have a design yet, you can find a lot of stock photos that are free-to-use on Unplash!)
-->
<div class="card border-0 rounded-0 m-1" style="width:450px; min-height: calc(40vh - 40px); box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);
background-image: url(https://i.ibb.co/CwRkYXt/Skyward-Forest-BG.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!---
=================
Large title start
=================
-->
<div class="m-1 flex-column" style="width:450px;">
<div class="card border-0 rounded-0 p-3" style="background-color: rgba(232, 235, 242, 0.65);box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); margin-bottom:7px;">
<div class="d-flex justify-content-between" style="font-weight:600;border-bottom:1px solid; margin-bottom:8px;color:#2D4C60;"><i class="fa-duotone fa-palette fa-fw" style="font-size:1.5em;"></i><h1 style="font-size:1.5em;letter-spacing:1px;">Design & Aesthetic</h1></div>
<!---Large title end -->
<!---
=======================
Designer/artist credits
=======================
-->
<div class="text-break" style="font-size:13px; margin-bottom:7px;">
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; margin-bottom: 4px; background-color: #E8EBF2;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-pen-nib"></i> Designer/Artist</span> <i>
<a href="Arist_url_here" target="_blank" style="color:#458395;">
content
</a></i></p></div>
</div>
<!--- Designer/artist credits end-->
<!---
===============
PHYSICAL TRAITS SECTION
Quick fields to fill in regarding any major physical features your character has.
===============
-->
<p class="text-uppercase d-flex justify-content-between" style="margin-bottom:8px; border-bottom:1px dotted;color:#8798a1;"><span><i class="fad fa-hands" style="font-size:1.2em;"></i></span> Physical Traits</p>
<div class="text-break" style="font-size:13px; margin-bottom:7px;">
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-claw-marks"></i> Scars</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-snake"></i> Tattoos</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; margin-bottom: 4px; background-color: #E8EBF2;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-person"></i> Body type</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; margin-bottom: 4px; background-color: #E8EBF2;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-ruler-vertical"></i> Height</span> <i>
content
</i></p></div>
</div>
<!--- Appearance sectino -->
<p class="text-uppercase d-flex justify-content-between" style="color:#8798a1;margin-bottom:8px; border-bottom:1px dotted;"><span><i class="fad fa-user" style="font-size:1.2em;"></i></span> Appearance</p>
<p>Describe any key features of your character here! I recommend focusing on things not visible/clear in their reference art (or describing them as clearly as possible, if they don't have a design yet).</p>
</div>
<!---
============================
MOODBOARD SECTION GOES HERE!
Can use this as a moodboard, or stick images of important details in your character's design in here.
============================
-->
<div class="row no-gutters">
<div class="col-6 pr-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; height:200px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);
background-image: url(https://i.ibb.co/kMfZ9vY/Skyward-Leaf-BG.jpg);
background-position:center;
background-repeat: no-repeat;
background-size:cover;">
</div>
</div>
<div class="col-6 pl-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; height:200px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);
background-image: url(https://i.ibb.co/kMfZ9vY/Skyward-Leaf-BG.jpg);
background-position:center;
background-repeat: no-repeat;
background-size:cover;">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-6 pr-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; height:200px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);
background-image: url(https://i.ibb.co/kMfZ9vY/Skyward-Leaf-BG.jpg);
background-position:center;
background-repeat: no-repeat;
background-size:cover;">
</div>
</div>
<div class="col-6 pl-1">
<div class="card pt-2 p-3 rounded-0 border-0 text-break" style="margin-bottom:7px; height:200px; box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);
background-image: url(https://i.ibb.co/kMfZ9vY/Skyward-Leaf-BG.jpg);
background-position:center;
background-repeat: no-repeat;
background-size:cover;">
</div>
</div>
</div>
<!---
============================
END MOODBOARD SECTION
============================
-->
<!---
============================
CLOTHING & APPAREL SECTION
A section that goes over your character's clothing designs! Has 3 buttons to swap between alternate looks; the first for their main one, and then two alternate designs. Clicking between these buttons will change the image to the left and the teext & palette included below.
If your character is an animal/this section is otherwise not applicable to them, you're welcome to remove these buttons or use them for designs of them at different stages in their life/old designs/etc.
You could also use one of the alternate designs for a shapeshifter's animal form! Just change the label and Font Awesome icons to better fit.
============================
-->
<div class="card border-0 rounded-0 p-3" style="background-color: rgba(232, 235, 242, 0.65);box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38); margin-bottom:7px;"><p class="text-uppercase d-flex justify-content-between" style="color:#8798a1;margin-bottom:8px; border-bottom:1px dotted;"><span><i class="fad fa-palette" style="font-size:1.2em;"></i></span> Palettes</p>
<!---
========
NAV MENU
The labels for each botton are on separate lines for ease of editing! I don't reccomend changing anything else unless you know what you're doing.
========
-->
<ul class="nav nav-pills pb-3 px-3 justify-content-between" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link card border-0 rounded-0" id="pills-main-tab" data-toggle="pill" href="#pills-main" role="tab" aria-controls="pills-main" aria-selected="true" style="border-radius:0px; background-color:#9EAFB7; color:#fff">
Body
</a>
</li>
<li class="nav-item">
<a class="nav-link card border-0 rounded-0" id="pills-Alt1-tab" data-toggle="pill" href="#pills-Alt1" role="tab" aria-controls="pills-Alt1" aria-selected="false" style="border-radius:0px; color:#fff; background-color:#9EAFB7;">
Clothes
</a>
</li>
<li class="nav-item">
<a class="nav-link card border-0 rounded-0" id="pills-Alt2-tab" data-toggle="pill" href="#pills-Alt2" role="tab" aria-controls="pills-Alt2" aria-selected="false" style="border-radius:0px; color:#fff; background-color:#9EAFB7;">
Accessories
</a>
</li>
</ul>
<!--- End nav menu -->
<!-- start nav content -->
<div class="tab-content" id="pills-tabContent">
<!---
======================
BODY COLOURS
Use this tab for the colour palette used for your character's skin, hair, eyes, scars, etc. Change the colours by editing the background-color, and change the tooltip label by editing title="Label" with whatever's applicable for your character design.
You can add more colours to each palette by copy-pasting in the code below. The palette will adjust to fit it, but if you try to stick a lot of colours in here it might get too narrow to use properly.
<div style="background-color: #fff;" title="Label" class="col h-100 tooltipster">
</div>
======================
-->
<!--- Body palette tab start -->
<div class="tab-pane fade show active" id="pills-main" role="tabpanel" aria-labelledby="pills-main-tab">
<div class="row no-gutters" style="height:30px; border-radius: 0px; overflow:hidden;">
<!--- Start palette -->
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #9EAFB7;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #2D4C60;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #E8EBF2;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #89969F;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
</div>
<!--- end palette -->
</div>
<!--- End body palette tab -->
<!--- Start clothing palette tab -->
<div class="tab-pane fade" id="pills-Alt1" role="tabpanel" aria-labelledby="pills-alt1-tab">
<div class="row no-gutters" style="height:30px; border-radius: 0px; overflow:hidden;">
<!--- Start palette -->
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #9EAFB7;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #2D4C60;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #E8EBF2;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #89969F;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
</div>
<!--- end palette -->
</div>
<!--- End clothing palette tab -->
<!--- Start accessories palette tab -->
<div class="tab-pane fade" id="pills-Alt2" role="tabpanel" aria-labelledby="pills-Alt2-tab">
<div class="row no-gutters" style="height:30px; border-radius: 0px; overflow:hidden;">
<!--- Start palette -->
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #9EAFB7;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #2D4C60;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #E8EBF2;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #89969F;" title="Label" class="col h-100 tooltipster">
</div>
<div style="background-color: #458395;" title="Label" class="col h-100 tooltipster">
</div>
</div>
<!--- End palette -->
</div>
<!--- End accessories palette tab -->
</div>
</div>
<!--- Clothing/apparel section end. -->
<!---
============================
INVENTORY SECTION
What does your character typically have to hand on the average day? Feel free to edit the sections in here to reflect what they own.
============================
-->
<!-- Title start -->
<div class="card border-0 rounded-0 p-3" style="box-shadow: 5px 5px 11px -6px rgba(11,16,18,0.38);background-color: rgba(232, 235, 242, 0.65);">
<p class="text-uppercase d-flex justify-content-between" style="color:#8798a1; margin-bottom:8px; border-bottom:1px dotted;"><span><i class="fad fa-treasure-chest" style="font-size:1.2em;"></i></span> Inventory</p>
<!--- Title end -->
<div class="text-break" style="font-size:13px; margin-bottom:7px;">
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-swords"></i> Weapon</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-screwdriver-wrench"></i> Tools</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-sack-dollar"></i> Money</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2; margin-bottom: 4px;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-paw-claws"></i> Pets</span> <i>
content
</i></p></div>
<div class="card border-0 rounded-0 p-1" style="border-bottom: 2px dotted; background-color: #E8EBF2;"><p class="p-1 justify-content-between"><span class="text-uppercase" style="color:#8798a1;"><i class="fad fa-helmet-battle"></i> Equipment</span> <i>
content
</i></p></div>
</div>
</div>
<!--- Inventory section end -->
</div>
<!--- code container end tags: -->
</div>
<!---
CODE CREDITS
Don't remove this. Editing is alright, as long as it remains visible.
-->
<p align="right"><a href="https://toyhou.se/J-Haskell" target="_BLANK"><i class="fa-solid fa-code tooltipster" style="color:#2d4c60" title="Code by J-Haskell"></i></a></p>
<!--- END CODE CREDITS -->
</div>
</div>
