<!--
Code Name; You Can't Fight the Homestuck
Creator; _featherweather / a-brilliant-loser
Date; 18 Feb - 23 Feb 2019
Notes;
look for ⌘ character for things you should change.
in the "charIntro" tab DO NOT use <p> tags, doing so for some reason removes the font styling which means you'd have to edit it manually. two line breaks emulate the styling best.
wiki aspect by watergems, thank you so much for letting me package your code!
HS resources can be found at https://toyhou.se/3596865.resources/3596868.fan-homestuck
-->
<div class="tab-content">
<!-- credits, please do not remove -->
<div class="fixed-bottom"><p align="right"><a href="http://toyhou.se/watergems" title="wiki layout by watergems" data-toggle="tooltip" data-placement="left" ><i class="fa fa-code" /></a><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>
<!-- intro page -->
<div class="tab-pane fade show active text-center" id="charIntro" style="font-family: courier new,courier; font-weight: bold;">
<h2 style="font-size: 48px">Page⌘Title</h2>
<img src="TOP⌘IMAGE" class="fr-fic fr-dib"><br><br>
⌘⌘⌘⌘⌘Text for Intro Page⌘⌘⌘⌘⌘
<!-- edit the below line to emulate a MSPA!command -->
<h2><br>
><a href="#wiki" data-toggle="tab">⌘Be the ????⌘</a></h2>
</div>
<div class="tab-pane fade show" id="wiki">
<!------ INFOBOX ------>
<div class="col-md-4 float-md-right p-0 mb-3 ml-md-3">
<div class="card card-outline-primary bg-faded">
<!-- CHARACTER NAME. Remove the img tags if you do not need them. -->
<h2 class="card-primary card-header card-inverse d-flex justify-content-between text-white"><!-- CHAR SYMBOL --><img src="Symbol⌘Image"> CHARACTER⌘NAME <!-- ASPECT; find imgs @ https://toyhou.se/3596865.resources/3596868.fan-homestuck --><img src="Aspect⌘Image"></h2>
<!-- IMAGE // if you have one image, remove this section -->
<ul class="nav d-flex flex-row p-2 mx-auto list-unstyled">
<li class="nav-item"><a data-toggle="tab" class="nav-link btn btn-primary mx-1" href="#current">Current</a></li>
<li class="nav-item"><a data-toggle="tab" class="nav-link btn btn-primary mx-1" href="#outfit2">Outfit2</a></li>
<!--
to add more tabs for images:
<li class="nav-item"><a data-toggle="tab" class="nav-link btn btn-primary mx-1" href="#outfit3">Outfit3</a></li>
make sure that the href is linked to the same name as the id as the one you add below
-->
</ul>
<div class="tab-content text-center">
<div class="tab-pane fade width-auto active show" id="current"><img src="Current⌘Image" class="pt-2 px-2" /></div>
<div class="tab-pane fade width-auto" id="outfit2"><img src="Second⌘Image" class="pt-2 px-2" /></div>
<!--
to add more images:
<div class="tab-pane fade width-auto" id="outfit3"><img src="Third⌘Image" class="pt-2 px-2" /></div>
make sure that the id is the same one as you use above
-->
</div>
<!-- IMAGE // if you have one image, remove the comment lines around the next line
<img src="http://placehold.it/800x1200" class="mx-auto pt-2 px-2" />
-->
<!------ QUOTE ------>
<div class="row mb-3"><div class="col-md-10 offset-md-1">
<div class="card p-2 bg-faded card-outline-default"><span class="text-center mb-2">
<i class="fa-lg fas fa-quote-left float-left text-primary" />
<i class="fa-lg fas fa-quote-right float-right text-primary" />
Character⌘Quote
</span><div class="text-right text-muted">
― Quote⌘Source
</div></div>
</div></div>
<!-- collapsible section, copy+paste and replace #heading2 as needed -->
<h5 class="bg-primary text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem">Info <a href="#mainInfo" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 2 -->
<div class="collapse mt-2" id="mainInfo"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">AKA</div>
<div class="col-7 pr-4">other⌘names</div>
<div class="col-5 pl-4 font-weight-bold">Title</div>
<div class="col-7 pr-4">(Class)⌘of⌘(Aspect)</div>
<div class="col-5 pl-4 font-weight-bold">Age</div>
<div class="col-7 pr-4">Age⌘Birthday</div>
<div class="col-5 pl-4 font-weight-bold">Screen Name</div>
<div class="col-7 pr-4">screen⌘name</div>
<div class="col-5 pl-4 font-weight-bold">Typing Style</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Strife Specibi</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Fetch Modus</div>
<div class="col-7 pr-4">⌘info⌘</div>
</div></div>
<!------ END INFOBOX ------>
<!-- SUBHEADING 2 // collapsible section, copy+paste and replace #heading2 as needed -->
<h5 class="bg-primary text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem">More <a href="#home" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 2 -->
<div class="collapse mt-2" id="home"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">Relations</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Live(s) in</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Planet</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Likes</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Hates</div>
<div class="col-7 pr-4">⌘info⌘</div>
<div class="col-5 pl-4 font-weight-bold">Music</div>
<div class="col-7 pr-4">⌘info⌘</div>
</div></div>
<!------ END INFOBOX ------>
<!-- SUBHEADING 2 // collapsible section, copy+paste and replace #heading2 as needed -->
<h5 class="bg-primary text-white text-center py-2 mb-0 pl-4" style="padding-right:-.4rem">Pesterlogs <a href="#pester" data-toggle="collapse"><i class="fa-lg fas fa-angle-down float-right text-white pr-2 ml-0" /></a></h5>
<!-- FIELDS 2 -->
<div class="collapse mt-2" id="pester"><div class="row mb-2">
<div class="col-5 pl-4 font-weight-bold">Logs</div>
<div class="col-7 pr-4">⌘info⌘</div>
</div></div>
<!------ END INFOBOX ------>
</div></div>
<!------ INTRODUCTION ------>
<p><strong>Character⌘Name</strong> info here.</p>
<!-- generally this portion is written with a bolded character name at the start and some brief info -->
<!------ TABLE OF CONTENTS // credit to lowkeywicked for toggle base code ------>
<!-- SUBSECTIONS // copy+paste <ol> section when needed -->
<div class="row mb-3"><a id="toc"></a>
<div class="col-md-5 mb-2"><div class="card bg-faded card-outline-default">
<h6 class="p-2 mb-0 text-center">Contents <small>[<a data-toggle="collapse" href="#tocshow2">show</a>]</small></h6>
<ol class="collapse p-2 pt-0 pl-4 rounded-bottom mb-0" id="tocshow2">
<li><a href="#biography">Biography</a></li>
<ol class="pl-3" style="list-style-type: lower-alpha">
<li><a href="#bioChildhood">Childhood</a></li>
<li><a href="#bioGame">Sburb</a></li>
<li><a href="#bioPostgame">Post Game</a></li>
</ol>
<li><a href="#personality">Personality & Traits</a></li>
<li><a href="#appearance">Appearance</a></li>
<li><a href="#relationships">Relationships</a></li>
<li><a href="#trivia">Trivia</a></li>
</ol></div>
</div></div>
<!------ BIOGRAPHY ------>
<div class="profile-fields-title mt-2">
<a id="biography" /><h2>Biography <a href="#toc"><i style="font-size:.75em" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
<a id="bioChildhood" /><h4 class="mb-1">Childhood <a href="#toc"><i style="font-size:12px" class="fas fa-bars" /></a></h4>
<p>⌘Childhood Info⌘</p>
<a id="bioGame" /><h4 class="mb-1">SBurb <a href="#toc"><i style="font-size:12px" class="fas fa-bars" /></a></h4>
<p>⌘The Game⌘</p>
<a id="bioPostgame" /><h4 class="mb-1">Post Game <a href="#toc"><i style="font-size:12px" class="fas fa-bars" /></a></h4>
<p>⌘Post Game Content⌘</p>
<!------ PERSONALITY ------>
<div class="profile-fields-title mt-2">
<a id="personality" /><h2>Personality & Traits <a href="#toc"><i style="font-size:.75em" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded my-1 border-top-0" style="height:1px;"> </div>
<p>⌘Info⌘</p>
<!------ APPEARANCE ------>
<div class="profile-fields-title mt-2">
<a id="appearance" /><h2>Appearance <a href="#toc"><i style="font-size:.75em" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
<p>⌘Info⌘</p>
<!------ RELATIONSHIPS ------>
<div class="profile-fields-title mt-2">
<a id="relationships" /><h2>Relationships <a href="#toc"><i style="font-size:.75em" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;"> </div>
<a id="nameone" /><h4 class="mb-1">Character⌘Name <a href="#toc"><i style="font-size:12px" class="fas fa-bars" /></a></h4>
<!------ QUOTE // copy+paste or remove as needed ------>
<div class="row mb-1"><div class="col-md-5">
<div class="card p-2 bg-faded card-outline-default">
<span class="text-center mb-2">
<i class="fas fa-quote-left float-left text-primary" />
<i class="fas fa-quote-right float-right text-primary" />
⌘Optional Quote⌘
</span><div class="text-right text-muted">
― ⌘Source
</div></div></div></div>
<!-- END QUOTE -->
<p>⌘Info⌘</p>
<a id="nametwo" /><h4 class="mb-1">Character⌘Name <a href="#toc"><i style="font-size:12px" class="fas fa-bars" /></a></h4>
<p>⌘Info⌘</p>
<!------ TRIVIA ------>
<div class="profile-fields-title mt-3">
<a id="trivia" /><h2>Trivia <a href="#toc"><i style="font-size:.75em" class="fas fa-bars" /></a></h2>
</div><div class="card bg-faded my-1 border-top-0" style="height:1px;"> </div>
<ul class="pl-4">
<li>⌘List item 1⌘</li>
<li>⌘List item 2⌘</li>
<li>⌘List item 3⌘</li>
</ul>
<!------ !! DO NOT DELETE CREDIT !! ------>
<div class="float-right card bg-faded card-outline-default ml-1">
<a href="http://toyhou.se/watergems" title="Layout by watergems" class="d-inline-flex text-primary" style="padding:10px 10px 9px;text-decoration:none"><i class="far fa-code" /></a>
</div>
</div>
</div>
<!--
you can actually have your front page content direct to *any* sort of code and not just a wiki page. This can be done by either removing everything in the wiki class and putting whatever you want or creating a new tab-pane fade show class to point to, i.e.:
<div class="tab-pane fade show" id="otherPane">
ANY TEXT OR CODE YOU WANT HERE
</div>
and then just have the link in intro link to "otherPane" instead
-->