xenoslayer
created by:8byte
HTMLMixed ColorsCharacter
Copy
<!---
==== XenoSlayer Character
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#1f51ff - main accent
--->
<div class="container p-0" style="max-width: 900px;">
<div class="row no-gutters">
<!--- name/image card --->
<div class="col-md-4 p-1" style="height: 10px;">
<div class="card d-flex flex-column justify-content-center align-items-center bg-faded rounded-0 p-md-3 p-2" style="border-width: 9px; height: 150px; border-style: double;">
<!--- name + pronunciation --->
<h1 class="display-4 text-muted font-weight-normal mb-0">Name Surname</h1>
<h5 class="font-weight-normal" style="color: #1f51ff;">pro . nun . ciation</h5>
</div>
</div>
<div class="col-md-8 p-1">
<div class="d-block d-md-none mt-2" style="height: 150px;"></div>
<ul class="nav flex-md-nowrap flex-wrap justify-content-center">
<li class="nav-item"><a href="#ONE" data-toggle="tab" class="nav-link active flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">about</strong><i class="far fa-circle-info fa-3x"></i></a></li>
<li class="nav-item"><a href="#TWO" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">details</strong><i class="far fa-list fa-3x"></i></a></li>
<li class="nav-item"><a href="#THREE" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">prsnlty</strong><i class="far fa-heartbeat fa-3x"></i></a></li>
<li class="nav-item"><a href="#FOUR" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">skills</strong><i class="far fa-sparkles fa-3x"></i></a></li>
<li class="nav-item"><a href="#FIVE" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">story</strong><i class="far fa-book fa-3x"></i></a></li>
<li class="nav-item"><a href="#SIX" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">trivia</strong><i class="far fa-puzzle-piece fa-3x"></i></a></li>
<li class="nav-item"><a href="#SEVEN" data-toggle="tab" class="nav-link flex-column align-items-center" style="color: #1f51ff;"><strong class="text-uppercase">links</strong><i class="far fa-users fa-3x"></i></a></li>
</ul>
<hr class="bg-faded my-1" style="border-width: 9px; border-top-style: double;">
</div>
<!--- tabs section --->
<div class="col-12 p-1">
<div class="tab-content">
<!--- about tab --->
<div class="tab-pane active" id="ONE">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- profile picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px; min-height: 200px;"></div>
</div>
<!--- music box --->
<div class="card d-flex flex-row align-items-center rounded-0 bg-faded p-2 mt-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<div style="position: relative;">
<div style="position: absolute; top: 0; left: -4px; z-index: 101;">
<!--- paste in ONLY the code following the watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 30px; width: 30px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-play fa-2x" style="color: #1f51ff;"></i>
</div>
<div class="d-flex flex-column ml-2">
<!--- song information --->
<h5 class="font-weight-normal mb-0 text-uppercase" style="color: #1f51ff;">
Song Title
</h5>
<p class="mb-0 text-muted font-italic">song artist(s)</p>
</div>
</div>
</div>
</div>
<div class="col-md-8 p-1">
<!--- basics --->
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-width: 9px; border-bottom-style: double;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Name</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">name</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Sexuality</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">sexuality</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Called</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">called</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Birthday</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">mm/dd</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Gender</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">gender</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Height</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">00'00"</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Pronouns</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">prn/prn</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Blood Type</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">O</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Age</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">00</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Zodiac</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">zodiac</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Species</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">species</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Creator</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">@creator</div>
<!--- end of content --->
</div>
</div>
<!--- adjectives --->
<div class="row no-gutters mx-n1 my-1">
<!--- adjective box (icon top) --->
<div class="col-md-4 col-6 p-1">
<div class="justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px; position: relative; z-index: 99;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
<div class="mt-n4 card d-flex flex-column align-items-center rounded-0 bg-faded px-2 overflow-hidden" style="border-width: 3px; border-bottom-width: 9px; border-bottom-style: double;">
<div class="card bg-faded rounded-circle mt-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted">
Adjective
</h5>
</div>
</div>
<!--- adjective box (icon top, center) --->
<div class="col-md-4 col-6 p-1">
<div class="justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px; position: relative; z-index: 99;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
<div class="mt-n4 card d-flex flex-column align-items-center rounded-0 bg-faded px-2 overflow-hidden" style="border-width: 3px; padding-bottom: 6px;">
<div class="card bg-faded rounded-circle mt-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted">
Adjective
</h5>
</div>
</div>
<!--- adjective box (icon top) --->
<div class="col-md-4 col-6 p-1">
<div class="justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px; position: relative; z-index: 99;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
<div class="mt-n4 card d-flex flex-column align-items-center rounded-0 bg-faded px-2 overflow-hidden" style="border-width: 3px; border-bottom-width: 9px; border-bottom-style: double;">
<div class="card bg-faded rounded-circle mt-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted">
Adjective
</h5>
</div>
</div>
<!--- adjective box (icon bottom) --->
<div class="col-md-4 col-6 p-1">
<div class="card d-flex flex-column align-items-center rounded-0 bg-faded px-2 pt-2 overflow-hidden" style="border-width: 3px;">
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted mb-1" style="padding-bottom: 6px;">
Adjective
</h5>
<div class="card bg-faded rounded-circle mb-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
</div>
<div class="mt-n4 justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
</div>
<!--- adjective box (icon bottom, center) --->
<div class="col-md-4 col-6 p-1">
<div class="card d-flex flex-column align-items-center rounded-0 bg-faded px-2 pt-2 overflow-hidden" style="border-width: 3px; border-top-width: 9px; border-top-style: double;">
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted mb-1">
Adjective
</h5>
<div class="card bg-faded rounded-circle mb-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
</div>
<div class="mt-n4 justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
</div>
<!--- adjective box (icon bottom) --->
<div class="col-md-4 col-6 p-1">
<div class="card d-flex flex-column align-items-center rounded-0 bg-faded px-2 pt-2 overflow-hidden" style="border-width: 3px;">
<!--- adjective text --->
<h5 class="font-weight-normal text-uppercase text-muted mb-1" style="padding-bottom: 6px;">
Adjective
</h5>
<div class="card bg-faded rounded-circle mb-n4" style="border-width: 3px; height: 3rem; width: 3rem;"></div>
</div>
<div class="mt-n4 justify-content-center">
<div class="card rounded-circle border-0" style="height: 2.8rem; width: 2.8rem; padding: 3px;">
<div class="card rounded-circle border-0 justify-content-center align-items-center w-100 h-100" style="background: #1f51ff;">
<!--- adjective icon --->
<i class="far fa-heart text-white"></i>
</div>
</div>
</div>
</div>
<!--- end of adjective --->
</div>
<!--- quote box --->
<div class="card rounded-0 bg-faded p-md-3 p-2 d-flex justify-content-center align-items-center" style="border-width: 3px; position: relative; border-bottom-width: 9px; border-bottom-style: double; border-top-width: 9px; border-top-style: double;">
<i class="fas fa-quote-right" style="color: #1f51ff; position: absolute; top: .5rem; right: .5rem;"></i>
<i class="fas fa-quote-left" style="color: #1f51ff; position: absolute; bottom: .5rem; left: .5rem;"></i>
<!--- quote --->
<p class="mb-0 font-italic">write your quote here...</p>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 p-md-3 p-2 bg-faded" style="border-width: 3px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">About</span>
<i class="far fa-circle-info text-muted"></i>
</h1>
<!--- text and images --->
<div class="overflow-auto card rounded-0 p-2" style="border-width: 3px; height: 270px;">
<div>
<div class="card rounded-0 pull-right p-1 ml-2 mb-2" style="border-bottom: 3px solid #1f51ff; border-right: 3px solid #1f51ff; border-top: none; border-left: none;">
<img src="IMGURL" style="max-width: 200px;">
</div>
<!--- text --->
<p>Maecenas condimentum orci vitae leo congue ultrices. In cursus tempor est, et suscipit orci bibendum sed. Phasellus quis ornare tortor, in mollis velit. Curabitur vehicula consequat sem, id blandit odio rhoncus hendrerit. Maecenas at placerat erat. Sed eget quam enim. Proin ultricies nunc sed auctor egestas. Morbi ipsum tellus, congue sit amet mi quis, venenatis consectetur mauris. Vivamus id libero non elit posuere euismod nec vitae nisl. Praesent nec nisi vel ipsum malesuada malesuada. Sed condimentum libero vel arcu laoreet efficitur.</p>
<p>Etiam congue placerat ligula vitae porta. Integer hendrerit odio scelerisque, lacinia arcu eu, volutpat velit. Fusce aliquet hendrerit est eget faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean dignissim eros in nibh condimentum pretium. Curabitur molestie a tellus vitae tincidunt. Fusce posuere lacus ex, vitae auctor libero finibus nec.</p>
<p>Duis ac ultrices dui. Sed sodales eget sapien ac ultrices. Duis auctor metus ante, eget scelerisque ipsum dignissim sit amet. Morbi efficitur porttitor diam, vitae lacinia sem porttitor a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, malesuada ac interdum a, fringilla sit amet ante. Nulla varius sit amet nunc non posuere. Phasellus ullamcorper, magna gravida tempor commodo, lectus lorem blandit nisl, eget sollicitudin lacus dui a orci.</p>
</div>
</div>
</div>
</div>
<!--- images --->
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<!--- end of images --->
</div>
</div>
<!--- details tab --->
<div class="tab-pane" id="TWO">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- side picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px; min-height: 100px;"></div>
</div>
</div>
</div>
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-right-width: 9px; border-right-style: double;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Hair</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">hair</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Power</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">power</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Build</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">build</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Fur</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">fur</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Content</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">content</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Content</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">content</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Special Features</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">
<ul class="list-unstyled">
<li>feature</li>
<li>feature</li>
<li>feature</li>
<li>feature</li>
</ul>
</div>
<!--- content --->
<div class="col-md-3 col-6 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Tail/Mane</strong></div>
<div class="col-md-3 col-6 py-1 text-muted">tail/mane</div>
<!--- end of content --->
</div>
</div>
</div>
</div>
<!--- images --->
<div class="row no-gutters mx-n1 my-1">
<div class="col-md-3 col-6 p-1 order-md-1 order-2">
<div class="card rounded-0 bg-faded" style="border-width: 3px; border-left-style: double; border-left-width: 9px; padding: 3px;">
<!--- left image --->
<div style="background: url(IMGURL); background-size: cover; height: 300px;"></div>
</div>
</div>
<div class="col-md-6 p-1 order-md-2 order-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- ref sheet --->
<div style="background: url(IMGURL); background-size: cover; height: 300px;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1 order-md-3 order-3">
<div class="card rounded-0 bg-faded" style="border-width: 3px; border-right-style: double; border-right-width: 9px; padding: 3px;">
<!--- right image --->
<div style="background: url(IMGURL); background-size: cover; height: 300px;"></div>
</div>
</div>
</div>
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Design Notes</span>
<i class="far fa-list text-muted"></i>
</h1>
<div class="card p-2 rounded-0" style="border-width: 3px; border-bottom: none;">
<ul class="list-unstyled mb-0" style="column-count: 2;">
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2" style="color: #1f51ff;"></i>content</li>
</ul>
</div>
<hr class="w-100 my-1" style="border-top-width: 9px; border-top-style: double;">
<div class="overflow-auto mt-2" style="height: 200px;">
<p>Integer a facilisis enim. Praesent eget arcu interdum, posuere tellus id, sollicitudin odio. Donec eget elit congue, facilisis dolor non, tincidunt justo. Nunc malesuada vestibulum lorem, eget laoreet ipsum dapibus sed. Nulla maximus dui turpis, suscipit rhoncus ipsum sagittis sit amet. In lobortis nisl ac nisl rhoncus feugiat. Nunc bibendum sed neque volutpat porta. In lobortis nisl vel dui mollis sollicitudin. Vestibulum rhoncus lorem eu nibh tincidunt iaculis eget vel augue. Proin lectus tellus, rutrum eget quam id, rutrum elementum justo. Mauris id gravida metus. In eu blandit nisl.</p>
<p>Mauris rhoncus eleifend nisl eu blandit. Nulla aliquam faucibus volutpat. Donec suscipit venenatis est. Nullam nec massa nec felis tempus rhoncus. Cras auctor quam ac dui sollicitudin, in finibus nisi sodales. Maecenas eget arcu magna. Nulla luctus metus vitae augue dictum consequat. Cras lacus orci, mattis ut pulvinar in, ornare non neque. Sed pharetra hendrerit consectetur. Cras dapibus euismod lacus ut porta. Nam eget placerat tortor. Nulla nulla ligula, pretium non neque non, vehicula finibus nunc. Praesent ut ex mauris. Quisque mauris metus, vestibulum eu aliquam sit amet, fringilla non nunc.</p>
</div>
</div>
<!--- quote box --->
<div class="card rounded-0 bg-faded p-md-3 p-2 d-flex justify-content-center align-items-center my-2" style="border-width: 3px; position: relative; border-bottom-width: 9px; border-bottom-style: double; border-top-width: 9px; border-top-style: double;">
<i class="fas fa-quote-right" style="color: #1f51ff; position: absolute; top: .5rem; right: .5rem;"></i>
<i class="fas fa-quote-left" style="color: #1f51ff; position: absolute; bottom: .5rem; left: .5rem;"></i>
<!--- quote --->
<p class="mb-0 font-italic">write your quote here...</p>
</div>
<!--- music section --->
<div class="card rounded-0 bg-faded p-md-3 p-2 my-2" style="border-width: 3px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Music</span>
<i class="far fa-music text-muted"></i>
</h1>
<div class="card p-2 rounded-0" style="border-width: 3px; border-bottom: none; border-right: none;">
<div class="row no-gutters">
<!--- column of songs --->
<div class="col-md-4 col-6 p-1">
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- end of songs --->
</div>
<!--- column of songs --->
<div class="col-md-4 col-6 p-1">
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- end of songs --->
</div>
<!--- column of songs --->
<div class="col-md-4 col-6 p-1">
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- song --->
<div>
<a href="LINK" style="color: #1f51ff;"><i class="fas fa-music-note mr-2"></i></a>
<span>song title - song artist</span>
</div>
<!--- end of songs --->
</div>
<!--- end of all songs --->
</div>
</div>
</div>
<div class="row no-gutters m-n1">
<div class="col-md-6 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px; border-left-style: double; border-left-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Likes</span>
<i class="far fa-heart text-muted"></i>
</h3>
<ul class="list-unstyled" style="column-count: 2;">
<!--- likes --->
<li><i class="far fa-heart mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px; border-left-style: double; border-left-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<i class="far fa-heart-broken text-muted"></i>
<span style="color: #1f51ff;">Dislikes</span>
</h3>
<ul class="list-unstyled" style="column-count: 2;">
<!--- likes --->
<li><i class="far fa-heart-broken mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart-broken mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart-broken mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-heart-broken mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Favorites</span>
<i class="far fa-heartbeat text-muted"></i>
</h1>
<div class="card p-2 rounded-0" style="border-width: 3px;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Food</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-bowl-chopsticks-noodles"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Drink</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-cup-straw"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Scent</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-spray-can-sparkles"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Color</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-palette"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Season</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-clouds-sun"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Flower</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-flower-tulip"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Genre</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-film"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-md-2 col-4 p-1"><strong class="text-uppercase" style="color: #1f51ff;">Music</strong></div>
<div class="col-md-2 col-4 justify-content-center align-items-center"><i class="far fa-music"></i></div>
<div class="col-md-2 col-4 p-1 text-muted text-right">content</div>
<!--- end of content --->
</div>
</div>
</div>
</div>
</div>
</div>
<!--- personality tab --->
<div class="tab-pane" id="THREE">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px; border-left-width: 9px; border-left-style: double;">
<!--- profile picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px;"></div>
</div>
</div>
</div>
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-width: 9px; border-bottom-style: double;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">MBTI</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-brain"></i></div>
<div class="col-4 py-1 text-muted text-right">xxxx-x</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Alignment</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-grid"></i></div>
<div class="col-4 py-1 text-muted text-right">alignment</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Temperament</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-hand-heart"></i></div>
<div class="col-4 py-1 text-muted text-right">temperament</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Enneagram</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="fab fa-connectdevelop"></i></div>
<div class="col-4 py-1 text-muted text-right">enneagram</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Sin</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-eye-evil"></i></div>
<div class="col-4 py-1 text-muted text-right">sin</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Element</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-wind"></i></div>
<div class="col-4 py-1 text-muted text-right">element</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Tarot</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-cards"></i></div>
<div class="col-4 py-1 text-muted text-right">tarot</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Social Group</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-users"></i></div>
<div class="col-4 py-1 text-muted text-right">social group</div>
<!--- end of content --->
</div>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 p-md-3 p-2 bg-faded" style="border-width: 3px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Stats</span>
<i class="far fa-chart-bar text-muted"></i>
</h1>
<div class="row no-gutters">
<div class="col-md">
<div class="card p-2 rounded-0" style="border-width: 3px; border-bottom: none; border-right: none;">
<div class="row no-gutters">
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Reserved</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Sociable</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Passive</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Assertive</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Foolish</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Clever</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Serious</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Playful</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Spiteful</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Kind</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Realistic</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Creative</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Impulsive</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Cautious</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Irrational</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Logical</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Devious</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Honest</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Optimistic</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Pessimistic</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Indifferent</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Emotional</small></div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Cooperative</small></div>
<div class="col-6 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: transparent; border-right: 8px solid #1f51ff;"></div>
</div>
</div>
<div class="col-3 text-right"><small class="text-uppercase text-muted">Lone Wolf</small></div>
<!--- end of stat --->
</div>
</div>
</div>
<div class="col d-none d-md-block card rounded-0 bg-faded" style="max-width: 9px; border-left-width: 3px; border-right-width: 3px; border-top: none; border-bottom: none;"></div>
<div class="col-12 d-block d-md-none my-2 card rounded-0 bg-faded" style="height: 9px; border-top-width: 3px; border-bottom-width: 3px; border-left: none; border-right: none;"></div>
<div class="col-md">
<div class="card p-2 rounded-0" style="border-width: 3px; border-top: none; border-left: none;">
<div class="row no-gutters">
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Charisma</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Kindness</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Patience</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Integrity</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Intellect</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Manners</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Maturity</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Courage</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Humor</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Temper</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Confidence</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-3"><small class="text-uppercase text-muted">Luck</small></div>
<div class="col-9 align-items-center">
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
</div>
</div>
</div>
</div>
</div>
<!--- trait box --->
<div class="col-md-4 p-1">
<div class="card h-100 rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Positive</span>
<i class="far fa-plus text-muted"></i>
</h3>
<ul class="list-unstyled" style="column-count: 2;">
<!--- positive traits --->
<li><i class="far fa-plus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-plus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-plus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-plus mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
<!--- trait box --->
<div class="col-md-4 p-1">
<div class="card h-100 rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-top-style: double; border-top-width: 9px; border-bottom-style: double; border-bottom-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Neutral</span>
<i class="far fa-equals text-muted"></i>
</h3>
<ul class="list-unstyled" style="column-count: 2;">
<!--- neutral traits --->
<li><i class="far fa-equals mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-equals mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-equals mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-equals mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
<!--- trait box --->
<div class="col-md-4 p-1">
<div class="card h-100 rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Negative</span>
<i class="far fa-times text-muted"></i>
</h3>
<ul class="list-unstyled" style="column-count: 2;">
<!--- negative traits --->
<li><i class="far fa-times mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-times mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-times mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-times mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; border-left-style: double; border-left-width: 9px; border-right-style: double; border-right-width: 9px;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
<!--- hobbies/fandoms box --->
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Hobbies/Fandoms</span>
<i class="far fa-stars text-muted"></i>
</h1>
<div class="overflow-auto" style="height: 200px;">
<div class="card p-2 rounded-0" style="border-width: 3px; border-top: none; border-left: none;">
<ul class="list-unstyled" style="column-count: 2;">
<!--- hobbies/fandoms --->
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-star mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-6 p-1">
<div class="card h-100 rounded-0 bg-faded" style="border-width: 3px;">
<!--- image --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; min-height: 200px;"></div>
</div>
</div>
<div class="col-md-4 col-6 p-1">
<div class="card h-100 rounded-0 bg-faded" style="border-width: 3px;">
<!--- image --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; min-height: 200px;"></div>
</div>
</div>
<!--- fears box --->
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Fears</span>
<i class="far fa-skull text-muted"></i>
</h1>
<div class="overflow-auto" style="height: 200px;">
<div class="card p-2 rounded-0" style="border-width: 3px; border-top: none; border-right: none;">
<ul class="list-unstyled" style="column-count: 2;">
<!--- fears --->
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-skull mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<!--- quirks + habits box --->
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; border-right-style: double; border-right-width: 9px;">
<div class="overflow-auto" style="height: 300px;">
<!--- quirk --->
<div class="d-flex flex-row my-2">
<div class="rounded-circle card bg-faded border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px; position: relative; z-index: 99;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<!--- quirk icon --->
<i class="fas fa-brain-circuit text-white"></i>
</div>
</div>
<div class="card rounded-0 text-right py-2 pr-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px; overflow: hidden; margin-left: -20px; padding-left: 40px;">
<!--- quirk title --->
<h3 class="font-weight-normal text-muted mb-0">Quirk</h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; left: -25px; top: 0; border-width: 3px;"></div>
</div>
</div>
<!--- description of quirk --->
<div class="card p-2" style="border-width: 3px;">
<p>Morbi quis lorem nec tellus porta cursus non id quam. Nam tincidunt purus quam, pharetra commodo felis vehicula in. Nam semper est eget est dapibus, at elementum sapien tincidunt. Nulla blandit, orci nec placerat tincidunt, massa mi pretium mi, sed lobortis dui nunc at nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<!--- quirk --->
<div class="d-flex flex-row my-2">
<div class="rounded-circle card bg-faded border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px; position: relative; z-index: 99;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<!--- quirk icon --->
<i class="fas fa-brain-circuit text-white"></i>
</div>
</div>
<div class="card rounded-0 text-right py-2 pr-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px; overflow: hidden; margin-left: -20px; padding-left: 40px;">
<!--- quirk title --->
<h3 class="font-weight-normal text-muted mb-0">Quirk</h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; left: -25px; top: 0; border-width: 3px;"></div>
</div>
</div>
<!--- description of quirk --->
<div class="card p-2" style="border-width: 3px;">
<p>Morbi quis lorem nec tellus porta cursus non id quam. Nam tincidunt purus quam, pharetra commodo felis vehicula in. Nam semper est eget est dapibus, at elementum sapien tincidunt. Nulla blandit, orci nec placerat tincidunt, massa mi pretium mi, sed lobortis dui nunc at nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<!--- end of quirk --->
<!--- habit --->
<div class="d-flex flex-row justify-content-end my-2">
<div class="card rounded-0 text-right py-2 pl-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; overflow: hidden; margin-right: -20px; padding-right: 40px;">
<!--- habit title --->
<h3 class="font-weight-normal text-muted mb-0">Habit</h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; right: -25px; top: 0; border-width: 3px;"></div>
</div>
<div class="rounded-circle card bg-faded border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<!--- habit icon --->
<i class="fas fa-clipboard-list text-white"></i>
</div>
</div>
</div>
<!--- description of habit --->
<div class="card p-2" style="border-width: 3px;">
<p>Morbi quis lorem nec tellus porta cursus non id quam. Nam tincidunt purus quam, pharetra commodo felis vehicula in. Nam semper est eget est dapibus, at elementum sapien tincidunt. Nulla blandit, orci nec placerat tincidunt, massa mi pretium mi, sed lobortis dui nunc at nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<!--- habit --->
<div class="d-flex flex-row justify-content-end my-2">
<div class="card rounded-0 text-right py-2 pl-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; overflow: hidden; margin-right: -20px; padding-right: 40px;">
<!--- habit title --->
<h3 class="font-weight-normal text-muted mb-0">Habit</h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; right: -25px; top: 0; border-width: 3px;"></div>
</div>
<div class="rounded-circle card bg-faded border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<!--- habit icon --->
<i class="fas fa-clipboard-list text-white"></i>
</div>
</div>
</div>
<!--- description of habit --->
<div class="card p-2" style="border-width: 3px;">
<p>Morbi quis lorem nec tellus porta cursus non id quam. Nam tincidunt purus quam, pharetra commodo felis vehicula in. Nam semper est eget est dapibus, at elementum sapien tincidunt. Nulla blandit, orci nec placerat tincidunt, massa mi pretium mi, sed lobortis dui nunc at nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<!--- end of habit --->
</div>
</div>
</div>
</div>
</div>
<!--- skills tab --->
<div class="tab-pane" id="FOUR">
<div class="row no-gutters m-n1">
<div class="col-md-4 d-flex flex-column p-1">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card h-100 bg-faded rounded-0 p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<h3 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Skills</span>
<i class="far fa-sparkles text-muted"></i>
</h3>
<div class="row no-gutters m-n1">
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex" style="justify-content: space-between;">
<small class="text-uppercase text-muted">Attack</small>
<small>[ 00% ]</small>
</div>
<div class="progress w-100 rounded-0" style="height: 12px; padding: 2px;">
<!--- change stat width here --->
<div class="progress-bar h-100" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-top-width: 9px; border-top-style: double;">
<div class="card rounded-0 p-2 mt-2" style="border-width: 3px;">
<!--- skill --->
<p class="text-muted d-flex mb-0" style="justify-content: space-between;">
<!--- skill name --->
<span>Skill Name</span>
<span>
<!--- skill strength --->
<i class="fas fa-star" style="color: #1f51ff;"></i> <!--- colored star --->
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="far fa-star"></i> <!--- empty star --->
<i class="far fa-star"></i>
</span>
</p>
<!--- description of skill --->
<small>Vivamus elementum congue nulla nec lobortis. Donec vulputate ante in cursus eleifend.</small>
</div>
<div class="card rounded-0 p-2 mt-2" style="border-width: 3px;">
<!--- skill --->
<p class="text-muted d-flex mb-0" style="justify-content: space-between;">
<!--- skill name --->
<span>Skill Name</span>
<span>
<!--- skill strength --->
<i class="fas fa-star" style="color: #1f51ff;"></i> <!--- colored star --->
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="far fa-star"></i> <!--- empty star --->
<i class="far fa-star"></i>
</span>
</p>
<!--- description of skill --->
<small>Vivamus elementum congue nulla nec lobortis. Donec vulputate ante in cursus eleifend.</small>
</div>
<div class="card rounded-0 p-2 mt-2" style="border-width: 3px;">
<!--- skill --->
<p class="text-muted d-flex mb-0" style="justify-content: space-between;">
<!--- skill name --->
<span>Skill Name</span>
<span>
<!--- skill strength --->
<i class="fas fa-star" style="color: #1f51ff;"></i> <!--- colored star --->
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="far fa-star"></i> <!--- empty star --->
<i class="far fa-star"></i>
</span>
</p>
<!--- description of skill --->
<small>Vivamus elementum congue nulla nec lobortis. Donec vulputate ante in cursus eleifend.</small>
</div>
<div class="card rounded-0 p-2 mt-2" style="border-width: 3px;">
<!--- skill --->
<p class="text-muted d-flex mb-0" style="justify-content: space-between;">
<!--- skill name --->
<span>Skill Name</span>
<span>
<!--- skill strength --->
<i class="fas fa-star" style="color: #1f51ff;"></i> <!--- colored star --->
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="fas fa-star" style="color: #1f51ff;"></i>
<i class="far fa-star"></i> <!--- empty star --->
<i class="far fa-star"></i>
</span>
</p>
<!--- description of skill --->
<small>Vivamus elementum congue nulla nec lobortis. Donec vulputate ante in cursus eleifend.</small>
<!--- end of skill --->
</div>
</div>
</div>
<div class="col-md-8 p-1">
<div class="h-100 d-flex flex-column">
<!--- quote box --->
<div class="card rounded-0 bg-faded p-md-3 p-2 d-flex justify-content-center align-items-center h-100" style="border-width: 3px; position: relative; border-bottom-width: 9px; border-bottom-style: double; border-top-width: 9px; border-top-style: double;">
<i class="fas fa-quote-right" style="color: #1f51ff; position: absolute; top: .5rem; right: .5rem;"></i>
<i class="fas fa-quote-left" style="color: #1f51ff; position: absolute; bottom: .5rem; left: .5rem;"></i>
<!--- quote --->
<p class="mb-0 font-italic">write your quote here...</p>
</div>
<div class="card bg-faded rounded-0 p-md-3 p-2 mt-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Combat</span>
<i class="far fa-swords text-muted"></i>
</h1>
<!--- combat circle --->
<div class="container d-flex justify-content-center p-0" style="position: relative; width: 18rem; height: 18rem;">
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; top: .75rem;">
<h5 class="text-center text-uppercase mb-0">Attack</h5>
</div>
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(60deg);">
<h5 class="text-center text-uppercase mb-0" style="transform: rotate(-60deg); padding-left: 1rem;">Defense</h5>
</div>
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(120deg);">
<h5 class="text-center text-uppercase mb-0" style="transform: rotate(-120deg); padding-left: 1rem;">Speed</h5>
</div>
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(180deg); margin-top: -.75rem;">
<h5 class="text-center text-uppercase mb-0" style="transform: rotate(-180deg);">Protection</h5>
</div>
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(240deg);">
<h5 class="text-center text-uppercase mb-0" style="transform: rotate(-240deg); padding-right: 1rem;">Magic</h5>
</div>
<div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(300deg);">
<h5 class="text-center text-uppercase mb-0" style="transform: rotate(-300deg); padding-right: 1rem;">Support</h5>
</div>
<!--- clip path --->
<div class="container mx-auto" style="background: #1f51ff; opacity: .25; position: absolute; width: 14.3rem; height: 14.3rem; z-index: 99; top: 1.85rem;"></div>
<!--- the circle --->
<div class="card my-auto mx-auto rounded-circle p-3">
<div class="card rounded-circle p-3">
<div class="card rounded-circle p-3">
<div class="card rounded-circle p-3">
<div class="card rounded-circle p-3">
<div class="card rounded-circle p-3">
<div class="card rounded-circle" style="width: 1.5rem; height: 1.5rem;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="w-100 my-2" style="border-top-width: 9px; border-top-style: double;">
<h5 class="font-weight-normal text-uppercase text-muted">Weaknesses</h5>
<div class="card rounded-0 p-2" style="border-width: 3px;">
<ul class="list-unstyled mb-0">
<!--- weaknesses --->
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i> content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i> content</li>
</ul>
</div>
<hr class="w-100 my-2" style="border-top-width: 9px; border-top-style: double;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Tactic</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-swords"></i></div>
<div class="col-4 py-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Attitude</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-hand-holding-heart"></i></div>
<div class="col-4 py-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Distance</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-bullseye-arrow"></i></div>
<div class="col-4 py-1 text-muted text-right">content</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Weapon</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-sword"></i></div>
<div class="col-4 py-1 text-muted text-right">content</div>
<!--- end of content --->
</div>
</div>
</div>
</div>
<!--- ability --->
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; position: relative; border-left-width: 9px; border-left-style: double;">
<div class="row no-gutters">
<div class="col-md-8 flex-column justify-content-center align-items-center p-md-3 p-2">
<h1 class="text-uppercase w-100 font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<!--- ability name --->
<i class="far fa-fire-flame-curved text-muted"></i>
<span style="color: #1f51ff;">Ability Name</span>
</h1>
<p class="mb-0 font-italic text-right w-100">Description of the ability</p>
</div>
<div class="col-md-4">
<div class="card rounded-0 bg-faded p-1" style="border-width: 3px; border-left: none; border-top: none; border-color: #1f51ff;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
<div class="col-md-2 p-1 justify-content-center align-items-center">
<!--- icon --->
<i class="fas fa-fire-flame-curved fa-3x" style="color: #1f51ff;"></i>
</div>
<div class="col-md-5 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
</div>
</div>
<!--- story tab --->
<div class="tab-pane" id="FIVE">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="d-none d-md-block" style="height: calc(44px + .75rem);"></div>
<!--- table of contents --->
<!--- subsection --->
<div class="d-flex flex-row mb-2">
<div class="card flex-fill rounded-0 bg-faded p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; overflow: hidden; margin-right: -20px;">
<h3 class="font-weight-normal mb-0"><a href="#CHILDHOOD" class="text-muted">Childhood</a></h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; right: -25px; top: 0; border-width: 3px;"></div>
</div>
<div class="rounded-circle card border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<a href="#CHILDHOOD" class="text-white"><i class="fas fa-bookmark"></i></a>
</div>
</div>
</div>
<!--- subsection --->
<div class="d-flex flex-row mb-2">
<div class="card flex-fill rounded-0 bg-faded p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; overflow: hidden; margin-right: -20px;">
<h3 class="font-weight-normal mb-0"><a href="#TEENHOOD" class="text-muted">Teenhood</a></h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; right: -25px; top: 0; border-width: 3px;"></div>
</div>
<div class="rounded-circle card border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<a href="#TEENHOOD" class="text-white"><i class="fas fa-bookmark"></i></a>
</div>
</div>
</div>
<!--- subsection --->
<div class="d-flex flex-row">
<div class="card flex-fill rounded-0 bg-faded p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px; overflow: hidden; margin-right: -20px;">
<h3 class="font-weight-normal mb-0"><a href="#ADULTHOOD" class="text-muted">Adulthood</a></h3>
<div class="rounded-circle card bg-faded" style="position: absolute; height: 45px; width: 45px; right: -25px; top: 0; border-width: 3px;"></div>
</div>
<div class="rounded-circle card border-0" style="height: 42px; width: 42px; top: 4px; padding: 3px;">
<div class="rounded-circle h-100 d-flex justify-content-center align-items-center" style="background: #1f51ff;">
<a href="#ADULTHOOD" class="text-white"><i class="fas fa-bookmark"></i></a>
</div>
</div>
</div>
<!--- end of subsection --->
</div>
<div class="col-md-8 p-1">
<div class="h-100 d-flex flex-column">
<!--- quote box --->
<div class="card rounded-0 bg-faded p-md-3 p-2 d-flex justify-content-center align-items-center h-100" style="border-width: 3px; position: relative; border-bottom-width: 9px; border-bottom-style: double; border-top-width: 9px; border-top-style: double;">
<i class="fas fa-quote-right" style="color: #1f51ff; position: absolute; top: .5rem; right: .5rem;"></i>
<i class="fas fa-quote-left" style="color: #1f51ff; position: absolute; bottom: .5rem; left: .5rem;"></i>
<!--- quote --->
<p class="mb-0 font-italic">write your quote here...</p>
</div>
</div>
</div>
<!--- subsection --->
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; position: relative; border-left-width: 9px; border-left-style: double;">
<div class="row no-gutters">
<div class="col-md-6 flex-column justify-content-center align-items-center p-md-3 p-2">
<h1 class="text-uppercase w-100 font-italic font-weight-normal d-flex" style="justify-content: space-between;" id="CHILDHOOD">
<i class="far fa-bookmark text-muted"></i>
<span style="color: #1f51ff;">Childhood</span>
</h1>
<p class="mb-0 font-italic text-right w-100">write your quote/tagline/subtitle here...</p>
</div>
<div class="col-md-6">
<div class="card rounded-0 bg-faded p-1" style="border-width: 3px; border-left: none; border-top: none; border-color: #1f51ff;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
</div>
<div class="overflow-auto card rounded-0 p-2 mt-2" style="border-width: 3px; max-height: 200px;">
<!--- story content --->
<p>Duis fermentum volutpat metus, in rhoncus purus scelerisque eu. Proin efficitur risus lobortis, tincidunt massa vitae, laoreet ex. Cras libero libero, mattis in mi vel, semper aliquet risus. Vestibulum feugiat urna at leo bibendum faucibus. Donec lacinia est sed mi finibus, eget vehicula ante tincidunt. Integer aliquam urna sit amet accumsan aliquam. Nullam in leo in massa lobortis lobortis. Donec vel lectus non mi porta ullamcorper quis eget arcu. Nam varius non mauris ut consequat. Sed cursus, leo id molestie auctor, odio quam pretium magna, a malesuada justo diam vel risus. In a turpis ullamcorper, tincidunt orci sit amet, interdum erat. Aenean urna purus, tempor a euismod vel, cursus sit amet lorem. Pellentesque quis congue augue. Curabitur gravida faucibus augue quis viverra. Cras sagittis tempor nibh a volutpat.</p>
<p>Nulla a accumsan lectus, id dictum neque. Cras tristique tellus id urna dapibus pharetra. Fusce sapien est, interdum at risus nec, mollis faucibus tellus. Etiam ac metus ut enim volutpat gravida sit amet ut nisi. Nulla dignissim bibendum vulputate. Vestibulum in mauris placerat, dignissim felis vel, aliquam orci. Praesent eget quam eget lorem sodales tincidunt ac vel eros. Sed nulla libero, finibus et maximus in, eleifend vitae odio. Nam at risus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas porta rutrum ligula, vehicula ultricies orci suscipit quis. Quisque tincidunt id tellus eget facilisis. Proin vehicula dapibus mi id pretium. Sed vehicula lectus et nibh sagittis dictum. Quisque molestie libero sed urna condimentum condimentum.</p>
</div>
</div>
</div>
<!--- subsection --->
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; position: relative; border-right-width: 9px; border-right-style: double;">
<div class="row no-gutters">
<div class="col-md-6 flex-column justify-content-center align-items-center p-md-3 p-2 order-2">
<h1 class="text-uppercase w-100 font-italic font-weight-normal d-flex" style="justify-content: space-between;" id="TEENHOOD">
<span style="color: #1f51ff;">Teenhood</span>
<i class="far fa-bookmark text-muted"></i>
</h1>
<p class="w-100 text-left mb-0 font-italic">write your quote/tagline/subtitle here...</p>
</div>
<div class="col-md-6 order-1">
<div class="card rounded-0 bg-faded p-1" style="border-width: 3px; border-right: none; border-bottom: none; border-color: #1f51ff;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
</div>
<div class="overflow-auto card rounded-0 p-2 mt-2" style="border-width: 3px; max-height: 200px;">
<!--- story content --->
<p>Duis fermentum volutpat metus, in rhoncus purus scelerisque eu. Proin efficitur risus lobortis, tincidunt massa vitae, laoreet ex. Cras libero libero, mattis in mi vel, semper aliquet risus. Vestibulum feugiat urna at leo bibendum faucibus. Donec lacinia est sed mi finibus, eget vehicula ante tincidunt. Integer aliquam urna sit amet accumsan aliquam. Nullam in leo in massa lobortis lobortis. Donec vel lectus non mi porta ullamcorper quis eget arcu. Nam varius non mauris ut consequat. Sed cursus, leo id molestie auctor, odio quam pretium magna, a malesuada justo diam vel risus. In a turpis ullamcorper, tincidunt orci sit amet, interdum erat. Aenean urna purus, tempor a euismod vel, cursus sit amet lorem. Pellentesque quis congue augue. Curabitur gravida faucibus augue quis viverra. Cras sagittis tempor nibh a volutpat.</p>
<p>Nulla a accumsan lectus, id dictum neque. Cras tristique tellus id urna dapibus pharetra. Fusce sapien est, interdum at risus nec, mollis faucibus tellus. Etiam ac metus ut enim volutpat gravida sit amet ut nisi. Nulla dignissim bibendum vulputate. Vestibulum in mauris placerat, dignissim felis vel, aliquam orci. Praesent eget quam eget lorem sodales tincidunt ac vel eros. Sed nulla libero, finibus et maximus in, eleifend vitae odio. Nam at risus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas porta rutrum ligula, vehicula ultricies orci suscipit quis. Quisque tincidunt id tellus eget facilisis. Proin vehicula dapibus mi id pretium. Sed vehicula lectus et nibh sagittis dictum. Quisque molestie libero sed urna condimentum condimentum.</p>
</div>
</div>
</div>
<!--- subsection --->
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; position: relative; border-left-width: 9px; border-left-style: double;">
<div class="row no-gutters">
<div class="col-md-6 flex-column justify-content-center align-items-center p-md-3 p-2">
<h1 class="text-uppercase w-100 font-italic font-weight-normal d-flex" style="justify-content: space-between;" id="ADULTHOOD">
<i class="far fa-bookmark text-muted"></i>
<span style="color: #1f51ff;">Adulthood</span>
</h1>
<p class="w-100 text-right mb-0 font-italic">write your quote/tagline/subtitle here...</p>
</div>
<div class="col-md-6">
<div class="card rounded-0 bg-faded p-1" style="border-width: 3px; border-left: none; border-top: none; border-color: #1f51ff;">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 200px;"></div>
</div>
</div>
</div>
<div class="overflow-auto card rounded-0 p-2 mt-2" style="border-width: 3px; max-height: 200px;">
<!--- story content --->
<p>Duis fermentum volutpat metus, in rhoncus purus scelerisque eu. Proin efficitur risus lobortis, tincidunt massa vitae, laoreet ex. Cras libero libero, mattis in mi vel, semper aliquet risus. Vestibulum feugiat urna at leo bibendum faucibus. Donec lacinia est sed mi finibus, eget vehicula ante tincidunt. Integer aliquam urna sit amet accumsan aliquam. Nullam in leo in massa lobortis lobortis. Donec vel lectus non mi porta ullamcorper quis eget arcu. Nam varius non mauris ut consequat. Sed cursus, leo id molestie auctor, odio quam pretium magna, a malesuada justo diam vel risus. In a turpis ullamcorper, tincidunt orci sit amet, interdum erat. Aenean urna purus, tempor a euismod vel, cursus sit amet lorem. Pellentesque quis congue augue. Curabitur gravida faucibus augue quis viverra. Cras sagittis tempor nibh a volutpat.</p>
<p>Nulla a accumsan lectus, id dictum neque. Cras tristique tellus id urna dapibus pharetra. Fusce sapien est, interdum at risus nec, mollis faucibus tellus. Etiam ac metus ut enim volutpat gravida sit amet ut nisi. Nulla dignissim bibendum vulputate. Vestibulum in mauris placerat, dignissim felis vel, aliquam orci. Praesent eget quam eget lorem sodales tincidunt ac vel eros. Sed nulla libero, finibus et maximus in, eleifend vitae odio. Nam at risus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas porta rutrum ligula, vehicula ultricies orci suscipit quis. Quisque tincidunt id tellus eget facilisis. Proin vehicula dapibus mi id pretium. Sed vehicula lectus et nibh sagittis dictum. Quisque molestie libero sed urna condimentum condimentum.</p>
</div>
</div>
</div>
<!--- end of subsection --->
</div>
</div>
<!--- trivia tab --->
<div class="tab-pane" id="SIX">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column" style="min-height: 300px;">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card bg-faded rounded-0 h-100 mb-2" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px;"></div>
</div>
<div class="card bg-faded rounded-0 h-100 mb-2" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px;"></div>
</div>
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px;"></div>
</div>
</div>
</div>
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-width: 9px; border-bottom-style: double;">
<div class="row no-gutters my-n1">
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Chinese Zodiac</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-rabbit"></i></div>
<div class="col-4 py-1 text-muted text-right">zodiac</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Gemstone</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-gem"></i></div>
<div class="col-4 py-1 text-muted text-right">gemstone</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Flower</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-trillium"></i></div>
<div class="col-4 py-1 text-muted text-right">flower</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Spirit Animal</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-paw"></i></div>
<div class="col-4 py-1 text-muted text-right">animal</div>
<!--- content --->
<div class="col-4 py-1"><strong class="text-uppercase" style="color: #1f51ff;">Content</strong></div>
<div class="col-4 justify-content-center align-items-center"><i class="far fa-heart"></i></div>
<div class="col-4 py-1 text-muted text-right">content</div>
<!--- end of content --->
</div>
<hr class="w-100 my-2" style="border-top-width: 9px; border-top-style: double;">
<div class="overflow-auto card rounded-0 p-2" style="border-width: 3px; height: 200px;">
<!--- more text --->
<p>Nam imperdiet, felis in tincidunt rhoncus, sem odio eleifend nisi, vitae fermentum lorem erat at velit. Duis iaculis nisl est, posuere feugiat ligula ultrices non. Suspendisse blandit ultrices risus in blandit. Proin commodo orci ultrices quam ultrices efficitur. Integer commodo nibh at velit tempus condimentum. Nullam lorem justo, congue vel sapien a, gravida lobortis purus. Nullam hendrerit dapibus mattis. Quisque sit amet eleifend felis. Mauris sagittis, nisi placerat laoreet semper, sapien nibh hendrerit massa, eu faucibus odio ligula vitae metus. Duis ultrices ultrices libero, at rhoncus justo faucibus eget. Donec nibh diam, interdum ut efficitur ac, fermentum at arcu. Vivamus nulla lacus, commodo at neque tincidunt, aliquet vestibulum arcu.</p>
</div>
</div>
</div>
<div class="col-md-8 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-left-style: double; border-left-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Trivia</span>
<i class="far fa-puzzle-piece text-muted"></i>
</h1>
<div class="overflow-auto card rounded-0 p-2" style="border-width: 3px; height: 200px;">
<ul class="list-unstyled mb-0">
<!--- trivia --->
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i>content</li>
<li><i class="far fa-minus mr-2" style="color: #1f51ff;"></i>content</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card h-100 rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container h-100" style="background: url(IMGURL); background-size: cover; min-height: 200px;"></div>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex mb-0" style="justify-content: space-between;">
<span style="color: #1f51ff;">Moodboard</span>
<i class="far fa-camera-retro text-muted"></i>
</h1>
</div>
</div>
<!--- images --->
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="card rounded-0 bg-faded" style="border-width: 3px; padding: 3px;">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<!--- end of images --->
</div>
</div>
<!--- relationships tab --->
<div class="tab-pane" id="SEVEN">
<div class="row no-gutters m-n1">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column">
<div class="d-none d-md-block" style="min-height: calc(44px + .75rem);"></div>
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px; min-height: 200px;"></div>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px; min-height: 200px;"></div>
</div>
</div>
<div class="col-md-2 p-1">
<div class="card bg-faded rounded-0 h-100" style="border-width: 3px;">
<!--- picture --->
<div class="h-100" style="background: url(IMGURL); background-size: cover; background-position: center; border-width: 3px; min-height: 200px;"></div>
</div>
</div>
<div class="col-12 p-1">
<div class="card rounded-0 bg-faded p-md-3 p-2" style="border-width: 3px; border-right-style: double; border-right-width: 9px;">
<h1 class="text-uppercase font-italic font-weight-normal d-flex" style="justify-content: space-between;">
<span style="color: #1f51ff;">Relationships</span>
<i class="far fa-users text-muted"></i>
</h1>
<!--- relationships text box --->
<div class="overflow-auto" style="max-height: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel accumsan nisl. Phasellus sed dignissim ligula. Aliquam erat volutpat. Curabitur at quam congue, sagittis mauris sit amet, vehicula nibh. Vestibulum in facilisis nibh, ut pretium nisl. Nulla hendrerit vehicula velit. Pellentesque sollicitudin pharetra tempor. Vestibulum tempor vestibulum sapien non finibus. Proin commodo dignissim elit, a faucibus purus ultrices at. In dignissim aliquet semper. Cras a pulvinar eros, eget faucibus elit.</p>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-4 col-md-6 p-1">
<div class="card rounded-0 bg-faded p-2" style="border-width: 3px; border-bottom-style: double; border-bottom-width: 9px;">
<div class="d-flex align-items-end overflow-hidden" style="background: #1f51ff; height: 100px;">
<div class="card rounded-circle bg-faded mx-auto" style="width: 150px; height: 150px; border-width: 3px; margin-bottom: -75px;"></div>
</div>
<div class="rounded-circle mx-auto p-2" style="width: 150px; height: 150px; margin-top: -75px; position: relative; z-index: 99;">
<!--- character picture --->
<div class="rounded-circle w-100 h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
<!--- character name and link --->
<a href="LINK" style="color: #1f51ff;"><h5 class="font-weight-normal font-italic text-center mb-0">Character Name</h5></a>
<small class="text-uppercase text-center mb-2">
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
<!--- relationship --->
Relationship
<i class="fas fa-circle mx-1" style="font-size: 8px;"></i>
</small>
<!--- relationship information --->
<div class="card rounded-0 p-2" style="border-width: 3px;">
<!--- character stats --->
<div class="row no-gutters">
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Affection</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Respect</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Trust</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Caring</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- stat --->
<div class="col-4"><small class="text-uppercase">Comfort</small></div>
<div class="col-8 align-items-center">
<div class="progress w-100" style="height: 10px; border-radius: 5px 0 0 5px;">
<!--- change progress bar width here --->
<div class="progress-bar" style="width: 50%; background: #1f51ff;"></div>
</div>
</div>
<!--- end of stat --->
</div>
<hr class="w-100 my-2" style="border-width: 3px;">
<div class="overflow-auto" style="height: 150px;">
<!--- description of their relationship --->
<p>Donec facilisis ultrices felis, ac imperdiet arcu mollis feugiat. Aliquam volutpat massa ac eros molestie vehicula. Vestibulum dui massa, faucibus nec libero vestibulum, molestie molestie libero. Nam dui ipsum, fringilla ac posuere eget, varius ac enim. Praesent laoreet ex ac porta aliquam. Nunc placerat sapien egestas pretium aliquet. Donec dictum pellentesque quam, sit amet pharetra dolor elementum ac. Nunc lectus velit, vehicula a mollis vel, auctor nec arcu. Sed mattis sem blandit eros posuere congue.</p>
</div>
</div>
</div>
</div>
<!--- end of relationship --->
</div>
</div>
<!--- end of tabs --->
</div>
</div>
</div>
<div class="d-flex align-items-center px-1">
<hr class="flex-fill bg-faded mr-2 my-2" style="border-width: 3px;">
<a href="/8byte" class="text-uppercase font-weight-bold" style="color: #1f51ff;">code credits</a>
</div>
</div>