<!---
1x03. Grain by alittleosmosis
thanks to: https://toyhou.se/18979984.03-totally-not-malware : for showing me how to do the little side bar thingies?
thanks to: https://toyhou.se/~forums/16.htmlcss-graphics/123106.coding-reference- : for showing me how to do almost everything
icons: https://fontawesome.com/search
colour picker: https://imagecolorpicker.com/color-code/b3b2b2
--->
<div class="my-lg-5 mx-auto" style="font-family:Segoe UI; font-size:.75em; letter-spacing:.25px; max-width:350px">
<!--- header and buttons --->
<div class="card d-block px-1" style="box-shadow: 0 0 5px #000; border-color:#000; background-color:#FFF">
<div class="container">
<div class="row g-0">
<div class="col-sm-8 p-0" style="color:#000">
<!-- credit -->
<a href="https://toyhou.se/alittleosmosis"><i class="fa-solid fa-circle" style="color:#0E0E0E"></i> </a>
<!-- other two buttons (feel free to make them link anything if you want!) -->
<i class="fa-solid fa-circle" style="color:#0E0E0E"></i>
<i class="fa-solid fa-circle" style="color:#0E0E0E"></i>
</div>
</div>
<!-- -->
<div class="card m-1" style="border-color:#000; background-color:#FFF">
<div class="row no-gutters">
<!--- left column --->
<div class="col-5 px-1 mt-1 mb-1">
<div style="color:000"><h1 style="font-weight:800">name</h1></div>
<img src="https://media.discordapp.net/attachments/854504102318440471/1102064227390345317/image.png?width=424&height=422" style="height: 100px; width: 100px;">
<div style="color:#B3B2B2"><h4 style="font-weight:100">pro/nouns</h4></div>
</div>
<!------------->
<!--- right column --->
<div class="col-7 mt-1 mb-1" style="text-align:center; line-height:10px; font-weight:500">
<!-- age -->
<div class="row no-gutters" style="text-align:left"><div class="col-8"><div class="card d-block rounded-0 mr-1 mt-2" style="height:20px; border-color:#000; background-color:#FFF"><div style="color:#000">age</div></div></div></div>
<!-- race/species -->
<div class="row no-gutters" style="text-align:left"><div class="col-8"><div class="card d-block rounded-0 mr-1 mt-2" style="height:20px; border-color:#000; background-color:#FFF"><div style="color:#000">race/species</div></div></div></div>
<!-- sexuality -->
<div class="row no-gutters" style="text-align:left"><div class="col-8"><div class="card d-block rounded-0 mr-1 mt-2" style="height:20px; border-color:#000; background-color:#FFF"><div style="color:#000">sexuality</div></div></div></div>
<!-- occupation -->
<div class="row no-gutters" style="text-align:left"><div class="col-8"><div class="card d-block rounded-0 mt-2 mr-1" style="height:20px; border-color:#000; background-color:#FFF"><div style="color:#000">occupation</div></div></div></div>
<!-- birthday/status/star sign/blood type/etc! -->
<div class="row no-gutters" style="text-align:left"><div class="col-8"><div class="card d-block rounded-0 mr-1 mt-2" style="height:20px; border-color:#000; background-color:#FFF"><div style="color:#000">D.O.B</div></div></div></div>
</div>
</div>
<!------------->
</div>
</div>
