[F2U] ♱ CREME
created by:Beelzebunn
Custom ColorsHTMLCharacterUser
Copy
<!-- ✦✦ 【F2U】Princess Cake Bundle / Créme by Diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
=============== ✧✧ Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ BG / dividers: #F6BFC1
୨୧ Main Text: #d7395a (also fontmeme shadow)
୨୧ Accent 01: #F295A2
୨୧ Accent 02:#FBE6D2 (inner bg / borders)
୨୧ Accent 03: #F0869C (also fontmeme colour)
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
꒰ა໒꒱ Container Setup
------------------------------------------------------------->
<div class="col-md-6 p-2 container" style="
border-radius:6px;
border: 3px solid #FBE6D2;
background:#F6BFC1">
<div class="mx-auto my-auto hidden-sm-down" style="border:3px solid #FBE6D2;height:100px;width:100px; position:absolute;transform:rotate(45deg); left:-40px; top:-23px; z-index:-1"></div>
<img src="IMG_LINK" class="hidden-sm-down" style="z-index:1;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); height:100px; position:absolute; left:-40px; top:-25px">
<!------------------------------------------------------------
꒰ა໒꒱ About / Preferred name
https://fontmeme.com/fonts/schmale-halbfette-fraktur-font/
------------------------------------------------------------->
<div class="col p-1" style="background:#FBE6D2">
<p class="text-right mb-0">
<img src="IMG_LINK" style="height:40px">
</p>
<p class="text-right" style="color:#d7395a; font-size:10px; font-family:cursive">
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>
<!--------------------- Decor Line ------------------------->
<div class="row">
<div class="col my-auto p-2">
<hr class="my-1" style="height:2px;background:#F6BFC1">
</div>
<div class="col-auto" style="color:#F295A2; margin:auto">
<i class="fa-sharp fa-solid fa-sparkle"></i>
<i class="fa-sharp fa-solid fa-sparkle fa-spin"></i>
<i class="fa-sharp fa-solid fa-sparkle"></i>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Your Basic Info
yes, even the image you want
-------------------------------------------------------------><div class="row" style="margin:auto">
<div class="col-auto">
<img src="IMG_LINK" style="height:100px; border-radius:10px; border:2px solid #F6BFC1">
</div>
<div class="col p-2" style="background:#F6BFC1">
<div class="p-1" style="border:2px solid #FBE6D2">
<!------------------ Preferred Name ----------------------->
<div class="row no-gutters justify-content-between">
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
Name
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#d7395a">
</div>
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
content
</div>
</div>
<!------------------ Your age ---------------------------->
<div class="row no-gutters justify-content-between">
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
Age
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#d7395a">
</div>
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
content
</div>
</div>
<!------------------ Pronouns ------------------------------>
<div class="row no-gutters justify-content-between">
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
Pronouns
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#d7395a">
</div>
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
pro/noun
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Extra info
------------------------------------------------------------->
<div class="row no-gutters mb-1">
<div class="col-md-3 p-1" style="background:#F6BFC1; margin-top:-7px">
<!------------------ Your Timezone ------------------------->
<div class="row no-gutters justify-content-between">
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
Timezone
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#d7395a">
</div>
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
content
</div>
</div>
<!------------------ Your Nationality ---------------------->
<div class="row no-gutters justify-content-between">
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
Nationality
</div>
<div class="col my-auto p-1">
<hr class="my-1" style="background:#d7395a">
</div>
<div class="col-auto mb-1 p-1" style="color:#d7395a; font-family:serif; font-size:10px">
content
</div>
</div>
</div>
<div class="col my-auto p-2">
<hr class="my-1" style="height:2px;background:#F6BFC1; position:relative; margin-left:-10px">
</div>
<!--------------------- Decor Line ------------------------->
<div class="row">
<div class="col my-auto p-2">
<hr class="my-1" style="height:2px;background:#F6BFC1">
</div>
<div class="col-auto" style="color:#F295A2; margin:auto">
<a href="#" style="color:#d7395a"><i class="fa-sharp fa-solid fa-tree tooltipster" title="Linktree" data-toggle="tooltip"></i></a>
<a href="#" style="color:#d7395a"><i class="fa-sharp fa-solid fa-dollar tooltipster" title="Sales account" data-toggle="tooltip"></i></a>
<i class="fab fa-discord tooltipster" title="Discord Username" data-toggle="tooltip"></i>
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Beloved Characters
(or friend)
------------------------------------------------------------->
<div class="row no-gutters" style="column-gap:5px;">
<div class="col-auto p-1 text-center hidden-sm-down" style="color:#F0869C;font-size:20px;border:2px solid #F6BFC1">
<i class="fa-solid fa-heart" style="margin-top:30px"></i>
</div>
<div class="col p-2 justify-content-center mb-0" style="background:#F6BFC1">
<!--------------------- Character/Friend 01 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
<!--------------------- Character/Friend 02 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
<!--------------------- Character/Friend 03 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
<!--------------------- Character/Friend 04 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
<!--------------------- Character/Friend 05 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
<!--------------------- Character/Friend 06 ---------------->
<a href="#" title="beloved name" data-toggle="tooltip">
<img src="IMG_LINK" style="max-height:80px"></a>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ END of code tyy
------------------------------------------------------------->
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Credits
do not remove pls
------------------------------------------------------------->
<p class="text-center" style="color:#FBE6D2; font-size:34px; margin-top:-10px; margin-left:300px;">
<i class="fa-sharp fa-solid fa-bookmark" style="text-shadow:3px"></i></p>
<p class="text-center" style="margin-top:-60px; margin-left:300px"><a href="/diadem" target="_BLANK" title="html code by beel" data-toggle="tooltip" style="color:#F6BFC1; font-size:24px; font-family:monospace; text-decoration:none;">✦</a></p>