<!---
Code Name; Species
Creator; _featherweather / a-brilliant-loser
Date; 16 -17 Mar 2019
Notes; a stylized code meaent for closed species designs, stylistically really simple, because i kind of wanted a very basic base code to use for my own CS designs. if you use this, please, please PLEASE, link back to the CS. nothing is more frustrating than finding an intersesting CS and knowing nothing because the owner left you NO INFO.
all boxes scroll and you can always add stuff to it. theoreatically you can add even more tabs but it's optimized for 3.
also huge shout out to lowkeywicket who's alternative to tables saved my mind because i was going craycray trying to figure out wtf i did wrong >3>
card color: #5572a0
border color: #515b6b
-->
<div class="container">
<!-- credits, please do not remove -->
<div class="fixed-bottom"><p align="right"><a href="https://toyhou.se/a-brilliant-loser" title="_featherweather's codes" data-toggle="tooltip" data-placement="left" ><i class="fa fa-user-secret"></i></a></p></div>
<div class="row justify-content-md-center">
<div class="col-md-9 mb-1">
<br>
<div class="card d-flex" style="border:5px ridge #515b6b; background-color: #5572a0;">
<div class="text-white display-4 d-flex justify-content-between" style="font-variant:small-caps">Character Name Here <i class="fal fa-heartbeat"></i></div>
<hr>
<div class="row no-borders">
<!-- basic info, character image, tabs -->
<div class="col-md-4 mb-1 ml-1">
<!-- character image, will stertch to fit based on width being as big as the container. I would sugest an image that isn't too long -->
<img alt="placeholder image" src="https://file.toyhou.se/images/5433976_8VCWsSAWds6HUpE.png" class="img-thumbnail" style="border:2px ridge #515b6b; background-color: #5572a0; width:100%"/>
<br><br>
<div class="row no-borders"> <!-- table row -->
<!-- for some basics about your character, you can add more rows or remove if you want -->
<div class="col-md-12">
<span style="font-variant:small-caps">Species</span>
<span class="pull-right"><a href="LINK TO SPECIES">species name</a></span>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Enneagram</span>
<span class="pull-right">enneagram</span>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Gender</span>
<span class="pull-right">character's gender</span>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Age</span>
<span class="pull-right">character's age</span>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Height & Weight</span>
<span class="pull-right">cm and kgs</span>
</div>
<div class="col-md-12 text-center">
<span style="font-variant:small-caps"><a href="PROOF / MASTERLIST LISTING">Masterlist</a></span>
</div>
</div> <!-- end table row -->
<br>
<ul class="nav nav-pills justify-content-center row text-center">
<li class="nav-item col-3">
<a class="nav-link p-2" data-toggle="tab" href="#speciesTab" style="font-size:20px" target="_top"><i class="fal fa-info-circle "></i></a>
</li>
<li class="nav-item col-3">
<a class="nav-link p-2 active" data-toggle="tab" href="#charTab" style="font-size:20px" target="_top"><i class="fal fa-user-circle"></i></a>
</li>
<li class="nav-item col-3">
<!-- please link character gallery here -->
<a class="nav-link p-2" data-toggle="tab" href="#miscTab" style="font-size:20px" target="_top"><i class="fal fa-question-circle"></i></a>
</li>
</ul>
</div>
<!-- tab content -->
<div class="col-md-7 mb-1">
<div class="tab-content">
<!-- begin species tab; this has all the info regarding the species itself -->
<div class="tab-pane fade" id="speciesTab">
<h1 class="text-center" style="font-variant:small-caps">Species Name</h1>
<!-- PLEASE LINK THE CREATOR AND DESIGNER -->
<p class="text-center" style="font-variant:small-caps"><a href="LINK">Creator</a> <i class="fal fa-plus-circle"></i> <a href="LINK">Designer</a></p>
<hr>
<div class="p-1" style="height:390px;overflow:auto;">
<!-- the below section is for listing traits and any other species specific info you want without having to link to the species site. you can if you want. -->
<div class="row justify-content-center no-gutters">
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info</span>
<hr>
</div>
<div class="col-md-12">
<span style="font-variant:small-caps">Trait name</span>
<span class="pull-right">trait info, very long trait info, trait info, trait info, trait info, trait info, trait info, trait info, trait info, trait info, trait info</span>
<hr>
</div>
</div>
</div>
</div> <!-- end species tab -->
<!-- begin character tab; this is for information for your specific bean -->
<div class="tab-pane fade show active" id="charTab">
<h1 class="text-center" style="font-variant:small-caps">About</h1>
<!-- links for content, you can add more - see code below - and feel free to use a different divider, i just used a + sign between sections -->
<p class="text-center" style="font-variant:small-caps;"><a data-toggle="collapse" href="#char_personality">Personality</a> <i class="fa fa-plus-circle" aria-hidden="true"></i> <a data-toggle="collapse" href="#char_history">History</a> <i class="fa fa-plus-circle" aria-hidden="true"></i> <a data-toggle="collapse" href="#char_powers">Powers & Abilities</a>
<!-- additional links
<i class="fa fa-plus-circle" aria-hidden="true"></i> <a data-toggle="collapse" href="#char_NAME">Info</a>
-->
</p>
<hr>
<div class="p-1" style="height:390px;overflow:auto;">
<div id="charAccordion">
<div class="collapse" id="char_personality" data-parent="#charAccordion">
personality here
</div>
<div class="collapse" id="char_history" data-parent="#charAccordion">
history here
</div>
<div class="collapse" id="char_powers" data-parent="#charAccordion">
powers and abilities here
</div>
<!-- additional accordion parts
<div class="collapse" id="char_NAME" data-parent="#charAccordion">
addt'l info here
</div>
-->
</div> <!-- end accordion -->
</div> <!-- end overflow -->
</div> <!-- end char tab -->
<!-- begin misc tab; this tab can be used for any information, add other code, etc -->
<div class="tab-pane fade" id="miscTab">
<h1 class="text-center" style="font-variant:small-caps">Misc</h1>
<!-- links for content, you can add more - see code below - and feel free to use a different divider, i just used a + sign between sections -->
<p class="text-center" style="font-variant:small-caps;"><a data-toggle="collapse" href="#misc_1">Link Here</a>
<!-- additional links
<i class="fa fa-plus-circle" aria-hidden="true"></i> <a data-toggle="collapse" href="#misc_NAME">Info</a>
-->
</p>
<hr>
<div class="p-1" style="height:390px;overflow:auto;">
<div id="miscAccordion">
<div class="collapse" id="misc_1" data-parent="#miscAccordion">
any information you want here
</div>
<!-- additional accordion parts
<div class="collapse" id="misc_NAME" data-parent="#miscAccordion">
addt'l info here
</div>
-->
</div> <!-- end accordion -->
</div> <!-- end overflow -->
</div> <!-- end misc tab -->
</div> <!-- end tabs -->
</div> <!-- end tab content col -->
</div> <!-- end row -->
</div> <!-- end card -->
</div> <!-- end main col -->
</div> <!-- ends row -->
</div> <!-- ends container -->
