<!---lightweight 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:600px; font-size:12.5px; font-family:helvetica;">
<div class="row no-gutters">
<!--- section 1 --->
<div class="col-md-4">
<!--- image --->
<div class="card mx-auto bg-faded rounded-circle" style="width:170px; height:170px;">
<div class="card m-auto border-0 rounded-circle" style="width:160px; height:160px; background:url(IMGURL); background-size:cover; background-position:center;"></div>
</div>
<!--- main info --->
<div class="card mx-auto my-2 bg-faded" style="width:170px;">
<div class="row">
<div class="col-12 text-center">
<p class="pt-1">name</p>
<hr class="m-1">
</div>
<div class="col-12 text-center">
<p class="pt-1">00/00 (age)</p>
<hr class="m-1">
</div>
<div class="col-12 text-center">
<p class="pt-1">gender (pro/nouns)</p>
<hr class="m-1">
</div>
<div class="col-12 text-center">
<p class="pt-1">orientation</p>
<hr class="m-1">
</div>
<div class="col-12 text-center">
<p class="pt-1">race</p>
<hr class="m-1">
</div>
<div class="col-12 text-center">
<p class="pt-1">occupation</p>
</div>
</div>
</div>
</div>
<!--- section 2 --->
<div class="col-lg-8">
<div class="card p-2 overflow-auto bg-faded" style="height:360px;">
<!--- personality --->
<h1 class="font-italic text-muted">personality</h1>
<p class="mb-2"><span class="text-muted pr-1">1.</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>
<!--- history --->
<h1 class="font-italic text-muted">history</h1>
<p class="mb-1"><span class="text-muted pr-1">1.</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="mb-2"><span class="text-muted pr-1">2.</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>
<!--- trivia --->
<h1 class="font-italic text-muted">trivia</h1>
<ul class="list-unstyled">
<li><i class="fa-solid fa-angle-right pr-1 text-muted"></i>content</li>
<li><i class="fa-solid fa-angle-right pr-1 text-muted"></i>content</li>
<li><i class="fa-solid fa-angle-right pr-1 text-muted"></i>content</li>
<li><i class="fa-solid fa-angle-right pr-1 text-muted"></i>content</li>
</ul>
<!--- relationships --->
<h1 class="font-italic text-muted">relationships</h1>
<p class="mb-1"><a href="#" class="text-reset text-muted pr-1">name [friend]</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-1"><a href="#" class="text-reset text-muted pr-1">name [friend]</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-1"><a href="#" class="text-reset text-muted pr-1">name [friend]</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 text-right">
<a href="https://toyhou.se/onethird" class="text-reset text-muted" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code"></i></a>
</div>
</div>