<!-------------------------------------------
Hello and thank you for using Hacker Man!
Some quick info you should know:
- PLEASE DO NOT REMOVE CREDIT
- Turn off WYSIWYG, there is no guarantee it will work with it on
- Please PM if you have any questions or concerns
- Main hex: #74e8ae
- Border: #000
--------------------------------->
<div class="container p-0" style="max-width:900px;">
<div class="row no-gutters justify-content-center">
<!-------------------Name----------------->
<div class="col-12 progress my-2 p-2"style="background:#000">
<div class="progress-bar bg-dark progress-bar-striped rounded" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:100%;height:50px">
<div class="text-uppercase p-2 text-center justify-content-between rounded-top"style="letter-spacing:10px; font-size:30px;background: #74e8ae; color:#000">Name Here</div>
<div class="col-12 container text-right " style="color:#000">adjective • adjective • adjective</div>
</div>
</div>
<div class="col-12 rounded p-2 row no-gutters"style="background: #000">
<!--------------------------Image------------------------>
<div class="col-4 rounded p-2"style="background:#74e8ae">
<div class="col-12 rounded p-2"style="background:#000">
<div class="col-12 rounded bg-dark" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/7240895?1592192779) top no-repeat;background-size:cover; height:240px"></div>
</div>
</div>
<!--------------------------Info------------------------>
<div class="flex-column col-8"style="border-left: 10px solid #000">
<hr class="border-1 w-100 flex-grow-1 m-0"style="border-color:#74e8ae;z-index:50">
<div class="rounded-bottom flex-grow-1 bg-dark">
<div class="justify-content-between row no-gutters">
<div class="col-6">
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Name</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Nickname</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Age</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Gender</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Pronouns</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Birthday</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Height</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Species</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
</div>
<div class="col-6">
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Occupation</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Home</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
R.status</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
L.Status</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Orientation</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Theme</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Voice</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
<div class="p-1 justify-content-between">
<span class="text-uppercase px-1" style="color:#74e8ae;letter-spacing: 1px">
Worth</span>
<span class="text-right text-lowercase"style="color:#000">
info</span>
</div>
</div>
</div>
</div>
<div class="col-12 rounded pt-2 p-0"style="background:#000">
<div class="w-100 rounded p-0 text-center p-1"style="background:#74e8ae;color:#000;height:30px">
"Quote here."</div>
</div>
</div>
<hr class="border-1 w-100 flex-grow-1 mt-2 m-0"style="border-color:#74e8ae;z-index:50">
<!--------------------------Text------------------------>
<div class="col-12 p-3 rounded-bottom table-responsive bg-dark"style="height:300px;overflow:auto">
<div class="col-12 p-2 "style="height:300px">
<div class="p-2"style="color:#000">
<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.</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.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.</p>
<br> <br>
</div>
</div>
</div>
</div>
<!--------------------------Battery------------------------>
<div class="rounded justify-content-between pl-2 pr-2"style="background:#000;width:800px;margin-top:-40px;z-index:50;">
<!-------------------Colour----------------->
<div class="col-8 progress my-2 p-0 rounded-0">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:100%;height:50px;background-color:#74e8ae">
</div>
</div>
<!-------------------Blank----------------->
<div class="col-4 progress my-2 p-0 rounded-0">
<div class="progress-bar bg-dark progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:100%;height:50px">
<!------------------------CREDITS DO NOT REMOVE------------------------------->
<div class="col-12 container pt-3 text-primary text-right" style="font-size:10px">
<a href="/canadianlyynx">
<i class="far fa-paw" style="color:#74e8ae">
</i>
</a>
</div>
</div>
</div>
</div>
</div>