[F2U] ♱ KISMET
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!------
[F2U code by Diadem]
ᘡ Do NOT remove my credits please
ᘡ we're back at it again with a new code !
ᘡ Inspiration: https://toyhou.se/abakkus
ᘡ Code TOS: https://toyhou.se/32638528.
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ Background: #fff
୨୧ Header Text: #ababab
୨୧ Main Text:#000
୨୧ First Accent: #9c9c9c
୨୧ Second Accent: #e1e1e1
------>
<!------------------------------------------------------------
୨୧ CONTAINER BG
get rid of bg colour if not using !
------------------------------------------------------------->
<div class="container" style="
border: 3px solid #fff;
background-image:url(IMG_URL);
background-color: #fff;
background-attachment:fixed;
background-size:cover;">
<!------------------------------------------------------------
୨୧ CENTER CONTAINER
------------------------------------------------------------->
<center>
<div class="col-md-4 p-1" style="
background-color:#fff;
height:480px;">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 410px; padding: 10px 20px 0px 10px;">
<!------------------------------------------------------------
୨୧ CONTENT
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ Image of Character
------------------------------------------------------------->
<img class="p-2"
src="IMG_URL" style="
border-radius:50px;
height:200px;
border:1px solid #e1e1e1;">
<div class="bg-transparent p-1"></div>
<!------------------------------------------------------------
୨୧ Lil Quote or paragraph
------------------------------------------------------------->
<p class="text-left mb-2 " style="color:#000; font-size:7px; font-family:monospace; font-variant:small-caps">
Have you ever been in love? Horrible isn't it? It makes you so vulnerable. It opens your chest and it opens up your heart and it means that someone can get inside you and mess you up. Maybe one day, I will find that one person I adore. Maybe I won't. Some of us just aren't built for that type of committment. (think of this part as a quote or something. Pref a slightly long quote)
</p>
<!------------------------------------------------------------
୨୧ First name of OC
https://fontmeme.com/ateez-not-okay-font/
------------------------------------------------------------->
<div class="card mb-4" style="background-color:#e1e1e1"></div>
<img class="mb-4"
src="https://fontmeme.com/permalink/250311/50c21c9b7d69e605373b1415249d6ddd.png">
<div class="card mb-4" style="background-color:#e1e1e1"></div>
<!------------------------------------------------------------
୨୧ Basic Information ~
------------------------------------------------------------->
<div class="row no-gutters text-justify-content-around mb-3" style="color:#000; font-size:10px; font-family:andale mono, monospace">
<div class="col-6">
<p><span style="color:#9c9c9c">name:</span> content </p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">age:</span> content</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">pronouns:</span> content</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">gender:</span> content</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">occupation:</span> content</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">species:</span> or race</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">title:</span> content</p>
</div>
<div class="col-6">
<p><span style="color:#9c9c9c">status:</span> content</p>
</div>
</div>
<!------------------------------------------------------------
୨୧ Decor Bit ~
------------------------------------------------------------->
<div class="row no-gutters">
<div class="card col-9" style="background-color:#e1e1e1; border-radius:0px; height:2px; margin:auto;"></div>
<div class="col-2" style="color:#e1e1e1">
<i class="fas fa-sparkle"></i>
<i class="fal fa-heart fa-flip" style="animation-duration:5s;"></i>
<i class="fas fa-sparkle"></i>
</div>
</div>
<!------------------------------------------------------------
୨୧ Lil about Section
------------------------------------------------------------->
<p class="text-left mb-0" style="font-family:monospace; color:#ababab; font-size:20px">About</p>
<p class="text-right mb-0" style="font-family:monospace; color:#9c9c9c; font-size:9px">scroll to read if applicable</p>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 100px; padding: 10px 30px 0px 10px;">
<p class="text-justify" style="color:#000; font-family:monospace; font-size:9px">
Hi This ALSO scrolls ~. 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.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>
<!------------------------------------------------------------
୨୧ Decor Bit ~
------------------------------------------------------------->
<div class="row no-gutters">
<div class="card col-9" style="background-color:#e1e1e1; border-radius:0px; height:2px; margin:auto;"></div>
<div class="col-2" style="color:#e1e1e1">
<p style="font-size:17px; font-family:monospace; color:#ababab">STATS</p>
</div>
</div>
<!------------------------------------------------------------
୨୧ Statistics
------------------------------------------------------------->
<div class="row mb-2" style="font-family:monospace">
<div class="col-6">
<p class="text-left mb-0" style="font-size:14px; color:#ababab"> Good Trait</p>
<p class="text-left" style="color:#000; font-size:8px">
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 class="col-6">
<p class="text-right mb-0" style="font-size:14px; color:#ababab"> Negative Trait</p>
<p class="text-right" style="color:#000; font-size:8px">
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>
<!------------------------------------------------------------
୨୧ Stats / Other Traits ~
------------------------------------------------------------->
<div class="row text-uppercase" style="font-family:monospace; font-size:10px;">
<div class="col-6">
<p class="text-left" style="color:#ababab">Charisma</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
<div class="col-6">
<p class="text-right" style="color:#ababab">Patience</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
<div class="col-6">
<p class="text-left" style="color:#ababab">Temperment</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
<div class="col-6">
<p class="text-right" style="color:#ababab">Integrity</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
<div class="col-6">
<p class="text-left" style="color:#ababab">Confidence</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
<div class="col-6">
<p class="text-right" style="color:#ababab">Intellect</p>
<div class="w-100 progress my-1 rounded-0 bg-transparent pb-2" style="height:5px; border: 1px solid #ababab">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #ababab;"></div></div>
</div>
</div>
</div>
<div class="p-2 bg-transparent"></div>
<!------------------------------------------------------------
୨୧ Lower Area
------------------------------------------------------------->
<p style="font-family:monospace; color:#000; font-size:9px; letter-spacing:3px">scroll to read</p>
<div class="bg-transparent p-1"></div>
<div class="row">
<div class="col-4">
<p style="color:#9c9c9c; font-family:monospace; font-size:9px">Worth:<span style="color:#000">$</span></p>
</div>
<div class="col-4">
<p style="color:#9c9c9c; font-family:monospace; font-size:9px">Designer: <a href="/beelzebunn" target="_BLANK" style="text-decoration:none; color:#000">content</a> </p>
</div>
<!------------------------------------------------------------
୨୧ Code Credits
Please do NOT remove
------------------------------------------------------------->
<div class="col-4">
<p style="color:#9c9c9c; font-family:monospace; font-size:9px">Code: <a href="/diadem" target="_BLANK" style="text-decoration:none; color:#000">✦✦✦</a> </p>
</div>
</div>
<!------------------------------------------------------------
୨୧ CODE DONE ~ !
------------------------------------------------------------->
</center>
</div>