hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
Tidal — 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/# ] !
------------------------------
ACCENTS
→ colour 1 ----------- #fff
→ colour 2 ----------- #249eb7
→ text-color --------- #071f23
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="max-width:1100px; position:relative; overflow:hidden; border-left:10px solid #249eb7; border-right:10px solid #fff; border-radius:20px;">
<!-------------------------------------------------
BACKGROUND
------------------------------------------------->
<div class="row no-gutters" style="position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;">
<div class="col-md-4 d-flex" style="background:#fff; overflow:hidden">
<div class="align-items-center" style="margin-left:-100px;">
<span class="fa-stack fa-2x" style="font-size:90px;">
<i class="fa-solid fa-circle fa-stack-2x" style="color:#249eb7;"></i>
<!-- find more icons at [fontawesome.com] to change the [fa-cloud-showers] -->
<i class="fa-duotone fa-cloud-showers fa-stack-1x" style="color:#fff"></i>
</span>
</div>
</div>
<div class="col-md" style="background:#249eb7"></div>
</div>
<div class="mx-auto" style="letter-spacing:0.3px; max-width:900px; z-index:2;">
<div class="row no-gutters py-md-4 py-3">
<!-------------------------------------------------
CHARACTER
------------------------------------------------->
<div class="col-md-5 mb-md-0 mb-1" style="z-index:3">
<!-- PAGEDOLL
----------------------------------------------->
<!--
> any size okay, looks best if more tall/height
> works best with transparent bg's
-->
<div style="min-height:450px;
background-image:url(IMAGE_URL_HERE);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
filter:drop-shadow(5px 5px #fff) drop-shadow(-5px -5px #249eb7)"></div>
<!-- TIDBITS
----------------------------------------------->
<div class="pl-lg-0 pl-md-4 p-3 mx-md-0 mx-auto" style="color:#071f23; max-width:260px">
<p class="text-uppercase text-md-left text-center text-monospace font-italic" style="font-size:95%; letter-spacing:1px">
<!-- ARTIST LINK -->
<a href="LINK_TO_ARTIST"
style="color:#249eb7; text-decoration:none;">
<i class="fa-regular fa-image fa-fw"></i>
</a> .
<!-- DESIGNER LINK -->
<a href="LINK_TO_DESIGNER"
style="color:#249eb7; text-decoration:none;">
designer
</a>.
<!-- WORTH/VALUE -->
$0.00 <br>
<!-- METHOD OF OBTAINMENT -->
<!--
> e.g. initial creation, trade, gift... etc.
-->
obtained via ???
</p>
</div>
</div>
<!-------------------------------------------------
INTRODUCTION
------------------------------------------------->
<div class="col-md-7 p-3 px-md-4 my-auto flex-column" style="background:#249eb7;">
<!-- NAME
----------------------------------------------->
<div class="text-center mt-1 mb-4" style="color:#fff; z-index:6; position:relative;">
<div class="text-uppercase mb-n2" style="font-family:times, serif; font-weight:900; font-size:40px; letter-spacing:3px; filter:drop-shadow(1px 1px #249eb7) drop-shadow(-1px -1px #249eb7) drop-shadow(-1px 1px #249eb7) drop-shadow(1px -1px #249eb7)">
<!-- put the first letter in the span! -->
<span class="faded font-italic">N</span>ame
</div>
<p class="text-uppercase text-monospace font-italic" style="font-size:95%; letter-spacing:1px">
age . gender . pro/nouns
</p>
</div>
<!-- SUMMARY BOX
----------------------------------------------->
<!--
> best if kept relatively short, this code is best suited for characters with brief information.
-->
<div class="card rounded-0 p-3 text-justify" style="max-height:300px; overflow:auto; background:#fff; color:#071f23; border-radius:10px">
<!-- put the first five words in the span! -->
<p><span class="text-uppercase font-italic" style="color:#249eb7;letter-spacing:1px;">Lorem ipsum dolor sit amet</span>, 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>
<p>Etiam ac pulvinar diam. Maecenas placerat sed dui at egestas. Quisque dictum, turpis a mollis laoreet, sapien lorem faucibus tortor, sagittis iaculis ex odio sit amet neque.</p>
</div>
<!-- MOODBOARD ROW
----------------------------------------------->
<div class="row no-gutters mt-2 mx-n2">
<!-- ONE ---------------------------------->
<div class="col p-2">
<div style="min-height:40px; border-radius:10px;
background-image:url(https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1827&q=80);
background-size:cover;
background-position:center;
background-repeat:no-repeat;"></div>
</div>
<!-- add more above this line! -->
</div>
<!-- JIKO CREDITS
----------------------------------------------->
<div class="text-center">
<a href="https://toyhou.se/18725078." class="faded tooltipster" title="code by jiko" style="color:#fff; ">
<i class="fa-solid fa-code fa-fw fa-xs"></i>
</a>
</div>
</div>
</div>
</div>
</div>