<!--- nuclear by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
--->
<div class="container p-1" style="max-width:550px; font-size:12px; font-family:monospace; color:white; background:#131D16; border:2px solid #164522">
<div class="card rounded-0" style="max-height:30px; background:transparent; border:1px solid #164522">
<h3 class="p-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">NAME</h3>
</div>
<div class="row no-gutters p-1">
<!--- 2nd column --->
<div class="col-lg-4">
<div class="container mx-auto p-1">
<!--- main image --->
<div class="card rounded-0 mx-auto p-1" style="height:145px; width:145px; border:1px solid #164522; background:transparent;">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover;">
</div>
<!--- basic info --->
<div class="card rounded-0 border-0 mx-auto p-1" style="max-height:265px; background:transparent;">
<div class="card border-0" style="background:transparent">
<p class="my-1"><i class="fa-solid fa-cake-candles fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>d.o.b</p>
<p class="my-1"><i class="fa-solid fa-venus-mars fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>gender/prns</p>
<p class="my-1"><i class="fa-solid fa-heart fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>orient.</p>
<p class="my-1"><i class="fa-solid fa-address-card fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>race</p>
<p class="my-1"><i class="fa-solid fa-flag fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>faction</p>
<p class="my-1"><i class="fa-solid fa-map-location-dot fa-fw mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>location</p>
</div>
</div>
<!--- likes & dislikes --->
<div class="row no-gutters">
<div class="col-6">
<!--- likes --->
<p class="font-weight-bold pr-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">likes:</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
</ul>
</div>
<div class="col-6">
<!--- dislikes --->
<p class="font-weight-bold pr-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">dislikes:</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
</ul>
</div>
<!--- trivia --->
<div class="col-12 mt-2">
<div class="card rounded-0 border-0 overflow-auto" style="height:160px; background:transparent;">
<p class="font-weight-bold pr-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">trivia:</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--- 2nd column --->
<div class="col-lg-8">
<div class="card rounded-0 border-0 mt-1" style="height:195px; background:transparent;">
<div class="row no-gutters p-1">
<!--- SPECIAL --->
<div class="col-4">
<div class="card rounded-1 border-top-0 border-left-0 border-bottom-0" style="background:transparent; border:1px solid #164522">
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">S</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">P</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">E</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">C</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">I</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">A</span>10</p>
<p class="my-1"><span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;">L</span>10</p>
</div>
</div>
<!--- weapons --->
<div class="col-8">
<div class="card rounded-0 border-top-0 border-right-0 border-left-0 px-2 overflow-auto" style="background:transparent; height:91px; border:1px solid #164522">
<p class="font-weight-bold pr-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">weapons of choice:</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
</ul>
</div>
<!--- special skills --->
<div class="card rounded-0 border-top-0 border-bottom-0 border-right-0 border-left-0 px-2 overflow-auto" style="background:transparent; height:91px;">
<p class="font-weight-bold pr-1 text-center" style="color:#3DD465; text-shadow:0 0 3px;">special skills:</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
<li><i class="fa-solid fa-square fa-fw fa-xs mr-1" style="color:#3DD465; text-shadow:0 0 3px;"></i>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--- personality + history --->
<div class="card mt-1 rounded-0 border-left-0 border-right-0 p-1 overflow-auto" style="height:210px; background:transparent; border:1px solid #164522">
<p class="m-0"><span class="font-weight-bold" style="color:#3DD465; text-shadow:0 0 3px;">personality: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p class="m-0 pt-1"><span class="font-weight-bold" style="color:#3DD465; text-shadow:0 0 3px;">history: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--- relationships --->
<div class="card mt-1 rounded-0 border-left-0 border-right-0 border-top-0 p-1 overflow-auto" style="height:150px; background:transparent; border:1px solid #164522">
<!--- relationship 1 --->
<div class="rounded-0" style="background:transparent;">
<!--- image --->
<img src="IMGLINK" class="img-thumbnail rounded-0 float-left m-1" style="object-fit:cover; height:100px; width:100px; border:1px solid #164522; background:transparent;">
<!--- relationship text --->
<p class="m-0">
<span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;"><a href="#" class="text-reset">NAME [relationship]:</a></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
</div>
<!--- relationship 2 --->
<div class="rounded-0" style="background:transparent;">
<!--- image --->
<img src="IMGLINK" class="img-thumbnail rounded-0 float-left m-1" style="object-fit:cover; height:100px; width:100px; border:1px solid #164522; background:transparent;">
<!--- relationship text --->
<p class="m-0">
<span class="font-weight-bold pr-1" style="color:#3DD465; text-shadow:0 0 3px;"><a href="#" class="text-reset">NAME [relationship]</a></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mx-auto text-right" style="width:550px;">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird" style="color:#3DD465"><i class="fa-solid fa-code fa-xs"></i></a>
</div>