<!-- STYLE NOTES - FIND AND REPLACE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
SHAPRNESS - .3em | Set to 0 for sharp, keep or raise number for roundness.
END OF STYLE NOTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- CONTAINER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To remove the background, delete the background-image(img_url); attribute in the container below.
To make it a solid color instead, replace it with background-color: #HEXCOLOR.
To add spacing above and below the code, add mt-5 to the div class below. Then, add mb-5 to the credit div at the very end.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="container-fluid p-md-4 p-0" style="letter-spacing:.5px; border-radius: .3em; background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/31602712_uBvnfx17i1kX5c6.png); background-position: center;">
<div class="container bg-faded py-3 px-4" style="border-radius: .3em; overflow: auto;">
<!-- TAGS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="tags" class="mb-4">
<p>tags:
<a href="TAG_LINK" style="border-radius: .3em;">tag</a>,
<a href="TAG_LINK" style="border-radius: .3em;">tag</a>,
<a href="TAG_LINK" style="border-radius: .3em;">tag</a>,
<a href="TAG_LINK" style="border-radius: .3em;">tag</a>,
<a href="TAG_LINK" style="border-radius: .3em;">tag</a>
</p>
</div>
<!-- TAGS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- CHARACTER TITLE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="character_title">
<h1 class="display-4">Character Title
<i class="fal fa-star pull-right"></i>
</h1>
</div>
<!-- CHARACTER TITLE END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<hr class="mb-4">
<!-- QUOTE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="quote" class="mb-4 p-3 text-justify font-italic card" style="font-size: 104%; border-radius: .3em;">
<p>"This is a quote. Can be something the character says, or like, a song lyric or something. 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>
<!-- QUOTE END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- BASIC INFO (SIDEBAR) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To change which sections of the sidebar are open or collapsed by default, remove or add "show" from the section's
class attribute. Ex:
A section with class="collapse show" will be open by default.
A section with class="collapse" will be collapsed by default.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="col-lg-4 float-lg-right pr-lg-0 mb-4 pl-lg-3 px-0 bg-faded" style=" z-index: 1;">
<div id="basic_info" class="p-3 card" style="font-size: 85.7%; border-radius: .3em;">
<!-- Character Name-->
<div class="bg-faded card text-center bg-faded p-2 mb-2" style="border-radius: .3em;"><h1 class="mb-0">Character Name</h1></div>
<!-- Character Name End-->
<!-- Character Image-->
<div class="bg-faded mb-2 card" style="height: 300px; border-radius: .3em; background-image: url(CHARACTER_IMAGE); background-position: center; background-size: cover; "></div>
<!-- Character Image End-->
<!-- Names and Aliases Section-->
<div class="text-center bg-faded card p-2 mb-2" style="border-radius: .3em;">
<h6 class="mb-0">Names and Aliases <span>[<a href="#names_and_aliases" data-toggle="collapse"><i class="fas fa-minus fa-fw" title="[ Show / Hide ]"></i></a>]</span></h6>
</div>
<div id="names_and_aliases" class="collapse show">
<div class="row mb-1">
<div class="col-5 my-1"><b>Full Name</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Aliases</b></div>
<div class="col-7 my-1">Content</div>
</div>
</div>
<!-- Names and Aliases Section End-->
<!-- Characteristics Section-->
<div class="text-center bg-faded card p-2 mb-2" style="border-radius: .3em;">
<h6 class="mb-0">Characteristics <span>[<a href="#characteristics" data-toggle="collapse"><i class="fas fa-minus fa-fw" title="[ Show / Hide ]"></i></a>]</span></h6>
</div>
<div id="characteristics" class="collapse show">
<div class="row mb-1">
<div class="col-5 my-1"><b>Species</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Gender</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Pronouns</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Orientation</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Height</b></div>
<div class="col-7 my-1">Content (Present) <br> Content (Future)</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Age</b></div>
<div class="col-7 my-1">Content (Present) <br> Content (Future)</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Status</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Alignment</b></div>
<div class="col-7 my-1">Content</div>
</div>
</div>
<!-- Characteristics Section End-->
<!-- Affiliations Section End-->
<div class="text-center bg-faded card p-2 mb-2" style="border-radius: .3em;">
<h6 class="mb-0">Affiliations <span>[<a href="#affiliations" data-toggle="collapse"><i class="fas fa-minus fa-fw" title="[ Show / Hide ]"></i></a>]</span></h6>
</div>
<div id="affiliations" class="collapse">
<div class="row mb-1">
<div class="col-5 my-1"><b>Occupation</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Allegiances</b></div>
<div class="col-7 my-1">Content <br/> Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Residence</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Homeland</b></div>
<div class="col-7 my-1">Content</div>
</div>
</div>
<!-- Affiliations Section End-->
<!-- Connections Section-->
<div class="text-center bg-faded card p-2 mb-2" style="border-radius: .3em;">
<h6 class="mb-0">Connections <span>[<a href="#connections" data-toggle="collapse"><i class="fas fa-minus fa-fw" title="[ Show / Hide ]"></i></a>]</span></h6>
</div>
<div id="connections" class="collapse">
<div class="row mb-1">
<div class="col-5 my-1"><b>Relatives</b></div>
<div class="col-7 my-1">
<a href="RELATIVE_LINK">Name</a> (relation) <br/>
<a href="RELATIVE_LINK">Name</a> (relation) <br/>
<a href="RELATIVE_LINK">Name</a> (relation)
</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Friends</b></div>
<div class="col-7 my-1">
<a href="FRIEND_LINK">Name</a> (relation) <br/>
<a href="FRIEND_LINK">Name</a> (relation) <br/>
<a href="FRIEND_LINK">Name</a> (relation)
</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Enemies</b></div>
<div class="col-7 my-1">
<a href="ENEMY_LINK">Name</a> (relation) <br/>
<a href="ENEMY_LINK">Name</a> (relation) <br/>
<a href="ENEMY_LINK">Name</a> (relation)
</div>
</div>
</div>
<!-- Connections Section End-->
<!-- Misc Info Section -->
<div class="text-center bg-faded card p-2 mb-2" style="border-radius: .3em;">
<h6 class="mb-0">Misc. Information <span>[<a href="#misc_info" data-toggle="collapse"><i class="fas fa-minus fa-fw" title="[ Show / Hide ]"></i></a>]</span></h6>
</div>
<div id="misc_info" class="collapse">
<div class="row mb-0">
<div class="col-5 my-1"><b>Voice Claim</b></div>
<div class="col-7 my-1">
<a href="VOICE_LINK">Content</a>
</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Designer</b></div>
<div class="col-7 my-1">
<a href="DESIGNER_LINK">Content</a>
</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Creation Date</b></div>
<div class="col-7 my-1">Content</div>
<div class="col-12"><hr class="my-0"></div>
<div class="col-5 my-1"><b>Worth</b></div>
<div class="col-7 my-1">Content</div>
</div>
</div>
<!-- Misc Info Section End-->
</div>
</div>
<!-- BASIC INFO (SIDEBAR) END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- SUMMARY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="summary" class="mb-4">
<p>
<i class="fas fa-stars fa-fw"></i>
<b>Firstname Lastname</b> is a character on Toyhouse. This section is a small, general description of that character. This is just placeholder text. 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>
<!-- SUMMARY END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- TABLE OF CONTENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="table_of_contents" class="mb-4 p-3 card" style="max-width: 500px; border-radius: .3em;">
<div class="row">
<div class="col-6">
<h4 class="mb-0">Contents</h4>
</div>
<div class="col-6">
<h4 class="mb-0 text-right">[<a href="#contents_list" data-toggle="collapse" title="[ Show / Hide ]"><i class="fas fa-minus"></i></a>]</h4>
</div>
</div>
<!-- Contents List - This section collapses.-->
<div id="contents_list" class="collapse show">
<div class="mt-3 mb-2 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<ul class="list-unstyled mb-0">
<!-- APPEARANCE SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#appearance">
<span class="text-muted">1. </span> Appearance</a>
</li>
<!-- APPEARANCE SECTION LINK END-->
<!-- PERSONALITY SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#personality">
<span class="text-muted">2. </span> Personality</a>
</li>
<!-- PERSONALITY SECTION LINK END-->
<!-- BACKGROUND SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#background">
<span class="text-muted">3. </span> Background</a>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you want to add more story segments the Background section, make sure to do the following:
1. Copy one the Story Section Links below. Paste it below all others, BEFORE the </ul> tag.
2. Change the href along with the section number. Ex. 3.4 Story Section should have href="#background4", and so on.
3. Go to the actual Background Section. See the instructions there.
If all that is too complicated, you can just delete the <ul> below to remove the Background subsections.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<ul class="list-unstyled ml-3">
<!-- STORY SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#background1">
<span class="text-muted">3.1 </span> Story Section</a>
</li>
<!-- STORY SECTION LINK END-->
<!-- STORY SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#background2">
<span class="text-muted">3.2 </span> Story Section</a>
</li>
<!-- STORY SECTION LINK END-->
<!-- STORY SECTION LINK-->
<li>
<a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#background3">
<span class="text-muted">3.3 </span> Story Section</a>
</li>
<!-- STORY SECTION LINK END-->
</ul>
</li>
<!-- BACKGROUND SECTION LINK END-->
<!-- ABILITIES SECTION LINK-->
<li><a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#abilities">
<span class="text-muted">4. </span> Abilities</a>
</li>
<!-- ABILITIES SECTION LINK END-->
<!-- TRIVIA SECTION LINK-->
<li><a class="btn w-100 text-left py-1 px-2" style="text-decoration: none;" href="#trivia">
<span class="text-muted">5. </span> Trivia</a>
</li>
<!-- TRIVIA SECTION LINK END-->
</ul>
</div>
<!-- Contents list end - This section collapses. -->
</div>
<!-- TABLE OF CONTENTS END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- APPEARANCE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To insert an image next to text, input one the following between or before <p> elements:
IMAGE THAT FLOATS RIGHT OF TEXT:
<img src="IMG_URL" style="max-width: 100px;" class="d-block float-right ml-2">
IMAGE THAT FLOATS LEFT OF TEXT:
<img src="IMG_URL" style="max-width: 100px;" class="d-block float-left mr-2">
You can adjust the max-width as necessary to resize it.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="appearance" class="mb-4">
<h1>Appearance
<a href="#quote" title="Table of Contents"><i class="fal fa-list-tree fa-fw fa-xs"></i></a>
<i class="fal fa-person pull-right"></i>
</h1>
<div class="my-3 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<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>
<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. 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>
<!-- APPEARANCE END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- PERSONALITY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="personality" class="mb-4">
<h1>Personality
<a href="#quote" title="Table of Contents"><i class="fal fa-list-tree fa-fw fa-xs"></i></a>
<i class="fal fa-comment pull-right"></i>
</h1>
<div class="my-3 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<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>
<!-- PERSONALITY END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- BACKGROUND ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
^^^ See the Background Section of the table of contents for instructions on how to link each story segment
to the table.
1. Copy-paste a Story Section segment and paste it below all others, BEFORE the </div> tag.
2. Make sure the ID in the <h5> matches the href in the table of Contents.
- Ex. The 4th story segment should have an ID of "background4", and so on.
- Note: IDs do not have #s at the start, but hrefs do. This is how an href links to an ID.
3. See Table of Contents instructions if you haven't already.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="background" class="mb-4">
<h1>Background
<a href="#quote" title="Table of Contents"><i class="fal fa-list-tree fa-fw fa-xs"></i></a>
<i class="fal fa-book-open-cover pull-right"></i>
</h1>
<div class="my-3 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<!-- Story Section Segment -->
<h5 id="background1">Story Section</h5>
<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>
<!-- Story Section Segment End -->
<!-- Story Section Segment -->
<h5 id="background2" class="mt-3">Story Section</h5>
<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>
<!-- Story Section Segment End-->
<!-- Story Section Segment -->
<h5 id="background3" class="mt-3">Story Section</h5>
<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>
<!-- Story Section Segment End -->
</div>
<!-- BACKGROUND END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- ABILITIES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="abilities" class="mb-4">
<h1>Abilities
<a href="#quote" title="Table of Contents"><i class="fal fa-list-tree fa-fw fa-xs"></i></a>
<i class="fal fa-sparkles pull-right"></i>
</h1>
<div class="mt-3 mb-1 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<ul class="nav border-0">
<li class="nav-item">
<a class="nav-link border-0 active" href="#skills" data-toggle="tab">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link border-0" href="#forms" data-toggle="tab">Forms</a>
</li>
<li class="nav-item">
<a class="nav-link border-0" href="#equipment" data-toggle="tab">Equipment</a>
</li>
</ul>
<div class="mb-2 mt-1 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<div class="tab-content">
<!-- SKILLS TAB-->
<div data-toggle="tab" class="tab-pane fade in active show" id="skills">
<ul style="line-height: 25px">
<li><b>Ability Name</b> - Description of the ability.
<ul>
<li>Subdescription, more details, etcetera.</li>
</ul>
</li>
<li><b>Ability Name</b> - Description of the ability.</li>
<li><b>Ability Name</b> - Description of the ability.</li>
<li><b>Ability Name</b> - Description of the ability.</li>
</ul>
</div>
<!-- TAB-->
<div FORMS data-toggle="tab" class="tab-pane fade in show" id="forms">
<ul style="line-height: 25px">
<li><b>Form Name</b> - Description of the form.
<ul>
<li>Subdescription, more details, etcetera.</li>
</ul>
</li>
<li><b>Form Name</b> - Description of the form.</li>
<li><b>Form Name</b> - Description of the form.</li>
<li><b>Form Name</b> - Description of the form.</li>
</ul>
</div>
<!-- EQUIPMENT TAB-->
<div data-toggle="tab" class="tab-pane fade in show" id="equipment">
<ul style="line-height: 25px">
<li><b>Equipment Name</b> - Description of the equipment.
<ul>
<li>Subdescription, more details, etcetera.</li>
</ul>
</li>
<li><b>Equipment Name</b> - Description of the equipment.</li>
<li><b>Equipment Name</b> - Description of the equipment.</li>
<li><b>Equipment Name</b> - Description of the equipment.</li>
</ul>
</div>
</div>
</div>
<!-- ABILITIES END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- TRIVIA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="trivia">
<h1>Trivia <a href="#quote" title="Table of Contents"><i class="fal fa-list-tree fa-fw fa-xs"></i></a>
<i class="fal fa-question-circle pull-right"></i>
</h1>
<div class="my-3 d-block card" style="height: 0px; z-index: 0; border-width: 1px 0px 0px 0px;"></div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
</ul>
</div>
<!-- TRIVIA END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
</div>
<!-- CONTAINER END~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- CREDIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="mb-4">
<p class="pull-right mr-1 mt-1" style="border-radius: 10px; font-size: 10px;"><a href="https://toyhou.se/somnibear"><i class="fad fa-code text-primary"></i><span class="text-muted"> somnibear</span></a></p>
</div>
<!-- CREDIT END~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
