hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
F2U Citrus — Accented 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/# ] !
> find more icons at [ fontawesome.com! ]
------------------------------
PALETTE
> accent 1 --------------- #d5754c
> accent 2 --------------- #a49b66
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto p-4 rounded" style="position:relative; z-index:2; overflow:hidden; max-width:1000px">
<!-------------------------------------------------
BACKGROUND
------------------------------------------------->
<div style="position:absolute; top:0; right:0; bottom:0; left:0; z-index:-2; transform:scale(1.2,1.2);
/* IMAGE SETTINGS
---------------------------------------- */;
background-image:url(https://images.unsplash.com/photo-1519067438913-7aab3bff2281?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80);
background-size:cover;
background-position:center;
/* BLUR SETTING
> 0px is no blur
---------------------------------------- */;
filter:blur(5px);
">
</div>
<!-------------------------------------------------
TRANSPARENT TEXTURE (OPT.)
------------------------------------------------->
<!--
> find more textures here! [ https://www.transparenttextures.com/ ]
> feel free to play around with the [w-50 h-100] !
> it can only be 25, 50, 75, and 100
-->
<div class="w-50 h-100" style="background-color:rgba(255,255,255,0.1); position:absolute; top:0; right:0; bottom:0; z-index:-1;
background-image:url(https://www.transparenttextures.com/patterns/light-wool.png);
"></div>
<!-------------------------------------------------
CODE BEGINS
------------------------------------------------->
<div class="mx-auto" style="max-width:850px; font-size:10pt">
<div class="row no-gutters">
<!-------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-lg-4 col-sm-7 p-2 mx-auto flex-column">
<!-- BASIC INFO
---------------------------------------------->
<div class="flex-grow-1">
<div class="ml-xl-n5 card p-3 h-100" style="box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<!-- ICON -------------------------------->
<!--
> any size should be okay, best if the character face is the focus!
-->
<div class="text-center">
<img class="img-thumbnail px-2 pb-2 pt-0 bg-faded mt-n4"
src="https://f2.toyhou.se/file/f2-toyhou-se/characters/22392591?1688954613"
style="width:200px; height:200px; object-fit:cover; border-top:16px solid #d5754c; z-index:2; border-radius:0 0 50% 50%">
</div>
<hr class="w-100">
<!-- CONTENTS ------------------------------->
<div class="flex-row text-center m-n1" style="flex-wrap:wrap">
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
name
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
age
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
gender
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
pronouns
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
con / tent
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
orientation
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
job
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!--------------------------------------->
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
residence
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!-- add more above this line! -->
</div>
<!-- CODE CREDITS ------------------------------->
<div class="text-center mt-auto pt-3">
<a href="https://toyhou.se/17893438." class="text-reset faded tooltipster" title="code by jiko">
<i class="fa-regular fa-code fa-sm"></i>
</a>
</div>
</div>
</div>
<!-- MUSIC PLAYER
---------------------------------------------->
<div class="flex-grow-2 mt-3">
<div class="card p-3 h-100" style="box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<!-- SONG INFO --------------------------->
<div class="mb-3 text-uppercase text-center" style="z-index:3;">
<div style="font-size:15px; font-family:courier new; letter-spacing:2px">
Song Titke
</div>
<div class="small text-monospace text-uppercase faded" style="letter-spacing:1px">
Artist
</div>
</div>
<!-- PLAYER DECOR ------------------------>
<div class="align-items-center justify-content-center" style="position:relative;">
<i class="fa-duotone fa-backward fa-lg"></i>
<span class="fa-stack mx-3 fa-lg" style="z-index:2">
<i class="fa-solid fa-circle fa-stack-2x" style="color:#d5754c"></i>
<i class="fa-solid fa-play-circle fa-stack-1x text-white"></i>
</span>
<i class="fa-duotone fa-forward fa-lg"></i>
<i class="fa-duotone fa-seedling" style="font-size:30px; position:absolute; top:-10px; z-index:1; color:#a49b66"></i>
</div>
<!-- YOUTUBE EMBED ID -------------------->
<div class="w-100 h-100" style="position:absolute; bottom:0px; left:0px; height:100px; overflow:hidden; z-index:2;">
<!--
> replace [ uhcDRK9XpkM ] with your youtube video ID (found after https://www.youtube.com/watch?v=)
> keep the [ ?controls=0 ] at the end !!
-->
<iframe src="https://www.youtube.com/embed/uhcDRK9XpkM?controls=0"
class="w-100"
style="position:absolute; top:-120px; left:0; height:400px; opacity:0.0001;"
frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
RIGHT SIDE
------------------------------------------------->
<div class="col-lg-8 my-auto">
<div class="row no-gutters">
<!-------------------------------------------------
INTRO CARD
------------------------------------------------->
<div class="mx-auto col-sm-8 p-2">
<div class="card p-3" style="box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<!-- TITLE
---------------------------------------------->
<div class="lead text-uppercase" style="font-family:courier new, monospace; letter-spacing:3px; color:#d5754c">
<i class="fa-light fa-citrus-slice"></i>
CITRUS
</div>
<hr class="w-100 my-2 mb-3">
<!-- CAPTION
---------------------------------------------->
<!--
> this can be a summary, quote, lyric, or whatever!
-->
<div class="font-italic">
<span class="faded text-uppercase text-monospace" style="letter-spacing:0.5px">The first three</span> (or five) words go in the span. And then you can type whatever you want here, but I'd say it's best if it's short!
</div>
</div>
</div>
<!-------------------------------------------------
CONTENTS
------------------------------------------------->
<!--
> this will not scroll but rather, stretch with content. as this grows, the coloured tag blocks will grow as well.
> be wary if you write a lot in this card, it may look a little bit funny!
-->
<div class="col-sm-7 p-2 d-block d-sm-flex flex-column">
<div class="card p-3 text-justify" style="flex:1 1 350px; min-height:350px; overflow-y:auto; box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<!-- BASIC INFO
---------------------------------------------->
<div class="mt-0">
<div class="lead text-uppercase" style="font-family:courier new, monospace; letter-spacing:3px; color:#d5754c">
<i class="fa-light fa-book-open"></i>
SUMMARY
</div>
<hr class="mt-2">
<div class="mt-0">
<!-- SECTION 1 ---------------------->
<div class="faded text-monospace text-uppercase mb-2">
<i class="fa-regular fa-bookmark"></i>
Subtitle
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<!-- SECTION 2 ---------------------->
<div class="faded text-monospace text-uppercase mb-2">
<i class="fa-regular fa-bookmark"></i>
Subtitle
</div>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- 5/5 STATS
---------------------------------------------->
<!--
> these stats are out of 5 (5 being the best); 3 solid circles mean 3/5 !!
> FULL CIRCLE: <i class="fa-solid fa-circle" style="color:#a49b66"></i>
> EMPTY CIRCLE: <i class="fa-regular fa-circle faded"></i>
-->
<div class="mt-5">
<div class="lead text-uppercase" style="font-family:courier new, monospace; letter-spacing:3px; color:#d5754c">
<i class="fa-light fa-chart-bar"></i>
STATS
</div>
<hr class="mt-2">
<div class="row no-gutters m-n2">
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Charisma
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
<!------------------------------------>
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Confidence
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
<!------------------------------------>
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Intellect
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
<!------------------------------------>
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Wisdom
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
<!------------------------------------>
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Patience
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
<!------------------------------------>
<div class="col-6 p-2 py-3 text-center">
<div class="text-monospace text-uppercase">
Openness
</div>
<div class="mt-1 fa-sm" style="letter-spacing:1px">
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-solid fa-circle" style="color:#a49b66"></i>
<i class="fa-regular fa-circle faded"></i>
<i class="fa-regular fa-circle faded"></i>
</div>
</div>
</div>
</div>
<!-- DESIGN
---------------------------------------------->
<div class="mt-5">
<div class="lead text-uppercase" style="font-family:courier new, monospace; letter-spacing:3px; color:#d5754c">
<i class="fa-light fa-palette"></i>
DESIGN
</div>
<hr class="mt-2">
<!-- DESIGN INFO ------------------------->
<div class="flex-row text-center m-n1" style="flex-wrap:wrap">
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
Species
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
or race
</div>
</div>
</div>
<!------------------------------------>
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
Height
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!------------------------------------>
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
Build
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
<!------------------------------------>
<div class="flex-grow-1 m-1">
<div class="small text-monospace text-uppercase card bg-faded p-1 border-bottom-0" style="border-radius: 0.25rem 0.25rem 0 0; background:#a49b66; color:#fff">
Demeanour
</div>
<div class="card bg-faded p-2" style="border-radius:0 0 0.25rem 0.25rem">
<div class="font-italic">
content
</div>
</div>
</div>
</div>
<!-- PALETTE ---------------------------->
<div class="flex-row my-3" style="border-radius:0.25rem; overflow:hidden">
<div class="flex-grow-1" style="height:20px; background:#283618;"></div>
<div class="flex-grow-1" style="height:20px; background:#606c38;"></div>
<div class="flex-grow-1" style="height:20px; background:#fefae0;"></div>
<div class="flex-grow-1" style="height:20px; background:#dda15e;"></div>
<div class="flex-grow-1" style="height:20px; background:#bc6c25;"></div>
<!-- add more above this line! -->
</div>
<!-- NOTES ------------------------------>
<ul class="mb-0 pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add more above this line! -->
</ul>
</div>
<!-- LINKS
---------------------------------------------->
<!--
> if the character name is too long, it'll break and make all of the text go underneath the icon
-->
<div class="mt-5">
<div class="lead text-uppercase" style="font-family:courier new, monospace; letter-spacing:3px; color:#d5754c">
<i class="fa-light fa-link"></i>
LINKS
</div>
<hr class="mt-2">
<!-- LINK 1 ------------------------------>
<div class="mt-0">
<div class="float-left card p-1 bg-faded mr-2" style="max-width:80px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/22392591?1688954613">
</div>
<a href="LINK_HERE" class="text-uppercase text-reset faded text-monospace" style="letter-spacing:1px">
CHARACTER NAME
</a>
<p class="mb-1 font-italic">
<i class="fa-solid fa-heart fa-fw"></i>
relation
</p>
<div class="d-flex">
<hr class="w-100 my-2">
</div>
<p>
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>
</div>
<!-- LINK 2 ------------------------------>
<div class="mt-4">
<div class="float-left card p-1 bg-faded mr-2" style="max-width:80px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/22392591?1688954613">
</div>
<a href="LINK_HERE" class="text-uppercase text-reset faded text-monospace" style="letter-spacing:1px">
CHARACTER NAME
</a>
<p class="mb-1 font-italic">
<i class="fa-solid fa-heart-broken fa-fw"></i>
relation
</p>
<div class="d-flex">
<hr class="w-100 my-2">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!-- LINK 3 ------------------------------>
<div class="mt-4">
<div class="float-left card p-1 bg-faded mr-2" style="max-width:80px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/22392591?1688954613">
</div>
<a href="LINK_HERE" class="text-uppercase text-reset faded text-monospace" style="letter-spacing:1px">
CHARACTER NAME
</a>
<p class="mb-1 font-italic">
<i class="fa-solid fa-skull fa-fw"></i>
relation
</p>
<div class="d-flex">
<hr class="w-100 my-2">
</div>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
<!-- add more relations above this line! -->
</div>
<!-- add/delete more sections above this line! -->
</div>
</div>
<!-------------------------------------------------
FAKE TAGS
------------------------------------------------->
<!--
> if you can't think of tags, you're welcome to delete the text and just have the icons!
> find more icons at [ fontawesome.com! ]
-->
<div class="col-sm-5 p-2">
<div class="card p-sm-3 p-2 h-100 flex-sm-column flex-row" style="flex-wrap:wrap; box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<!-- TAG 1
---------------------------------------------->
<div class="flex-grow-1 m-1 mr-xl-n5">
<div class="card h-100 p-4 justify-content-center align-items-center" style="background:#d5754c; color:#fff;">
<div class="text-uppercase text-monospace">
#tag
</div>
<i class="fa-duotone fa-glass-citrus" style="font-size:50px; position:absolute; opacity:0.2"></i>
</div>
</div>
<!-- TAG 2
---------------------------------------------->
<div class="flex-grow-1 mt-sm-3 m-1 mr-xl-n5">
<div class="card h-100 p-4 justify-content-center align-items-center" style="background:#d5754c; color:#fff">
<div class="text-uppercase text-monospace">
#tag
</div>
<i class="fa-duotone fa-citrus" style="font-size:50px; position:absolute; opacity:0.2"></i>
</div>
</div>
<!-- TAG 3
---------------------------------------------->
<div class="flex-grow-1 mt-sm-3 m-1 mr-xl-n5">
<div class="card h-100 p-4 justify-content-center align-items-center" style="background:#d5754c; color:#fff">
<div class="text-uppercase text-monospace">
#tag
</div>
<i class="fa-duotone fa-citrus-slice" style="font-size:50px; position:absolute; opacity:0.2"></i>
</div>
</div>
<!-- add more above this line! -->
</div>
</div>
<!-------------------------------------------------
MOODBOARD
------------------------------------------------->
<div class="col-12 p-2">
<div class="card p-2" style="box-shadow:-10px 10px 0px rgba(0,0,0,0.1)">
<div class="row no-gutters m-sm-0 m-n1">
<!-- IMAGE 1
---------------------------------------------->
<div class="col p-2">
<div class="rounded h-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1585939268339-886c9643ee98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80);
background-size:cover; background-position:center;"></div>
</div>
<!-- IMAGE 2
---------------------------------------------->
<div class="col p-2">
<div class="rounded h-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1596460666245-f210f8d6e901?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80);
background-size:cover; background-position:center;"></div>
</div>
<!-- IMAGE 3
---------------------------------------------->
<div class="col p-2">
<div class="rounded h-100" style="min-height:40px;
background-image:url(https://images.unsplash.com/photo-1591967377711-32ec09645a3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1930&q=80);
background-size:cover; background-position:center;"></div>
</div>
<!-- add more above this line! -->
</div>
</div>
</div>
</div></div><!-- RIGHT SIDE END -->
</div></div></div><!-- CODE ENDS -->
