Profile
CODE:
<div class="container p-0 mx-auto mb-4 pb-4">
<div class="row no-gutters">
<!----------------------------
PICTURE BOX
----------------------------->
<div class="col-md-5 push-md-7 p-md-2 p-0">
<div class="card-block rounded border-0 m-auto p-0 text-center" style="height: 0px;">
<img src="http://file.toyhou.se/images/4511259_rcKssh6GfjTB224.png"><!--- PICTURE --->
</div>
</div><!---- END COLUMN PICTURE ---->
<div class="hidden-md-up p-0 m-0" style="height:600px;"></div>
<div class="col-md-7 pull-md-5 p-0 pt-2 pt-md-0" style="font-size: 12px;">
<div class="row no-gutters">
<!----------------------------
BASIC INFO
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Info
</div>
<div class="row no-gutters">
<div class="col-sm">
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Name</span>
<span>Lastname Firstname</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Species</span>
<span>Species</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Age</span>
<span>Age</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Height</span>
<span>Height</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Weight</span>
<span>Weight</span>
</div>
<!---- add more above ---->
</div>
<div class="col-auto p-2 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm">
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Gender</span>
<span>Gender</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Date of Birth</span>
<span>Date of Birth</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Orientation</span>
<span>Orientation</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Voice</span>
<span><a class="text-muted" href="#" target="_blank">Name</a></span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Theme</span>
<span><a class="text-muted" href="#" target="_blank">♫</a></span>
</div>
<!---- add more above ---->
</div>
</div>
</div>
</div><!---- END BASIC INFO ---->
<!----------------------------
PERSONALITY
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Personality
</div>
<div class="px-1">
<div class="text-uppercase mb-2" style="font-size: 14px; font-style: italic; letter-spacing: 1px;">
- MBTI-T/A
</div>
<div class="text-uppercase" style="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="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="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><!---- END PERSONALITY ---->
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 p-0 pt-sm-2 pt-md-0" style="font-size: 12px;">
<div class="row no-gutters">
<!----------------------------
STATS
----------------------------->
<div class="col-lg-3 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Stats
</div>
<div class="px-1" style="font-size: 11px;">
<!-- HEALTH -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Health</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- STAMINA -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Stamina</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- STRENGTH -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Strenght</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- POWER -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Power</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- SPEED -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Speed</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- DEFENSE -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Defence</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- INTELLECT -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Intellect</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!---- More above ---->
</div>
</div>
</div><!---- END STATS ---->
<!----------------------------
POWER
----------------------------->
<div class="col-lg-9 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Powers
</div>
<div class="px-1">
<!-- POWER -->
<div class="row no-gutters">
<div class="col-sm">
<div class="text-uppercase" style="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>
<div class="col-auto py-1 px-1 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm-3 text-uppercase align-items-center" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul 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 -->
<div class="row no-gutters mt-3">
<div class="col-sm">
<div class="text-uppercase" style="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>
<div class="col-auto py-1 px-1 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm-3 text-uppercase align-items-center" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul 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>
</div>
</div>
</div><!---- END POWER ---->
<!----------------------------
STORY
----------------------------->
<div class="col-lg-9 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Story
</div>
<div class="px-1">
<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. Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
</p>
<p>
Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
</p>
<p>
<img class="float-right m-2" src="http://file.toyhou.se/images/4950486_Ah3TAcJrmw0B4MV.png?1506615855" width="100" height="50">
Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat.
</p>
</div>
</div>
</div><!---- END STORY ---->
<div class="col-lg-3 ">
<div class="row no-gutters h-100">
<!----------------------------
SKILLS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Skills
</div>
<div class="px-1" style="font-size: 11px;">
<!-- 01 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 02 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 03 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 04 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!---- More above ---->
</div>
</div>
</div><!---- END STATS ---->
<!----------------------------
FACTS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0 ">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-2">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Trivia
</div>
<div class="px-1">
<ul class="fa-ul ml-3">
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<!---- More above ---->
</ul>
</div>
</div>
</div><!---- END STATS ---->
</div>
</div>
<!----------------------------
RELATIONSHIPS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0 ">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Relationships
</div>
<div class="row no-gutters d-flex px-0">
<!-- 01 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 01 -->
<!-- 02 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 02 -->
<!-- 03 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 03 -->
<!-- 04 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 04 -->
<!---- More above ---->
</div>
</div>
</div><!---- END RELATIONSHIPS ---->
<!----------------------------
CREDITS
Please don't remove
----------------------------->
<a href="https://toyhou.se/Oryl" class="text-right text-dark w-100 px-2" style="font-size: 14px; height: 0px;">
<i class="fal fa-code tooltipster" data-placement="left" title="code by Oryl"></i>
</a><!---- END CREDITS ---->
</div>
</div>
</div>
</div>
Transparent picture version
❚Personality
- MBTI-T/A
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
❚Stats
Health
Stamina
Strenght
Power
Speed
Defence
Intellect
❚Powers
Power -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
- Application
- Application
- Application
Power -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
- Application
- Application
- Application
❚Story
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. Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat.
❚Skills
Skill
Skill
Skill
Skill
❚Trivia
- Fact
- Fact
- Fact
- Fact
- Fact
❚Relationships
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
CODE:
<div class="container p-0 mx-auto mb-4 pb-4">
<div class="row no-gutters">
<!----------------------------
PICTURE BOX
----------------------------->
<div class="col-md-5 push-md-7 p-md-2 p-0">
<div class="card-block rounded border-0 m-auto h-100 p-0 text-center" style="
background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/31590273_gWwInDml912zvRE.png?1616242831');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
">
</div>
</div><!---- END COLUMN PICTURE ---->
<div class="hidden-md-up p-0 m-0" style="height:600px;"></div>
<div class="col-md-7 pull-md-5 p-0 pt-2 pt-md-0" style="font-size: 12px;">
<div class="row no-gutters">
<!----------------------------
BASIC INFO
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Info
</div>
<div class="row no-gutters">
<div class="col-sm">
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Name</span>
<span>Lastname Firstname</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Species</span>
<span>Species</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Age</span>
<span>Age</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Height</span>
<span>Height</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Weight</span>
<span>Weight</span>
</div>
<!---- add more above ---->
</div>
<div class="col-auto p-2 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm">
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Gender</span>
<span>Gender</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Date of Birth</span>
<span>Date of Birth</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Orientation</span>
<span>Orientation</span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Voice</span>
<span><a class="text-muted" href="#" target="_blank">Name</a></span>
</div>
<div class="d-flex justify-content-between px-1" style="font-size: 12px; letter-spacing: 2px;">
<span class="text-uppercase" style="font-weight: 500;">Theme</span>
<span><a class="text-muted" href="#" target="_blank">♫</a></span>
</div>
<!---- add more above ---->
</div>
</div>
</div>
</div><!---- END BASIC INFO ---->
<!----------------------------
PERSONALITY
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Personality
</div>
<div class="px-1">
<div class="text-uppercase mb-2" style="font-size: 14px; font-style: italic; letter-spacing: 1px;">
- MBTI-T/A
</div>
<div class="text-uppercase" style="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="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="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><!---- END PERSONALITY ---->
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 p-0 pt-sm-2 pt-md-0" style="font-size: 12px;">
<div class="row no-gutters">
<!----------------------------
STATS
----------------------------->
<div class="col-lg-3 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Stats
</div>
<div class="px-1" style="font-size: 11px;">
<!-- HEALTH -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Health</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- STAMINA -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Stamina</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- STRENGTH -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Strenght</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- POWER -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Power</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- SPEED -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Speed</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- DEFENSE -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Defence</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!-- INTELLECT -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">Intellect</span>
<span class="my-auto progress w-50 bg-faded rounded-0" style="height:9px"><span class="progress-bar bg-dark h-100"
style="width:60%">
</span></span>
</div>
<!---- More above ---->
</div>
</div>
</div><!---- END STATS ---->
<!----------------------------
POWER
----------------------------->
<div class="col-lg-9 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Powers
</div>
<div class="px-1">
<!-- POWER -->
<div class="row no-gutters">
<div class="col-sm">
<div class="text-uppercase" style="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>
<div class="col-auto py-1 px-1 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm-3 text-uppercase align-items-center" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul 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 -->
<div class="row no-gutters mt-3">
<div class="col-sm">
<div class="text-uppercase" style="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>
<div class="col-auto py-1 px-1 hidden-xs-down">
<div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
</div>
<div class="col-sm-3 text-uppercase align-items-center" style="font-weight:700; font-size: 10px;">
<ul class="fa-ul 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>
</div>
</div>
</div><!---- END POWER ---->
<!----------------------------
STORY
----------------------------->
<div class="col-lg-9 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Story
</div>
<div class="px-1">
<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. Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
</p>
<p>
Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
</p>
<p>
<img class="float-right m-2" src="http://file.toyhou.se/images/4950486_Ah3TAcJrmw0B4MV.png?1506615855" width="100" height="50">
Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat.
</p>
</div>
</div>
</div><!---- END STORY ---->
<div class="col-lg-3 ">
<div class="row no-gutters h-100">
<!----------------------------
SKILLS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Skills
</div>
<div class="px-1" style="font-size: 11px;">
<!-- 01 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 02 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 03 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!-- 04 -->
<div class="d-flex justify-content-between pb-1">
<span class="text-uppercase" style="letter-spacing:1px;">
Skill
</span>
<span>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fas fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
<i class="fal fa-rectangle-wide"></i>
</span></span>
</div>
<!---- More above ---->
</div>
</div>
</div><!---- END STATS ---->
<!----------------------------
FACTS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0 ">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-2">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Trivia
</div>
<div class="px-1">
<ul class="fa-ul ml-3">
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<li><span class="fa-li"><i style="font-size:0.6rem" class="fal fa-minus"></i></i></span>Fact</li>
<!---- More above ---->
</ul>
</div>
</div>
</div><!---- END STATS ---->
</div>
</div>
<!----------------------------
RELATIONSHIPS
----------------------------->
<div class="col-lg-12 py-2 px-lg-2 px-sm-0 ">
<div class="card card-block bg-faded rounded h-100 pt-3 pb-4">
<div class="text-uppercase mb-3" style="font-size: 20px; letter-spacing: 3px;">
❚Relationships
</div>
<div class="row no-gutters d-flex px-0">
<!-- 01 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 01 -->
<!-- 02 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 02 -->
<!-- 03 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 03 -->
<!-- 04 -->
<div class="col-lg-4 col-sm-6 pb-3 px-1">
<div class="d-flex justify-content-between">
<span>
<a class="text-dark" href="#" target="_blank"><span class="text-uppercase" style="letter-spacing: 2px; font-weight: 500;">Name</span></a>
- <i class="text-muted">
relationship
</i>
</span>
<span class="px-0 px-md-3" 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 04 -->
<!---- More above ---->
</div>
</div>
</div><!---- END RELATIONSHIPS ---->
<!----------------------------
CREDITS
Please don't remove
----------------------------->
<a href="https://toyhou.se/Oryl" class="text-right text-dark w-100 px-2" style="font-size: 14px; height: 0px;">
<i class="fal fa-code tooltipster" data-placement="left" title="code by Oryl"></i>
</a><!---- END CREDITS ---->
</div>
</div>
</div>
</div>
BG picture version
❚Personality
- MBTI-T/A
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Adjective | Adjective | Adjective -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
❚Stats
Health
Stamina
Strenght
Power
Speed
Defence
Intellect
❚Powers
Power -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
- Application
- Application
- Application
Power -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
- Application
- Application
- Application
❚Story
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. Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
Praesent sit amet sem eu lacus finibus posuere sed a nisi. Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet.
Morbi eleifend fermentum vulputate. Integer eget nulla rhoncus, congue neque quis, finibus massa. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat quam hendrerit vulputate. Vivamus eu velit sit amet nulla finibus laoreet. Aliquam ut mollis metus. Aenean euismod nibh mi, vulputate volutpat.
❚Skills
Skill
Skill
Skill
Skill
❚Trivia
- Fact
- Fact
- Fact
- Fact
- Fact
❚Relationships
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Name
-
relationship
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
Comments