Profile
<!-------------------------------------------
| TRAILS OF FIRE |
| by Zylphide |
---------------------------------------------
screenshots from promare, via:
https://engolras.tumblr.com/post/189689588421/lio-fotia-icons
https://promare.fandom.com/wiki/Lio
https://twitter.com/gkidsfilms/status/1245848485959626752
COLORS:
text: #fff
name plate background: #000
text box background: rgba(0,0,0,0.85)
line dividers: #595555
---->
<div class="row justify-content-center">
<!--- background photo ---->
<div class="col-lg-10 px-5 py-2 mt-4" style="color: #fff; min-height: 650px; background: url(https://i.imgur.com/gypydxT.png); background-repeat: no-repeat; background-size: cover;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;">
<!--- name plate ---->
<div class="col-10 display-4 mt-2 mr-4" style="background: #000; margin-bottom:-14px; margin-left: -20px">
<div class="row px-4 py-2">
<!---- triangles ---->
<div class="col-1" style="margin-top: -50px">
<div class="justify-content-center align-items-center" style="height: 100px; width: 100px; background: #F27CFF; clip-path: polygon(50% 0%, 0 88%, 100% 88%); ">
<div style="height: 70px; width: 70px; background: #52FFF1; clip-path: polygon(50% 0%, 0 88%, 100% 88%); "></div>
</div>
</div>
<!--- triangles END ---->
<!--- name ---->
<div class="col my-auto" style="text-align: right; font-size: 2.6rem; letter-spacing: 2px;">
LIO FOTIA
</div>
<!--- name END --->
</div>
</div>
<!--- name plate END ---->
<!--- inner box ---->
<div class="col-lg-12" style="min-height: 550px; background: rgba(0,0,0,0.85);
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;">
<div class="row p-3">
<!---- text-based info (write as much as you want here, all the boxes will stretch to maintain the correct alignments) --->
<div class="col-lg-9 px-3 py-2 d-flex" style="flex-direction:column">
<!--- top row ---->
<div class="row my-2">
<!---- personality info ---->
<div class="col-lg-7 d-flex justify-content-between px-2" style="flex-direction:column;">
<div class="container-fluid p-3 h-100 d-flex" style="background: rgba(0,0,0,0.5);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<p class="display-4" style="font-size: 1.25rem; letter-spacing: 2px;"><b>PERSONALITY</b></p>
<p> Sed reprehenderit totam and anim. Culpa incididunt. Enim velitesse molestiae. Aperiam non for eos for quasi or laboriosam for sed omnis. Voluptate illo nequeporro est irure sit mollit. Tempor voluptate for eius and laudantium but sit so numquam. Magna quaerat. Vel nequeporro so nulla, or eos or aut and aperiam but explicabo. Consequuntur occaecat fugit, for excepteur deserunt, so magni. Veniam exercitation. Aliquid commodo. </p>
</div>
</div>
<!---- personality info END ---->
<!--- basic stats ---->
<div class="col-lg-5 px-2">
<div class="container-fluid rounded d-flex justify-content-between py-3 px-4 h-100" style="background: rgba(0,0,0,0.5);
flex-direction:column;">
<p class="display-4 mb-3" style="font-size: 1.25rem; letter-spacing: 2px;"><b>TRAITS</b></p>
<!---- stat 1 ----->
<div class="d-flex justify-content-between px-3">
<span style="font-weight:bold; letter-spacing: 1px;">stat</span>
<i>info</i>
</div>
<!---- stat 1 END ---->
<hr class="my-1 w-100" style="background: #595555">
<!---- stat 2 ----->
<div class="d-flex justify-content-between px-3">
<span style="font-weight:bold; letter-spacing: 1px;">stat</span>
<i>info</i>
</div>
<!---- stat 2 END ---->
<hr class="my-1 w-100" style="background: #595555">
<!---- stat 3 ----->
<div class="d-flex justify-content-between px-3">
<span style="font-weight:bold; letter-spacing: 1px;">stat</span>
<i>info</i>
</div>
<!---- stat 3 END ---->
<hr class="my-1 w-100" style="background: #595555">
<!---- stat 4 ----->
<div class="d-flex justify-content-between px-3">
<span style="font-weight:bold; letter-spacing: 1px;">stat</span>
<i>info</i>
</div>
<!---- stat 4 END ---->
<hr class="my-1 w-100" style="background: #595555">
<!---- stat 5 ----->
<div class="d-flex justify-content-between px-3">
<span style="font-weight:bold; letter-spacing: 1px;">stat</span>
info
</div>
<!---- stat 5 END ---->
</div>
</div>
<!--- basic stats END ---->
</div>
<!--- top row END ---->
<!--- bottom row ---->
<div class="row my-2">
<!--- backstory ----->
<div class="col-lg-12 px-2">
<div class="container-fluid rounded py-3 px-4 h-100" style="background: rgba(0,0,0,0.5);
">
<p class="display-4" style="font-size: 1.25rem; letter-spacing: 2px;"><b>BACKGROUND</b></p>
<p> Sed reprehenderit totam and anim. Culpa incididunt. Enim velitesse molestiae. Aperiam non for eos for quasi or laboriosam for sed omnis. Voluptate illo nequeporro est irure sit mollit. Tempor voluptate for eius and laudantium but sit so numquam. Magna quaerat. Vel nequeporro so nulla, or eos or aut and aperiam but explicabo. Consequuntur occaecat fugit, for excepteur deserunt, so magni. Veniam exercitation. Aliquid commodo. </p>
<p> Lorem dolorem nostrud, so consequuntur or si or fugit yet numquam. Aliquam dolores, for aliquip. Aliquid. Magna aut or magni. Qui commodo for labore. Sit ratione so reprehenderit beatae and ad exercitationem amet. Consequuntur ea aliquid ipsam vitae. Accusantium sunt exercitationem, for perspiciatis for labore. Molestiae adipisicing or autem and ad perspiciatis consequatur for nequeporro. ncidunt iure for cupidatat and sint or quasi consequuntur. </p>
</div>
</div>
<!--- backstory END ----->
</div>
<!--- bottom row END --->
</div>
<!---- text-based info END --->
<!--- photos (don't put more than 3 photos here unless you have enough text in the right area to stretch out the boxes, otherwise the alignments will be off; all images are centered) ---->
<div class="col-lg-3 px-3 py-2 d-flex" style="flex-direction:column">
<div class="container-fluid rounded row h-100 align-items-center my-2" style="background: rgba(0,0,0,0.5); ">
<!--- photo 1 ---->
<div class="col-12 rounded my-auto" style="height: 140px; background: url(https://64.media.tumblr.com/d56533bac2519920ea63f6b35b77b621/806370a2836483cb-ed/s640x960/9fe91425a8b1c970d6e0c32cf3ebe1c8e08afb36.png); background-size: cover; background-repeat: no-repeat; background-position: center"></div>
<!--- photo 1 END ---->
<!--- photo 2 ---->
<div class="col-12 rounded my-auto" style="height: 140px; background: url(https://i0.wp.com/thegeekiary.com/wp-content/uploads/2019/08/promare-bamensha_022-e1566939146132.jpg?resize=592%2C333&ssl=1); background-size: cover; background-repeat: no-repeat; background-position: centert"></div>
<!--- photo 2 END ---->
<!--- photo 3 ---->
<div class="col-12 rounded my-auto" style="height: 140px; background: url(https://pbs.twimg.com/media/EUoWB_TWAAIma2u?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; background-position: center"></div>
<!--- photo 3 END ---->
</div>
</div>
<!--- photos END ---->
</div>
</div>
<!--- inner box END --->
<!--- credits, do not remove! --->
<a class="col-12 mt-1" style="color: #000; font-size: 12px; display: block; text-align: center" href="https://toyhou.se/Zylphide"><i class="fad fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
<!--- credits end ---->
</div>
</div>
Recent Images
No images.