Profile
CODE:
<div class="flex-row no-gutters w-100 mx-auto my-5" style="max-width:510px;">
<div class="col">
<div class="card w-75 bg-dark card-outline-secondary rounded-0 border-0" style="height:1px;position:absolute;"></div>
<div class="card h-25 bg-dark card-outline-secondary rounded-0 border-0" style="width:1px;position:absolute;"></div>
<div class="card w-25 bg-dark card-outline-secondary rounded-0 border-0 text-right" style="height:1px;position:absolute;bottom:0;right:-25px;font-size:12px;">
<!----------------------------
CREDITS
Please don't remove
----------------------------->
<a class="text-dark py-1" href="https://toyhou.se/Oryl"><i class="far fa-code tooltipster" data-placement="left" title="code by Oryl"></i></a>
</div>
<div class="card h-25 bg-dark card-outline-secondary rounded-0 border-0" style="width:1px;position:absolute; bottom:0; right:-25px;"></div>
<!---------------------------
PICTURE + NAME
----------------------------->
<div class="row no-gutters card bg-dark border-0 rounded w-auto my-4 ml-4" style="width: 420px; height: 630px; overflow-x:hidden;
background: url(https://file.toyhou.se/images/6396677_ARV5yD6kxEB2NT6.jpg?1518012807);
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
<div class="card-block p-0">
<div class="col-md-12 p-0 accordion h-100" id="accordion" style="font-size: 13px;">
<!-- ------------------------------
ONE
------------------------------- -->
<div id="one" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Infos
</div>
<!---- INFOS ---->
<div class="d-flex flex-wrap no-gutters px-1" style="letter-spacing: 1px;">
<div class="col-5 text-uppercase" style="font-weight: 500;">Species</div>
<div class="col-7">Species</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Age</div>
<div class="col-7">Age</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Gender</div>
<div class="col-7">Gender</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Height</div>
<div class="col-7">Height</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Weight</div>
<div class="col-7">Weight</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Date of birth</div>
<div class="col-7">Date of birth</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Orientation</div>
<div class="col-7">Orientation</div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Voice</div>
<div class="col-7"><a class="text-secondary" href="#">Name</a></div>
<div class="col-5 text-uppercase" style="font-weight: 500;">Theme</div>
<div class="col-7"><a class="text-secondary" href="#">Title</a></div>
<!---- add more above ---->
</div>
<hr class="card-outline-secondary mx-3 my-4"> <!-- divider -->
<!---- FACTS ---->
<ul class="px-4">
<li>Fact 1</li>
<li>Fact 2</li>
<li>Fact 3</li>
</ul>
</div>
</div>
<!-- ------------------------------
TWO
------------------------------- -->
<div id="two" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Personality
</div>
<!---- PERSONALITY ---->
<div class="px-1">
<div class="text-uppercase mb-2" style="font-size: 16px; font-style: italic; letter-spacing: 1px;">
- MBTI-T/A
</div>
<div class="text-uppercase" style="font-size: 15px;letter-spacing: 1px;">
Adjective | Adjective | Adjective -
</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.
</p>
<div class="text-uppercase" style="font-size: 15px;letter-spacing: 1px;">
Adjective | Adjective | Adjective -
</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.
</p>
<div class="text-uppercase" style="font-size: 15px;letter-spacing: 1px;">
Adjective | Adjective | Adjective -
</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.
</p>
<!---- add more above ---->
</div>
</div>
</div>
<!-- ------------------------------
THREE
------------------------------- -->
<div id="three" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Abilities
</div>
<div class="px-1">
<!-- POWER -->
<div class="row no-gutters">
<div class="text-uppercase" style="font-size: 15px; letter-spacing: 1px;">
Power -
</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.
</p>
<div class="text-uppercase bg-white w-100 rounded my-2" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul mx-4 my-2">
<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>
<hr class="card-outline-secondary mx-3 my-4"> <!-- divider -->
<!-- POWER -->
<div class="row no-gutters">
<div class="text-uppercase" style="font-size: 15px; letter-spacing: 1px;">
Power -
</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.
</p>
<div class="text-uppercase bg-white w-100 rounded my-2" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul mx-4 my-2">
<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>
<hr class="card-outline-secondary mx-3 my-4"> <!-- divider -->
<!-- POWER -->
<div class="row no-gutters">
<div class="text-uppercase" style="font-size: 15px; letter-spacing: 1px;">
Power -
</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.
</p>
<div class="text-uppercase bg-white w-100 rounded my-2" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul mx-4 my-2">
<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>
<!---- add more above ---->
</div>
</div>
</div>
<!-- ------------------------------
FOUR
------------------------------- -->
<div id="four" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Stats & Skills
</div>
<!--- STATS -->
<div class="col-12">
<div class="row no-gutters d-flex justify-content-center p-5">
<div class="w-100" style="
background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35160886_dhghtk3fA3hBJm2.png?1621771933');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
overflow: hidden;
">
<!-- Graph -->
<div class="p-1">
<div class="bg-dark" 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-0 text-uppercase" style="position: absolute; top:0; left:0; font-size: 0.7rem; font-weight: 500;">
<div class="justify-content-around">
<span>Health</span>
<span>Stamina</span>
</div>
<div class="justify-content-between">
<span>Defence</span>
<span>Strength</span>
</div>
<div class="justify-content-around">
<span>Power</span>
<span>Speed</span>
</div>
</div>
</div>
</div><!--- /STATS -->
<hr class="card-outline-secondary mx-3 mb-4"> <!-- divider -->
<div class="px-1" style="font-size: 15px; letter-spacing:1px;">
<!-- SKILL -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase">Skill</span>
<span class="my-auto progress w-50 bg-white" style="height:12px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- SKILL -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase">Skill</span>
<span class="my-auto progress w-50 bg-white" style="height:12px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- SKILL -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase">Skill</span>
<span class="my-auto progress w-50 bg-white" style="height:12px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- SKILL -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase">Skill</span>
<span class="my-auto progress w-50 bg-white" style="height:12px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!---- add more above ---->
</div>
</div>
</div>
<!-- ------------------------------
FIVE
------------------------------- -->
<div id="five" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Story
</div>
<div class="px-1">
<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.
</p>
<div class="text-uppercase justify-content-between my-2" style="font-size: 15px; letter-spacing: 1px;">
Title 1
<hr class="col 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.
</p>
<div class="text-uppercase justify-content-between my-2" style="font-size: 15px; letter-spacing: 1px;">
Title 2
<hr class="col 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.
</p>
<!---- add more above ---->
</div>
</div>
</div>
<!-- ------------------------------
SIX
------------------------------- -->
<div id="six" class="collapse" data-parent="#accordion">
<div class="p-4 bg-faded rounded-top table-responsive" style="height:540px; opacity: 0.9; min-width:calc(100% + 16px); overflow-y:scroll;">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 2px;">
❚Relationships
</div>
<div class="px-1">
<!-- rela -->
<div class="pb-3">
<div class="d-flex justify-content-between align-items-end">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="font-size:15px;letter-spacing: 1px;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0" style="padding-top: 3px; font-size: 9px;">
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
</span>
</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.
</p>
</div>
<!-- end rela -->
<!-- rela -->
<div class="pb-3">
<div class="d-flex justify-content-between align-items-end">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="font-size:15px;letter-spacing: 1px;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0" style="padding-top: 3px; font-size: 9px;">
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
</span>
</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.
</p>
</div>
<!-- end rela -->
<!-- rela -->
<div class="pb-3">
<div class="d-flex justify-content-between align-items-end">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="font-size:15px;letter-spacing: 1px;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0" style="padding-top: 3px; font-size: 9px;">
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
</span>
</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.
</p>
</div>
<!-- end rela -->
<!-- rela -->
<div class="pb-3">
<div class="d-flex justify-content-between align-items-end">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="font-size:15px;letter-spacing: 1px;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0" style="padding-top: 3px; font-size: 9px;">
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
<i class="fas fa-plus"></i>
</span>
</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.
</p>
</div>
<!-- end rela -->
<!-- More above-->
</div>
</div>
</div>
</div>
</div>
<!---------------------------
NAME + QUOTE
----------------------------->
<div class="card-footer bg-dark text-white text-right" style="height: 90px;">
<div class="display-4 text-uppercase" style="font-size:26px;">
Firstname Lastname
</div>
<div class="display-4 my-1" style="font-size:18px;">
<i class="fal fa-angle-double-left" style="font-size:0.8rem;"></i>
Quote blablabla
<i class="fal fa-angle-double-right" style="font-size:0.8rem;"></i>
</div>
</div>
</div>
</div>
<div class="col-auto my-5 card bg-dark border-0 rounded-0" style=" width: 1px; margin-left: -1px;"></div>
<div class="col-auto my-5" style="margin-left:-1px;">
<!---------------------------
NAVBAR
----------------------------->
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#one" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-user fa-fw my-auto"></i>
</a>
</div>
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#two" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-head-side fa-fw my-auto"></i>
</a>
</div>
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#three" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-fire fa-fw my-auto"></i>
</a>
</div>
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#four" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-chart-bar fa-fw my-auto"></i>
</a>
</div>
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#five" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-book fa-fw my-auto"></i>
</a>
</div>
<div class="rounded-right bg-dark text-white my-3" style="letter-spacing:1px;">
<a data-toggle="collapse" data-target="#six" class="btn border-0 py-3"
style="font-size:18px;cursor:pointer;">
<i class="fal fa-users fa-fw my-auto"></i>
</a>
</div>
<!-- More above-->
</div>
</div>
Recent Images
No images.