<!---
========================================================
code by Lullah
colors used:
> bg-faded (bootstrap) (box background)
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="">
<div class="row no-gutters" >
<!--- header ---->
<div class="col-12">
<!--- header image --->
<div class="" style="height:140px;border-radius:10px 10px 0px 0px;
background-image:url(https://via.placeholder.com/);
background-size:cover;background-position:center;box-shadow: inset 0 0 0 1000px rgba(255,255,255,.3);"></div>
</div>
<!--- content start --->
<div class="col-12 col-md-9 bg-faded mt-2 pr-2 pr-md-0" style="border-radius:0px 0px 0px 10px">
<div class="d-inline-flex pl-2" style="width:100%;">
<!--- CHARACTER'S ICON --->
<img src="https://via.placeholder.com/" class="fr-rounded bg-faded p-2" style="height:150px;;width:150px;margin-top:-72px;">
<!--- name --->
<div class="ml-2" style=";">
<div class="text-uppercase" style="font-size:1.8em;letter-spacing:0.8px;">
<b>Name</b></div><hr class="my-0" style="border:dashed 1px;">
<!--- subtitle --->
<div><span class="text-muted">
<i>pronouns. trait. trait. trait.</i></span></div>
</div>
</div>
<!--- basic info --->
<div class="px-3 pb-3">
<div class="text-uppercase" style="font-size:1.2em;letter-spacing:0.5px;"><i class="fas fa-list fa-f2 mr-1"></i><b>Basic Info</b></div><hr class="mt-1 mb-0" style="border:dashed 1px;">
<div class="row no-gutters">
<!--- basic info (left) --->
<div class="col-md-6 mt-1 pr-md-2">
<div class="justify-content-between">
<span>Name</span>
<span class="text-muted">Info</span>
</div>
<div class="justify-content-between">
<span>Nickname</span>
<span class="text-muted">Info</span>
</div>
<div class="justify-content-between">
<span>Pronouns</span>
<span class="text-muted">Info</span>
</div>
<div class="justify-content-between">
<span>Age</span>
<span class="text-muted">Info</span>
</div>
</div>
<!--- basic info (right) --->
<div class="col-md-6 mt-md-1 pl-md-2">
<div class="justify-content-between">
<span>Height</span>
<span class="text-muted">Info</span>
</div>
<div class="justify-content-between">
<span>Occupation</span>
<span class="text-muted">Info</span>
</div>
<div class="justify-content-between">
<span>Voice</span>
<span>Info</span>
</div>
<div class="justify-content-between">
<span>Designer</span>
<span>Info</span>
</div>
</div>
</div>
</div>
<!--- overview --->
<!--- this box expands instead of scrolling! --->
<div class="px-3 pb-3">
<div class="text-uppercase" style="font-size:1.2em;letter-spacing:0.5px;"><i class="fas fa-book fa-fw mr-1"></i><b>Overview</b></div><hr class="mt-1 mb-0" style="border:dashed 1px;">
<div class="mt-1">
<b>This box does not scroll</b>! 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<!--- sidebar --->
<!--- this doesn't show up on mobile! --->
<div class="col-0 col-md-3 pl-2 mt-2">
<div class="" style="height:100%;border-radius:0px 0px 10px 0px;
background-image:url(https://via.placeholder.com/);
background-size:cover;background-position:center;box-shadow: inset 0 0 0 1000px rgba(255,255,255,.3);">
</div>
</div>
</div></div>
<!--- credit, don't erase pls thx --->
<div class="text-right"><a href="https://toyhou.se/Lullah" class="text-secondary"><i class="fas fa-code fa-sm"></i></a></div>
</div>