[F2U] ♱ ON FILE
created by:Praying
HTMLCustom ColorsCharacter
Copy
<!-- ✦✦ 【F2U】ON FILE by Diadem
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
=============== ✧✧ Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ BG: #000
୨୧ Main Text + backgrounds/borders:#fff
୨୧ Accent One: #b3cfff
୨୧ Font: Monospace
✦✦ ============ feel free to change the icons of course
-->
<!------------------------------------------------------------
main container
------------------------------------------------------------->
<div class="col p-0 mx-auto" style="
background-image:url(IMG_LINK);
background-size:auto;
background-color:#ddd">
<!------------------- char name ---------->
<div class="col-md-6 p-2 container" style="background:#000">
<div class="col h-100 w-100" style="
border-right:2px solid #fff; border-left:2px solid #fff;">
<h3 class="text-center text-uppercase mb-0" style="color:#fff; font-family:monospace">
On File
</h3>
</div>
</div>
<!------ row | Breed - Feral - Amount bought ------->
<div class="row justify-content-center mx-auto" style="max-width:579px;">
<!--- [01 - breed ] ---->
<div class="p-0 mb-0 col-md-4 pl-3 pr-3 text-center" style="background:#000; color:#fff; font-family:monospace; font-size:10px; border-right:1px solid #fff">
Breed name
</div>
<!--- [02 - feral ] ---->
<div class="p-0 mb-0 pl-3 pr-3 col text-center" style="background:#000; color:#fff; font-family:monospace; font-size:10px; border-right:1px solid #fff">
num% feral
</div>
<!--- [03 - worth (how much did the dragon's owner pay? ] ---->
<div class="p-0 mb-0 pl-3 pr-3 col text-center" style="background:#000; color:#fff; font-family:monospace; font-size:10px">
$$$
</div>
</div>
<div class="row mx-auto" style="max-width:579px">
<!------------------------------------------------------------
first part column
char pfp / name / age / bio sex / species / owner
not seen on mobile
------------------------------------------------------------->
<div class="hidden-sm-down" style="background:#000; height:570px;">
<div class="p-1 hidden-sm-down" style="background:#000; height:300px; width:200px; position:sticky; top:0">
<!----- char name ------>
<div class="col p-1 pt-3 text-center">
<h2 class="text-uppercase mb-0" style="color:#fff; font-family:monospace">
name
</h2>
</div>
<!----- char pfp ------>
<div class="col text-center">
<img src="IMG_LINK" class="p-1" style="filter:grayscale(70%); border:2px solid #fff">
</div>
<!----- age / sex / gender / owner name ---->
<div class="row no-gutters p-2 justify-content-around" style="column-gap:10px">
<!---- age ----->
<div class="col-auto">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
age
</p>
</div>
<!---- sex ----->
<div class="col-auto">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
sex
</p>
</div>
<!---- gender ----->
<div class="col-auto">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
house dragon
</p>
</div>
</div>
<!---- owner name ----->
<div class="col">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
owned by name
</p>
<!----------- end of age / sex / gender / owner name ------>
</div>
<!----- decor barcode ----->
<div class="col text-center mb-0 mt-1" style="color:#fff">
𝄃𝄃𝄂𝄂𝄀𝄁𝄃𝄂𝄂𝄃𝄃𝄃𝄂𝄂𝄀𝄁𝄃𝄂𝄂𝄃𝄃𝄃𝄂𝄂𝄀𝄁𝄃𝄂𝄂𝄃
</div>
</div>
</div>
<!------------------------------------------------------------
first part column
-------------------------------------------------------------><div class="col p-2" style="background:#000; max-height:620px">
<!------- quote || should be short-ish ----->
<div class="col bg-transparent p-0 mt-4" style="border-left:2px solid #fff; border-right: 2px solid #fff; border-radius:15px 0 15px 0">
<p class="text-center p-4" style="font-family:monospace; font-size:10px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
<!--- decor icon --->
<div class="col-auto p-0 text-center mb-3" style="position:relative; margin-top:-11px">
<i class="fa-solid fa-star-christmas fa-fade" style="text-shadow:0 0 5px #fff; font-size:17px; animation-duration:5s"></i>
</div>
<!----------- about your HD || does not scroll ------------->
<div class="col p-0 pr-2 mb-1" style="color:#000;background: linear-gradient(to right, #000 20%, #fff 60%);">
<h3 class="text-right mb-0" style="font-family:monospace">
<i class="far fa-sharp fa-terminal"></i>About
</h3>
</div>
<div class="col p-2 mb-3">
<p class="text-justify" style="color:#fff; font-family:monospace; 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.
<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.
<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>
<!------------------------------------------------------------
FPC | adjectives
-------------------------------------------------------------><div class="col p-0 pl-0 pr-0 text-center text-uppercase" style="background:#fff">
<h3 style="color:#000; font-family:monospace; letter-spacing:5px">
adjectives
</h3>
</div>
<div class="row no-gutters" style="column-gap:5px">
<!---adj 1---->
<div class="col-3 badge rounded-0 p-1 text-uppercase mb-0" style="color:#000; background:#fff; text-shadow:0px 2px 0px rgba(0,0,0,0.3); font-family:monospace; transform:rotate(5deg)">
adj
</div>
<!---adj 2---->
<div class="col-3 badge rounded-0 p-1 text-uppercase mb-0" style="color:#000; background:#fff; text-shadow:0px 2px 0px rgba(0,0,0,0.3); font-family:monospace; transform:rotate(-5deg)">
adj
</div>
<!---adj 4---->
<div class="col-3 badge rounded-0 p-1 text-uppercase mb-0" style="color:#000; background:#fff; text-shadow:0px 2px 0px rgba(0,0,0,0.3); font-family:monospace; transform:rotate(5deg);">
adj
</div>
<!---adj 3---->
<div class="col badge rounded-0 p-1 text-uppercase mb-0" style="color:#000; background:#fff; text-shadow:0px 2px 0px rgba(0,0,0,0.3); font-family:monospace; transform:rotate(-5deg)">
adj
</div>
<!----end of adj row ----->
</div>
<!------------------------------------------------------------
End of first part
------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------
second part
persona / stats / etc
------------------------------------------------------------->
<div class="row mx-auto" style="max-width:579px">
<div class="col p-2" style="background:#000; max-height:690px">
<!------------------------------------------------------------
SP | persona
-------------------------------------------------------------><div class="col p-0 pl-2 pr-0 mt-3 mb-0 text-left text-uppercase" style="background:#fff">
<h3 style="color:#000; font-family:monospace; letter-spacing:5px; text-shadow:3px 0px 0 rgba(0,0,0,0.27)">
personality
</h3>
</div>
<!-------- dominant persona tabs -------------->
<div class="row mb-0 mx-auto justify-content-center" style="margin-top:-5px; column-gap:5px;">
<!--- P1 --->
<div class="col p-0 mb-2 pl-2 pr-2 text-center badge rounded-0" style="background:#fff; color:#000; font-family:monospace;">
content
</div>
<!--- P2 --->
<div class="col p-0 mb-2 pl-2 pr-2 text-center badge rounded-0" style="background:#fff; color:#000; font-family:monospace;">
content
</div>
<!--- P3 --->
<div class="col p-0 mb-2 pl-2 pr-2 text-center badge rounded-0" style="background:#fff; color:#000; font-family:monospace;">
content
</div>
<!-----------end of tabs --------->
</div>
<!------------- more abt personality here ----------->
<div class="col pl-0 pr-0 mb-2 " style="background-image:url(https://i.imgur.com/4xlRJgZ.png); background-size:cover; background-color:#000; position:relative;">
<div class="w-100 h-100 container" style="position:absolute;bottom:0;right:0;background:rgba(0,0,0,0.79);
border-left:1px solid #fff; border-bottom:3px solid #fff"></div>
<div class="col p-2">
<p class="text-justify" style="color:#fff; font-family:monospace; font-size:9px">
H!! i don't scroll - 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.
<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>
<!--------------- end of row persona ------>
<!------------------------------------------------------------
stats about your HD
change the accent colour to what your HD is the most
-------------------------------------------------------------><div class="col p-0 pr-2 mb-2" style="color:#000;background: linear-gradient(to right, #000 20%, #fff 60%);">
<h3 class="text-right mb-0" style="font-family:monospace">
<i class="far fa-sharp fa-terminal"></i>Stats
</h3>
</div>
<!-------- 01 ] introvert vs extrovert -------->
<div class="col p-0 pl-0 pr-0">
<div class=" justify-content-between">
<span class="text-uppercase col pl-0" style="font-family:monospace; color:#fff">Introverted</span>
<span class="text-uppercase col-auto pr-0" style="font-family:monospace; color:#b3cfff">Extroverted</span>
</div>
</div>
<!----- change the 50% || intro/extro ---->
<div class="progress bg-transparent rounded-0 mb-3" style="height:3px">
<div class="progress-bar" style="width:50%; background:#fff"></div>
</div>
<!-------- 02 ] rational vs emotional -------->
<div class="col p-0 pl-0 pr-0">
<div class=" justify-content-between">
<span class="text-uppercase col pl-0" style="font-family:monospace; color:#b3cfff">Rational</span>
<span class="text-uppercase col-auto pr-0" style="font-family:monospace; color:#fff">Emotional</span>
</div>
</div>
<!----- change the 50% || ration/emotion ---->
<div class="progress bg-transparent rounded-0 mb-3" style="height:3px">
<div class="progress-bar" style="width:50%; background:#fff"></div>
</div>
<!-------- 03 ] productive vs negligent -------->
<div class="col p-0 pl-0 pr-0">
<div class=" justify-content-between">
<span class="text-uppercase col pl-0" style="font-family:monospace; color:#fff">Productive</span>
<span class="text-uppercase col-auto pr-0" style="font-family:monospace; color:#b3cfff">Negligent</span>
</div>
</div>
<!----- change the 50% || ration/emotion ---->
<div class="progress bg-transparent rounded-0 mb-3" style="height:3px">
<div class="progress-bar" style="width:50%; background:#fff"></div>
</div>
<!-------- 03 ] sincere vs deceptive -------->
<div class="col p-0 pl-0 pr-0">
<div class=" justify-content-between">
<span class="text-uppercase col pl-0" style="font-family:monospace; color:#b3cfff">Sincere</span>
<span class="text-uppercase col-auto pr-0" style="font-family:monospace; color:#fff">Deceptive</span>
</div>
</div>
<!----- change the 50% || ration/emotion ---->
<div class="progress bg-transparent rounded-0 mb-3" style="height:3px">
<div class="progress-bar" style="width:50%; background:#fff"></div>
</div>
<!----------- Dominant strength ---------->
<div class="col p-0 pl-0 pr-0 mb-3" style="color:#fff; font-family:monospace; font-size:10px">
<div style="border:2px solid #fff; height:100px; overflow:scroll; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#fff #000">
<span class="p-0 pl-1 pr-3 text-uppercase mb-0 mr-2" style="color:#000; font-family:monospace; background:#fff">dominant strength</span> Hi. i scroll - 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.
</div>
</div>
<!----------- Dominant weakness ---------->
<div class="col p-0 pl-0 pr-0 mb-0" style="color:#fff; font-family:monospace; font-size:10px">
<div style="border:2px solid #fff; height:100px; overflow:scroll; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#fff #000">
<span class="p-0 pl-1 pr-3 text-uppercase mb-0 mr-2" style="color:#000; font-family:monospace; background:#fff">dominant weakness</span> Hi. i don't scroll - 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.
</div>
</div>
</div>
<!------------------------------------------------------------
end of main second part
------------------------------------------------------------->
<!------------------------------------------------------------
Second Part Column
------------------------------------------------------------->
<!----- character img 2 || not shown on mobile ----->
<div class="hidden-sm-down" style="background:#000; height:686px;">
<div class="p-1 hidden-sm-down" style="background:#000; height:400px; width:200px; position:sticky; top:0">
<div class="mx-auto mt-4" style="height:150px; width:3px; background:#fff">
</div>
<div class="col text-center">
<img src="IMG_LINK" class="p-1" style="filter:grayscale(70%); max-height:160px">
</div>
<!------------------------------------------------------------
SPC | pronoun / gender / vc
-------------------------------------------------------------><div class="row no-gutters p-2 justify-content-around" style="column-gap:10px">
<!---- pronouns ----->
<div class="col-auto">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
pro/noun
</p>
</div>
<!---- gender ----->
<div class="col-auto">
<p class="text-center" style="color:#fff; font-family:monospace; font-size:12px">
gender
</p>
</div>
</div>
<!---- voiceclaim ----->
<div class="col-auto justify-content-center">
<p class="text-center">
<div class="col-auto p-0" style="font-size:12px; color:#fff; font-family:monospace;">
<iframe class="flex-fill" style="height:1em;width:5em;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>
voiceclaim
</div>
</p>
</div>
<!------------ do not touch -------->
</div>
</div>
<!------------------------------------------------------------
End of SP
------------------------------------------------------------->
</div>
<!------------ end of main outer bg --------->
</div>
<!------------------------------------------------------------
Credits
[ do not remove ]
------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" class="text-muted" style="text-decoration:none; font-size:9px; font-family:monospace">✦✦✦</a></p>