<div class="row justify-content-center">
<div class="card card-outline-primary table-responsive col-md-6">
<div class="row">
<div class="col-5">
<p><a href="https://ko-fi.com/lostinprogres"><i class="fas fa-shopping-cart"></i> Leave A Tip!</a><br>
<a href="https://toyhou.se/LostInTrades/characters/folder:3594050"><i class="fas fa-folder"></i> Other Codes + TOS</a><br>
<a href="URL"><i class="fas fa-eye"></i> Live Preview</a><br>
<i class="fas fa-mobile-alt"></i> Mobile Friendly<br>
<i class="fas fa-palette"></i> Custom Colors<br>
<i class="fas fa-swatchbook"></i> Bootstrap Colors<br>
</div>
<div class="col-7">
<h1 class="text-center">{Code name here}</h1>
<P>Code that was made for a pokemon ARPG. Top half can be used seperatly! Circles under the info box are meant to be used as thumbnails for evolutions/form changes. Code can be found in tabs!</P>
</div>
</div>
</div>
</div><br>
<!-- profile -->
<!-- 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;">
<!-- 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>
<a class="fas fa-code tooltipster pull-right" title="Code by LostInProgres" href="https://toyhou.se/LoStInPrOgReS" style="color:#7bb3c0"></a>
</div>
</div>
<!-- info panel -->
<div class="col-md-8">
<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;">____ 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>
<!-- 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>
