Profile
<!--- MAIN CARD BODY--->
<div class="mx-auto">
<div class="card mx-auto" style="max-width: 600px;">
<div class="card-block bg-primary p-2">
<!----- NAME HEADER ------>
<span class="font-weight-bold text-white" style="font-family: Abril Fatface; font-size: 26px;">FIRST NAME. LAST NAME.</span>
</div>
<div class="tab-content">
<!----- PRODILE TAB ---->
<div class="tab-pane fade active show" id="profile">
<div class="row no-gutters p-2">
<!-------- CHARACTER IMAGE ---->
<div class="col-md-4 col-12 p-1"><div class = "card p-0 mt-2 mx-auto" style = "max-width: 200px; height: 160px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>
<!------- BASIC STATS ----->
<div class="col-md-4 col-6 p-1">
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">NAME</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">AGE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">BIRTHDATE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">GENDER</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">SEXUALITY</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 14px;">SPECIES</span><span class="w-50 text-right" style="font-family: Lato; font-size: 14px;">content</span>
</div>
</div>
<div class="col-md-4 col-6 p-1">
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">NATIONALITY</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">ALLIANCE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">OCCUPATION</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">STAR SIGN</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 13PX;">EXTRA</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold text-primary" style="font-family: Abril Fatface; font-size: 14px;">EXTRA</span><span class="w-50 text-right" style="font-family: Lato; font-size: 14px;">content</span>
</div>
</div>
</div>
<!----- SHORT ABOUT (try making it a short paragraph)---->
<div class="mr-3 ml-3 mb-3 text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget semper dolor. In vel suscipit elit. Maecenas luctus volutpat massa, sed mattis purus gravida id. Sed viverra tortor sapien, vitae imperdiet lacus volutpat nec. Duis vestibulum egestas libero, eget hendrerit mi hendrerit vitae. Donec elementum justo eget tellus suscipit, at aliquam magna ullamcorper. Praesent ligula ligula, dictum a laoreet in, finibus eu est. </div>
</div>
<!------PERSONALITY TAB---->
<div class="tab-pane fade" id="personality">
<div class="row no-gutter p-3">
<div class="col-md-7 col-12 ">
<!-----PERSONALITY DESCRIPTION---->
<span class="text-primary font-weight-bold" style="font-size: 20px; font-family: Abril Fatface">PERSONALITY</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
<p class="text-justify pr-1 pb-1" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
</div>
<!------LIKES, DISLIKES AND TRIVIA---->
<div class="col-md-5 col-12">
<span class="text-primary font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface">LIKES</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px;">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Aliquam vel ultricies odiot</li>
</ul>
<span class="text-primary font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface">DISLIKES</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px;">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Aliquam vel ultricies odiot</li>
</ul>
<span class="text-primary font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface">TRIVIA</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px;">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Aliquam vel ultricies odiot</li>
</ul>
</div>
</div>
</div>
<!-----HISTORY TAB---->
<div class="tab-pane fade" id="history">
<div class="p-3">
<span class="text-primary font-weight-bold" style="font-size: 20px; font-family: Abril Fatface">HISTORY SUB-HEADER</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
<span class="text-primary font-weight-bold mt-2" style="font-size: 20px; font-family: Abril Fatface">HISTORY SUB-HEADER</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. Sed ac velit non dolor lobortis iaculis vel ac risus. Integer pharetra at leo at semper. Donec aliquet, felis ac bibendum aliquam, turpis lorem ultricies metus, aliquam tempus risus nisl non augue. Etiam dui erat, laoreet blandit felis id, suscipit dapibus lectus. Nullam id tellus scelerisque, aliquet elit aliquam, vestibulum mi. </p>
</div>
</div>
<!------RELATIONSHIPS TAB---->
<div class="tab-pane fade" id="relationships">
<div class="row no-gutters">
<div class="col-6 pl-3 pt-3 pb-3 pr-1">
<div class="row no-gutters">
<div class="col-md-6">
<!-----RELATIONSHIP ONE--->
<div class = "card p-0 mt-2 " style = "width: 120px; height: 120px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="text-primary font-weight-bold" style="font-size: 18px; font-family: Abril Fatface">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. </p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6">
<!-----RELATIONSHIP TWO----->
<div class = "card p-0 mt-2 " style = "width: 120px; height: 120px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="text-primary font-weight-bold" style="font-size: 18px; font-family: Abril Fatface">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. </p>
</div>
</div>
</div>
<div class="col-6 pr-3 pt-3 pb-3 pl-2">
<div class="row no-gutters">
<div class="col-md-6">
<!-----RELATIONSHIP THREE---->
<div class = "card p-0 mt-2 " style = "width: 120px; height: 120px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="text-primary font-weight-bold" style="font-size: 18px; font-family: Abril Fatface">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. </p>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6">
<!----RELATIONSHIP FOUR--->
<div class = "card p-0 mt-2 " style = "width: 120px; height: 120px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="text-primary font-weight-bold" style="font-size: 18px; font-family: Abril Fatface">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ultricies odio, nec lobortis lacus. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!----NAVBAR---->
<div class="card-block bg-primary p-2">
<ul class="nav nav-tabs card-header-tabs row mb-1 text-center">
<li class="col-3 mb-1"><a class="btn active text-white" data-toggle="tab" href="#profile"><i class="fa-solid fa-user"></i></a></li>
<li class="col-3 mb-1"><a class="btn text-white" data-toggle="tab" href="#personality"><i class="fa-solid fa-heart"></i></a></li>
<li class="col-3 mb-1"><a class="btn text-white" data-toggle="tab" href="#history"><i class="fa-solid fa-book-bookmark"></i></a></li>
<li class="col-3 mb-1"><a class="btn text-white" data-toggle="tab" href="#relationships"><i class="fa-solid fa-users"></i></a></li>
</ul>
</div>
</div>
<!-----CREDIT (DO NOT REMOVE--->
<div class="text-center mt-2"><a href="https://toyhou.se/Wren_Song"><i class="fa-solid fa-code"></i></a></div>
</div>
Recent Images
No images.