<!-------------------------------------------------
Essentials — Custom Colours version.
(code by jiko)
------------------------------
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENTS
→ bg-1 ----------- #505050
→ bg-2 ----------- #f4f4f4
→ main-text ------ #fefefe
→ hr ------------- #ffffff
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="my-4 mx-auto" style="font-size:95%; letter-spacing:0.3px; max-width:800px">
<!-- BOOKMARK DECOR -->
<div class="text-right mr-3 mb-n4" style="z-index:-1">
<i class="fas fa-bookmark fa-flip-vertical fa-6x" style="opacity:0.6; color:#505050"></i>
</div>
<!-------------------------------------------------
PROFILE BEGINS
------------------------------------------------->
<div class="row no-gutters shadow">
<!--------------------------------------
CHARACTER AVATAR
--------------------------------------->
<!--
→ recommended dimensions are squared but any size image can be used
→ if the character face is not in the top center, change [background-position:top center]
-->
<div class="col-lg-4">
<div class="d-flex h-100 py-lg-4 py-5" style="background:#f4f4f4">
<div class="m-auto card p-3 rounded-0"
style="height:160px; width:160px; background:#f4f4f4; border-color:#505050">
<div class="h-100 w-100" style="max-height:160px;
/* CHARACTER IMAGE HERE
---------------------------------------- */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
/* BASIC IMAGE SETTINGS
---------------------------------------- */;
background-size:cover;
background-position:top center;
background-color:#505050"></div>
</div>
</div>
</div>
<!--------------------------------------
CHARACTER INFO
--------------------------------------->
<div class="col-lg-8 p-1" style="background:#f4f4f4; color:#fefefe">
<div class="card rounded-0 p-3 h-100" style="background-color:#505050;">
<!-------- NAME + ICON -------------------------------->
<div class="lead text-uppercase justify-content-between" style="letter-spacing:3px">
<span>Name</span>
<span class="font-italic" style="opacity:0.5">
short title
</span>
</div><hr class="mt-2 w-100" style="border-color:#ffffff; opacity:0.2; border-style:dashed">
<!-------- CONTENT -------------------------------->
<div class="row no-gutters mb-3">
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Name</span>
<span>content</span>
</div>
<div class="col-lg-6 p-lg-2 pl-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Age</span>
<span>content</span>
</div>
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Gender</span>
<span>content</span>
</div>
<div class="col-lg-6 p-lg-2 pl-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Pronouns</span>
<span>pro/noun</span>
</div>
<div class="col-lg-6 p-lg-2 pr-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Race</span>
<span>or species</span>
</div>
<div class="col-lg-6 p-lg-2 pl-lg-3 py-1 justify-content-between">
<span class="text-uppercase" style="opacity:0.7; letter-spacing:0.8px;">Obtained by</span>
<span>content</span>
</div>
<!-- add/delete more above THIS line! -->
</div><hr class="mt-2 w-100" style="border-color:#ffffff; opacity:0.2; border-style:dashed">
<!-------- SUMMARY -------------------------------->
<div class="text-justify mb-3">
<!-- ICON DECOR (DELETABLE) -->
<!--
→ view more icons at [https://fontawesome.com/] !
-->
<div style="position:absolute; bottom:30px; left:30px;">
<i class="fal fa-leaf fa-fw fa-6x fa-flip-horizontal" style="opacity:0.1"></i>
</div>
<p>Pulvinar proin gravida hendrerit lectus a. Justo nec ultrices dui sapien eget mi proin. Sodales ut etiam sit amet.</p>
<p>Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Faucibus turpis in eu mi. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Eget nullam non nisi est sit. Enim ut sem viverra aliquet eget sit.</p>
</div><hr class="mt-2 w-100" style="border-color:#ffffff; opacity:0.2; border-style:dashed">
<!-------- MY CREDIT -------------------------------->
<div class="text-lg-right text-center small faded">
<a href="https://toyhou.se/9819024.-f2u-essentials" class="text-reset tooltipster"
title="code by jiko" style="text-decoration:none">
<i class="far fa-code"></i>
</a>
</div>
<!-- don't touch the below divs! -->
</div>
</div>
</div>
</div>
