Profile
SILENT
#02<!--
HTML Theme 02: Silent by Sylladexter
Vanilla Ver.
> accent color: #A0BF6B
(Use find and replace for easy color swapping.)
> Do not resell or repost
> Do not remove credit
-->
<!--------------------------
>>>> CONTAINER
---------------------------->
<div class="container text-muted p-0" style="font-size:14px">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<!--------------------------
>>>> CONTENT
---------------------------->
<div class="row no-gutters p-2">
<!--------------------------
>>>> SECTION 01: SIDEBAR (Profile picture, Basic Info)
---------------------------->
<div class="col-lg-4 order-lg-2 p-2">
<div class="card bg-faded text-center border-0 p-4">
<div class="row no-gutters">
<!--------------------------
>>>> Profile Picture (Must be square)
---------------------------->
<div class="col-12">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/YBg6ghh.png"
style="width:200px;">
</div>
<!--------------------------
>>>> Name and Occupation
---------------------------->
<div class="col-12 p-3">
<!--------------------------
>>>> Name & Font Awesome Icon
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<!-- Font Awesome -->
<span class="fa-stack fa-2x" style="font-size:12px">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="far fa-user-circle text-white fa-stack-1x"></i>
<!-- Name -->
</span> Name Here</h1>
<!--------------------------
>> Occupation
---------------------------->
<p class="font-italic text-lowercase" style="font-size:11px;">
Occupation</p>
<hr class="my-2">
</div>
</div>
<!--------------------------
>>>> Basic Info
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> Age
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Age</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Birthday
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Birthday</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Gender/Pronouns
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Gender</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Sexuality
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Sexuality</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Height
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Height</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Nickname
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Nickname(s)</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Weapon (you can change this if you'd like)
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Weapon</span>
<!-- info -->
<span>[info]</span>
</div>
</div>
</div>
</div> <!-- END OF SIDEBAR -->
<!--------------------------
>>>> NAV
---------------------------->
<div class="col-12 order-lg-1">
<div class="row no-gutters p-2">
<!-- divider -->
<div class="col-2 p-1">
<hr class="w-100">
</div>
<!--------------------------
>> Nav
---------------------------->
<div class="col-8 my-auto">
<ul class="nav row text-lowercase px-3" style="letter-spacing:1px;">
<!--------------------------
>> story
---------------------------->
<li class="nav-item col p-1">
<a href="#story" class="btn d-block btn-default border-0 border-0 nav-link p-1 active" data-toggle="tab">story</a>
</li>
<!--------------------------
>> about
---------------------------->
<li class="nav-item col p-1">
<a href="#about" class="btn d-block btn-default border-0 border-0 p-1 nav-link" data-toggle="tab">about</a>
</li>
<!--------------------------
>> relationships
---------------------------->
<li class="nav-item col p-1">
<a href="#relationships" class="btn d-block btn-default border-0 border-0 p-1 nav-link" data-toggle="tab">relationships</a>
</li>
</ul>
</div>
<div class="col-2 p-1">
<hr class="w-100">
</div>
</div>
</div> <!-- END OF NAV -->
<!--------------------------
>>>> SECTION 02: BODY
---------------------------->
<div class="col-lg-8 order-lg-3 p-2">
<div class="card border-0 bg-faded" style="height:549px;">
<div class="row no-gutters table-responsive tab-content" >
<!--------------------------
>>>> STORY
---------------------------->
<div id="story" class="col-12 tab-pane fade show active p-2 h-100" >
<!--------------------------
>>>> Intro
---------------------------->
<div class="row align-content-center mx-auto text-center" style="min-height:500px;">
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<hr class="w-50 my-0">
<!--------------------------
>> intro quote
---------------------------->
<div class="col-12 p-2">
<h1 style="color:#A0BF6B;font-size:20px;" class="p-4 text-lowercase font-italic display-4 m-0">
"A quote of sorts..."</h1>
<!--------------------------
>> adjectives
---------------------------->
<p class="p-1 m-0">
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
</p>
<!--------------------------
>> blurb
---------------------------->
<p class="text-center font-italic p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat
efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum
lacinia
erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> read more (removable)
---------------------------->
<p class="pb-4">
<a href="#para" data-toggle="collapse" style="color:#A0BF6B">continue reading <i class="fas fa-caret-right"></i>
</a></p>
</div>
<!--------------------------
>> divider
---------------------------->
<hr class="w-50 my-0">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>>>> Full Story (optional: remove if you just want a blurb.)
---------------------------->
<div id="para" class="my-4 p-3 collapse" aria-expanded="false">
<!--------------------------
>> side image: width 300px
---------------------------->
<img
class="img-thumbnail ml-2 mb-2 float-right"
style="width:300px;"
src="https://pa1.narvii.com/5946/92b368322fbc881b2b8c428882486692a638b8c3_hq.gif">
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<!--------------------------
>> divider
---------------------------->
<div class="row no-gutters my-4">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>> story quote container
---------------------------->
<div class="card card-block p-4 col-lg-4 col-12 float-lg-left mr-lg-3 mb-3">
<div class="row no-gutters align-items-center mx-auto">
<!--------------------------
>> decorative stuff
---------------------------->
<div class="col-5">
<hr class="w-100 my-0">
</div>
<div class="col-2 text-center">
<i class="fas fa-quote-left"></i>
</div>
<div class="col-5">
<hr class="w-100 my-0">
</div>
<!--------------------------
>> story quote
---------------------------->
<div class="col-12 p-3">
<p class="text-center font-italic p-2">
Some cool quote goes here. Be creative!
</p>
</div>
<!--------------------------
>> decorative stuff
---------------------------->
<div class="col-5">
<hr class="w-100 my-0">
</div>
<div class="col-2 text-center">
<i class="fas fa-quote-right"></i>
</div>
<div class="col-5">
<hr class="w-100 my-0">
</div>
</div>
</div> <!-- END OF EXTENDED STORY-->
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> divider
---------------------------->
<div class="row no-gutters my-4">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
</div>
</div> <!-- END OF STORY SECTION -->
<!--------------------------
>>>> STATS, LIKES + TRVIA
---------------------------->
<div id="about" class="col-12 tab-pane fade">
<div class="row no-gutters h-100 px-2">
<!--------------------------
>>> STATS
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>>> HEADER
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-chart-pie text-white fa-stack-1x"></i>
</span> Personality
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Beginning of Stats
How to edit stats:
Change width:50% to the appropriate percentage
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> charisma
---------------------------->
<div class="col-4 p-1">charisma</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> patience
---------------------------->
<div class="col-4 p-1">patience</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> kindness
---------------------------->
<div class="col-4 p-1">kindness</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> humor
---------------------------->
<div class="col-4 p-1">humor</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> intellect
---------------------------->
<div class="col-4 p-1">intellect</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> maturity
---------------------------->
<div class="col-4 p-1">maturity</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
</div>
</div>
</div><!-- END OF STATS -->
<!--------------------------
>>> LIKES
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-heart text-white fa-stack-1x"></i>
</span> Likes
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
</ul>
</div>
</div> <!-- END OF LIKES -->
<!--------------------------
>>> TRIVIA
---------------------------->
<div class="col-lg-12 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-question text-white fa-stack-1x"></i>
</span> Trivia
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
</ul>
</div>
</div> <!-- END OF TRIVIA -->
</div> <!-- END OF STATS, LIKES + TRIVIA CONTAINER -->
</div> <!-- END OF STATS, LIKES + TRIVIA SECTION -->
<!--------------------------
>>>> RELATIONSHIP SECTION
---------------------------->
<div id="relationships" class="col-12 tab-pane fade card-block p-4 h-100">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Relationships
</h1>
<hr class="my-3 w-100">
<!--------------------------
>> RELATIONSHIPS
---------------------------->
<div class="row no-gutters my-4">
<!--------------------------
>> Friend 01
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 01 -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>> Friend 02
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 02 -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>> Friend 03
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 03 -->
<!--------------------------
>>> RELATIONSHIP LIST
---------------------------->
<div class="col-lg-12">
<div class="card border-0 bg-faded">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Other Contacts
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> OTHERS
---------------------------->
<div class="row no-gutters">
<!--------------------------
>> Other Friend 01
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/2vhlDv6.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 02
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/WDoWAyK.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 03
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 04
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/CeUyNsI.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
</div> <!-- end of relationship list-->
</div>
</div> <!-- END OF RELATIONSHIPS LIST -->
</div> <!-- END OF RELATIONSHIPS CONTAINER -->
</div> <!-- END OF RELATIONSHIPS SECTION -->
</div> <!-- END OF TAB CONTAINER -->
</div> <!-- END OF BODY CONTAINER -->
</div> <!-- END OF BODY SECTION -->
</div> <!-- END OF MAIN CONTENT -->
<!--------------------------
>> CREDIT DO NOT REMOVE
---------------------------->
<div class="col-12 order-lg-4 text-right px-2" style="font-size:10px;">
<a href="https://toyhou.se/Sylladexter" style="color:#A0BF6B;"><i class="fas fa-code"></i></a></div>
<!-- END OF CREDIT -->
</div><!-- END OF MAIN CONTAINER -->
</div><!-- END OF ROW CONTAINER -->
</div><!-- END OF CONTAINER -->
<!--
HTML Theme 02: Silent by Sylladexter
Compact Ver. (Vanilla)
> accent color: #A0BF6B
(Use find and replace for easy color swapping.)
> Do not resell or repost
> Do not remove credit
-->
<!--------------------------
>>>> CONTAINER
---------------------------->
<div class="container text-muted p-0" style="font-size:14px">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<!--------------------------
>>>> CONTENT
---------------------------->
<div class="row no-gutters p-2">
<!--------------------------
>>>> SECTION 01: SIDEBAR (Profile picture, Basic Info)
---------------------------->
<div class="col-lg-4 order-lg-2 p-2">
<div class="card bg-faded text-center border-0 p-4">
<div class="row no-gutters">
<!--------------------------
>>>> Profile Picture (Must be square)
---------------------------->
<div class="col-12">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/YBg6ghh.png"
style="width:200px;">
</div>
<!--------------------------
>>>> Name and Occupation
---------------------------->
<div class="col-12 p-3">
<!--------------------------
>>>> Name & Font Awesome Icon
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<!-- Font Awesome -->
<span class="fa-stack fa-2x" style="font-size:12px">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="far fa-user-circle text-white fa-stack-1x"></i>
<!-- Name -->
</span> Name Here</h1>
<!--------------------------
>> Occupation
---------------------------->
<p class="font-italic text-lowercase" style="font-size:11px;">
Occupation</p>
<hr class="my-2">
</div>
</div>
<!--------------------------
>>>> Basic Info
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> Age
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Age</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Birthday
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Birthday</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Gender/Pronouns
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Gender</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Sexuality
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Sexuality</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Height
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Height</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Nickname
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Nickname(s)</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Weapon
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Weapon</span>
<!-- info -->
<span>[info]</span>
</div>
</div>
</div>
</div> <!-- END OF SIDEBAR -->
<!--------------------------
>>>> SECTION 02: BODY
---------------------------->
<div class="col-lg-8 order-lg-3 p-2">
<div class="card border-0 bg-faded" style="height:549px;">
<div class="row no-gutters table-responsive" >
<!--------------------------
>>>> STORY
---------------------------->
<div id="story" class="col-12 tab-pane fade show active p-2 h-100" >
<!--------------------------
>>>> Intro
---------------------------->
<div class="row align-content-center mx-auto text-center" style="min-height:500px;">
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<hr class="w-50 my-0">
<!--------------------------
>> intro quote
---------------------------->
<div class="col-12 p-2">
<h1 style="color:#A0BF6B;font-size:20px;" class="p-4 text-lowercase font-italic display-4 m-0">
"A quote of sorts..."</h1>
<!--------------------------
>> adjectives
---------------------------->
<p class="p-1 m-0">
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
</p>
<!--------------------------
>> blurb
---------------------------->
<p class="text-center font-italic p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat
efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum
lacinia
erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> read more (removable)
---------------------------->
<p class="pb-4">
<a href="#para" data-toggle="collapse" style="color:#A0BF6B">continue reading <i class="fas fa-caret-right"></i>
</a></p>
</div>
<!--------------------------
>> divider
---------------------------->
<hr class="w-50 my-0">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div> <!-- END OF INTRO-->
<!--------------------------
>>>> COLLAPSED CONTENT
---------------------------->
<div id="para" class="my-4 p-3 collapse" aria-expanded="false">
<div class="row no-gutters h-100 px-2">
<!--------------------------
>>> STATS
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-1">
<!--------------------------
>>> HEADER
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-chart-pie text-white fa-stack-1x"></i>
</span> Personality
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Beginning of Stats
How to edit stats:
Change width:50% to the appropriate percentage
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> charisma
---------------------------->
<div class="col-4 p-1">charisma</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> patience
---------------------------->
<div class="col-4 p-1">patience</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> kindness
---------------------------->
<div class="col-4 p-1">kindness</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> humor
---------------------------->
<div class="col-4 p-1">humor</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> intellect
---------------------------->
<div class="col-4 p-1">intellect</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> maturity
---------------------------->
<div class="col-4 p-1">maturity</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
</div>
</div>
</div><!-- END OF STATS -->
<!--------------------------
>>> LIKES
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-1">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-heart text-white fa-stack-1x"></i>
</span> Likes
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
</ul>
</div>
</div> <!-- END OF LIKES -->
<!--------------------------
>>> TRIVIA
---------------------------->
<div class="col-lg-12 py-4">
<div class="card border-0 bg-faded p-2">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-question text-white fa-stack-1x"></i>
</span> Trivia
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
</ul>
</div>
</div> <!-- END OF TRIVIA -->
<!--------------------------
>>> RELATIONSHIP LIST
---------------------------->
<div class="col-lg-12">
<div class="card border-0 bg-faded p-2">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Relationships
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Relationship List
---------------------------->
<div class="row no-gutters">
<!--------------------------
>> Friend 01
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/2vhlDv6.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 02
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/WDoWAyK.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 03
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 04
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/CeUyNsI.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
</div> <!-- end of relationship list-->
</div>
</div> <!-- END OF RELATIONSHIPS LIST -->
</div> <!-- END OF COLLAPSED CONTAINER -->
</div> <!-- END OF COLLAPSED CONTENT -->
</div> <!-- END OF STORY SECTION -->
</div> <!-- END OF ROW CONTAINER -->
</div> <!-- END OF BODY CONTAINER -->
</div> <!-- END OF BODY SECTION -->
</div> <!-- END OF MAIN CONTENT -->
<!--------------------------
>> CREDIT DO NOT REMOVE
---------------------------->
<div class="col-12 order-lg-4 text-right px-2" style="font-size:10px;">
<a href="https://toyhou.se/Sylladexter" style="color:#A0BF6B;"><i class="fas fa-code"></i></a></div>
<!-- END OF CREDIT -->
</div><!-- END OF MAIN CONTAINER -->
</div><!-- END OF ROW CONTAINER -->
</div><!-- END OF CONTAINER -->
<!--
HTML Theme 02: Silent by Sylladexter
Pokemon Ver.
> accent color: #A0BF6B
(Use find and replace for easy color swapping.)
> Do not resell or repost
> Do not remove credit
-->
<!--------------------------
>>>> CONTAINER
---------------------------->
<div class="container text-muted p-0" style="font-size:14px">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<!--------------------------
>>>> CONTENT
---------------------------->
<div class="row no-gutters p-2">
<!--------------------------
>>>> SECTION 01: SIDEBAR (Profile picture, Basic Info)
---------------------------->
<div class="col-lg-4 order-lg-2 p-2">
<div class="card bg-faded text-center border-0 p-4">
<div class="row no-gutters">
<!--------------------------
>>>> Profile Picture (Must be square)
---------------------------->
<div class="col-12">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/YBg6ghh.png"
style="width:200px;">
</div>
<!--------------------------
>>>> Name and Occupation
---------------------------->
<div class="col-12 p-3">
<!--------------------------
>>>> Name & Font Awesome Icon
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<!-- Font Awesome -->
<span class="fa-stack fa-2x" style="font-size:12px">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="far fa-user-circle text-white fa-stack-1x"></i>
<!-- Name -->
</span> Name Here</h1>
<!--------------------------
>> Occupation
---------------------------->
<p class="font-italic text-lowercase" style="font-size:11px;">
Occupation</p>
<hr class="my-2">
</div>
</div>
<!--------------------------
>>>> Basic Info
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> Age
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Age</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Birthday
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Birthday</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Gender/Pronouns
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Gender</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Sexuality
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Sexuality</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Height
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Height</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Nickname
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Nickname(s)</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Hometown
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Hometown</span>
<!-- info -->
<span>[info]</span>
</div>
</div>
</div>
</div> <!-- END OF SIDEBAR -->
<!--------------------------
>>>> NAV
---------------------------->
<div class="col-12 order-lg-1">
<div class="row no-gutters p-2">
<!-- divider -->
<div class="col-2 p-1">
<hr class="w-100">
</div>
<!--------------------------
>> Nav
---------------------------->
<div class="col-8 my-auto">
<ul class="nav row text-lowercase px-3" style="letter-spacing:1px;">
<!--------------------------
>> story
---------------------------->
<li class="nav-item col p-1">
<a href="#story" class="btn d-block btn-default border-0 border-0 nav-link p-1 active" data-toggle="tab">story</a>
</li>
<!--------------------------
>> about
---------------------------->
<li class="nav-item col p-1">
<a href="#about" class="btn d-block btn-default border-0 border-0 p-1 nav-link" data-toggle="tab">about</a>
</li>
<!--------------------------
>> relationships
---------------------------->
<li class="nav-item col p-1">
<a href="#relationships" class="btn d-block btn-default border-0 border-0 p-1 nav-link" data-toggle="tab">relationships</a>
</li>
</ul>
</div>
<div class="col-2 p-1">
<hr class="w-100">
</div>
</div>
</div> <!-- END OF NAV -->
<!--------------------------
>>>> SECTION 02: BODY
---------------------------->
<div class="col-lg-8 order-lg-3 p-2">
<div class="card border-0 bg-faded" style="height:549px;">
<div class="row no-gutters table-responsive tab-content" >
<!--------------------------
>>>> STORY
---------------------------->
<div id="story" class="col-12 tab-pane fade show active p-2 h-100" >
<!--------------------------
>>>> Intro
---------------------------->
<div class="row align-content-center mx-auto text-center" style="min-height:500px;">
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<hr class="w-50 my-0">
<!--------------------------
>> intro quote
---------------------------->
<div class="col-12 p-2">
<h1 style="color:#A0BF6B;font-size:20px;" class="p-4 text-lowercase font-italic display-4 m-0">
"A quote of sorts..."</h1>
<!--------------------------
>> adjectives
---------------------------->
<p class="p-1 m-0">
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
</p>
<!--------------------------
>> blurb
---------------------------->
<p class="text-center font-italic p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat
efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum
lacinia
erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> read more (removable)
---------------------------->
<p class="pb-4">
<a href="#para" data-toggle="collapse" style="color:#A0BF6B">continue reading <i class="fas fa-caret-right"></i>
</a></p>
</div>
<!--------------------------
>> divider
---------------------------->
<hr class="w-50 my-0">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>>>> Full Story (optional: remove if you just want a blurb.)
---------------------------->
<div id="para" class="my-4 p-3 collapse" aria-expanded="false">
<!--------------------------
>> side image: width 300px
---------------------------->
<img
class="img-thumbnail ml-2 mb-2 float-right"
style="width:300px;"
src="https://pa1.narvii.com/5946/92b368322fbc881b2b8c428882486692a638b8c3_hq.gif">
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<!--------------------------
>> divider
---------------------------->
<div class="row no-gutters my-4">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>> story quote container
---------------------------->
<div class="card card-block p-4 col-lg-4 col-12 float-lg-left mr-lg-3 mb-3">
<div class="row no-gutters align-items-center mx-auto">
<!--------------------------
>> decorative stuff
---------------------------->
<div class="col-5">
<hr class="w-100 my-0">
</div>
<div class="col-2 text-center">
<i class="fas fa-quote-left"></i>
</div>
<div class="col-5">
<hr class="w-100 my-0">
</div>
<!--------------------------
>> story quote
---------------------------->
<div class="col-12 p-3">
<p class="text-center font-italic p-2">
Some cool quote goes here. Be creative!
</p>
</div>
<!--------------------------
>> decorative stuff
---------------------------->
<div class="col-5">
<hr class="w-100 my-0">
</div>
<div class="col-2 text-center">
<i class="fas fa-quote-right"></i>
</div>
<div class="col-5">
<hr class="w-100 my-0">
</div>
</div>
</div>
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> divider
---------------------------->
<div class="row no-gutters my-4">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div>
<!--------------------------
>> section
---------------------------->
<div class="row no-gutters">
<h1 class="text-lowercase display-4 m-0" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-play text-white fa-stack-1x"></i>
</span>
Section</h1>
<hr class="my-3 w-100">
</div>
<!--------------------------
>> paragraph
---------------------------->
<p>Quisque pretium augue a justo auctor, quis consequat lectus blandit. Donec ante lorem, viverra quis lorem laoreet, consectetur interdum leo. Etiam diam quam, commodo id tellus eu, varius fringilla nisi. Maecenas id maximus purus. Suspendisse pretium maximus orci, eu facilisis massa. Praesent at dui urna. Quisque tristique odio a venenatis sollicitudin. Quisque risus arcu, iaculis ac ullamcorper ac, fermentum ut dui. Nullam mollis, ipsum sed tempus ultricies, enim justo pharetra lorem, sit amet tristique risus purus at enim. Integer sit amet odio tristique, facilisis lacus ut, vestibulum leo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum lacinia erat ante, vitae lacinia orci feugiat in.
</p>
</div>
</div> <!-- END OF STORY SECTION -->
<!--------------------------
>>>> STATS, LIKES + TRVIA
---------------------------->
<div id="about" class="col-12 tab-pane fade">
<div class="row no-gutters h-100 px-2">
<!--------------------------
>>> STATS
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>>> HEADER
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-chart-pie text-white fa-stack-1x"></i>
</span> Personality
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Beginning of Stats
How to edit stats:
Change width:50% to the appropriate percentage
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> charisma
---------------------------->
<div class="col-4 p-1">charisma</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> patience
---------------------------->
<div class="col-4 p-1">patience</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> kindness
---------------------------->
<div class="col-4 p-1">kindness</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> humor
---------------------------->
<div class="col-4 p-1">humor</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> intellect
---------------------------->
<div class="col-4 p-1">intellect</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> maturity
---------------------------->
<div class="col-4 p-1">maturity</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
</div>
</div>
</div><!-- END OF STATS -->
<!--------------------------
>>> LIKES
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-heart text-white fa-stack-1x"></i>
</span> Likes
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
</ul>
</div>
</div> <!-- END OF LIKES -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 text-center p-2" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>>> TRIVIA
---------------------------->
<div class="col-lg-12 p-2">
<div class="card border-0 bg-faded p-3">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-question text-white fa-stack-1x"></i>
</span> Trivia
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
</ul>
</div>
</div> <!-- END OF TRIVIA -->
</div> <!-- END OF STATS, LIKES + TRIVIA CONTAINER -->
</div> <!-- END OF STATS, LIKES + TRIVIA SECTION -->
<!--------------------------
>>>> RELATIONSHIP SECTION
---------------------------->
<div id="relationships" class="col-12 tab-pane fade card-block p-4 h-100">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Relationships
</h1>
<hr class="my-3 w-100">
<!--------------------------
>> RELATIONSHIPS
---------------------------->
<div class="row no-gutters my-4">
<!--------------------------
>> Friend 01
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 01 -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>> Friend 02
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 02 -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>> Friend 03
---------------------------->
<div class="col-12 mb-3">
<div class="row no-gutters" style="min-height:250px;">
<!--------------------------
>> icon
---------------------------->
<div class="col-md-3 push-md-9 col-12 my-auto text-center ">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
</div>
<!--------------------------
>> character info
---------------------------->
<div class="col-md-9 pull-md-3 col-12 my-auto p-1 pr-4">
<div class="row no-gutters justify-content-between">
<div class="col-11">
<!--------------------------
>> link
---------------------------->
<a href="/YOURLINKHERE" style="color:#A0BF6B;">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="font-size:20px;">Name</h1>
</a>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> rating
full heart:
<i class="fas fa-heart" style="color:#A0BF6B;">
empty heart:
<i class="far fa-heart">
---------------------------->
<div class="col-1 d-flex align-items-end">
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="fas fa-heart" style="color:#A0BF6B;"></i>
<i class="far fa-heart"></i>
</div>
</div>
<hr class="my-3 w-100">
<!--------------------------
>> description
---------------------------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue.
</p>
</div>
</div>
</div> <!-- end of friend 03 -->
<!--------------------------
>>> RELATIONSHIP LIST
---------------------------->
<div class="col-lg-12">
<div class="card border-0 bg-faded">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Other Contacts
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> OTHERS
---------------------------->
<div class="row no-gutters">
<!--------------------------
>> Other Friend 01
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/2vhlDv6.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 02
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/WDoWAyK.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 03
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Other Friend 04
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/CeUyNsI.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
</div> <!-- end of relationship list-->
</div>
</div> <!-- END OF RELATIONSHIPS LIST -->
</div> <!-- END OF RELATIONSHIPS CONTAINER -->
</div> <!-- END OF RELATIONSHIPS SECTION -->
</div> <!-- END OF TAB CONTAINER -->
</div> <!-- END OF BODY CONTAINER -->
</div> <!-- END OF BODY SECTION -->
</div> <!-- END OF MAIN CONTENT -->
<!--------------------------
>>>> POKEMON
---------------------------->
<div class="row no-gutters text-center px-2">
<!--------------------------
>>> Pokemon
Change col-2 according to how many pokemon are on the page.
six pokemon: col-2
four pokemon: col-3
three pokemon: col-4
You can find pokemon sprites here:
Gen 1-6:
Normal: https://www.pkparaiso.com/xy/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/xy/sprites_pokemon_variocolores.php
ORAS Megas:
Normal: https://www.pkparaiso.com/rubi-omega-zafiro-alfa/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/rubi-omega-zafiro-alfa/sprites_pokemon_variocolores.php
Sumo:
Normal: https://www.pkparaiso.com/sol-luna/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/sol-luna/sprites_pokemon_variocolores.php
SWSH:
Normal: https://www.pkparaiso.com/espada_escudo/sprites_pokemon.php
---------------------------->
<!--------------------------
>> pokemon 1
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 2
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 3
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 4
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 5
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 6
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
</div> <!-- END OF POKEMON SECTION-->
<!--------------------------
>> CREDIT DO NOT REMOVE
---------------------------->
<div class="col-12 order-lg-4 text-right px-2" style="font-size:10px;">
<a href="https://toyhou.se/Sylladexter" style="color:#A0BF6B;"><i class="fas fa-code"></i></a></div>
<!-- END OF CREDIT -->
</div><!-- END OF MAIN CONTAINER -->
</div><!-- END OF ROW CONTAINER -->
</div><!-- END OF CONTAINER -->
<!--
HTML Theme 02: Silent by Sylladexter
Compact Ver. (Pokemon)
> accent color: #A0BF6B
(Use find and replace for easy color swapping.)
> Do not resell or repost
> Do not remove credit
-->
<!--------------------------
>>>> CONTAINER
---------------------------->
<div class="container text-muted p-0" style="font-size:14px">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<!--------------------------
>>>> CONTENT
---------------------------->
<div class="row no-gutters p-2">
<!--------------------------
>>>> SECTION 01: SIDEBAR (Profile picture, Basic Info)
---------------------------->
<div class="col-lg-4 order-lg-2 p-2">
<div class="card bg-faded text-center border-0 p-4">
<div class="row no-gutters">
<!--------------------------
>>>> Profile Picture (Must be square)
---------------------------->
<div class="col-12">
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/YBg6ghh.png"
style="width:200px;">
</div>
<!--------------------------
>>>> Name and Occupation
---------------------------->
<div class="col-12 p-3">
<!--------------------------
>>>> Name & Font Awesome Icon
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<!-- Font Awesome -->
<span class="fa-stack fa-2x" style="font-size:12px">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="far fa-user-circle text-white fa-stack-1x"></i>
<!-- Name -->
</span> Name Here</h1>
<!--------------------------
>> Occupation
---------------------------->
<p class="font-italic text-lowercase" style="font-size:11px;">
Occupation</p>
<hr class="my-2">
</div>
</div>
<!--------------------------
>>>> Basic Info
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> Age
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Age</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Birthday
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Birthday</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Gender/Pronouns
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Gender</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Sexuality
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Sexuality</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Height
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Height</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Nickname
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Nickname(s)</span>
<!-- info -->
<span>[info]</span>
</div>
<!--------------------------
>> Hometown
---------------------------->
<div class="col-12 justify-content-between p-1">
<!-- attribute -->
<span class="font-weight-bold" style="color:#a0bf6b;">Hometown</span>
<!-- info -->
<span>[info]</span>
</div>
</div>
</div>
</div> <!-- END OF SIDEBAR -->
<!--------------------------
>>>> SECTION 02: BODY
---------------------------->
<div class="col-lg-8 order-lg-3 p-2">
<div class="card border-0 bg-faded" style="height:549px;">
<div class="row no-gutters table-responsive" >
<!--------------------------
>>>> STORY
---------------------------->
<div id="story" class="col-12 tab-pane fade show active p-2 h-100" >
<!--------------------------
>>>> Intro
---------------------------->
<div class="row align-content-center mx-auto text-center" style="min-height:500px;">
<!--------------------------
>> divider
---------------------------->
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<hr class="w-50 my-0">
<!--------------------------
>> intro quote
---------------------------->
<div class="col-12 p-2">
<h1 style="color:#A0BF6B;font-size:20px;" class="p-4 text-lowercase font-italic display-4 m-0">
"A quote of sorts..."</h1>
<!--------------------------
>> adjectives
---------------------------->
<p class="p-1 m-0">
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
<strong style="color:#A0BF6B"> • </strong>
adjective
</p>
<!--------------------------
>> blurb
---------------------------->
<p class="text-center font-italic p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus bibendum turpis, sit amet tempor purus placerat in. Mauris tempus sodales orci, nec aliquam quam tincidunt eu. Aenean lacinia venenatis eros. Integer
feugiat
efficitur nibh non finibus. Praesent quis nisl auctor, lobortis diam vel, interdum lorem. Aenean dui elit, iaculis vel finibus a, semper non augue. Nulla est libero, ornare at felis eget, egestas ullamcorper metus. Vestibulum
lacinia
erat ante, vitae lacinia orci feugiat in.
</p>
<!--------------------------
>> read more (removable)
---------------------------->
<p class="pb-4">
<a href="#para" data-toggle="collapse" style="color:#A0BF6B">continue reading <i class="fas fa-caret-right"></i>
</a></p>
</div>
<!--------------------------
>> divider
---------------------------->
<hr class="w-50 my-0">
<div class="col-12 p-4 text-center" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
</div> <!-- END OF INTRO-->
<!--------------------------
>>>> COLLAPSED CONTENT
---------------------------->
<div id="para" class="my-4 p-3 collapse" aria-expanded="false">
<div class="row no-gutters h-100 px-2">
<!--------------------------
>>> STATS
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-1">
<!--------------------------
>>> HEADER
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-chart-pie text-white fa-stack-1x"></i>
</span> Personality
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Beginning of Stats
How to edit stats:
Change width:50% to the appropriate percentage
---------------------------->
<div class="row no-gutters text-lowercase">
<!--------------------------
>> charisma
---------------------------->
<div class="col-4 p-1">charisma</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> patience
---------------------------->
<div class="col-4 p-1">patience</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> kindness
---------------------------->
<div class="col-4 p-1">kindness</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> humor
---------------------------->
<div class="col-4 p-1">humor</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> intellect
---------------------------->
<div class="col-4 p-1">intellect</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
<!--------------------------
>> maturity
---------------------------->
<div class="col-4 p-1">maturity</div>
<!--------------------------
>> bar
---------------------------->
<div class="col-8 p-1 my-auto">
<div class="progress">
<div class="progress-bar" style="width:50%;height:.3rem;background:#a0bf6b;"></div>
</div>
</div>
</div>
</div>
</div><!-- END OF STATS -->
<!--------------------------
>>> LIKES
---------------------------->
<div class="col-lg-6 p-2">
<div class="card border-0 bg-faded p-1">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-heart text-white fa-stack-1x"></i>
</span> Likes
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
<li>like</li>
</ul>
</div>
</div> <!-- END OF LIKES -->
<!--------------------------
>> divider
---------------------------->
<div class="col-12 text-center p-2" style="letter-spacing:5px;color:#A0BF6B;font-size:10px;">- • <i class="far fa-circle text-muted"></i> • –</div>
<!--------------------------
>>> TRIVIA
---------------------------->
<div class="col-lg-12">
<div class="card border-0 bg-faded p-2">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-question text-white fa-stack-1x"></i>
</span> Trivia
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> list
---------------------------->
<ul>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
<li>trivia</li>
</ul>
</div>
</div> <!-- END OF TRIVIA -->
<!--------------------------
>>> RELATIONSHIP LIST
---------------------------->
<div class="col-lg-12">
<div class="card border-0 bg-faded p-2">
<!--------------------------
>> header
---------------------------->
<h1 class="text-lowercase display-4" style="color:#A0BF6B;font-size:20px;">
<span class="fa-stack fa-2x" style="font-size:12px;">
<i class="fas fa-circle fa-stack-2x" style="color: #A0BF6B;"></i>
<i class="fas fa-user-circle text-white fa-stack-1x"></i>
</span> Relationships
</h1>
<hr class="my-2 w-100">
<!--------------------------
>> Relationship List
---------------------------->
<div class="row no-gutters">
<!--------------------------
>> Friend 01
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/2vhlDv6.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 02
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/WDoWAyK.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 03
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/6JnyjNk.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
<!--------------------------
>> Friend 04
---------------------------->
<div class="col-3 text-center p-2">
<!--------------------------
>> image
---------------------------->
<img
class="img-thumbnail rounded-circle p-2"
src="https://i.imgur.com/CeUyNsI.jpg"
style="width:150px;">
<!--------------------------
>> link
---------------------------->
<p class="text-lowercase display-4 m-0 pt-2 pb-1" style="font-size:14px;"">
<a href="/YOURLINKHERE" style="color: #A0BF6B;">Name</a>
</p>
<!--------------------------
>> relationship
---------------------------->
<p class="text-italic text-lowercase" style="font-size:11px;">[Relationship]</p>
</div>
</div> <!-- end of relationship list-->
</div>
</div> <!-- END OF RELATIONSHIPS LIST -->
</div> <!-- END OF COLLAPSED CONTAINER -->
</div> <!-- END OF COLLAPSED CONTENT -->
</div> <!-- END OF STORY SECTION -->
</div> <!-- END OF ROW CONTAINER -->
</div> <!-- END OF BODY CONTAINER -->
</div> <!-- END OF BODY SECTION -->
</div> <!-- END OF MAIN CONTENT -->
<!--------------------------
>>>> POKEMON
---------------------------->
<div class="row no-gutters text-center px-2">
<!--------------------------
>>> Pokemon
Change col-2 according to how many pokemon are on the page.
six pokemon: col-2
four pokemon: col-3
three pokemon: col-4
You can find pokemon sprites here:
Gen 1-6:
Normal: https://www.pkparaiso.com/xy/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/xy/sprites_pokemon_variocolores.php
ORAS Megas:
Normal: https://www.pkparaiso.com/rubi-omega-zafiro-alfa/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/rubi-omega-zafiro-alfa/sprites_pokemon_variocolores.php
Sumo:
Normal: https://www.pkparaiso.com/sol-luna/sprites_pokemon.php
Shiny: https://www.pkparaiso.com/sol-luna/sprites_pokemon_variocolores.php
SWSH:
Normal: https://www.pkparaiso.com/espada_escudo/sprites_pokemon.php
---------------------------->
<!--------------------------
>> pokemon 1
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 2
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 3
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 4
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 5
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
<!--------------------------
>> pokemon 6
---------------------------->
<div class="col-2 font-weight-bold px-2">
<!--------------------------
>> sprite
---------------------------->
<div style="height:80px;" class="img-thumbnail border-0 bg-faded mx-auto p-2 w-100">
<img src="http://www.pkparaiso.com/imagenes/xy/sprites/animados/pikachu.gif" style="max-height:100%;">
</div>
<!--------------------------
>> name
---------------------------->
<p class="p-1 text-lowercase">Name</p>
</div>
</div> <!-- END OF POKEMON SECTION-->
<!--------------------------
>> CREDIT DO NOT REMOVE
---------------------------->
<div class="col-12 order-lg-4 text-right px-2" style="font-size:10px;">
<a href="https://toyhou.se/Sylladexter" style="color:#A0BF6B;"><i class="fas fa-code"></i></a></div>
<!-- END OF CREDIT -->
</div><!-- END OF MAIN CONTAINER -->
</div><!-- END OF ROW CONTAINER -->
</div><!-- END OF CONTAINER -->