[F2U] ♱ SHORTCAKE
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!-- ✦✦ 【F2U】Princess Cake Bundle / Shortcake 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: #F6BFC1
୨୧ Main Text: #d7395a
୨୧ Secondary Text: #F0869C (also fontmeme shadow)
୨୧ Accent 01: #F295A2
୨୧ Accent 02:#FBE6D2
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
꒰ა໒꒱ Character Image
------------------------------------------------------------->
<div class="col-md-3 container bg-transparent justify-content-center mb-0">
<div class="mx-auto my-auto" style="border:3px solid #F6BFC1;height:100px;width:100px; position:absolute;transform:rotate(45deg); "></div>
<img src="IMG_LINK" style="z-index:1;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); height:100px">
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Container Setup
------------------------------------------------------------->
<div class="container col-md-4 p-2 mb-0" style="
background:#F6BFC1;
border-radius:5px;
margin-top:-30px">
<!------------------------------------------------------------
꒰ა໒꒱ Character Name
https://fontmeme.com/fonts/schmale-halbfette-fraktur-font/
------------------------------------------------------------->
<div class="col my-auto p-1">
<hr class="my-0 mb-2" style="height:2px; background:#F295A2;">
</div>
<div class="justify-content-center mb-0 pt-2">
<img src="https://fontmeme.com/permalink/250418/a5bbf28630da567d1cf5275c087224a4.png" style="height:83px">
</div>
<div class="row no-gutters">
<div class="col my-auto p-1 pt-3">
<hr class="my-0 mb-2" style="height:2px; background:#F295A2;">
</div>
<!------------------------------------------------------------
꒰ა໒꒱ 3 main emojis that rep your chara
------------------------------------------------------------->
<div class="col-auto p-1" style="color:#FBE6D2; margin:auto">
<i class="fas fa-cake"></i>
<i class="fas fa-knife-kitchen fa-flip" style="animation-duration:6s;color:#EF7997"></i>
<i class="fas fa-cake-slice"></i>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ About Row
------------------------------------------------------------->
<div class="row no-gutters mb-1 justify-content-center" style="column-gap:5px;">
<div class="col-6 p-2" style="
border-radius:5px;
border: 2px solid #F295A2;
background:#FBE6D2">
<p class="text-center"><i class="fa-solid fa-book-open-cover" style="color:#FBE6D2;font-size:20px;position:absolute; margin-top:-19px; left:0; right:0"></i></p>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; max-height: 130px; padding: 0px 20px 0px 5px;overflow-x:hidden;">
<p class="text-left" style="color:#F0869C; font-family:serif; font-size:10px">
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>
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Flavour Text + image
------------------------------------------------------------->
<div class="col-5 p-1" style="
border-radius:5px;
border:2px solid #F0869C">
<p class="text-center p-1" style="color:#FBE6D2; font-family:cursive; font-size:8px;position:absolute; z-index:1; margin-top:0px; left:0;right:0">I heard she makes the best pies</p>
<p class="text-center p-1" style="color:#F0869C; font-family:cursive; font-size:8px;position:absolute; z-index:1; margin-top:125px; left:0;right:0">Is that true?</p>
<img src="IMG_LINK" style="border-radius:5px;">
</div>
<!------------------------------------------------------------
꒰ა໒꒱ end of abt
------------------------------------------------------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱Gentle Quote
------------------------------------------------------------->
<div class="row no-gutters p-1 mb-1" style="border: 2px dashed #F295A2">
<div class="col text-left" style="color:#FBE6D2">
<i class="fa-solid fa-quote-left"></i>
</div>
<div class="col" style="color:#d7395a; font-family:serif; font-size:10px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="col text-right" style="color:#FBE6D2">
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Likes / Dislikes / Trivia
likes + dislikes are not scrollable
Trivia IS scrollable
------------------------------------------------------------->
<div class="row no-gutters justify-content-center" style="column-gap:5px">
<!-------------------- Likes ------------------------------->
<div class="col-5 p-2" style="background:#F295A2">
<ul class="mb-0"style="color:#FBE6D2; font-size:10px; font-family:serif; list-style-type:none; padding-left:0">
<li class="mb-1"><i class="fas fa-heart"></i> content</li>
<li class="mb-1"><i class="fas fa-heart"></i> content</li>
<li class="mb-1"><i class="fas fa-heart"></i> content</li>
<li class="mb-1"><i class="fas fa-heart"></i> content</li>
</ul>
</div>
<!-------------------- Dislikes -------------------------->
<div class="col-5 p-2" style="background:#FBE6D2">
<ul class="mb-0 text-right"style="color:#F295A2; font-size:10px; font-family:serif; list-style-type:none; padding-left:0">
<li class="mb-1"><i class="fas fa-heart-crack"></i> content</li>
<li class="mb-1"><i class="fas fa-heart-crack"></i> content</li>
<li class="mb-1"><i class="fas fa-heart-crack"></i> content</li>
<li class="mb-1"><i class="fas fa-heart-crack"></i> content</li>
</ul>
</div>
<!-------------------- Decor Icon -------------------------->
<div class="col-auto" style="font-size:30px; margin:auto">
<i class="fa-sharp fa-solid fa-sparkle fa-spin" style="color:#d7395a;text-shadow:0 0 5px #d7395a"></i>
</div>
</div>
<!-------------------- Trivia area -------------------------->
<div class="col p-2 mb-1" style="background:#F295A2">
<h2 class="text-left mb-1" style="color:#FBE6D2; font-family:cursive">Trivia</h2>
<div class="text-justify" style="color:#FBE6D2; font-size:10px; font-family:serif">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; max-height: 70px; padding: 0px 20px 0px 5px;overflow-x:hidden;">
<ul class="mb-0 p-1" style="list-style-type:none; padding-left:0">
<li><i class="fa-solid fa-fork fa-flip-vertical"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-fork fa-flip-vertical"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-fork fa-flip-vertical"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-fork fa-flip-vertical"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-solid fa-fork fa-flip-vertical"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<!--------------------- Add more above this line ------------>
</ul>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Story row
------------------------------------------------------------->
<div class="row no-gutters justify-content-center mb-1" style="column-gap:6px;">
<div class="col-auto" style="margin:auto">
<i class="fal fa-cupcake fa-bounce" style="color:#FBE6D2;font-size:30px; animation-duration:6s; text-shadow:0 0 5px #FBE6D2"></i>
</div>
<div class="col p-1" style="border:2px dashed #FBE6D2">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; max-height: 70px; padding: 0px 20px 0px 5px;overflow-x:hidden;">
<p class="text-left" style="color:#d7395a; font-size:10px; font-family:serif">
<span style="color:#F0869C; font-family:cursive">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.
<br><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>
</div>
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ end of story
------------------------------------------------------------->
</div>
<!------------------------------------------------------------
꒰ა໒꒱Song area
------------------------------------------------------------->
<div class="row-no gutters justify-content-between" style="background:#F0869C">
<div class="col-auto p-1 text-left" style="font-family:serif; color:#FBE6D2; font-size:10px">
Song Name
</div>
<div class="col my-auto p-1">
<hr class="my-auto" style="background:#FBE6D2">
</div>
<div class="col-auto p-1 text-right" style="font-family:serif; color:#FBE6D2; font-size:10px">
<iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:6px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/VIDEOIDHERE"></iframe><i class="fas fa-play"></i></div>
<!------------------------------------------------------------
꒰ა໒꒱ End of card
------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------
꒰ა໒꒱ Credits
do not remove pls
------------------------------------------------------------->
<p class="text-center" style="color:#F6BFC1; font-size:30px;margin-top:-10px">
<i class="fa-sharp fa-solid fa-bookmark"></i></p>
<p class="text-center" style="position:relative; margin-top:-60px"><a href="/diadem" target="_BLANK" title="html code by beel" data-toggle="tooltip" style="color:#FBE6D2; font-size:24px; font-family:monospace; text-decoration:none;">✦</a></p>