<!---
========================================================
code by Lullah
colors used:
> btn-default (bootstrap) (navbar)
> btn-primary (bootstrap) (character links)
> text-white (bootstrap) (sidebar)
You may...
> Edit this code to oblivion!
> Recycle parts for your own use!
You may not...
> Remove my watermark!
========================================================
--->
<div class="container" style="max-width:700px;font-size:0.9em;">
<div class="card bg-primary p-1">
<!---- background image ---->
<div class="" style="min-height:300px;
background-image:url(URL);
background-color:#121212;
background-size:cover;background-position:center;box-shadow: inset 0 0 0 1000px rgba(255,255,255,.1);">
<div class="row no-gutters">
<!--- Please replace text-white to text-dark or text-black if you're using a light background image/color !! --->
<div class="col-md-4 px-2 p-md-0 text-white" style="">
<div class="d-flex" style="height:300px;">
<div class="m-auto pl-md-4">
<!--- leftside info --->
<!--- folder name --->
<div class="display-4" style="font-variant:small-caps;">
Folder Name</div>
<!--- folder desc (short) --->
<div class="px-2 py-1" style="box-shadow: inset 0 0 0 1000px rgba(255,255,255,.4);">
This box expands quite a bit, but I would advice against putting too much word inside it. Also completely optional!</div>
<!--- genre --->
<div class="text-muted text-right">
genre. genre. genre.</div>
</div>
</div>
</div>
<div class="col-md-8 px-2 pb-2 p-md-4" style="max-height:300px;">
<ul class="nav nav-fill">
<li class="nav-item"><a class="nav-link active btn btn-default rounded-0 border-0" data-toggle="tab" href="#basics"><i class="fas fa-list fa-sm"></i></a></li>
<li class="nav-item"><a class="nav-link btn btn-default rounded-0 border-0" data-toggle="tab" href="#extended"><i class="fas fa-book fa-sm"></i></a></li>
<li class="nav-item"><a class="nav-link btn btn-default rounded-0 border-0" data-toggle="tab" href="#groups"><i class="fas fa-user fa-sm"></i></a></li>
<li class="nav-item"><a class="nav-link btn btn-default rounded-0 border-0" href="https://toyhou.se/Lullah"><i class="fas fa-code fa-sm"></i></a></li>
</ul>
<div class="tab-content mt-2">
<!---- tab 1 ---->
<div class="tab-pane fade active show" id="basics">
<div class="card px-2 py-1" style="height:209px;overflow:auto;">
<!---- basic info ---->
<div style="font-variant:small-caps">World State<hr class="mt-1 mb-0"></div>
<div class="row no-gutters" style="">
<div class="col-md-6 pr-md-2">
<!---- content (left) ---->
<div class="justify-content-between">
<span><b>Setting</b></span>
<span>Info</span></div>
<div class="justify-content-between">
<span><b>Climate</b></span>
<span>Info</span></div>
</div>
<div class="col-md-6 pl-md-2">
<!---- content (right) ---->
<div class="justify-content-between">
<span><b>Population</b></span>
<span>Info</span></div>
<div class="justify-content-between">
<span><b>Atmosphere</b></span>
<span>Info</span></div>
</div>
</div>
<!---- overview ---->
<div class="mt-2" style="font-variant:small-caps">Overview<hr class="mt-1 mb-0"></div>
<!--- content ---->
<div class=""> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. This box scrolls BTW</div>
</div>
</div>
<!---- tab 2 ---->
<div class="tab-pane fade" id="extended">
<div class="card px-2 py-1" style="height:209px;overflow:auto;">
<!---- subtitle 1 ---->
<div style="font-variant:small-caps">Subtitle 1<hr class="mt-1 mb-0"></div>
<!---- content ---->
<div> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<!---- subtitle 2 ---->
<div class="mt-2" style="font-variant:small-caps">Subtitle 2<hr class="mt-1 mb-0"></div>
<!---- content ---->
<div> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<!---- this tidbit is a spacer! ---->
<div class="p-1"></div>
</div>
</div>
<!---- tab 3 ---->
<div class="tab-pane fade" id="groups">
<div class="card px-2 py-1" style="height:209px;overflow:auto;">
<div class="row no-gutters">
<!---- group 1 ---->
<div class="col-12" style="font-variant:small-caps">
Group One<hr class="mt-1 mb-0"></div>
<!---- character 1, group 1 ----->
<!---- character 1 image ----->
<div class="col-6 col-md-4"><div style="height:120px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;"></div>
<div class="text-center mt-1">
<!---- character 1 link, tooltip, and name ----->
<a href="URL" title="TITLE HERE" data-toggle="tooltip" class="btn w-100 btn-primary rounded-0 border-0 px-2 py-1" style="font-size:0.9em;">
Name</a></div>
</div>
<!---- character 2, group 1 ----->
<!---- character 2 image ----->
<div class="col-6 col-md-4"><div style="height:120px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;"></div>
<div class="text-center mt-1">
<!---- character 2 link, tooltip, and name ----->
<a href="URL" title="TITLE HERE" data-toggle="tooltip" class="btn w-100 btn-primary rounded-0 border-0 px-2 py-1" style="font-size:0.9em;">
Name</a></div>
</div>
<!---- group 2 ---->
<div class="col-12 mt-2" style="font-variant:small-caps">
Group Two<hr class="mt-1 mb-0"></div>
<!---- character 1, group 2 ----->
<!---- character 1 image ----->
<div class="col-6 col-md-4"><div style="height:120px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;"></div>
<div class="text-center mt-1">
<!---- character 1 link, tooltip, and name ----->
<a href="URL" title="TITLE HERE" data-toggle="tooltip" class="btn w-100 btn-primary rounded-0 border-0 px-2 py-1" style="font-size:0.9em;">
Name</a></div>
</div>
<!---- character 2, group 2 ----->
<!---- character 2 image ----->
<div class="col-6 col-md-4"><div style="height:120px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;"></div>
<div class="text-center mt-1">
<!---- character 2 link, tooltip, and name ----->
<a href="URL" title="TITLE HERE" data-toggle="tooltip" class="btn w-100 btn-primary rounded-0 border-0 px-2 py-1" style="font-size:0.9em;">
Name</a></div>
</div>
<!---- character 3, group 2 ----->
<!---- character 3 image ----->
<div class="col-6 col-md-4"><div style="height:120px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;"></div>
<div class="text-center mt-1">
<!---- character 3 link, tooltip, and name ----->
<a href="URL" title="TITLE HERE" data-toggle="tooltip" class="btn w-100 btn-primary rounded-0 border-0 px-2 py-1" style="font-size:0.9em;">
Name</a></div>
</div>
</div>
<div class="p-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>