<!--- Notes ---
- This profile uses theme colors, meaning the color of each item will change depending on the theme the user viewing the profile has selected.
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<!---------------------------- Header ---------------------------->
<div class="card card-block bg-faded mb-4">
<div class="card card-block">
<div class="row justify-content-between">
<div class="col-lg-3 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 250x250 -->
<img src="https://via.placeholder.com/250" class="img-thumbnail border-0 rounded-circle tooltipster" title="art by NAME" style="width:250px; padding-bottom:25px;">
</div>
<div class="col-lg-9 text-primary align-self-center">
<div class="row justify-content-between display-1 mt-4">
<div class="col-lg-4 text-left mb-0">
<!-- Put Name Here -->
Name
</div>
<div class="col-lg-4 text-center mb-0">
<!-- Put Age Here -->
Age
</div>
<div class="col-lg-4 text-right mb-0">
<!-- Put Gender Here -->
Gender
</div>
</div>
<hr class="mt-3" style="border:1px dashed;">
<p class="display-4 text-center" style="text-align: justify;">
<!-- Put Summary Here -->
A summary of who this person is/what they do. It can be short, or not. It's whatever you want.
</p>
</div>
</div>
</div>
</div>
<!-------------------------- Header End -------------------------->
<!-------------------------- Navigation -------------------------->
<ul class="nav nav-tabs card-header-tabs row justify-content-between mb-2">
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none active show" data-toggle="tab" href="#ONE">About</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none" data-toggle="tab" style="width:100" href="#TWO">Personality</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none" data-toggle="tab" style="width:100" href="#THREE">Appearance</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none" data-toggle="tab" style="width:100" href="#FOUR">Relationships</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none" data-toggle="tab" style="width:100" href="#FIVE">Story</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-outline-primary btn-lg btn-block bg-faded shadow-none" data-toggle="tab" style="width:100" href="#SIX">Gallery</a></li>
</ul>
<!------------------------ Navigation End ------------------------>
<div class="tab-content">
<!------------------------ About Section ------------------------>
<div class="tab-pane fade in active show" id="ONE"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-address-card"></i> About</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary mb-2 h4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
<!-- Paragraphs: About -->
<p class="mb-1" style="text-align: justify;">Ut at est accumsan, pharetra erat ac, consectetur turpis. Vestibulum sit amet turpis lectus. Integer semper aliquet est. Maecenas venenatis ultrices nisl eu porttitor. Maecenas aliquam sapien eu arcu molestie maximus. Donec quam metus, tempor nec eleifend non, accumsan id metus.</p>
<p class="mb-1" style="text-align: justify;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
<p class="mb-1" style="text-align: justify;">Pellentesque finibus scelerisque pharetra. In vulputate iaculis pharetra. Ut mattis, mauris eget bibendum finibus, libero magna auctor tellus, ut blandit odio ante non urna. Ut at est accumsan, pharetra erat ac, consectetur turpis. Vestibulum sit amet turpis lectus. Integer semper aliquet est. Maecenas venenatis ultrices nisl eu porttitor. Maecenas aliquam sapien eu arcu molestie maximus. Donec quam metus, tempor nec eleifend non, accumsan id metus.</p>
<div class="row justify-content-between">
<div class="col-lg-7 mt-2"><div class="row justify-content-between">
<!---------------------- Likes Section ---------------------->
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-check"></i> Likes</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!-------------------- Likes Section End -------------------->
<!--------------------- Dislikes Section --------------------->
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-times"></i> Dislikes</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!------------------- Dislikes Section End ------------------->
<!---------------------- Trivia Section ---------------------->
<div class="col-12">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-list"></i> Trivia</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam ac neque et enim interdum dapibus at nec orci.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aliquam maximus molestie diam, at bibendum eros ullamcorper a.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce at sollicitudin nunc, ac auctor ligula.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget.
</li>
</ul>
</div>
<!-------------------- Trivia Section End -------------------->
</div></div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 450px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/450" title="art by NAME">
</div>
</div>
</div>
</div>
</div></div>
<!---------------------- About Section End ---------------------->
<!---------------------- Personality Section ---------------------->
<div class="tab-pane fade in" id="TWO"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-user"></i> Personality</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div class="row justify-content-between">
<div class="col-lg-7">
<em class="text-primary mb-2 h4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
<!-- Paragraphs: Personality -->
<p class="mb-1" style="text-align: justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas. Donec auctor molestie nunc eu gravida. Vestibulum id turpis non ante volutpat tempus. Ut diam sem, euismod in dui vitae, efficitur accumsan magna. Ut consequat augue vel arcu egestas pulvinar. Fusce hendrerit lectus at nisl vestibulum convallis nec ac dui.</p>
<p class="mb-1" style="text-align: justify;">Nulla facilisi. Donec ultrices dolor nec est elementum, consectetur vulputate lectus auctor. Vestibulum congue at urna et consectetur. Maecenas quam neque, tempor et semper sed, mattis sed mauris. Aliquam dictum efficitur nunc id convallis. In gravida ipsum id maximus consequat. Curabitur sed nisl ut libero condimentum fringilla. Quisque eget quam congue, scelerisque massa in, lobortis massa. In nec rutrum augue, sit amet porttitor lectus. Aliquam massa diam, tempor vel scelerisque a, consectetur at odio. Ut aliquet efficitur eros vitae fermentum. Suspendisse in aliquam ante. Cras eget ante ut augue feugiat luctus vel non leo. Fusce convallis convallis venenatis. Sed ultricies dolor quam, eget finibus risus porta eu. Pellentesque blandit, enim a iaculis vestibulum, nisi lorem egestas nulla, sit amet vulputate turpis est at lectus.</p>
<div class="row justify-content-between mt-2">
<!----------- Traits Section ----------->
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-lightbulb"></i> Traits</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!--------- Traits Section End --------->
<!------------ Flaws Section ------------>
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-cut"></i> Flaws</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!------------ Flaws Section ------------>
<!----------- Hobbies Section ----------->
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-cog"></i> Hobbies</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!--------- Hobbies Section End --------->
<!---------- Skills Section ---------->
<div class="col-lg-6 mb-2">
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-award"></i> Skills</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!-------- Skills Section End -------->
</div>
</div>
<div class="col-lg-5">
<ul class="list-unstyled font-weight-bold h4 mb-4">
<!-- Introvert vs Extrovert -->
<li class="mb-3">
<span class="text-primary mb-2">
Introvert
</span>
<span class="pull-right text-success">
Extrovert
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Intuitive vs Observant -->
<li class="mb-3">
<span class="text-primary mb-2">
Intuitive
</span>
<span class="pull-right text-success">
Observant
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Thinking vs Feeling -->
<li class="mb-3">
<span class="text-primary mb-2">
Thinking
</span>
<span class="pull-right text-success">
Feeling
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Judging vs Prospecting -->
<li class="mb-3">
<span class="text-primary mb-2">
Judging
</span>
<span class="pull-right text-success">
Prospecting
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Assertive vs Turbulent -->
<li class="mb-3">
<span class="text-primary mb-2">
Assertive
</span>
<span class="pull-right text-success">
Turbulent
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
</ul>
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 450px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/450" title="art by NAME">
</div>
</div>
</div>
</div>
</div></div>
<!-------------------- Personality Section End -------------------->
<!----------------------- Appearance Section ----------------------->
<div class="tab-pane fade in" id="THREE"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-tshirt"></i> Appearance</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div class="row justify-content-between">
<div class="col-lg-5 push-lg-7">
<ul class="list-unstyled h4 mb-4 mt-2">
<li class="mb-3 text-primary">
<span class="mb-0 font-weight-bold">
Hair Color
</span>
<span class="pull-right mb-0">
<!-- Put Hair Color Here -->
Their Hair Color
</span>
<div class="bg-primary mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3 text-primary">
<span class="mb-0 font-weight-bold">
Eye Color
</span>
<span class="pull-right mb-0">
<!-- Put Eye Color Here -->
Their Eye Color
</span>
<div class="bg-primary mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3 text-primary">
<span class="mb-0 font-weight-bold">
Skin Color
</span>
<span class="pull-right mb-0">
<!-- Put Skin Color Here -->
Their Skin Color
</span>
<div class="bg-primary mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3 text-primary">
<span class="mb-0 font-weight-bold">
Height
</span>
<span class="pull-right mb-0">
<!-- Put Height Here -->
Their Height
</span>
<div class="bg-primary mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3 text-primary">
<span class="mb-0 font-weight-bold">
Clothing Style
</span>
<span class="pull-right mb-0">
<!-- Put Clothing Style Here -->
Their Clothing Style
</span>
<div class="bg-primary mt-1" style="height:2px; width:100%;"></div>
</li>
<!-- Skinny vs Large -->
<li class="mb-3 font-weight-bold">
<span class="text-primary mb-2">
Skinny
</span>
<span class="pull-right text-success">
Large
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Curvy vs Flat -->
<li class="mb-3 font-weight-bold">
<span class="text-primary mb-2">
Curvy
</span>
<span class="pull-right text-success">
Flat
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Frail vs Muscular -->
<li class="mb-3 font-weight-bold">
<span class="text-primary mb-2">
Frail
</span>
<span class="pull-right text-success">
Muscular
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
<!-- Groomed vs Messy -->
<li class="mb-3 font-weight-bold">
<span class="text-primary mb-2">
Groomed
</span>
<span class="pull-right text-success">
Messy
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded-0" style="width:50%;"></div></div>
</li>
</ul>
</div>
<div class="col-lg-7 pull-lg-5">
<em class="text-primary mb-2 h4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
<!-- Paragraphs: Appearance -->
<p class="mb-1" style="text-align: justify;">Nunc vel urna non libero feugiat volutpat. Donec vel lacus arcu. Sed ut euismod magna. Vestibulum iaculis est sapien, eget scelerisque neque pretium et. Maecenas vulputate vitae nisl ac sollicitudin. Sed suscipit fermentum dolor nec maximus. Integer turpis nunc, sagittis quis sem at, volutpat tempus augue. Proin sodales ornare velit non luctus. Ut consequat augue vel arcu egestas pulvinar. Fusce hendrerit lectus at nisl vestibulum convallis nec ac dui.</p>
<p class="mb-1" style="text-align: justify;">Pellentesque semper mi tellus, a scelerisque mi blandit luctus. Nullam egestas sem urna, ac volutpat neque pharetra sit amet. Aenean a metus at sem ultrices sollicitudin et id magna. Morbi congue magna vel nisl semper viverra. Morbi et feugiat nisi. Cras cursus tellus vel tincidunt sodales</p>
<!-------------------- Design Notes Section -------------------->
<p class="display-4 text-primary font-weight-bold mb-2"><i class="far fa-sticky-note"></i> Design Notes</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam ac neque et enim interdum dapibus at nec orci.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aliquam maximus molestie diam, at bibendum eros ullamcorper a.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce at sollicitudin nunc, ac auctor ligula.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget.
</li>
</ul>
<!------------------ Design Notes Section End ------------------>
</div>
</div>
<a data-toggle="collapse" href="#collapse1" class="btn btn-block btn-lg bg-faded text-muted text-center shadow-none display-1 mt-2 mb-0">
Click for Reference
</a>
<div id="collapse1" class="w-100 panel-collpase collapse">
<!-- Put Reference Image Here
Image can be any size, but 1100px wide is the minimum recommended to fully fill the space -->
<img class="rounded mt-2 tooltipster" src="https://via.placeholder.com/1100x700" title="art by NAME">
</div>
</div>
</div></div>
<!--------------------- Appearance Section End --------------------->
<!---------------------- Relationships Section ---------------------->
<div class="tab-pane fade in" id="FOUR"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-comments"></i> Relationships</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div class="row justify-content-between mt-2">
<!---------- First Relationship ---------->
<div class="col-lg-4 mb-4">
<div class="card mb-2" style="border:transparent;">
<!-- Put Image Here
Recommended to use a square image that is atleast 350x350px -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!-- Character Name, Link, and Relationship Type -->
<p class="text-primary display-4 mb-0"><a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship</p>
<div class="bg-primary mt-2 mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs -->
<p style="text-align:justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas.</p>
</div>
<!-------- First Relationship End -------->
<!---------- Second Relationship ---------->
<div class="col-lg-4 mb-4">
<div class="card mb-2" style="border:transparent;">
<!-- Put Image Here
Recommended to use a square image that is atleast 350x350px -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!-- Character Name, Link, and Relationship Type -->
<p class="text-primary display-4 mb-0"><a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship</p>
<div class="bg-primary mt-2 mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs -->
<p style="text-align:justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas.</p>
</div>
<!-------- Second Relationship End -------->
<!---------- Third Relationship ---------->
<div class="col-lg-4 mb-4">
<div class="card mb-2" style="border:transparent;">
<!-- Put Image Here
Recommended to use a square image that is atleast 350x350px -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!-- Character Name, Link, and Relationship Type -->
<p class="text-primary display-4 mb-0"><a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship</p>
<div class="bg-primary mt-2 mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs -->
<p style="text-align:justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas.</p>
</div>
<!-------- Third Relationship End -------->
</div>
</div>
</div></div>
<!-------------------- Relationships Section End -------------------->
<!-------------------------- Story Section -------------------------->
<div class="tab-pane fade in" id="FIVE"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-book"></i> Story</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div>
<div class="float-right card ml-2" style="border:transparent;">
<!-- Put Image Here
Image can be any size, it will shrink down if it is bigger than 200px in order to fit -->
<img src="https://via.placeholder.com/200" class="rounded tooltipster" style="max-width:200px;" title="art by NAME">
</div>
<!-- Paragraphs: Backstory -->
<p class="mb-1" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ultricies odio, ac pellentesque leo. Mauris lacus dolor, dignissim quis augue iaculis, sagittis consectetur turpis. In varius eget leo et tempor. Nulla malesuada diam ut ullamcorper blandit. Vestibulum leo eros, fringilla auctor pellentesque sit amet, tristique in quam. Fusce sodales dolor dolor, et laoreet nisi consectetur ut. Nulla volutpat ipsum eu fermentum pellentesque. Donec quis luctus dui. Ut nec orci varius, viverra sapien non, hendrerit lectus. Sed ac posuere nisi. Pellentesque fermentum tempus dolor, semper bibendum ligula lobortis nec. In at libero quis lectus eleifend imperdiet in eu justo. Vestibulum placerat tristique convallis. Vestibulum et facilisis tortor. Curabitur ut mauris vitae urna imperdiet aliquam.</p>
<p class="mb-1" style="text-align: justify;">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper. Nullam quis dapibus ex, rutrum laoreet tellus. Maecenas eget urna turpis. Ut nec lectus molestie leo vulputate dictum. Aenean placerat tincidunt dignissim. Cras sem enim, facilisis in sollicitudin eu, tempor efficitur tellus. Ut cursus felis eu nulla porttitor, ac suscipit lacus tempor.</p>
<p class="mb-1" style="text-align: justify;">In viverra diam metus, eu posuere odio sagittis vel. Quisque aliquam ultricies ligula at maximus. Nam accumsan at est et cursus. In tellus turpis, fringilla quis quam a, ornare volutpat metus. Cras imperdiet lectus sit amet tempus laoreet. Sed dignissim nisi ac ipsum gravida, nec bibendum lacus gravida. Maecenas eget condimentum enim, nec ultricies nunc. Donec sit amet accumsan lacus. Pellentesque egestas in ex tristique viverra. Cras fringilla pharetra imperdiet. Integer mollis massa et ante pretium sodales. Ut euismod finibus diam, at ultrices turpis condimentum id. Donec posuere elit eget ante accumsan finibus.</p>
<p class="mb-1" style="text-align: justify;">Sed condimentum volutpat euismod. Sed luctus ultricies diam id ultrices. Fusce id porta tortor, nec lacinia mauris. Fusce quis euismod dui, sed pellentesque tellus. Nunc sed lobortis lacus, eu sollicitudin velit. Mauris dictum enim a consequat venenatis. Vivamus et metus at lectus fermentum imperdiet ac vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non cursus turpis, sit amet interdum ante. Vivamus sit amet fringilla orci, in posuere ligula.</p>
<p class="display-4 text-primary font-weight-bold text-right mt-2 mb-2">Present Day <i class="far fa-receipt"></i></p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Present Day -->
<p class="mb-1" style="text-align: justify;">Nullam iaculis augue diam, tincidunt eleifend mauris elementum accumsan. Ut metus orci, fermentum eget aliquam et, interdum sit amet turpis. Donec ultricies ante non ligula vestibulum, eget tempor lacus sagittis. Nunc tempor ac nisl nec porta. Donec rhoncus pretium risus sit amet lobortis. Nunc accumsan egestas lectus vel suscipit. Nam purus nibh, tincidunt non aliquet in, gravida blandit nulla. Aenean turpis quam, posuere ac auctor vitae, finibus non metus. Sed fermentum leo a semper lobortis. Nam nec eros auctor, placerat augue eget, volutpat metus. Vestibulum in imperdiet diam. Pellentesque ullamcorper, elit at pharetra consectetur, purus magna porttitor turpis, luctus fermentum ex metus a justo. Curabitur id interdum sapien, eu venenatis augue.</p>
<p class="mb-1" style="text-align: justify;">Nullam euismod dapibus nisl, ut pellentesque sapien efficitur sit amet. Duis ut nisi nec nisi molestie elementum. Pellentesque elementum urna vitae magna ullamcorper euismod. Vivamus sed consequat velit. Nulla lobortis condimentum nunc et accumsan. Nam aliquam justo vitae volutpat tempor. Mauris quis lobortis nisi. In est nunc, accumsan sed malesuada vel, euismod commodo odio.</p>
<p class="display-4 text-primary font-weight-bold mt-2 mb-2"><i class="far fa-flag"></i> Future</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div class="float-right card ml-4" style="border:transparent;">
<!-- Put Image Here
Image can be any size, it will shrink down if it is bigger than 200px in order to fit -->
<img src="https://via.placeholder.com/200" class="rounded tooltipster" style="max-width:200px;" title="art by NAME">
</div>
<!-- Paragraphs: Future -->
<p class="mb-1" style="text-align: justify;">Fusce egestas posuere dolor nec efficitur. In at purus cursus, vestibulum magna in, vulputate sapien. Etiam dictum volutpat libero, quis maximus enim hendrerit in. Proin dignissim est ut fermentum venenatis. In vitae ipsum blandit, tempus turpis vel, vehicula urna. Donec sapien dolor, gravida vel porta quis, porta sed metus. Vestibulum pellentesque purus sem, nec facilisis metus imperdiet a. Nam varius metus vel erat mollis placerat. Aenean est turpis, maximus vitae egestas id, semper a augue. Nunc tristique velit nunc, nec consequat quam pharetra vel. Ut tincidunt nibh vel metus lobortis egestas et sit amet mi. Fusce vulputate diam nunc, eu volutpat augue vulputate id. Sed commodo scelerisque orci, ut feugiat tellus malesuada vitae. Nunc accumsan egestas lectus vel suscipit. Nam purus nibh, tincidunt non aliquet in, gravida blandit nulla. Nullam euismod dapibus nisl, ut pellentesque sapien efficitur sit amet.</p>
<p class="mb-1" style="text-align: justify;">Nam nec eleifend ex. Sed scelerisque condimentum eleifend. Duis hendrerit ex et ligula porta, ut vestibulum nibh congue. In consequat urna sed gravida iaculis. Cras in magna in orci dignissim semper non id dolor. Praesent cursus lobortis libero, a auctor mauris suscipit non. Phasellus at augue non ex luctus porttitor. Fusce ut ipsum id nisl accumsan pretium. Sed urna quam, euismod eu aliquet vel, ornare vel arcu. Duis ut nisi nec nisi molestie elementum.</p>
</div>
</div>
</div></div>
<!------------------------ Story Section End ------------------------>
<!-------------------------- Gallery Section -------------------------->
<div class="tab-pane fade in" id="SIX"><div class="card card-block bg-faded">
<div class="card card-block">
<p class="display-3 text-primary font-weight-bold mb-2"><i class="far fa-camera"></i> Gallery</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div class="mt-2 card-columns">
<!----------- Photo 1 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!----------- Photo 2 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!----------- Photo 3 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!----------- Photo 4 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!----------- Photo 5 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
<!----------- Photo 6 ----------->
<div class="card mb-4" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 350px wide -->
<img class="rounded tooltipster" src="https://via.placeholder.com/350" title="art by NAME">
</div>
</div>
<!-- Link to Full Gallery -->
<a href="LINK" class="btn btn-block btn-lg bg-faded text-muted text-center shadow-none display-1 mt-0 mb-0">Full Gallery</a>
</div>
</div></div>
<!------------------------ Gallery Section End ------------------------>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster text-primary pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>