<!-------------------------------------------------
Quaint — Custom Coloured 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 (in display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your image address links INSIDE brackets or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENT COLOUR
#AFBCD5
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="font-family:book antiqua,palatino,serif; font-size:10.5pt; letter-spacing:0.5px; max-width:800px">
<div class="row no-gutters m-n1">
<!------------------------------------------------
IMAGE HEADER
------------------------------------------------->
<div class="col-12 p-1 mb-2">
<div class="bg-faded p-2">
<div style="overflow:hidden;">
<div class="h-100" style="min-height:90px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:top;
filter:blur(5px);
transform:scale(1.1, 1.1)">
</div>
</div>
</div>
</div>
<!------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-lg-4 px-1 pt-1 pb-lg-0 pb-2">
<div style="position:sticky; top:40px">
<div class="row no-gutters m-n1" style="overflow:auto">
<!-- DECOR BLOCKS
---------------------------------------------->
<div class="col-auto p-1" style="width:60px">
<div class="row no-gutters m-n1">
<div class="col p-1">
<div class="card border-0 rounded-0" style="background-color:#AFBCD5; height:140px"></div>
</div>
<div class="col-auto p-1">
<div class="card rounded-0" style="height:140px; border-style:double; border-width:0 0 0 7px"></div>
</div>
<div class="col-12 p-1">
<hr class="my-1 w-100" style="border-style:dashed; border-width:2px 0 0 0;">
</div>
<div class="col p-1">
<div class="card border-0 rounded-0" style="background-color:#AFBCD5; height:60px"></div>
</div>
<div class="col-auto p-1">
<div class="card rounded-0" style="height:60px; border-style:double; border-width:0 0 0 7px"></div>
</div>
</div>
</div>
<!-- CHARACTER ICON
---------------------------------------------->
<div class="col p-1 pl-2">
<div class="card rounded-0 p-2 h-100" style="border-width:2px">
<div class="h-100" style="min-height:100px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- BASIC INFO
---------------------------------------------->
<div class="col-12 mt-1 p-1">
<div class="card rounded-0 p-3 text-justify text-muted" style="border-style:solid; border-width:2px">
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">name</span>
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">age</span>
content
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">gender</span>
<span class="text-right">
content (pro/nouns)
</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">species</span>
or race
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">family</span>
<div class="text-right">
<a href="LINK_HERE" class="text-reset">name</a> (father, †) <br>
<a href="LINK_HERE" class="text-reset">name</a> (mother) <br>
</div>
</div>
<!-- add more basic infos above THIS line! -->
<hr class="w-100">
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">designer</span>
<a href="LINK_HERE" class="text-reset">
artist
</a>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">obtained by</span>
content
<!-- initial creation/trade/custom/gift, etc. -->
</div>
<div class="d-flex justify-content-between mb-0">
<span class="text-uppercase text-body"
style="font-weight:900; letter-spacing:0.5px">worth</span>
$$$
</div>
</div>
</div>
<!-- STATS
---------------------------------------------->
<!--
CAN BE CHANGED TO PERSONALITY
→ cha (charisma)
→ int (intelligence)
→ wis (wisdom)
→ emp (empathy)
→ hum (humour)
-->
<div class="col-12 mt-1 p-1">
<div class="card rounded-0 p-3 text-justify text-muted" style="border-style:solid; border-width:2px">
<div class="row no-gutters m-n1 text-lg-center text-right">
<div class="col-3 p-1 pr-2">
<span class="text-uppercase text-body" style="font-weight:900; letter-spacing:0.5px">
ATK
</span>
</div>
<div class="col-9 p-1 my-auto">
<div class="progress rounded-0">
<div class="progress-bar bg-secondary" style="
width:50%;
height:4px;">
</div>
</div>
</div>
<div class="col-3 p-1 pr-2">
<span class="text-uppercase text-body" style="font-weight:900; letter-spacing:0.5px">
DEF
</span>
</div>
<div class="col-9 p-1 my-auto">
<div class="progress rounded-0">
<div class="progress-bar bg-secondary" style="
width:50%;
height:4px;">
</div>
</div>
</div>
<div class="col-3 p-1 pr-2">
<span class="text-uppercase text-body" style="font-weight:900; letter-spacing:0.5px">
SPE
</span>
</div>
<div class="col-9 p-1 my-auto">
<div class="progress rounded-0">
<div class="progress-bar bg-secondary" style="
width:50%;
height:4px;">
</div>
</div>
</div>
<div class="col-3 p-1 pr-2">
<span class="text-uppercase text-body" style="font-weight:900; letter-spacing:0.5px">
MED
</span>
</div>
<div class="col-9 p-1 my-auto">
<div class="progress rounded-0">
<div class="progress-bar bg-secondary" style="
width:50%;
height:4px;">
</div>
</div>
</div>
<div class="col-3 p-1 pr-2">
<span class="text-uppercase text-body" style="font-weight:900; letter-spacing:0.5px">
SWM
</span>
</div>
<div class="col-9 p-1 my-auto">
<div class="progress rounded-0">
<div class="progress-bar bg-secondary" style="
width:50%;
height:4px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
RIGHT SIDE + CHARACTER NAME
------------------------------------------------->
<!--
→ if name too long, adjust the [font-size] and/or [letter-spacing]
-->
<div class="col-lg-8 p-1">
<div class="pl-lg-2">
<div class="text-center text-body text-uppercase font-italic mb-3" style="font-size: 2.5rem; font-weight:900; letter-spacing:3px">
<span class="text-muted faded" style="font-weight:400; font-family:sans-serif">˗ˏˋ</span>
NAME
<span class="text-muted faded" style="font-weight:400; font-family:sans-serif">ˊˎ˗</span>
</div>
<hr style="border-style:dashed; border-width:2px 0 0 0">
<div class="card border-0 rounded-0 mb-3" style="background-color:#AFBCD5; height:20px"></div>
<!------------------------------------------------
SUMMARY
------------------------------------------------->
<div class="row no-gutters m-n1">
<!-- CONTENT
---------------------------------------------->
<div class="col p-1">
<div class="card rounded-0 p-3 text-justify text-muted" style="border-style:solid; border-width:2px">
<!-- HEADING ----------------------------->
<div class="font-weight-bold text-body text-right" style="font-size:18px; letter-spacing:2px;">
SUMMARY <i class="faded">!!</i>
</div><hr class="w-100 mt-2">
<!-- SUMMARY ----------------------------->
<div class="p-0">
<p><span class="text-uppercase font-italic" style="font-weight:900;">Pellen tesque condi mentum purus</span> non aliquam dignissim. Nunc interdum tortor in massa ultricies congue. Sed ut condimentum orci, eget venenatis erat. Aenean volutpat est mauris, sed pharetra dui dignissim non. Suspendisse posuere, massa mollis auctor luctus, metus nisl mattis lorem, vel dictum leo dui quis magna. Nunc vitae ante in turpis condimentum scelerisque</p>
</div><hr class="w-100 mb-2">
<!-- THREE ADJECTIVES ----------------------------->
<i class="text-right">
positive . neutral . negative
</i>
</div>
</div>
<!-- DECOR BLOCKS
---------------------------------------------->
<div class="col-auto p-1">
<div class="card rounded-0 h-100" style="border-style:double; border-width:0 0 0 7px"></div>
</div>
<div class="col-auto p-1" style="width:40px">
<div class="card border-0 rounded-0 h-100" style="background-color:#AFBCD5;"></div>
</div>
</div>
<hr style="border-style:dashed; border-width:2px 0 0 0">
<!------------------------------------------------
APPEARANCE
------------------------------------------------->
<div class="row no-gutters m-n1">
<!-- CONTENT
---------------------------------------------->
<div class="col p-1">
<div class="card rounded-0 p-3 text-justify text-muted" style="border-style:solid; border-width:2px">
<!-- HEADING ----------------------------->
<div class="font-weight-bold text-body text-right" style="font-size:18px; letter-spacing:2px;">
APPEARANCE <i class="faded">!!</i>
</div><hr class="w-100 mt-2">
<!-- PALLETE ----------------------------->
<div class="row no-gutters mx-n1 my-2 mb-3">
<div class="col m-1">
<div class="p-2" style="background-color:#888;"></div>
</div>
<div class="col m-1">
<div class="p-2" style="background-color:#666;"></div>
</div>
<div class="col m-1">
<div class="p-2" style="background-color:#444;"></div>
</div>
<div class="col m-1">
<div class="p-2" style="background-color:#222;"></div>
</div>
<div class="col m-1">
<div class="p-2" style="background-color:#000;"></div>
</div>
<!-- add more ABOVE this line -->
</div>
<!-- SUMMARY ----------------------------->
<div class="p-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum tortor lorem, nec semper est bibendum et. Suspendisse nibh lacus, varius ut sapien sed, fermentum placerat magna.</p>
<p>Pellentesque imperdiet metus ac neque mattis, ac pretium mi pellentesque. Nullam gravida suscipit mattis. Etiam id felis diam. Donec blandit mauris nec auctor consectetur. Quisque dignissim lobortis enim non maximus.</p>
</div>
<!-- PALLETE ----------------------------->
<ul class="pl-4 mb-0 mt-2">
<li class="my-2">content</li>
<li class="my-2">content</li>
<li class="my-2">content</li>
</ul>
</div>
</div>
<!-- DECOR BLOCKS
---------------------------------------------->
<div class="col-auto p-1">
<div class="card rounded-0 h-100" style="border-style:double; border-width:0 0 0 7px"></div>
</div>
<div class="col-auto p-1" style="width:40px">
<div class="card border-0 rounded-0 h-100" style="background-color:#AFBCD5;"></div>
</div>
</div>
<hr style="border-style:dashed; border-width:2px 0 0 0">
<!------------------------------------------------
TRIVIA
------------------------------------------------->
<div class="row no-gutters m-n1">
<!-- CONTENT
---------------------------------------------->
<div class="col p-1">
<div class="card rounded-0 p-3 text-justify text-muted" style="border-style:solid; border-width:2px">
<!-- HEADING ----------------------------->
<div class="font-weight-bold text-body text-right" style="font-size:18px; letter-spacing:2px;">
TRIVIA <i class="faded">!!</i>
</div><hr class="w-100 mt-2">
<!-- HEADING ----------------------------->
<ul class="pl-4 mb-0">
<li class="my-2">donec vestibulum, ante ut sodales faucibus, metus nibh eleifend nisl, ut iaculis urna magna vel mi.</li>
<li class="my-2">ut id mi ut sapien scelerisque vulputate eget id eros.</li>
<li class="my-2">morbi non risus et libero rhoncus porttitor. Donec metus turpis, volutpat eget orci a, hendrerit ultricies mi.</li>
</ul>
</div>
</div>
<!-- DECOR BLOCKS
---------------------------------------------->
<div class="col-auto p-1">
<div class="card rounded-0 h-100" style="border-style:double; border-width:0 0 0 7px"></div>
</div>
<div class="col-auto p-1" style="width:40px">
<div class="card border-0 rounded-0 h-100" style="background-color:#AFBCD5;"></div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-12 p-1 mt-2">
<div class="bg-faded p-2">
<div style="overflow:hidden;">
<div class="h-100" style="min-height:90px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:bottom;
filter:blur(5px);
transform:scale(1.1, 1.1)">
</div>
</div>
</div>
</div>
<!------------------------------------------------
CREDITS
------------------------------------------------->
<div class="col-12 p-1">
<div class="text-center">
<div class="card border-0 rounded-0 mt-1 mb-3" style="background-color:#AFBCD5; height:20px"></div>
<hr style="border-style:dashed; border-width:2px 0 0 0">
<a href="https://toyhou.se/16596092." class="text-muted faded font-italic">
( code by jiko )
</a>
</div>
</div>
</div>
</div>