<!--- bare-bones by onethhird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
--->
<div class="container bg-fade p-0" style="max-width:500px; font-size:12px; letter-spacing:.5px;">
<div class="row no-gutters">
<!--- image --->
<div class="col-md-4">
<div class="mx-auto" style="width:160px; height:160px;">
<img src="IMGURL" class="w-100 h-100 img-thumbnail rounded-circle" style="object-fit:cover;">
</div>
</div>
<!--- basic info --->
<div class="col-md-8">
<div class="card border-0 rounded-0 p-1" style="min-height:160px; background:transparent;">
<!--- name --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">name</p>
<p class="m-0">content</p>
</div>
<!--- age --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">age</p>
<p class="m-0">content</p>
</div>
<!--- gender --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">gender/prns</p>
<p class="m-0">content</p>
</div>
<!--- orientation --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">orientation</p>
<p class="m-0">content</p>
</div>
<!--- race --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">race/ethnicity</p>
<p class="m-0">content</p>
</div>
<!--- occupation --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">occupation</p>
<p class="m-0">content</p>
</div>
<!--- voice claim --->
<div class="justify-content-between">
<p class="font-weight-bold text-secondary m-0 pb-1">voice claim</p>
<a href="URLLINK" data-toggle="tooltip" title="name of v/a" class="text-secondary"><i class="fa-solid fa-volume pr-2 fa-lg"></i></a>
</div>
</div>
</div>
</div>
<!--- main info --->
<div class="row no-gutters">
<!--- summary --->
<div class="col-md-7">
<div class="card rounded-0 border-0 p-1" style="background:transparent;">
<p class="text-secondary font-weight-bold">summary</p>
<div class="card overflow-auto rounded-0 border-0" style="max-height:140px; background:transparent">
<p>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>
</div>
</div>
<!--- progress bars --->
<div class="col-md-5">
<div class="card rounded-0 border-0 p-1" style="background:transparent;">
<!--- confidence --->
<p class="text-secondary font-weight-bold m-0">confidence</p>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width:50%; height:5px"></div>
</div>
<!--- intelligence --->
<p class="text-secondary font-weight-bold m-0">intelligence</p>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width:50%; height:5px"></div>
</div>
<!--- charisma --->
<p class="text-secondary font-weight-bold m-0">charisma</p>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width:50%; height:5px"></div>
</div>
<!--- temper --->
<p class="text-secondary font-weight-bold m-0">temper</p>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width:50%; height:5px"></div>
</div>
<!--- empathy --->
<p class="text-secondary font-weight-bold m-0">empathy</p>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width:50%; height:5px"></div>
</div>
</div>
</div>
</div>
<!--- history --->
<div class="card p-1 rounded-0 border-0" style="background:transparent;">
<p class="text-secondary font-weight-bold m-0">history</p>
<div class="card rounded-0 overflow-auto rounded-0 border-0" style="max-height:150px; background:transparent;">
<p>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>
</div>
<div class="row no-gutters">
<!--- trivia --->
<div class="col-md-5">
<div class="card p-1 rounded-0 border-0">
<p class="text-secondary font-weight-bold m-0">trivia</p>
<div class="card rounded-0 border-0 overflow-auto" style="max-height:130px;">
<ul class="list-unstyled m-0">
<li><i class="fa-solid fa-caret-right pr-1 text-secondary"></i>content</li>
<li><i class="fa-solid fa-caret-right pr-1 text-secondary"></i>content</li>
<li><i class="fa-solid fa-caret-right pr-1 text-secondary"></i>content</li>
<li><i class="fa-solid fa-caret-right pr-1 text-secondary"></i>content</li>
</ul>
</div>
</div>
</div>
<!--- relationships --->
<div class="col-md-7">
<div class="card p-1 rounded-0 border-0">
<p class="text-secondary font-weight-bold m-0">relationships</p>
<div class="card rounded-0 border-0 overflow-auto" style="height:130px;">
<!--- relationship 1 --->
<div>
<img class="img-thumbnail rounded-circle float-left m-1" src="IMGLINK" style="width:80px; height:80px; object-fit:cover;">
<p class="m-0">
<a href="URLLINK" class="text-secondary font-weight-bold">name <span class="font-weight-normal">relationship</span></a> <br>
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.
</p>
</div>
<!--- relationship 2 --->
<div>
<img class="img-thumbnail rounded-circle float-left m-1" src="IMGLINK" style="width:80px; height:80px; object-fit:cover;">
<p class="m-0">
<a href="URLLINK" class="text-secondary font-weight-bold">name <span class="font-weight-normal">relationship</span></a> <br>
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.
</p>
</div>
<!--- relationship 3 --->
<div>
<img class="img-thumbnail rounded-circle float-left m-1" src="IMGLINK" style="width:80px; height:80px; object-fit:cover;">
<p class="m-0">
<a href="URLLINK" class="text-secondary font-weight-bold">name <span class="font-weight-normal">relationship</span></a> <br>
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.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mx-auto text-right" style="width:500px;">
<a href="https://toyhou.se/onethird" class="text-secondary" data-toggle="tooltip" title="code by onethird"><i class="fa-solid fa-code fa-xs"></i></a>
</div>