<!-- Main page -->
<div class="container" style="background: linear-gradient(156deg, rgba(50,50,50,1) 0%, rgba(129,129,129,1) 25%, rgba(102,102,102,1) 35%, rgba(66,66,66,1) 75%, rgba(33,33,33,1) 100%);border:3px solid #161616;height:400px">
<!-- start profile content -->
<div class="row">
<!-- left panel -->
<div class="col-md-4 p-2">
<div class="card col-md-11" style="color:#FFFFFF;background-color:#161616">
<div class="row">
<!-- Pokeball icon and name -->
<span class="row text-center text-uppercase col-md-5"><img src="https://raw.githubusercontent.com/msikma/pokesprite/master/items/ball/poke.png" style="max-height:24px;max-width:24px;margin-left:22px;">Name</span>
<!-- Level -->
<span class="text-center text-uppercase col-md-3">Lv. 100</span>
<!-- Gender/Pronouns -->
<span class="text-center text-uppercase col-md-5"><i class="fas fa-mars" style="color:#0b44eb"></i>Pro/Nouns</span><!-- Male #0b44eb Female fas fa-mars. color:#cb200e fas fa-venus. Genderless #0dd300 fas ga-genderless-->
</div>
</div>
<div class="p-4">
<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/45687540_VLwmg0YP7wHtohK.png) center no-repeat;background-size:contain;height:280px;width:100%;"></div>
</div>
<a class="fas fa-code tooltipster pull-right" title="Code by LostInProgres" href="https://toyhou.se/LoStInPrOgReS" style="color:#7bb3c0"></a><br>
</div>
<!-- info panel -->
<div class="col-md-8">
<div class="card col-md-12 p-4 rounded-0" style="color:#FFFFFF;background-color:#161616">
<ul class="nav justify-content-center nav-pills row text-center" role="tablist">
<li class="nav-item col-md-6" ><a class="btn nav-link active text-white" style="background-color: #7bb3c0;color:FFFFFF;border-radius: 3em;box-shadow: 0px 0px 8px rgba(0,0,0,.13);" data-toggle="tab" href="#CHARACTERINFO" role="tab">Character info</a></li>
<li class="nav-item col-md-6" ><a class="btn nav-link text-white" style="background-color: #7bb3c0;color:FFFFFF;border-radius: 3em;box-shadow: 0px 0px 8px rgba(0,0,0,.13);" data-toggle="tab" href="#LORE" role="tab">Lore</a></li>
</ul><br>
<div class="tab-content">
<div class="tab-pane fade active show" id="CHARACTERINFO" role="tabpanel">
<div class="row mb-1">
<div class="col-md-12 text-center text-dark" style="background:#dbdbd9;">____ Pokemon</div>
</div>
<div class="row">
<div class="col-md-6 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">Species</div>
<div class="col-md-6 text-dark text-left bg-white">Species</div>
<div class="col-md-6 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">Traits</div>
<div class="col-md-6 text-dark text-left bg-white">Traits</div>
<div class="col-md-6 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">Types</div>
<div class="col-md-6 text-dark text-left bg-white">Type/Type</div>
<div class="col-md-12 text-left text-dark bg-white p-3 mt-1">Small dex-entry type of text. 1-2 lines.</div>
</div>
<div class="row mt-1">
<div class="col-md-12 text-center text-dark" style="background:#dbdbd9;">Box #000 | <a href="link" class="text-dark">Obtained 00/00/0000</a> | <a href="link" class="text-dark">Approved 00/00/0000</a></div>
</div>
</div>
<div class="tab-pane fade-in p-1" id="LORE" role="tabpanel">
<div class="row mb-1">
<div class="col-md-12 text-center text-dark" style="background:#dbdbd9;">Lore</div>
</div>
<div class="row">
<div class="col-md-12 text-left text-dark bg-white p-3 mt-1 table-responsive" style="height:139px">Small box that will scroll when you put more info in.</div>
</div>
</div>
</div>
</div>
<!-- Evolutions/forms -->
<div class="row">
<div class="col-md-12">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/45687540_VLw_14838205.png?1645298111" class="card border-0 p-2 rounded-circle d-block mx-auto mb-0" style="height:100px;width:100px;background-color:#161616;margin-top: 10px;">
</div>
</div>
</div>
</div>
<!-- End BG -->
</div><br>
<!-- logs page -->
<div class="container" style="background: linear-gradient(156deg, rgba(50,50,50,1) 0%, rgba(129,129,129,1) 25%, rgba(102,102,102,1) 35%, rgba(66,66,66,1) 75%, rgba(33,33,33,1) 100%);border:3px solid #161616;">
<span>
<div class="row p-2">
<a href="#one" data-toggle="collapse" title="Personality" data-placement="bottom" class="col-md-6 justify-content-center" style="color: #7bb3c0"><i class="fad fa-sack fa-2x"> </i></a>
<a href="#two" data-toggle="collapse" title="Abilities" data-placement="bottom" class="col-md-6 justify-content-center" style="color: #7bb3c0"><i class="fad fa-angle-double-up fa-2x"></i></a>
</div>
</span>
<!-- level log -->
<div class="collapse show" id="two">
<div class="card col-md-12 p-4 rounded-0" style="color:#FFFFFF;background-color:#161616">
<div class="row mb-1">
<div class="col-md-12 text-center text-dark" style="background:#dbdbd9;">Level/worth log</div>
</div>
<div class="row justify-content-center">
<div class="col-md-3"></div>
<div class="col-md-1 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">+000</div>
<div class="col-md-2 text-dark text-left bg-white">Artwork</div>
<div class="col-md-2 text-dark text-left bg-white"><a href="link" class="text-dark">Approval</a></div>
<div class="col-md-1 text-dark text-left" style="background:#ebebea; border-bottom:1px solid #f1f1f1;">$$$</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-1 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">+000</div>
<div class="col-md-2 text-dark text-left bg-white">Artwork</div>
<div class="col-md-2 text-dark text-left bg-white"><a href="link" class="text-dark">Approval</a></div>
<div class="col-md-1 text-dark text-left" style="background:#ebebea; border-bottom:1px solid #f1f1f1;">$$$</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<!-- Item log -->
<div class="collapse" id="one">
<div class="card col-md-12 p-4 rounded-0" style="color:#FFFFFF;background-color:#161616">
<div class="row mb-1">
<div class="col-md-12 text-center text-dark" style="background:#dbdbd9;">Item log</div>
</div>
<div class="row justify-content-center">
<div class="col-md-1"></div>
<div class="col-md-4 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">Item used</div>
<div class="col-md-4 text-dark text-left bg-white"><a href="link" class="text-dark">Approval</a></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-4 text-dark text-center font-weight-bold" style="background:#dbdbd9; border-bottom:1px solid #f1f1f1;">Item used</div>
<div class="col-md-4 text-dark text-left bg-white"><a href="link" class="text-dark">Approval</a></div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<!-- end logs -->
</div>
