<!-------------------------------------------------
User Bijou — 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 img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
PALETTE
→ accent ----------------- #687259
→ border ----------------- #52796f
→ background ------------- #f4ece2
→ background 2 ----------- #a2a182
→ text ------------------- #ba6f4d
→ text 2 ----------------- #fefae0
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="my-lg-4 my-2 mx-auto" style="font-size:90%; max-width:350px; letter-spacing:0.3px">
<!------------------------------------------------
IMAGE HEADER
------------------------------------------------->
<!--
→ want sharper edges? change [20px] to [0px]!
-->
<div class="card p-3" style="border-color:#52796f; border-radius:20px 20px 0px 0px; background-color:#687259; color:#fefae0;
background-image:url(IMG_URL_HERE);
background-position:center;">
<div class="row no-gutters mt-5">
<!-- AVATAR
---------------------------------------------->
<div class="col-auto pr-1">
<div class="text-center">
<!--
→ want sharper edges? change [15px] to [0px]!
-->
<img class="img-thumbnail border-0 p-1" style="background:#a2a182;border-radius:15px; max-width:80px"
src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png">
</div>
</div>
<!-- SHORT SUBTITLE
---------------------------------------------->
<div class="col-7 pl-2 my-auto">
<div style="font-size:15px;">
really short blurb
<br><span class="font-italic" style="font-size:16px; letter-spacing:2px">
@USERNAME
</span>
<!-- write your user with the forward slash [/] !-->
</div>
</div>
</div>
</div>
<!------------------------------------------------
PINNED BLURB
------------------------------------------------->
<div class="card rounded-0 border-top-0 border-bottom-0 py-3 px-4" style="background:#a2a182; border-color:#52796f; border-radius:0px">
<div class="row" style="color:#fefae0;">
<div class="col-auto my-auto">
<!-- feel free to change the thumbtack with any icon found on [https://fontawesome.com/]-->
<i class="far fa-thumbtack fa-lg" style="transform:rotate(20deg)"></i>
</div>
<div class="col ml-n2">
a 'pinned' notice!
</div>
</div>
</div>
<!------------------------------------------------
YOUR INFOS
------------------------------------------------->
<!--
→ want sharper edges? change [20px] to [0px]!
-->
<div class="card bg-faded text-muted py-3 px-4" style="background:#f4ece2; border-color:#52796f; border-radius:0px 0px 20px 20px">
<div class="row no-gutters" style="color:#ba6f4d;">
<!-- BASIC INFO
---------------------------------------------->
<div class="col-2 mb-1"><i class="far fa-pen-line fa-fw"></i></div>
<div class="col-10 mb-1">name</div>
<div class="col-2 mb-1"><i class="far fa-comments fa-fw"></i></div>
<div class="col-10 mb-1">pro / noun / s</div>
<div class="col-2 mb-1"><i class="far fa-birthday-cake fa-fw"></i></div>
<div class="col-10 mb-1">age (or birthday)</div>
<div class="col-2 mb-4"><i class="far fa-globe-asia fa-fw"></i></div>
<div class="col-10 mb-4">timezone</div>
<!-- ART STATUS
---------------------------------------------->
<div class="col-2 mb-1"><i class="far fa-dollar-sign fa-fw"></i></div>
<div class="col-10 mb-1"><a href="link_to_comms" style="color:#687259">commissions</a>: status</div>
<div class="col-2 mb-1"><i class="far fa-exchange fa-fw"></i></div>
<div class="col-10 mb-1">trades: status</div>
<div class="col-2 mb-4"><i class="far fa-gift fa-fw"></i></div>
<div class="col-10 mb-4">requests: status</div>
<!-- SOCIALS
---------------------------------------------->
<!--
→ check fontawesome.com again for more website icons
-->
<div class="col-2 mb-1"><i class="fas fa-id-card fa-fw"></i></div>
<div class="col-10 mb-1"><a href="LINK_TO_THING" style="color:#687259">carrd or tos</a></div>
<div class="col-2 mb-1"><i class="fab fa-deviantart fa-fw"></i></div>
<div class="col-10 mb-1"><a href="LINK_TO_THING" style="color:#687259">deviantart</a></div>
<div class="col-2 mb-1"><i class="fab fa-instagram-square fa-fw"></i></div>
<div class="col-10 mb-1"><a href="LINK_TO_THING" style="color:#687259">insta</a></div>
<div class="col-2 mb-1"><i class="fab fa-twitter fa-fw"></i></div>
<div class="col-10 mb-1"><a href="LINK_TO_THING" style="color:#687259">twitter</a></div>
<div class="col-2 mb-1"><i class="fab fa-discord fa-fw"></i></div>
<div class="col-10 mb-1" style="color:#687259">DISCORD#52796f0</div>
<div class="col-2 mb-1"><i class="far fa-at fa-fw"></i></div>
<div class="col-10 mb-1" style="color:#687259">@ALT, @/ANOTHER</div>
<!-- write your alts with the forward slash again -->
<!-- add/delete above THIS line! -->
</div>
</div>
<!------------------------------------------------
MY CREDITS
(don't delete pls!)
------------------------------------------------->
<div class="small m-1 text-center">
<a href="https://toyhou.se/14125644.-f2u-user-bijou" class="text-muted faded" style="text-decoration:none">
<i class="fas fa-code fa-fw"></i>
</a>
</div>
</div>
