Profile
Carrot
code by jiko
<!-------------------------------------------------
[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!
(cntrl + f "IMAGEURLHERE" to go through images that need to be added!)
------------------------------------------------->
<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="IMAGEURLHERE"
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>
<br> <span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">pro/noun</span>
<br> <span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">gender</span>
<br> <span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">species</span>
<br> <span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">orientation</span>
<br> <span class="badge text-white p-1" style="background-color:#bd4e22; font-weight:600;">occupation</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>
<!-- MOODBOARD CREDITS ------------->
|| <a href="https://unsplash.com/" class="text-white tooltipster" title="Moodboard images by unsplash">
<i class="fa-solid fa-image fa-fw"></i>
</a>
<!-- CHARACTER DESIGN CREDITS ------------->
|| <a href="DESIGNERLINK" class="text-white tooltipster" title="Oc design by USERHERE">
<i class="fa-solid fa-paint-brush 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">
<!-- ABOUT ME
---------------------------------------------->
<div class="carrot_about_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-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
</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">
<!-- big text in this bit -->
<p><span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 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>
<p>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. </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(IMAGEURLHERE);
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(IMAGEURLHERE);
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(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
<!-- TRIVIA
---------------------------------------------->
<div class="carrot_notice_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-star 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;">
TRIVIA
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- likes dislikes --------------------------->
<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">Likes</span><br>
<p style="text-align:center">
<i class="fa-regular fa-heart"></i> like
<br><i class="fa-regular fa-heart"></i> like
<br><i class="fa-regular fa-heart"></i> like
<br><i class="fa-regular fa-heart"></i> like
</p>
</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">Dislikes</span><br>
<p style="text-align:center">
<i class="fa-regular fa-skull"></i> dislike
<br><i class="fa-regular fa-skull"></i> dislike
<br><i class="fa-regular fa-skull"></i> dislike
<br><i class="fa-regular fa-skull"></i> dislike
</p>
</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">Hobbies</span><br>
<p style="text-align:center">
<i class="fa-regular fa-pencil"></i> hobby
<br><i class="fa-regular fa-pencil"></i> hobby
<br><i class="fa-regular fa-pencil"></i> hobby
<br><i class="fa-regular fa-pencil "></i> hobby
</p>
</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">Fears</span><br>
<p style="text-align:center">
<i class="fa-regular fa-ghost"></i> fear
<br><i class="fa-regular fa-ghost"></i> fear
<br><i class="fa-regular fa-ghost"></i> fear
<br><i class="fa-regular fa-ghost"></i> fear
</p>
</div>
</div>
</div>
<!-- TRIVIA LIST --------------------------->
<div class="text-muted bg-faded p-3 mb-3 mt-3 " style="border-radius:20px">
<p class="mt-0 mb-2"> <i class="fa-regular fa-carrot fa-fw"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-carrot fa-fw"></i>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-carrot fa-fw"></i>
Duis porta eros et velit blandit dapibus.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-carrot fa-fw"></i>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- add more ABOVE this line! -->
</div>
</div>
<!-- AESTHETIC
---------------------------------------------->
<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-image 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;">
AESTHETIC
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</div>
<!-- LINE 1 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:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
</div>
<!-- LINE 2 MOODBOARD --------------------------->
<div class="row no-gutters mx-n2">
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
</div>
<!-- LINE 3 MOODBOARD --------------------------->
<div class="row no-gutters mx-n2">
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
<div class="col-4 p-2">
<div class="rounded w-100" style="min-height:130px;
background-image:url(IMAGEURLHERE);
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
<!-- DESIGN
---------------------------------------------->
<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-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;">
DESIGN
</div>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
</div>
</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">Height</span><br>
0,0ft
</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">Build</span><br>
content
</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">Eyes</span><br>
content
</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">Hair</span><br>
content
</div>
</div>
</div>
<!-- LITTLE NOTES --------------------------->
<div class="text-muted bg-faded p-3 mb-2 mt-3" style="border-radius:20px">
<p class="mt-0 mb-2"> <i class="fa-regular fa-paint-brush fa-fw"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-paint-brush fa-fw"></i>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-paint-brush fa-fw"></i>
elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</p>
<p class="mt-2 mb-0"> <i class="fa-regular fa-paint-brush fa-fw"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- add more ABOVE this line! -->
</div>
</div>
<!-- RELATIONSHIPS
---------------------------------------------->
<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-heart 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;">
RELATIONSHIPS
</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
→ CTRL + F "fa-cat" to change the icon under the avatars!
-->
<!-- LEFT ALIGN -------------------------->
<div class="row no-gutters mx-n2">
<div class="col-sm-4 col-4 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>
<!----- CHARACTER LINK ----->
<a href="CHARACTERURL" class="btn btn-outline-warning bg-faded tooltipster border-0 p-0" style="border-radius:20px;"
title="CharacterName">
<!-- AVATAR -->
<img src="IMAGEURLHERE"
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-cat fa-fw fa-lg mx-auto" style="color:#d99430"></i>
</div>
</div>
</div>
</div>
<!-- CONTENT --------------------------->
<div class="text-muted bg-faded p-3 m col-8 mt-4" style="border-radius:20px">
<!-- relationship details
→ "fas fa-heart" for filled heart
→ "far fa-heart" for outline heart
-->
<p><span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px">Name || Relationship
<br><i class="fas fa-heart" style="color:#5e875c"></i> <i class="fas fa-heart" style="color:#5e875c"></i> <i class="fas fa-heart" style="color:#5e875c"></i> <i class="far fa-heart" style="color:#5e875c"></i> <i class="far fa-heart" style="color:#5e875c"></i></span>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 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>
</div>
</div>
<!-- LEFT ALIGN END -------------------------->
<!-- RIGHT ALIGN -------------------------->
<div class="row no-gutters mx-n2">
<!-- CONTENT --------------------------->
<div class="text-muted bg-faded p-3 m col-8 mt-4" style="border-radius:20px">
<!-- relationship details
→ "fas fa-heart" for filled heart
→ "far fa-heart" for outline heart
-->
<p><span class="text-uppercase font-italic" style="font-family:courier; letter-spacing:1px">Name || Relationship
<br><i class="fas fa-heart" style="color:#5e875c"></i> <i class="fas fa-heart" style="color:#5e875c"></i> <i class="fas fa-heart" style="color:#5e875c"></i> <i class="fas fa-heart" style="color:#5e875c"></i> <i class="far fa-heart" style="color:#5e875c"></i></span>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 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>
<div class="col-sm-4 col-4 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>
<!----- CHARACTER LINK ----->
<a href="CHARACTERURL" class="btn btn-outline-warning bg-faded tooltipster border-0 p-0" style="border-radius:20px;"
title="CharacterName">
<!-- AVATAR -->
<img src="IMAGEURLHERE"
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-cat fa-fw fa-lg mx-auto" style="color:#d99430"></i>
</div>
</div>
</div>
</div>
<!-- RIGHT ALIGN END -------------------------->
<!---- RELATIONSHIP END----->
</div>
</div>
</div>
<!---- ENDING LINE --->
<br>
<hr class="mt-1" style="border-top:2px dashed #bd4e22">
<!-- add more sections ABOVE this line! -->
</div>
</div>
</div><!-- carrot code ends -->