<!------------------------------
[ TERMS OF SERVICE ]
> Please do not remove credit.
> You may edit and frankenstein with credits/permission from everyone involved.
> You may use my codes as reference but don't heavily reference or steal chunks of it.
> Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
> You are responsible for your own edits.
[ NOTES ]
> Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.
[ TIPS ]
> To change the colours:
- Press ctrl + F
- Type in hex code you want to replace
- Click on + and replace "all" with a different hex code
> To change the images, replace the URL in the brackets -> background: url( LINK_HERE )
> Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
> Get more icons here: https://fontawesome.com/icons?d=gallery
[ ACCENT COLOURS ]
> Theme: #bf343f
> Top Border/Text: #fff
-------------------------------->
<div class="mx-auto text-justify" style="max-width: 1110px; font-size: 13px; letter-spacing: .6px;">
<div class="row no-gutters">
<!-- TOP ------------------------------------------------------>
<div class="col-12 row no-gutters p-2">
<!-- IMAGE | Replace the URL in the brackets () -->
<div class="col-lg-6">
<div class="h-100" style="min-height: 200px;
background: url(https://images.unsplash.com/photo-1530128118208-89f6ce02b37b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
</div>
</div>
<!-- QUOTE OR NAME -->
<div class="col-lg-6" style="background: #bf343f; color: #fff; padding: 20px;">
<div class="card rounded-0 h-100 p-2" style="background: none; border: 2px solid #fff;">
<div class="text-center my-auto py-lg-0 py-4" style="font-size: 18px; letter-spacing: 2px;">
<em>"Write a quote here."</em>
</div>
</div>
</div>
</div>
<!-- ---------------------------------------------------------->
<!-- BASICS --------------------------------------------------->
<div class="col-lg-4 p-2">
<!-- IMAGE | Replace the URL in the brackets () -->
<div class="mb-3" style="height: 365px;
background: url(https://images.unsplash.com/photo-1503249023995-51b0f3778ccf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=611&q=80) center no-repeat;
background-size: cover;">
</div>
<!-- INFO -->
<div class="bg-faded rounded-0 p-3" style="height: 501px; overflow: auto;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-user fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Name</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-venus-mars fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Gender</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-calendar fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Age</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-birthday-cake fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Birthday</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-dna fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Species</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-ruler fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Height</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-heart fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Orientation</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-balance-scale fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">MBTI</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-briefcase fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Occupation</span>
</div>
<div class="col-7 text-right pt-1">Content</div>
</div><hr style="margin: 10px 0px;">
<div class="row no-gutters">
<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #bf343f; color: #fff;">
<i class="fas fa-pencil fa-fw"></i></div><span class="text-muted" style="letter-spacing: 1.4px;">Designer</span>
</div>
<!-- Tag a TH user or yourself with " @ username " (without the space) OR link a non-TH user with " <a href="URL HERE">Username</a> " -->
<div class="col-7 text-right pt-1">@ username</div>
</div>
</div>
<!-- INFO END -->
</div>
<!-- ---------------------------------------------------------->
<!-- INFORMATION ---------------------------------------------->
<div class="col-lg-8 p-2">
<!-- BACKGROUND --------->
<div class="bg-faded p-3 mb-3">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-book fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Background</div>
<div style="height: 282px; overflow: auto; padding-right: 10px;">
<!-- Writing Area -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra tincidunt leo nec consectetur. Vivamus ornare faucibus malesuada. Fusce consectetur lectus ut congue semper. Nam vitae est eu enim viverra posuere at sit amet est. Cras leo augue, vestibulum at molestie id, elementum nec erat. Sed mi sapien, tempor vel aliquet at, auctor vitae mi. Sed eu lorem a nulla viverra porttitor. In id ipsum leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quis pharetra dolor. Fusce vitae nulla laoreet lectus faucibus placerat at quis ligula. Nulla tempor vehicula varius. Curabitur in eros efficitur mi eleifend facilisis.</p>
<p>Morbi aliquam aliquam mauris, eu fringilla libero convallis vitae. Integer eget facilisis tellus. Etiam eu maximus velit. Aliquam faucibus metus mollis, euismod odio vitae, suscipit purus. Praesent faucibus, velit finibus tempor vehicula, lectus ipsum maximus turpis, vel interdum urna turpis at diam. Praesent commodo nec eros eu iaculis. Donec sodales dolor non eleifend tincidunt. Morbi pulvinar molestie venenatis. Nam mollis nisl quis suscipit facilisis. Sed laoreet quam ut tortor mollis tincidunt.</p>
<!-- Writing Area END -->
</div>
</div>
</div>
</div>
<!-- /BACKGROUND -------->
<div class="row no-gutters">
<!-- PREFERENCES -------->
<div class="col-lg-6 pr-lg-2">
<!-- LIKES -->
<div class="bg-faded p-3 mb-3">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-check fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Likes</div>
<div style="height: 158px; overflow: auto; padding-right: 10px;">
<ul class="m-0 pl-4" style="list-style-type: square;">
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<!-- Add more above this line -->
</ul>
</div>
</div>
</div>
</div>
<!-- DISLIKES -->
<div class="bg-faded p-3 mb-3 mb-lg-0">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-times fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Dislikes</div>
<div style="height: 158px; overflow: auto; padding-right: 10px;">
<ul class="m-0 pl-4" style="list-style-type: square;">
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<!-- Add more above this line -->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /PREFERENCES ------->
<!-- PERSONALITY -------->
<div class="col-lg-6 pl-lg-2">
<div class="bg-faded p-3">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-heartbeat fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Personality</div>
<div style="height: 416px; overflow: auto; padding-right: 10px;">
<!-- Tips:
- Change the % number to adjust the progress bars
- Alternatively, you can just delete the bars and replace this section with text
-->
<!-- CONFIDENCE -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Confidence</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- INTELLECT -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Intellect</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- EMPATHY -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Empathy</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- CHARISMA -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Charisma</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- PATIENCE -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Patience</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- TEMPER -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Temper</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- HUMOR -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Humor</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- CREATIVITY -->
<div class="mb-3"><span style="letter-spacing: 1.4px;">Creativity</span>
<div class="progress rounded-0 my-2" style="height: 8px">
<div class="progress-bar" style="background: #bf343f;
width: 50%;"></div>
</div>
</div>
<!-- Add more above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- /PERSONALITY ------->
</div>
</div>
<!-- TRIVIA --------------------------------------------------->
<div class="col-lg-6 p-2">
<div class="bg-faded p-3">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-chess fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Trivia</div>
<div style="height: 224px; overflow: auto; padding-right: 10px;">
<ul class="m-0 pl-4" style="list-style-type: square;">
<li class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li class="mb-2">Aliquam tincidunt mauris eu risus.</li>
<li class="mb-2">Vestibulum auctor dapibus neque.</li>
<li class="mb-2">Nunc tortor laoreet leo cras, fermentum accumsan eget ligula fusce, velit massa morbi.</li>
<li class="mb-2">Consectetur hendrerit blandit amet conubia bibendum vehicula, at ligula commodo feugiat ante nisl consequat, elementum rutrum platea integer vitae.</li>
<!-- Add more above this line -->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ---------------------------------------------------------->
<!-- RELATIONSHIPS -------------------------------------------->
<div class="col-lg-6 p-2">
<div class="bg-faded p-3">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #bf343f; color: #fff; font-size: 30px;"><i class="fas fa-users fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing: 4px;">Relationships</div>
<div style="height: 224px; overflow: auto; padding-right: 10px;">
<!-- CHARACTER -->
<div class="row no-gutters mb-2">
<!-- IMAGE | Replace the URL in the brackets () -->
<div class="col-auto mx-auto mb-2 mb-lg-0">
<div class="mx-auto" style="height: 100px; width: 100px;
background: url(https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80) center no-repeat;
background-size: cover;"></div>
</div>
<div class="col-auto col-md pl-md-2">
<!-- NAME + LINK | Replace # with URL to character -->
<a style="color: #bf343f"
href="#">
Name</a>
<i class="fas fa-angle-right fa-fw"></i>
<span class="text-muted">Relationship</span>
<hr class="my-1">
<div style="font-size: 12px;">
<!-- Writing Area -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit.</p>
<!-- --------------->
</div>
</div>
</div>
<!-- ------------>
<!-- CHARACTER -->
<div class="row no-gutters mb-2">
<!-- IMAGE | Replace the URL in the brackets () -->
<div class="col-auto mx-auto mb-2 mb-lg-0">
<div class="mx-auto" style="height: 100px; width: 100px;
background: url(https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80) center no-repeat;
background-size: cover;"></div>
</div>
<div class="col-auto col-md pl-md-2">
<!-- NAME + LINK | Replace # with URL to character -->
<a style="color: #bf343f"
href="#">
Name</a>
<i class="fas fa-angle-right fa-fw"></i>
<span class="text-muted">Relationship</span>
<hr class="my-1">
<div style="font-size: 12px;">
<!-- Writing Area -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit.</p>
<!-- --------------->
</div>
</div>
</div>
<!-- ------------>
<!-- Add more above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ---------------------------------------------------------->
</div>
<!-- CREDIT | Please do not remove! ------->
<div class="text-right px-2" style="font-size: 10px;">
<a href="https://toyhou.se/10616384.-f2u-redrum" style="color: #bf343f;"><i class="far fa-code tooltipster" title="Code by Sealkitty"></i></a>
</div>
</div>