<!--- 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">
<div class="card card-block bg-primary progress-bar-striped progress-bar-animated rounded-0">
<div class="card card-block card-primary rounded-0 text-center mb-4">
<p class="display-1 text-white mb-2">
<!-- Put Title Here -->
A Short Title or Something
</p>
<p class="text-center display-4 text-white">
<!-- Put Basics Here -->
Name - Age - Gender
</p>
</div>
<div class="card card-block bg-faded rounded-0 mb-4">
<h1 class="text-primary"><i class="far fa-address-card"></i> About</h1>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<div>
<div class="float-right bg-faded 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" title="art by NAME" style="max-width:200px;">
</div>
<!-- Paragraphs-->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in erat a leo rhoncus elementum sagittis vitae leo. Nunc eu quam magna. Fusce posuere lorem ut dui ornare, et luctus turpis consequat. Vestibulum lobortis mi ac vehicula tristique. Praesent vitae posuere urna. Curabitur placerat sit amet turpis congue consectetur. Phasellus hendrerit metus in sem ullamcorper dictum sit amet quis justo. Ut leo ex, pretium a ipsum quis, blandit pellentesque arcu. Sed consequat risus id maximus aliquet. Vestibulum quis sem a arcu posuere dictum. Nam euismod nisl velit, finibus dignissim sem sagittis vitae. Nullam vestibulum, ipsum in dictum interdum, nisi nibh gravida orci, tempor porta ipsum nunc vel odio.</p>
<p class="mb-2" style="text-align: justify;">Aenean ut eros vitae nunc congue volutpat vitae at libero. Vivamus quis finibus nulla. Maecenas nec cursus lorem, vitae dignissim ipsum. Integer in libero felis. Maecenas vitae iaculis dui. Phasellus pretium odio eu erat dictum faucibus. In a imperdiet mi. Ut eu augue eget diam venenatis auctor. Phasellus viverra purus eget quam commodo laoreet. Morbi urna mauris, gravida vel lacus vel, vehicula pulvinar purus. Suspendisse potenti. Nam et massa id lacus scelerisque tristique. Suspendisse consequat imperdiet dolor, non fringilla sem egestas vel. Phasellus hendrerit metus in sem ullamcorper dictum sit amet quis justo. Ut leo ex, pretium a ipsum quis, blandit pellentesque arcu.</p>
<p class="mb-2" style="text-align: justify;">Ut in erat a leo rhoncus elementum sagittis vitae leo. Nunc eu quam magna. Fusce posuere lorem ut dui ornare, et luctus turpis consequat. Vestibulum lobortis mi ac vehicula tristique. Praesent vitae posuere urna. Curabitur placerat sit amet turpis congue consectetur. Phasellus hendrerit metus in sem ullamcorper dictum sit amet quis justo. Ut leo ex, pretium a ipsum quis, blandit pellentesque arcu. Sed consequat risus id maximus aliquet. Vestibulum quis sem a arcu posuere dictum. Nam euismod nisl velit, finibus dignissim sem sagittis vitae. Nullam vestibulum, ipsum in dictum interdum, nisi nibh gravida orci, tempor porta ipsum nunc vel odio.</p>
<h3 class="text-primary text-right"><i class="far fa-tshirt"></i> Appearance</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<p class="mb-2" style="text-align: justify;">Aenean ut eros vitae nunc congue volutpat vitae at libero. Vivamus quis finibus nulla. Maecenas nec cursus lorem, vitae dignissim ipsum. Integer in libero felis. Maecenas vitae iaculis dui. Phasellus pretium odio eu erat dictum faucibus. In a imperdiet mi. Ut eu augue eget diam venenatis auctor. Phasellus viverra purus eget quam commodo laoreet. Morbi urna mauris, gravida vel lacus vel, vehicula pulvinar purus. Suspendisse potenti. Nam et massa id lacus scelerisque tristique. Suspendisse consequat imperdiet dolor, non fringilla sem egestas vel.</p>
</div>
<div class="row justify-content-between mt-4">
<!---------------------- Likes Section ---------------------->
<div class="col-lg-4 mb-2">
<h3 class="text-primary"><i class="far fa-check"></i> Likes</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<ul class="mt-1 list-unstyled">
<li class="mb-1">
<i class="far fa-arrow-right"></i>
like
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
like
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
like
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
like
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
like
</li>
</ul>
</hr>
</div>
<!-------------------- Likes Section End -------------------->
<!--------------------- Dislikes Section --------------------->
<div class="col-lg-4 mb-2">
<h3 class="text-primary"><i class="far fa-times"></i> Dislikes</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<ul class="list-unstyled">
<li class="mb-1">
<i class="far fa-arrow-right"></i>
dislike
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
dislike
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
dislike
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
dislike
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
dislike
</li>
</ul>
</hr>
</div>
<!------------------- Dislikes Section End ------------------->
<!---------------------- Hobbies Section ---------------------->
<div class="col-lg-4 mb-2">
<h3 class="text-primary"><i class="far fa-cog"></i> Hobbies</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<ul class="mt-1 list-unstyled">
<li class="mb-1">
<i class="far fa-arrow-right"></i>
hobby
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
hobby
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
hobby
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
hobby
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
hobby
</li>
</ul>
</hr>
</div>
<!-------------------- Hobbies Section End -------------------->
<!---------------------- Trivia Section ---------------------->
<div class="col-lg-12">
<h3 class="text-primary"><i class="far fa-list"></i> Trivia</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<ul class="mt-1 list-unstyled">
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Ut vehicula mauris gravida augue condimentum, nec viverra diam blandit. Fusce at sollicitudin nunc, ac auctor ligula.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel. Vestibulum lobortis mi ac vehicula tristique.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Aliquam maximus molestie diam, at bibendum eros ullamcorper a. Aenean ut eros vitae nunc congue volutpat vitae at libero.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Fusce at sollicitudin nunc, ac auctor ligula. Maecenas vitae iaculis dui.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget. Phasellus pretium odio eu erat dictum faucibus.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Ut interdum felis at metus blandit, id ultrices arcu sollicitudin. Ut leo ex, pretium a ipsum quis, blandit pellentesque arcu.
</li>
</ul>
</hr>
</div>
<!-------------------- Trivia Section End -------------------->
</div>
</div>
<div class="card card-block card-primary rounded-0 text-white text-center mb-4">
<h2><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h2>
</div>
<div class="card card-block bg-faded rounded-0 mb-4">
<h1 class="text-right text-primary"><i class="far fa-book"></i> Backstory</h1>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<div>
<div class="float-left bg-faded card mr-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" title="art by NAME" style="max-width:200px;">
</div>
<!-- Paragraphs: Backstory -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus purus, finibus id tincidunt consectetur, porta quis dolor. Aliquam erat volutpat. Vivamus eleifend arcu et gravida viverra. Pellentesque ac gravida nisi. Fusce tempus mauris ut est imperdiet, ut lacinia leo porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis sodales ipsum, quis rhoncus ex. In ultricies rhoncus justo id suscipit. Morbi pellentesque nibh arcu, non pellentesque tortor blandit sit amet. Aliquam pretium enim vel egestas molestie. Sed nec semper ex. Donec lobortis malesuada posuere. Pellentesque accumsan lobortis tempor.</p>
<p class="mb-2" style="text-align: justify;">Morbi at mi in nulla vehicula luctus. Fusce vel tempor ipsum. Aliquam erat volutpat. Donec vitae hendrerit lacus. Fusce eleifend, arcu a volutpat auctor, tellus libero sodales ex, imperdiet iaculis neque nisl a eros. Maecenas ac pulvinar massa. Etiam sed hendrerit turpis, id fermentum lectus. Donec convallis libero nec vehicula placerat. Aenean mauris tortor, pharetra sit amet interdum eu, vehicula in risus.</p>
<p class="mb-2" style="text-align: justify;">Maecenas vulputate dui non eleifend molestie. Integer accumsan et justo malesuada accumsan. Integer venenatis volutpat quam non pulvinar. Vivamus pellentesque erat vel est pretium mattis. Cras arcu est, tempus et dolor facilisis, convallis fringilla nunc. Nullam scelerisque elit sed dui iaculis pretium. Pellentesque quam lectus, interdum nec neque et, gravida hendrerit arcu. Etiam rhoncus orci a nisi aliquam, vel pulvinar augue dignissim. Suspendisse tristique ante nec eros eleifend volutpat. Aenean dui ante, tincidunt vitae ultricies a, ornare in urna. Praesent sagittis imperdiet mauris, non feugiat justo posuere a. In hac habitasse platea dictumst. Phasellus faucibus ut quam eu suscipit.</p>
<h3 class="text-primary"><i class="far fa-flag"></i> Present Day</h3>
<hr class="text-primary mt-2" style="border:1px dashed;width:100%;">
<!-- Paragraphs: Present Day -->
<p class="mb-2" style="text-align: justify;">Aenean ut eros vitae nunc congue volutpat vitae at libero. Vivamus quis finibus nulla. Maecenas nec cursus lorem, vitae dignissim ipsum. Integer in libero felis. Maecenas vitae iaculis dui. Phasellus pretium odio eu erat dictum faucibus. In a imperdiet mi. Ut eu augue eget diam venenatis auctor. Phasellus viverra purus eget quam commodo laoreet. Morbi urna mauris, gravida vel lacus vel, vehicula pulvinar purus. Suspendisse potenti. Nam et massa id lacus scelerisque tristique. Suspendisse consequat imperdiet dolor, non fringilla sem egestas vel.</p>
</div>
</div>
<div class="card card-block card-primary rounded-0 text-white text-center mb-4">
<h2><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h2>
</div>
<div class="card card-block bg-faded rounded-0">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<h3 class="text-primary"><i class="far fa-user"></i> <a href="LINK" style="text-decoration:none;">Name</a></h3>
<hr class="text-primary mt-2 mb-2" style="border:1px dashed;width:100%;">
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<h3 class="text-primary"><i class="far fa-user"></i> <a href="LINK" style="text-decoration:none;">Name</a></h3>
<hr class="text-primary mt-2 mb-2" style="border:1px dashed;width:100%;">
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<h3 class="text-primary"><i class="far fa-user"></i> <a href="LINK" style="text-decoration:none;">Name</a></h3>
<hr class="text-primary mt-2 mb-2" style="border:1px dashed;width:100%;">
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
</div>
</div>
</div>
</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>