Profile
<!------
Use ctrl+f to replace the colors used
color1 (card background, icons and name header) = #f0f2ff
color2 (main accent) = #525f7d
color3 (main text) = #26272e
----->
<!----MAIN CARD BODY---->
<div class="mx-auto">
<div class="card mx-auto" style="max-width: 600px; background-color:#f0f2ff;">
<div class="card-block" style="background-color: #525f7d;">
<!-----NAME HEADER---->
<span class="font-weight-bold" style="font-family: Abril Fatface; font-size: 26px; color:#f0f2ff;">FIRST NAME. LAST NAME.</span>
</div>
<div class="tab-content">
<!----PROFILE TAB---->
<div class="tab-pane fade active show" id="tab1">
<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(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU-ofq4IBUBID445lC-kNoBBRVMO9YFErw3Q&usqp=CAU); 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" style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">NAME</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">AGE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">BIRTHDATE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">GENDER</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">SEXUALITY</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 ml-2 mr-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 14px; color:#525f7d;">SPECIES</span><span class="w-50 text-right" style="font-family: Lato; font-size: 14px; color:#26272e;">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 " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">NATIONALITY</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">ALLIANCE</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">OCCUPATION</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">STAR SIGN</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 13PX; color:#525f7d;">EXTRA</span><span class="w-50 text-right" style="font-family: Lato; font-size: 13PX; color:#26272e;">content</span>
</div>
<div class="row no-gutters mt-2 mr-2 ml-1">
<span class="w-50 font-weight-bold " style="font-family: Abril Fatface; font-size: 14px; color:#525f7d;">EXTRA</span><span class="w-50 text-right" style="font-family: Lato; font-size: 14px; color:#26272e">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; color:#26272e;">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="tab2">
<div class="row no-gutter p-3">
<div class="col-md-7 col-12 ">
<!-----PERSONALITY DESCRIPTION---->
<span class="font-weight-bold" style="font-size: 20px; font-family: Abril Fatface; color:#525f7d;">PERSONALITY</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#26272e;">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; color:#26272e;">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 class="col-md-5 col-12">
<!------LIKES, DISLIKES AND TRIVIA---->
<span class="font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface; color:#525f7d;">LIKES</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px; color:#26272e;">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Aliquam vel ultricies odiot</li>
</ul>
<span class="font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface; color:#525f7d;">DISLIKES</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px; color:#26272e;">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Aliquam vel ultricies odiot</li>
</ul>
<span class="font-weight-bold pr-1" style="font-size: 20px; font-family: Abril Fatface; color:#525f7d;">TRIVIA</span>
<ul class="text-justify" style="font-family: Lato; font-size: 13px; color:#26272e;">
<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="tab3">
<div class="p-3">
<span class="font-weight-bold" style="font-size: 20px; font-family: Abril Fatface;color:#525f7d;">HISTORY SUB-HEADER</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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; color:#525f7d;">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="font-weight-bold mt-2" style="font-size: 20px; font-family: Abril Fatface; color:#525f7d;">HISTORY SUB-HEADER</span>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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; color:#525f7d;">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="tab4">
<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(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU-ofq4IBUBID445lC-kNoBBRVMO9YFErw3Q&usqp=CAU); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="font-weight-bold" style="font-size: 18px; font-family: Abril Fatface; color:#525f7d;">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU-ofq4IBUBID445lC-kNoBBRVMO9YFErw3Q&usqp=CAU); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="font-weight-bold" style="font-size: 18px; font-family: Abril Fatface; color:#525f7d;">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU-ofq4IBUBID445lC-kNoBBRVMO9YFErw3Q&usqp=CAU); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="font-weight-bold" style="font-size: 18px; font-family: Abril Fatface; color:#525f7d;">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU-ofq4IBUBID445lC-kNoBBRVMO9YFErw3Q&usqp=CAU); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="col-md-6">
<a href="link" class="font-weight-bold" style="font-size: 18px; font-family: Abril Fatface; color:#525f7d;">NAME</a>
<p class="text-justify" style="font-family: Lato; font-size: 13px; color:#525f7d;">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 p-2" style="background-color:#525f7d;">
<ul class="nav nav-tabs card-header-tabs row mb-1 text-center">
<li class="col-3 mb-1"><a class="btn active" data-toggle="tab" href="#tab1" style="color:#f0f2ff;"><i class="fa-solid fa-user"></i></a></li>
<li class="col-3 mb-1"><a class="btn" data-toggle="tab" href="#tab2" style="color:#f0f2ff;"><i class="fa-solid fa-heart"></i></a></li>
<li class="col-3 mb-1"><a class="btn" data-toggle="tab" href="#tab3" style="color:#f0f2ff;"><i class="fa-solid fa-book-bookmark"></i></a></li>
<li class="col-3 mb-1"><a class="btn" data-toggle="tab" href="#tab4" style="color:#f0f2ff;"><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" style="color:#525f7d;"><i class="fa-solid fa-code"></i></a></div>
</div>
Recent Images
No images.