<!--
RUNDOWN - by sleepyhtml !!
- a quick, hopefully easy-to-edit profile, for characters with a little less information! -
color replacements:
box background: #ffffff
body text: #303030
topbar background/titles: #0b0b0b
important text: #ababab
accent/links: #e0e0e0
font awssome icon replacement: fa-stars
-->
<div class="container" style="color:#303030;">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="row font-weight-bold pt-2 pb-2" style="color:#ababab;background:#0b0b0b;font-variant:small-caps;">
<div class="col-12">
<h2>
<span class="pull-left">
<!-- character name! -->
Firstname Lastname
</span>
<span class="pull-right" style="font-size:14px;"><i class="fad fa-stars"></i>
</span>
</h2>
</div>
</div>
<div class="row" style="background:#ffffff;">
<div class="col-lg-3 p-0">
<!-- FOCUS IMAGE! must be at least 185x350! -->
<div class="bg-transparent border-0 rounded-0" style="
height:350px;
background:url(https://via.placeholder.com/185x350);
background-size:cover;
background-repeat:no-repeat;">
</div>
</div>
<div class="col-lg-9" style="height:350px;overflow:auto;">
<div class="font-weight-bold text-center pt-2 text-uppercase" style="font-size:150%;border-bottom:1px solid #e0e0e0;color:#0b0b0b;">
<i class="fad fa-stars"></i> basics <i class="fad fa-stars"></i>
</div>
<!-- BASIC INFORMATION STATS! -->
<div class="row">
<div class="col-lg-6">
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">alias</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
alias/nicknames
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">age</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
age
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">gender</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
gender (prn/prn)
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">species</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
species (or race?)
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">preference</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
sexuality/orientation
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">height</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
height
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">build</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
build
</div>
</div>
<div class="row mx-0 my-1" style="border-bottom:1px solid #e0e0e0;">
<div class="col-3 p-0" style="font-variant:small-caps;font-weight:bold;color:#ababab;">role</div>
<div class="col-9 p-0 text-right" style="font-size:90%;">
role (or occupation?)
</div>
</div>
</div></div>
<div class="font-weight-bold text-center pt-3 text-uppercase" style="font-size:150%;border-bottom:1px solid #e0e0e0;color:#0b0b0b;">
<i class="fad fa-stars"></i> information <i class="fad fa-stars"></i>
</div>
<div class="text-justify p-1">
<p>dummy text! dummy text! dummy text! dummy text! dummy text! dummy text! dummy text! dummy text! </p>
<p>second paragraph of dummy text! the entire box will scroll if this text gets too long!</p>
<p>third paragraph of dummy text. i made this code for a 'hub' character of mine, that features a lot of 'undeveloped' characters for a story who only needed a bit of a 'bare' profile to provide their information on. honestly, i think it came out very well for being put together in just a couple hours, with no more than a simple idea of how i wanted the layout to look in mind! :D</p>
</div>
</div> </div>
<span class="pull-right" style="font-size:10px;"><a href="https://toyhou.se/sleepyhtml" style="color:#e0e0e0;"><i class="fad fa-code"></i></a></span>
</div>
</div>
</div>