Profile
CODE:
<div class="container mx-auto" style="max-width:1000px; font-size: 12px;">
<!--- BOX 1 -->
<div class="card-block rounded border-0 bg-dark text-white my-3 p-0" style="overflow: hidden;">
<div class="row no-gutters">
<!----------------------------
PICTURE BOX
----------------------------->
<div class="col-lg-5 p-0">
<div class="card card-block rounded border-0 m-auto h-100" style="
background: url('https://file.toyhou.se/images/6942970_KtJFVxIbXFOh16A.png?1521829406');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 600px;">
</div>
</div>
<!--- /PICTURE BOX -->
<div class="col-12 p-0 hidden-md-up">
<div class="card w-100 rounded-0 card-outline-danger" style="border-width:2px 0 0 0"></div>
</div>
<div class="col-auto p-0 hidden-md-down" style="margin-left: -2px;">
<div class="card h-100 rounded-0 card-outline-danger" style="border-width:0 2px 0 0"></div>
</div>
<!----------------------------
IDENTITY + PERSONALITY
----------------------------->
<div class="col-lg-7 pb-4 row no-gutters">
<!--- IDENTITY -->
<div class="col-12 p-4">
<div class="text-uppercase mb-3" style="font-size: 1.2rem; letter-spacing: 3px;">
<i class="fa fa-angle-right text-danger"></i>IDENTITY
</div>
<div class="row no-gutters d-flex justify-content-between p-0">
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Name</span>
<span>Name</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Gender</span>
<span>Gender</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Species</span>
<span>Species</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">DoB</span>
<span>Date of birth</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Age</span>
<span>Age</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Orientation</span>
<span>Orientation</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Height</span>
<span>Height</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Weight</span>
<span>Weight</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">MBTI</span>
<span>MBTI-A/T</span>
</div>
<div class="col-sm-6 d-flex px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="col-5 p-0 text-uppercase" style="font-weight: 500;">Theme</span>
<span><a class="text-danger" href="#">Title</a></span>
</div>
<!--- add more above -->
</div>
</div><!--- /IDENTITY -->
<hr class=" w-100 card-outline-danger mr-5">
<!--- PERSONALITY -->
<div class="col-12 p-4">
<div class="text-uppercase mb-3" style="font-size: 1.2rem; letter-spacing: 3px;">
<i class="fa fa-angle-right text-danger"></i>PERSONALITY
</div>
<span class="text-uppercase" style="letter-spacing: 1.4px;">
Adjective | Adjective | Adjective -
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
</p>
<span class="text-uppercase" style="letter-spacing: 1.4px;">
Adjective | Adjective | Adjective -
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
</p>
<span class="text-uppercase" style="letter-spacing: 1.4px;">
Adjective | Adjective | Adjective -
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
</p>
<!--- add more above -->
</div>
<!--- /PERSONALITY -->
</div><!--- /IDENTITY + PERSONALITY -->
</div>
</div>
<!--- /BOX 1 -->
<!--- BOX 2 -->
<div class="card-block rounded border-0 bg-dark text-white my-3 p-0" style="overflow: hidden;">
<div class="row no-gutters">
<!----------------------------
POWERS
---------------------------->
<div class="col-lg-7 row no-gutters">
<!------- POWER 1 ------------>
<div class="col-4 btn btn-outline-danger rounded-0 btn-outline-danger d-flex justify-content-end align-items-center" style="border-width: 0px 2px 1px 0px;
background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/17273519_Q0hEWNCWVQhWFpJ.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
"><i class="fa fa-caret-left text-danger" style="font-size: 4rem; margin-right:-4px"></i>
</div>
<div class="col-8 d-flex flex-column">
<div class="px-4 py-3">
<div class="col-12 py-2 px-0">
<div class="text-uppercase mb-3" style="font-size: 1.2rem; letter-spacing: 3px;"><i class="fa fa-angle-right text-danger"></i>Abilities
</div>
</div>
<div class="text-uppercase mb-1" style="font-size: 0.8rem; letter-spacing: 2px;">
<i class="fa fa-angle-right text-danger"></i>Power 1
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt. Mauris id purus ligula. Ut sit amet lorem gravida, tristique lectus nec, varius mi.
</p>
</div>
<div class="card rounded-0 border-0 mt-auto py-2 bg-danger text-white text-uppercase" style="font-size: 0.6rem; font-weight: 500; letter-spacing: 1px;">
<ul class="fa-ul px-2 my-2 my-md-0 mx-3 mx-md-4">
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
</ul>
</div>
</div>
<!------- /POWER 1 ----------->
<div class="col-auto flex-column p-0 hidden-md-down" style="margin-left: -2px;">
<div class="card h-50 mt-auto rounded-0 card-outline-danger" style="border-width:0 2px 0 0"></div>
</div>
<!------- POWER 2 ------------>
<div class="col-4 push-8 btn btn-outline-danger rounded-0 btn-outline-danger d-flex align-items-center" style="
background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/17273519_Q0hEWNCWVQhWFpJ.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
border-width: 0px 2px 0px 1px;
"><i class="fa fa-caret-right text-danger" style="font-size: 4rem; margin-left:-4px"></i>
</div>
<div class="col-8 pull-4 d-flex flex-column">
<div class="px-4 py-3">
<div class="text-uppercase mb-1" style="font-size: 0.8rem; letter-spacing: 2px;">
<i class="fa fa-angle-right text-danger"></i>Power 1
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt. Mauris id purus ligula. Ut sit amet lorem gravida, tristique lectus nec, varius mi.
</p>
</div>
<div class="card rounded-0 border-0 mt-auto py-2 bg-danger text-white text-uppercase" style="font-size: 0.6rem; font-weight: 500; letter-spacing: 1px;">
<ul class="fa-ul px-2 my-2 my-md-0 mx-3 mx-md-4">
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>Application</li>
</ul>
</div>
</div>
<!------- /POWER 2 ------------>
</div><!------- /POWERS ----------->
<!----------------------------
STATS + SKILLS
---------------------------->
<div class="col-lg-5 pb-4 row no-gutters d-flex align-items-start">
<div class="p-4">
<div class="text-uppercase mb-3" style="font-size: 1.2rem; letter-spacing: 3px;"><i class="fa fa-angle-right text-danger"></i>Stats
</div>
</div>
<!--- STATS -->
<div class="col-12">
<div class="row no-gutters d-flex justify-content-center p-5 m-1">
<div class="my-auto w-100" style="
background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/34925741_8RhBwLIfGul4C2s.png?1621267049');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
overflow: hidden;
">
<!-- Graph -->
<div class="p-1">
<div class="bg-danger" style="padding-top:100%;
clip-path:polygon(25% 6%, 69% 17%, 56% 50%, 76% 94%, 35% 78%, 12% 50%);
opacity: 0.8;"></div>
</div>
<!-- /Graph -->
</div>
<div class="d-card flex-column justify-content-between h-100 w-100 py-5 px-3 text-uppercase" style="position: absolute; top:0; left:0; font-size: 0.9rem; font-weight: 500;">
<div class="justify-content-around">
<span class="badge-pill badge-danger">Health</span>
<span class="badge-pill badge-danger">Stamina</span>
</div>
<div class="justify-content-between">
<span class="badge-pill badge-danger">Defence</span>
<span class="badge-pill badge-danger">Strength</span>
</div>
<div class="justify-content-around">
<span class="badge-pill badge-danger">Power</span>
<span class="badge-pill badge-danger">Speed</span>
</div>
</div>
</div>
</div><!--- /STATS -->
<hr class=" w-75 card-outline-danger mr-5" style="margin-left: -2px;">
<!--- SKILLS -->
<div class="col-12 px-4">
<!-- INTELLECT -->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="letter-spacing:1px;">Intellect</span>
<span class="my-auto progress w-50 bg-faded" style="height:10px"><span class="progress-bar bg-danger h-100"
style="width:60%">
</span></span>
</div>
<!-- SELF-CONTROL -->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="letter-spacing:1px;">Self-control</span>
<span class="my-auto progress w-50 bg-faded" style="height:10px"><span class="progress-bar bg-danger h-100"
style="width:60%">
</span></span>
</div>
<!-- DIPLOMACY -->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="letter-spacing:1px;">Diplomacy</span>
<span class="my-auto progress w-50 bg-faded" style="height:10px"><span class="progress-bar bg-danger h-100"
style="width:60%">
</span></span>
</div>
<!-- WISDOM -->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="letter-spacing:1px;">Wisdom</span>
<span class="my-auto progress w-50 bg-faded" style="height:10px"><span class="progress-bar bg-danger h-100"
style="width:60%">
</span></span>
</div>
<!-- CHARISMA -->
<div class="d-flex justify-content-between p-1">
<span class="text-uppercase" style="letter-spacing:1px;">Charisma</span>
<span class="my-auto progress w-50 bg-faded" style="height:10px"><span class="progress-bar bg-danger h-100"
style="width:60%">
</span></span>
</div>
<!---- add more above ---->
</div>
<!--- /SKILLS -->
</div><!--- /STATS + SKILLS -->
</div>
</div>
<!--- /BOX 2 -->
<!--- BOX 3 -->
<div class="card-block rounded border-0 bg-dark text-white my-3 p-0" style="overflow: hidden;">
<!----------------------------
RELATIONSHIPS + STORY
---------------------------->
<div class="no-gutters clearfix pl-lg-0 px-0 py-4">
<!--- RELATIONSHIPS -->
<div class="col-lg-4 text-white float-left d-flex justify-content-between mb-lg-3 mb-4 mr-lg-4">
<div class="col-auto card card-outline-danger rounded-0 px-4 pb-4" style="border-width: 0px 0px 1px 0px;">
<div class="text-uppercase mb-lg-4 mb-3" style="font-size: 1.2rem; letter-spacing: 3px;">
<i class="fa fa-angle-right text-danger"></i>RELATIONSHIPS
</div>
<!-- 01 -->
<div class="pb-3">
<a class="text-danger" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i style="opacity:0.7;">
relationship
</i>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna.
</p>
</div>
<!-- /01-->
<!-- 02 -->
<div class="pb-3">
<a class="text-danger" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i style="opacity:0.7;">
relationship
</i>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna.
</p>
</div>
<!-- /02-->
<!-- 03 -->
<div class="pb-3">
<a class="text-danger" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i style="opacity:0.7;">
relationship
</i>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna.
</p>
</div>
<!-- /03-->
<!---- add more above ---->
</div>
<div class="col-auto justify-content-between p-0 hidden-xs-down" style="margin-left: 0px;">
<div class="card h-50 mt-auto rounded-0 card-outline-danger" style="border-width:0 0px 0px 2px;"></div>
</div>
</div>
<!--- /RELATIONSHIPS -->
<!--- STORY -->
<div class="text-uppercase mb-3 px-4 pt-4 p-lg-0" style="font-size: 1.2rem; letter-spacing: 3px;">
<i class="fa fa-angle-right text-danger"></i>STORY
</div>
<div class="px-4">
<!--- Title 1 --->
<div class="text-uppercase justify-content-between my-2" style="font-size: 01rem;">
Title 1
<hr class="col card-outline-danger w-100 mx-3 my-auto">
</div>
<p>
Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.sdfsdgdf
</p>
<p>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.
</p>
<p>
Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.
</p>
<!--- Title 2 --->
<div class="text-uppercase justify-content-between my-2" style="font-size: 01rem;">
Title 2
<hr class="col card-outline-danger w-100 mx-3 my-auto">
</div>
<p>
Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.
</p>
<p>
Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta.Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta.Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta.
</p>
<!---- add more above ---->
</div>
</div><!--- /STATS + SKILLS -->
</div>
<!--- /BOX 3 -->
<!----------------------------
CREDITS
Please don't remove
----------------------------->
<div class="col-12 text-right w-100 px-2">
<a href="https://toyhou.se/Oryl" class="text-dark" style="font-size: 16px;">
<i class="fas fa-code tooltipster" data-placement="left" title="code by Oryl"></i>
</a><!---- END CREDITS ---->
</div>
</div>
Recent Images
No images.