hi hi! if you like my f2u codes, pls consider supporting!
<!-------------------------------------------------
[F2U] Carrot — 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 COLOURS
#d99430 (main)
#bd4e22 (secondary)
#5e875c (the leaves)
use control/command + f in the code editor to quickly change the colours!
------------------------------------------------->
<div class="mx-auto my-5" style="max-width:750px; font-size:10pt; letter-spacing:0.5px;">
<div class="row no-gutters flex-row-reverse">
<!------------------------------------------------
THE CARROT SIDEBAR
------------------------------------------------->
<div class="col-sm-3 col-6 mx-auto p-1 mb-sm-0 mb-4">
<div class="sticky-top" style="top:70px; z-index:1">
<div class="card p-3 text-white" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:100px 100px 100% 100%; box-shadow:-4px 4px 0px #bd4e22">
<!-- LIL LEAF ICON
---------------------------------------------->
<!--
→ find more fa icons at [ fontawesome.com ] !
-->
<div class="text-center mt-n5 mb-n4">
<i class="fa-duotone fa-seedling fa-5x" style="color:#5e875c"></i>
</div>
<!-- AVATAR
---------------------------------------------->
<!--
→ best if squared or 200x200
-->
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail p-1 rounded-circle mb-2" style="border: 2px dashed #d99430; background-color:#bd4e22; width:200px">
</div>
<!-- PROFILE
---------------------------------------------->
<div class="text-center mb-5 pb-5">
<!-- NAME / NICKNAME --------------------->
<!--
→ if long name, decrease the font-size
-->
<div class="mt-2 text-uppercase font-italic text-white" style="font-size:18px; font-family:courier; letter-spacing:2px;">
Name
</div>
<hr class="mt-2 w-75" style="border-top:2px dashed #bd4e22">
<!-- TAGS --------------------->
<div class="my-4">
<span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">age</span>
<span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">pronoun</span>
<span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">pronoun 2</span>
<span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">timezone</span>
<span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">bday!</span>
<!-- add more ABOVE this line! -->
</div>
<hr class="w-75" style="border-top:2px dashed #bd4e22">
<!-- JIKO CREDITS - no remove ------------->
<div class="text-center">
<a href="https://toyhou.se/18043602." class="text-white tooltipster" title="code by jiko">
<i class="fa-solid fa-code fa-fw"></i>
</a>
</div>
</div>
<!-- STRING DECOR
---------------------------------------------->
<div class="hidden-sm-down">
<div style="position:absolute; top:50px; right:-35px; z-index:2">
<i class="fa-thin fa-tilde fa-5x" style="color:#bd4e22"></i>
</div>
<div style="position:absolute; top:40px; right:-29px;">
<i class="fa-light fa-tilde fa-5x" style="color:#d99430; transform:rotate(-20deg)"></i>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
CHARACTER BASICS
------------------------------------------------->
<div class="col-sm p-1 pr-sm-5">
<!-- NOTICE BOARD
---------------------------------------------->
<div class="carrot_notice_me">
<!-- HEADER --------------------------->
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto">
<div class="card d-inline-block p-3 text-white h-100" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:15px; box-shadow:-4px 4px 0px #bd4e22;">
<i class="fa-regular fa-manhole fa-fw fa-2x m-auto"></i>
</div>
</div>
<div class="col pl-3">
<div class="font-weight-bold font-italic" style="font-size:15px; letter-spacing:1px;">
#NOTICE
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- CONTENT --------------------------->
<div class="text-muted bg-faded p-3 mb-3" style="border-radius:20px">
<p class="mt-0 mb-2"> <i class="fa-regular fa-angle-right fa-fw"></i>
lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-angle-right fa-fw"></i>
lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-angle-right fa-fw"></i>
lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!-- add more ABOVE this line! -->
</div>
</div>
<!-- ABOUT ME
---------------------------------------------->
<div class="carrot_about_me mt-5">
<!-- HEADER --------------------------->
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto">
<div class="card d-inline-block p-3 text-white h-100" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:15px; box-shadow:-4px 4px 0px #bd4e22;">
<i class="fa-regular fa-scissors fa-fw fa-2x m-auto"></i>
</div>
</div>
<div class="col pl-3">
<div class="font-weight-bold font-italic" style="font-size:15px; letter-spacing:1px;">
#ABOUT ME
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- CONTENT --------------------------->
<div class="text-muted bg-faded p-3 mb-3" style="border-radius:20px">
<!-- put the first five words in the span! -->
<p><span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- add more ABOVE this line! -->
</div>
<!-- THIN MOODBOARD --------------------------->
<!--
→ any size image works fine; will auto-crop to the center
-->
<div class="row no-gutters mx-n2">
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1594587640199-90ad1cb30c8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1605743970487-c2c58adbdfba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1476683874822-744764a2438f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
<!-- SHOWCASE
---------------------------------------------->
<div class="carrot_look_at_me mt-5">
<!-- HEADER --------------------------->
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto">
<div class="card d-inline-block p-3 text-white h-100" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:15px; box-shadow:-4px 4px 0px #bd4e22;">
<i class="fa-regular fa-clothes-hanger fa-fw fa-2x m-auto"></i>
</div>
</div>
<div class="col pl-3">
<div class="font-weight-bold font-italic" style="font-size:15px; letter-spacing:1px;">
#SHOWCASE
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- CHARACTERS ----------------------->
<!--
→ for the hover effect, choose an image that has a transparent background!
→ best if image is squared or 200x200
→ defaults to 3 characters in a row
-->
<div class="row no-gutters justify-content-center mx-n2">
<!-- ONE -------------------------->
<div class="col-sm-4 col-6 text-center p-2">
<!-- LIL LEAF ICON -->
<div class="text-center mb-n3" style="position:relative; z-index:-1">
<i class="fa-duotone fa-spa fa-3x" style="color:#5e875c"></i>
</div>
<!-- AVATAR -->
<a href="LINK_HERE" class="btn btn-outline-warning bg-faded tooltipster border-0 p-0" style="border-radius:20px;"
title="strawbabé!">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
style="height:150px; border-radius:20px; object-fit:cover;">
</a>
<!-- LIL POT ICON -->
<div class="mt-n3" style="position:relative; z-index:2; filter:drop-shadow(2px 2px 0px #bd4e22) drop-shadow(-2px -2px 0px #bd4e22) drop-shadow(-2px 2px 0px #bd4e22) drop-shadow(2px -2px 0px #bd4e22)">
<div class="card border-0 mx-auto" style="max-width:200px; height:20px; background-color:#d99430;"></div>
<div class="card border-0 mx-2 p-1 px-2" style="max-width:180px; background-color:#d99430; border-radius:0 0 10px 10px;">
<div class="card p-3" style="border:2px dashed #d99430; background-color:#bd4e22;">
<!-- change this to what represents the character! -->
<i class="fa-duotone fa-strawberry fa-fw fa-lg mx-auto" style="color:#d99430"></i>
</div>
</div>
</div>
</div>
<!-- TWO -------------------------->
<div class="col-sm-4 col-6 text-center p-2">
<!-- LIL LEAF ICON -->
<div class="text-center mb-n3" style="position:relative; z-index:-1">
<i class="fa-duotone fa-spa fa-3x" style="color:#5e875c"></i>
</div>
<!-- AVATAR -->
<a href="LINK_HERE" class="btn btn-outline-warning bg-faded tooltipster border-0 p-0" style="border-radius:20px;"
title="iceberg!">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
style="height:150px; border-radius:20px; object-fit:cover;">
</a>
<!-- LIL POT ICON -->
<div class="mt-n3" style="position:relative; z-index:2; filter:drop-shadow(2px 2px 0px #bd4e22) drop-shadow(-2px -2px 0px #bd4e22) drop-shadow(-2px 2px 0px #bd4e22) drop-shadow(2px -2px 0px #bd4e22)">
<div class="card border-0 mx-auto" style="max-width:200px; height:20px; background-color:#d99430;"></div>
<div class="card border-0 mx-2 p-1 px-2" style="max-width:180px; background-color:#d99430; border-radius:0 0 10px 10px;">
<div class="card p-3" style="border:2px dashed #d99430; background-color:#bd4e22;">
<!-- change this to what represents the character! -->
<i class="fa-duotone fa-leafy-green fa-fw fa-lg mx-auto" style="color:#d99430"></i>
</div>
</div>
</div>
</div>
<!-- THREE ------------------------>
<div class="col-sm-4 col-6 text-center p-2">
<!-- LIL LEAF ICON -->
<div class="text-center mb-n3" style="position:relative; z-index:-1">
<i class="fa-duotone fa-spa fa-3x" style="color:#5e875c"></i>
</div>
<!-- AVATAR -->
<a href="LINK_HERE" class="btn btn-outline-warning bg-faded tooltipster border-0 p-0" style="border-radius:20px;"
title="matcha!">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
style="height:150px; border-radius:20px; object-fit:cover;">
</a>
<!-- LIL POT ICON -->
<div class="mt-n3" style="position:relative; z-index:2; filter:drop-shadow(2px 2px 0px #bd4e22) drop-shadow(-2px -2px 0px #bd4e22) drop-shadow(-2px 2px 0px #bd4e22) drop-shadow(2px -2px 0px #bd4e22)">
<div class="card border-0" style="height:20px; background-color:#d99430;"></div>
<div class="card border-0 mx-2 p-1 px-2" style="background-color:#d99430; border-radius:0 0 10px 10px;">
<div class="card p-3" style="border:2px dashed #d99430; background-color:#bd4e22;">
<!-- change this to what represents the character! -->
<i class="fa-duotone fa-mug-tea fa-fw fa-lg mx-auto" style="color:#d99430"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ART STATUS
---------------------------------------------->
<div class="carrot_support_me mt-5">
<!-- HEADER --------------------------->
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto">
<div class="card d-inline-block p-3 text-white h-100" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:15px; box-shadow:-4px 4px 0px #bd4e22;">
<i class="fa-regular fa-vest-patches fa-fw fa-2x m-auto"></i>
</div>
</div>
<div class="col pl-3">
<div class="font-weight-bold font-italic" style="font-size:15px; letter-spacing:1px;">
#STATUS
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- LITTLE NOTES --------------------------->
<div class="text-muted bg-faded p-3 mb-2" style="border-radius:20px">
<p class="mt-0 mb-2"> <i class="fa-regular fa-angle-right fa-fw"></i>
<a href="LINK_HERE" class="text-reset">link to tos</a>.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-angle-right fa-fw"></i>
list your accepted method of payment.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-angle-right fa-fw"></i>
maybe preferred method of communication as well.
</p>
<!-- add more ABOVE this line! -->
</div>
<!-- CONTENT --------------------------->
<div class="row no-gutters text-center mx-n2">
<div class="col-6 p-2">
<div class="bg-faded p-2 px-3" style="border-radius:10px">
<span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px; color:#bd4e22">commissions</span><br>
open
</div>
</div>
<div class="col-6 p-2">
<div class="bg-faded p-2 px-3" style="border-radius:10px">
<span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px; color:#bd4e22">trades</span><br>
open
</div>
</div>
<div class="col-6 p-2">
<div class="bg-faded p-2 px-3" style="border-radius:10px">
<span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px; color:#bd4e22">collabs</span><br>
open
</div>
</div>
<div class="col-6 p-2">
<div class="bg-faded p-2 px-3" style="border-radius:10px">
<span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px; color:#bd4e22">requests</span><br>
open
</div>
</div>
</div>
</div>
<!-- OTHER SOCIALS
---------------------------------------------->
<div class="carrot_find_me mt-5">
<!-- HEADER --------------------------->
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto">
<div class="card d-inline-block p-3 text-white h-100" style="border:3px solid #bd4e22; background-color:#d99430; border-radius:15px; box-shadow:-4px 4px 0px #bd4e22;">
<i class="fa-regular fa-reel fa-fw fa-2x m-auto"></i>
</div>
</div>
<div class="col pl-3">
<div class="font-weight-bold font-italic" style="font-size:15px; letter-spacing:1px;">
#SOCIALS
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- CONTENT --------------------------->
<div class="row no-gutters justify-content-center bg-faded p-3 mb-3" style="border-radius:20px">
<div class="col-auto p-1 px-2">
<a href="LINK_HERE" class="text-muted">
<i class="fa-solid fa-id-card fa-2x fa-fw"></i>
</a>
</div>
<div class="col-auto p-1 px-2">
<a href="LINK_HERE" class="text-muted">
<i class="fa-brands fa-deviantart fa-2x fa-fw"></i>
</a>
</div>
<div class="col-auto p-1 px-2">
<a href="LINK_HERE" class="text-muted">
<i class="fa-brands fa-twitter fa-2x fa-fw"></i>
</a>
</div>
<div class="col-auto p-1 px-2">
<a href="LINK_HERE" class="text-muted">
<i class="fa-brands fa-patreon fa-2x fa-fw"></i>
</a>
</div>
<!-- add more ABOVE this line! -->
<div class="col-12 p-1">
<div class="mt-2 text-center" style="font-family:courier; letter-spacing:1px;">
discord#0000
</div>
</div>
</div>
</div>
<!-- add more sections ABOVE this line! -->
</div>
</div>
</div><!-- carrot code ends -->
