123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 p-2">
<div class="text-center">
<div class="col-12 my-1 p-1" style="transform:rotate(3deg); ">
<div class="card bg-faded rounded-0 shadow" style="border:2px dashed; ">
<div class="card rounded-0" style="margin:8px;"><div style="height:120px;background:url("https://i.pinimg.com/736x/43/6c/a8/436ca86cdef69a836fdea034f8075ee3.jpg");background-position:center;background-size:cover;"></div></div>
</div></div></div>
<!-- information box, this box WILL scroll-->
<div class="card bg-faded mt-2 p-2" style="height:382px; overflow:auto; border:2px dashed">
<!-- written info section-->
<div class="card bg-muted rounded-0 w-100 my-2"></div>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Nickname(s)</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Age</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Height</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Gender</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Pronouns</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Species</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Orientation</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Relationship</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Occupation</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Voice Claim</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
<!--row end-->
<div class="row align-items-center">
<div class="col-lg-6 p-1">
<p class="text-muted font-weight-bold">Theme</p>
</div>
<div class="col-lg-6 p-1">
<p class="float-right">X</p>
</div>
</div> <!--row end-->
</div>
<div class="card bg-muted rounded-0 w-100 my-2"></div>
</div>
</div>
<div class="col-lg-6 p-2" >
<div class="container my-md-1" style="font-size:13px; max-width:620px;">
<div class="card p-3" style="height:542px; overflow:auto; border:2px dashed;">
<div class="card-text px-2 py-1">
<div class="display-1 text-uppercase" style="font-family:sans; font-size:35px; letter-spacing:2px;">
Name
<span class="pull-right" style="font-family:sans; font-size:24px; letter-spacing:1px;">ADJ. ADJ. ADJ<span></span></div>
<div class="card bg-muted rounded-0 w-100 my-2"></div>
<div class="row no-gutters">
<div class="col-sm p-1">
<ul class="list-unstyled p-0 m-0">
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Confidence</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:4px">
<div class="progress-bar" style="width: 50%;"></div></div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Empathy</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:4px">
<div class="progress-bar" style="width: 50%;"></div></div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Charisma</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:4px">
<div class="progress-bar" style="width: 50%;"></div></div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Kindness</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:4px">
<div class="progress-bar" style="width: 50%;"></div></div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Humor</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:4px">
<div class="progress-bar" style="width: 50%;"></div></div>
</div>
</ul></div>
<div class="col-auto hidden-md-down">
<div class="card h-100 rounded-0" style="border-width:0 0 0 2px;border-color:#fff;"></div>
</div>
<div class="col-sm p-1 text-right">
<ul class="list-unstyled p-0 m-0"><div class="col-12 my-2 p-1" style="transform:rotate(deg);">
<div class="card rounded-0" style="margin:1px;"><div style="height:120px;background:url("https://graffitiwallpaper.com/pics/listings/79_tall.jpg");background-position:center;background-size:cover;"></div></div>
</ul></div>
</div>
<div class="card bg-muted rounded-0 w-100 my-2"></div>
<h1 class="text-uppercase font-weight-bold;" style="font-family:sans; font-size:30px; letter-spacing:2px;">
<i class="far fa-bookmark p-1 m-2"></i> About
</h1> <div class="display-2" style="font-family:; font-size:15px; letter-spacing:1px;"><p class="mb-2">
<p>A very simple code for my own character! Not sure if it'll be for public use yet but who knows? Also, it scrolls, but I don't recommend adding too much.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div></div></div></div>
<div class="container p-0" style="max-width: 600px;">
<span class="pull-right"><a href="https://toyhou.se/heroin"><i class="far fa-code tooltipster" title="Code by heroin"></i></a></span>
</div>