<!--
Code Name; AU is Gold
Creator; _featherweather / a-brilliant-loser
Date; 3 July, 2019
Notes; because as much as i love moodboards, i wished there was a way to show a bunch of different AUs easily. hence this code.
provided a basic character profile featuring an image, a box with info on the AU and a box to put any information that's drastically different.
i wrote this instead of sleeping, again...
feel free to edit as you want.
card color: #5572a0
border color: #515b6b
-->
<div class="container-fluid">
<div class="sticky-top card-header" style="font-variant:small-caps; background-color: #333">
<ul class="nav nav-pills justify-content-center">
<li class="nav-item"><a class="nav-link p-2 active" data-toggle="tab" href="#AU_Main">Main Verse</a></li>
<li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#AU_001">AU 1</a></li>
<li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#AU_002">AU 2</a></li>
<li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#AU_003">AU 3</a></li>
<!-- copy code below and change href="#THIS" to add more tabs! -->
<!--
<li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#THIS">Tab Name</a></li>
-->
</ul>
</div>
<!-- credits, -->
<div class="fixed-bottom"><p align="right"><a href="https://toyhou.se/a-brilliant-loser" title="_featherweather's codes" data-toggle="tooltip" data-placement="top" ><i class="fa fa-user-secret"></i></a></p></div>
<div class="row">
<div class="col-md-9 text-center" style="width:75em;margin:0 auto;display: inline-block">
<div class="tab-content">
<!-- tab one -->
<div class="tab-pane fade show active" id="AU_Main">
<h1 style="font-variant:small-caps; text-align:center">Universe Name</h1>
<div class="col-md-4 float-md-right mb-1 ml-1">
<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%"/>
</div>
<div class="col-md-6">
<div class="row justify-content-md-center pb-3">
<div class="card d-flex" style="border:5px ridge #515b6b; background-color: #5572a0;">
<div class="row no-borders">
<div class="col-md-12">
<span style="font-variant:small-caps">Type</span>
<span class="pull-right">world type, i.e, anime, fantasy, scifi, etc</span>
<br>
</div>
<div class="col-md-12 ui-accordion">
<span style="font-variant:small-caps">Description</span><br>
<span class="pull-right ui-accordion-content" style="height:70px">description of world.<br>This part i want to figure out if i can make it scroll.<br>Let's put lots of info, at least a few text bits in.<br>okay i also need to somehow not have it look janky</span>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="ui-accordion card d-flex" style="border:5px ridge #515b6b; background-color: #5572a0;">
<h2 style="font-variant:small-caps">Information</h2>
<div class="ui-accordion-content card-block" style="height:150px">
more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>
</DIV>
</div>
</div>
</div>
</div> <!-- end tab one -->
<!-- tab two -->
<div class="tab-pane fade" id="AU_001">
<h1 style="font-variant:small-caps; text-align:center">Universe Name</h1>
<div class="col-md-4 float-md-right mb-1 ml-1">
<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%"/>
</div>
<div class="col-md-6">
<div class="row justify-content-md-center pb-3">
<div class="card d-flex" style="border:5px ridge #515b6b; background-color: #5572a0;">
<div class="row no-borders">
<div class="col-md-12">
<span style="font-variant:small-caps">Type</span>
<span class="pull-right">world type, i.e, anime, fantasy, scifi, etc</span>
<br>
</div>
<div class="col-md-12 ui-accordion">
<span style="font-variant:small-caps">Description</span><br>
<span class="pull-right ui-accordion-content" style="height:70px">description of world.<br>This part i want to figure out if i can make it scroll.<br>Let's put lots of info, at least a few text bits in.<br>okay i also need to somehow not have it look janky</span>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="ui-accordion card d-flex" style="border:5px ridge #515b6b; background-color: #5572a0;">
<h2 style="font-variant:small-caps">Information</h2>
<div class="ui-accordion-content card-block" style="height:150px">
more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>more about the character, this will be the most basic, with options to make it more pizzazy<BR>
</DIV>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="AU_002">
</div> <!-- end tab two -->
<!-- tab three -->
<div class="tab-pane fade" id="AU_003">
you can literally put anything in here<br>
even other codes (so long as the creator is okay with that.)<br>
i would suggest NOT putting codes with tabs on it, personally. mostly because i broke mine badly lol.<br>
even specality codes can work.<br>
feel free to edit to your heart's content
</div> <!-- end tab three -->
<!-- copy code below and change id="THIS" to create more tabs! -->
<!--
<div class="tab-pane fade" id="THIS">
<h1><u>And another Tab</u></h1>
<p>just a lot of random stuff to type here</p>
</div>
-->
</div> <!-- end tab-content -->
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end container -->
