<!--------------------------------------
ASARI - TABBED [ F2U ]
COLOURS:
- Black: #000
- White: #fff
- Off-white: #eee
- Darkest Blue: #064273
- Second Darkest: #76b6c4
- Second Lightest: #7fcdff
- Lightest Blue: #def3f6
- Accent (Grey): #aab6bf
--------------------------------------->
<div class="container p-0" style="max-width:800px; font-size:13px; color:#000;">
<div class="card p-1" style="background-color:#eee; border:1px #eee solid;">
<!-- HEADER IMAGE -->
<div class="col-12 p-1">
<div class="card border-0 justify-content-center" style="height:200px; background-image:url(IMG_URL); background-position:center; background-size:cover;">
<!-- DECOR -->
<div class="card rounded-0 p-2 mx-auto justify-content-center text-center" style="background-color:rgba(0,0,0,0); border:3px #fff solid;">
<div class="card rounded-0 p-3" style="background-color:rgba(0,0,0,0); border:3px #fff solid;">
<i class="fas fa-water fa-4x fa-fade" style="color:#fff;"></i>
</div>
</div>
</div>
</div>
<!-- NAME PLATE -->
<div class="col-12 p-0">
<div class="card bg-transparent border-0 p-1">
<div class="row no-gutters">
<!-- PALETTE -->
<div class="col-2 p-1">
<div class="card p-1 border-0 h-100" style="background-color:#064273"></div>
</div>
<!-- PALETTE -->
<div class="col-2 p-1">
<div class="card p-1 border-0 h-100" style="background-color:#76b6c4"></div>
</div>
<!-- PALETTE -->
<div class="col-2 p-1">
<div class="card p-1 border-0 h-100" style="background-color:#7fcdff"></div>
</div>
<!-- PALETTE -->
<div class="col-2 p-1">
<div class="card p-1 border-0 h-100" style="background-color:#def3f6"></div>
</div>
<!-- NAME -->
<div class="col-4 p-1">
<div class="card p-1 bg-transparent border-0 text-center font-weight-bold"><p style="font-size:22px; font-family:times; letter-spacing:1px;">NAME HERE</p></div>
</div>
</div>
</div>
</div>
<!-- BODY -->
<div class="col-12 p-0">
<div class="tab-content">
<!-- FIRST BOX -->
<div class="tab-pane fade active show" id="first">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-4 p-1">
<div class="card border-0 p-2 h-100" style="background-image:url(IMG_URL); background-position:center; background-size:cover;">
</div>
</div>
<!-- RIGHT -->
<div class="col-8 p-1">
<!-- QUOTE -->
<div class="card mb-2 p-3 justify-content-center text-center border-0" style="min-height:100px; background-color:#fff;">
<!-- DECOR -->
<div class="card p-2 text-center justify-content-center" style="position:absolute; left:-17px; border-radius:100px; background-color:#fff; border:1px solid #eee;">
<i class="fas fa-quote-left fa-sm"></i></div>
<p>quote here!</p>
<!-- DECOR -->
<div class="card p-2 text-center justify-content-center" style="position:absolute; right:-17px; border-radius:100px; background-color:#fff; border:1px solid #eee;">
<i class="fas fa-quote-right fa-sm"></i></div>
</div>
<!-- IMAGE -->
<div class="card mb-2 p-1 border-0" style="height:100px; background-image:url(IMG_URL); background-position:center; background-size:cover;"></div>
<!-- INFO BOX -->
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
ABOUT
</div>
<div class="row no-gutters">
<div class="col-6">
<div class="card p-1 border-0" style="height:162px; overflow:auto; background-color:#fff; border-radius:0px 0px 0px 5px;">
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-signature fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">name</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-calendar-days fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">age</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-cake fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">birthday</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-venus-mars fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">gender</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-id-card fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">pronouns</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-dna fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">species</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-rings-wedding fa-stack-1x" style="color:#def3f6"></i>
</span>
<span></span>
<span class="pull-right">orientation</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-briefcase fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">occupation</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fas fa-hands-holding fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">status</span>
</span>
<span>
<span class="fa-stack fa-sm">
<i class="fas fa-square fa-stack-2x" style="color:#064273"></i>
<i class="fa-solid fa-money-from-bracket fa-stack-1x" style="color:#def3f6"></i>
</span>
<span class="pull-right">worth</span>
</span>
</div>
</div>
<div class="col-6">
<div class="card p-2 border-0" style="height:162px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 0px;">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis turpis a sem ornare, at posuere neque fringilla. Ut lobortis aliquam pellentesque. Praesent ullamcorper suscipit elit eget condimentum. Quisque feugiat tincidunt urna et viverra. Curabitur convallis vestibulum metus, id luctus velit. Etiam ornare finibus nisl, eu tempus est luctus a. Pellentesque ut risus feugiat, fermentum turpis a, hendrerit quam. In volutpat mollis venenatis. Fusce eget metus tellus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECOND BOX -->
<div class="tab-pane fade" id="second">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-8 p-1">
<!-- PERSONALITY -->
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
PERSONALITY
</div>
<div class="card mb-2 p-2 border-0" style="height:150px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis turpis a sem ornare, at posuere neque fringilla. Ut lobortis aliquam pellentesque. Praesent ullamcorper suscipit elit eget condimentum. Quisque feugiat tincidunt urna et viverra. Curabitur convallis vestibulum metus, id luctus velit. Etiam ornare finibus nisl, eu tempus est luctus a. Pellentesque ut risus feugiat, fermentum turpis a, hendrerit quam. In volutpat mollis venenatis. Fusce eget metus tellus.</p>
</div>
<!-- LIKES & DISLIKES -->
<div class="row no-gutters mb-2">
<!-- LIKES -->
<div class="col-6 pr-1">
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
LIKES
</div>
<div class="card p-1 border-0" style="height:130px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 5px;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
</ul>
</div>
</div>
<!-- DISLIKES -->
<div class="col-6 pl-1">
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
DISLIKES
</div>
<div class="card p-1 border-0" style="height:130px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 5px;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- HISTORY -->
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
HISTORY
</div>
<div class="card p-2 border-0" style="height:180px; background-color:#fff; border-radius:0px 0px 5px 5px; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id ipsum vestibulum nulla euismod consectetur. Phasellus enim dolor, imperdiet vitae magna interdum, laoreet iaculis justo. Nulla faucibus id mi sed fermentum. Proin iaculis condimentum purus, vel commodo sapien eleifend ut. Morbi eros turpis, interdum vel justo at, molestie fermentum ipsum. Duis accumsan velit tempus, placerat metus non, tincidunt orci. Phasellus sit amet consectetur nisi, a interdum nisi.</p>
<p>Aliquam finibus, tellus ut sagittis sagittis, turpis velit pulvinar odio, eu condimentum purus dolor non nibh. Morbi mi ligula, iaculis non nulla nec, facilisis euismod metus. Curabitur non nisi ut mi luctus maximus. Integer pretium aliquet fringilla. Nunc malesuada hendrerit dui, eget dignissim nisl feugiat eu. Sed consequat tortor orci, vitae suscipit risus mollis ornare. Phasellus aliquam arcu sed sem euismod ultrices. Pellentesque in feugiat augue.</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-4 p-1">
<div class="card border-0 p-2 h-100" style="background-image:url(IMG_URL); background-position:right; background-size:cover;">
</div>
</div>
</div>
</div>
<!-- THIRD BOX -->
<div class="tab-pane fade" id="third">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-4 p-1">
<div class="card border-0 p-2 h-100" style="background-image:url(IMG_URL); background-position:center; background-size:cover;">
</div>
</div>
<!-- RIGHT -->
<div class="col-8 p-1">
<!-- TRIVIA/DESIGN SECTION -->
<div class="card p-1 border-0 font-weight-bold" style="background-color:#7fcdff; color:#def3f6; font-size:16px; border-radius:5px 5px 0px 0px;">
NOTES
</div>
<div class="card mb-2 p-1 border-0" style="height:180px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 5px;">
<!-- TITLE CARD -->
<div class="card p-1 border-0" style="font-size:16px; background-color:#def3f6; color:#76b6c4;">
<span>
<i class="fas fa-question-circle"></i>
<span class="pull-right mr-1 font-weight-bold">TRIVIA</span>
</span>
</div>
<!-- LIST -->
<div class="card border-0 rounded-0 w-100 p-0 bg-transparent mt-2">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
</ul>
</div>
<!-- TITLE CARD -->
<div class="card p-1 border-0" style="font-size:16px; background-color:#def3f6; color:#76b6c4;">
<span>
<i class="fas fa-palette"></i>
<span class="pull-right mr-1 font-weight-bold">DESIGN NOTES</span>
</span>
</div>
<!-- LIST -->
<div class="card border-0 rounded-0 w-100 p-0 bg-transparent mt-2">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
</ul>
</div>
</div>
<!-- MOODBOARD PT. 1 -->
<div class="row no-gutters mb-2">
<div class="col-6 pr-1">
<div class="card p-1 border-0" style="height:150px; background-image:url(MB_1); background-position:center; background-size:cover;"></div>
</div>
<div class="col-6 pl-1">
<div class="card p-1 border-0" style="height:150px; background-image:url(MB_2); background-position:center; background-size:cover;"></div>
</div>
</div>
<!-- MOODBOARD PT. 2 -->
<div class="row no-gutters mb-2">
<div class="col-6 pr-1">
<div class="card p-1 border-0" style="height:150px; background-image:url(MB_3); background-position:center; background-size:cover;"></div>
</div>
<div class="col-6 pl-1">
<div class="card p-1 border-0" style="height:150px; background-image:url(MB_4); background-position:top; background-size:cover;"></div>
</div>
</div>
<!-- RELATIONSHIP BOX -->
<div class="card p-0 border-0 bg-transparent" style="height:190px; overflow:auto;">
<!-- RELATION -->
<div class="row no-gutters mb-2">
<!-- ICON -->
<div class="col-4">
<div class="card h-100 border-0" style="border-radius:5px 0px 0px 5px; background-image:url(https://via.placeholder.com/200.png); background-size:cover; background-position:center;"></div>
</div>
<!-- DESCRIPTION -->
<div class="col-8">
<!-- NAME -->
<div class="card p-1 border-0" style="background-color:#7fcdff; border-width:1px 1px 0px 0px; border-radius:0px 5px 0px 0px; color:#def3f6">
<span><i class="fas fa-heart fa-md pull-left mt-1 ml-2"></i><b class="pull-right" style="font-size:16px;">NAME HERE</b></span></div>
<!-- WRITTEN -->
<div class="card p-2 border-0" style="height:157px; border-width:1px 1px 1px 0px; border-radius:0px 0px 5px 0px; overflow:auto; background-color:#eee;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis turpis a sem ornare, at posuere neque fringilla. Ut lobortis aliquam pellentesque. Praesent ullamcorper suscipit elit eget condimentum. Quisque feugiat tincidunt urna et viverra. Curabitur convallis vestibulum metus, id luctus velit. Etiam ornare finibus nisl, eu tempus est luctus a. Pellentesque ut risus feugiat, fermentum turpis a, hendrerit quam. In volutpat mollis venenatis. Fusce eget metus tellus.</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE HERE! -->
<!-- LAST RELATION; DON'T ADD ANY AFTER THIS ONE! -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4">
<div class="card h-100 border-0" style="border-radius:5px 0px 0px 5px; background-image:url(https://via.placeholder.com/200.png); background-size:cover; background-position:center;"></div>
</div>
<!-- DESCRIPTION -->
<div class="col-8">
<!-- NAME -->
<div class="card p-1 border-0" style="background-color:#7fcdff; border-width:1px 1px 0px 0px; border-radius:0px 5px 0px 0px; color:#def3f6">
<span><i class="fas fa-heart fa-md pull-left mt-1 ml-2"></i><b class="pull-right" style="font-size:16px;">NAME HERE</b></span></div>
<!-- WRITTEN -->
<div class="card p-2 border-0" style="height:157px; border-width:1px 1px 1px 0px; border-radius:0px 0px 5px 0px; overflow:auto; background-color:#eee;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis turpis a sem ornare, at posuere neque fringilla. Ut lobortis aliquam pellentesque. Praesent ullamcorper suscipit elit eget condimentum. Quisque feugiat tincidunt urna et viverra. Curabitur convallis vestibulum metus, id luctus velit. Etiam ornare finibus nisl, eu tempus est luctus a. Pellentesque ut risus feugiat, fermentum turpis a, hendrerit quam. In volutpat mollis venenatis. Fusce eget metus tellus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION PLATE -->
<div class="col-12 p-0">
<!-- NAVIGATION -->
<ul class="nav row no-gutters text-center p-1">
<!-- FIRST SECTION -->
<li class="nav-item col mr-2" style="background-color:#aab6bf; border-radius:5px;">
<a data-toggle="tab" href="#first" class="active btn btn-outline-secondary border-0 w-100" style="font-size:15px;">
<i class="fas fa-tree-palm" style="color:#fff"></i>
</a>
</li>
<!-- SECOND SECTION -->
<li class="nav-item col mr-2" style="background-color:#aab6bf; border-radius:5px;">
<a data-toggle="tab" href="#second" class="btn btn-outline-secondary border-0 w-100" style="font-size:15px;">
<i class="fas fa-sun" style="color:#fff"></i>
</a>
</li>
<!-- THIRD SECTION -->
<li class="nav-item col" style="background-color:#aab6bf; border-radius:5px;">
<a data-toggle="tab" href="#third" class="btn btn-outline-secondary border-0 w-100" style="font-size:15px;">
<i class="fas fa-ship" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
<!-- FOOTER IMAGE -->
<div class="col-12 p-1">
<div class="card border-0 justify-content-center" style="height:200px; background-image:url(IMG_URL); background-position:center; background-size:cover;">
<!-- DECOR -->
<div class="card rounded-0 p-2 mx-auto justify-content-center text-center" style="background-color:rgba(0,0,0,0); border:3px #fff solid;">
<div class="card rounded-0 p-3" style="background-color:rgba(0,0,0,0); border:3px #fff solid;">
<i class="fa-solid fa-fish-fins fa-4x fa-bounce" style="color:#fff;"></i>
</div>
</div>
</div>
</div>
<!-- CREDIT BAR; DO NOT TAMPER OR REMOVE. -->
<div class="col-12 p-1">
<div class="card p-1 text-center mx-auto justify-content-center" style="height:30px; width:50px; border-radius:100px; background-color:#fff; border:1px solid #eee;">
<a href="/itemlabel"><i class="fas fa-code text-secondary"></i></a>
</div>
</div>
</div>
</div>
