<!--- Notes ---
- This profile uses theme colors, meaning the color of each item will change depending on the theme the user viewing the profile has selected.
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container p-0">
<ul class="mb-2 nav nav-tabs card-header-tabs row justify-content-between">
<li class="nav-item col-md-3 mb-2"><a class="btn btn-outline-primary btn-block bg-faded active show" data-toggle="tab" href="#ONE">About</a></li>
<li class="nav-item col-md-3 mb-2"><a class="btn btn-outline-primary btn-block bg-faded" data-toggle="tab" style="width:100" href="#TWO">Details</a></li>
<li class="nav-item col-md-3 mb-2"><a class="btn btn-outline-primary btn-block bg-faded" data-toggle="tab" style="width:100" href="#THREE">Backstory</a></li>
<li class="nav-item col-md-3 mb-2"><a class="btn btn-outline-primary btn-block bg-faded" data-toggle="tab" style="width:100" href="#FOUR">Relationships</a></li>
</ul>
<div class="tab-content mb-2">
<!----------------------- About Section ---------------------->
<div class="tab-pane fade in active show" id="ONE">
<div class="card bg-faded card-block">
<div class="card card-block mb-4">
<p class="display-4 text-primary mb-2"><i class="far fa-address-card"></i> About</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div>
<div class="float-right card ml-2" style="border:transparent;">
<!-- Put Image Here -->
<img src="LINK" class="rounded" width="200">
<!-- Artist Credit -->
<p class="text-center mb-2">art by <a href="LINK" class="color-primary"><i class="fas fa-user"></i> ARTISTNAME</a></p>
</div>
<!-- Paragraphs: About -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
<p class="display-4 text-primary text-right mb-2"><i class="far fa-tshirt"></i> Appearance</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Appearance -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</p>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between">
<div class="col-md-4 card card-block mb-2">
<!-------------------- Likes Section -------------------->
<ul class="list-unstyled">
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
</ul>
<!------------------ Likes Section End ------------------>
</div>
<div class="col-md-4 card card-block mb-2">
<!------------------ Dislikes Section ------------------>
<ul class="list-unstyled">
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
</ul>
<!---------------- Dislikes Section End ---------------->
</div>
<div class="col-md-3 card card-inverse card-primary text-white mb-2">
<div class="card-block">
<h3 style="text-align: justify;"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum maximus tempor."
</em></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------- About Section End -------------------->
<!---------------------- Details Section --------------------->
<div class="tab-pane fade in" id="TWO">
<div class="card bg-faded card-block">
<div class="card card-block mb-4">
<div class="row">
<div class="col-md-4">
<div class="row mb-1">
<div class="col-4">
<strong>Name</strong>
</div>
<div class="col-8">
<!-- Put Full Name Here -->
Their Name
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Gender</strong>
</div>
<div class="col-8">
<!-- Put Gender Here -->
Their Gender
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Pronouns</strong>
</div>
<div class="col-8">
<!-- Put Pronouns Here -->
Their Pronouns
</div>
</div>
</div>
<div class="col-md-4">
<div class="row mb-1">
<div class="col-4">
<strong>Age</strong>
</div>
<div class="col-8">
<!-- Put Age Here -->
Their Age
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Sexuality</strong>
</div>
<div class="col-8">
<!-- Put Sexuality Here -->
Their Sexuality
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Ethnicity</strong>
</div>
<div class="col-8">
<!-- Put Ethnicity Here -->
Their Ethnicity
</div>
</div>
</div>
<div class="col-md-4">
<div class="row mb-1">
<div class="col-4">
<strong>MBTI</strong>
</div>
<div class="col-8">
<!-- Put MBTI Here -->
Their MBTI
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Occupation</strong>
</div>
<div class="col-8">
<!-- Put Occupation Here -->
Their Occupation
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Residence</strong>
</div>
<div class="col-8">
<!-- Put Residence Here -->
Their Residence
</div>
</div>
</div>
</div>
</div>
<div class="card card-block">
<div class="row">
<div class="col-md-6">
<!----------- Strength ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Strength</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Luck ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Luck</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Magic ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Magic</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Intelligence ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Intelligence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Wisdom ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Wisdom</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Charisma ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Charisma</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
</div>
<div class="col-md-6">
<!----------- Dexterity ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Dexterity</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Constitution ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Constitution</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Agility ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Agility</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Attack ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Attack</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Defence ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Defence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Resilience ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Resilience</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------- Details Section End ------------------->
<!--------------------- Backstory Section -------------------->
<div class="tab-pane fade in" id="THREE">
<div class="card bg-faded card-block">
<div class="card card-block">
<p class="display-4 text-primary mb-2"><i class="far fa-book"></i> Backstory</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<div>
<div class="float-right card ml-2" style="border:transparent;">
<!-- Put Image Here -->
<img src="LINK" class="rounded" width="200">
<!-- Artist Credit -->
<p class="text-center mb-2">art by <a href="LINK" class="color-primary"><i class="fas fa-user"></i> ARTISTNAME</a></p>
</div>
<!-- Paragraphs: Backstory -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
<p style="text-align: justify;">Sed rutrum purus sit amet malesuada ornare. Mauris bibendum consectetur diam sit amet hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec luctus et neque quis consequat. Maecenas rutrum neque purus, at molestie nisl finibus eget. Sed ac ullamcorper eros, suscipit tristique diam. Curabitur id ultricies lorem. Proin semper faucibus mauris, ac ultrices diam venenatis at. Nam iaculis cursus purus id auctor. Vestibulum pellentesque auctor eros, sed aliquet erat. Morbi non eros at metus lobortis tincidunt.</p>
<p style="text-align: justify;">Quisque ut dolor dapibus, gravida eros ut, tempor libero. Sed rutrum vehicula nunc, quis vehicula justo pretium non. Sed et ultrices leo. Suspendisse felis nibh, sodales sed consequat ut, consectetur id leo. Phasellus suscipit porta libero ac mattis. Praesent in dolor sed dolor iaculis imperdiet laoreet vel enim. Aenean vel quam tempus, bibendum leo id, consequat lectus. Nam condimentum metus vitae facilisis pharetra.</p>
<p class="display-4 text-primary text-right mb-2"><i class="far fa-flag"></i> Present Day</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Present Day -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</p>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</p>
</div>
</div>
</div>
</div>
<!--------------------- Backstory Section -------------------->
<!------------------- Relationships Section ------------------>
<div class="tab-pane fade in" id="FOUR">
<div class="card bg-faded card-block">
<div class="card card-block">
<div class="container">
<!------------------ First Relationship ------------------>
<div class="row justify-content-between">
<div class="col-md-3">
<!-- Put Image Here -->
<img src="LINK" class="fr-rounded">
<!-- Artist Credit -->
<p class="text-center mb-2">art by <a href="LINK" class="color-primary"><i class="fas fa-user"></i> ARTISTNAME</a></p>
</div>
<div class="col-md-9 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary h3 mb-2"><span class="font-weight-bold">Time known each other:</span>
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p class="mb-1" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Fusce ac sapien at ex fermentum maximus. In mollis laoreet luctus. Duis vel elit ac mi aliquam vulputate. Vivamus varius volutpat urna at sollicitudin. Nullam aliquam neque nec tristique scelerisque.</p>
</div>
</div>
<!---------------- First Relationship End ---------------->
<!------------------ Second Relationship ------------------>
<div class="row justify-content-between">
<div class="col-md-9 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary h3 mb-2"><span class="font-weight-bold">Time known each other: </span>
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p class="mb-1" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Fusce ac sapien at ex fermentum maximus. In mollis laoreet luctus. Duis vel elit ac mi aliquam vulputate. Vivamus varius volutpat urna at sollicitudin. Nullam aliquam neque nec tristique scelerisque.</p>
</div>
<div class="col-md-3">
<!-- Put Image Here -->
<img src="LINK" class="fr-rounded">
<!-- Artist Credit -->
<p class="text-center mb-2">art by <a href="LINK" class="color-primary"><i class="fas fa-user"></i> ARTISTNAME</a></p>
</div>
</div>
<!---------------- Second Relationship End ---------------->
</div>
</div>
</div>
</div>
<!----------------- Relationships Section End ---------------->
</div>
<!-- Credits, Don't Remove -->
<p class="text-right">profile html by Hukiolukio</p>
</div>