<!--- 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">
<!--------------------- About Section --------------------->
<p class="text-primary display-1 mb-2"><i class="fas fa-star"></i>
<!-- Put Image Here -->
Name
</p>
<div class="card card-outline-primary bg-faded card-block rounded-0 mb-4" style="border-width:2px">
<h2 class="text-primary text-right"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h3>
<!-- 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. 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;">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. 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.</p>
<h2 class="text-primary"><i class="far fa-star"></i> Appearance</h4>
<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. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat.</p>
</div>
<!------------------- About Section End ------------------->
<!------------------- Backstory Section ------------------->
<p class="text-success text-right display-3 mb-2">Backstory <i class="fas fa-star"></i></p>
<div class="card card-outline-success bg-faded card-block rounded-0 mb-4" style="border-width:2px">
<h2 class="text-success"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h3>
<!-- 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;">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>
<h2 class="text-right text-success">Present Day <i class="far fa-star"></i></h4>
<div class="bg-success 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. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat.</p>
</div>
<!------------------- Backstory Section ------------------->
<!------------------ Relationship Section ------------------>
<p class="text-warning display-3 mb-2"><i class="fas fa-star"></i> Relationships</p>
<div class="card card-outline-warning bg-faded card-block rounded-0" style="border-width:2px">
<div class="row justify-content-between">
<!----------------- First Relationship ----------------->
<div class="col-md-4 mb-3">
<!-- Character Name and Profile Link -->
<h3 class="text-warning"><i class="far fa-star"></i> <a href="link" class="text-warning">Name</a></h3>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs-->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
<!--------------- First Relationship End --------------->
<!----------------- Second Relationship ----------------->
<div class="col-md-4 mb-3">
<!-- Character Name and Profile Link -->
<h3 class="text-warning"><i class="far fa-star"></i> <a href="link" class="text-warning">Name</a></h3>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
<!--------------- Second Relationship End --------------->
<!----------------- Third Relationship ----------------->
<div class="col-md-4 mb-3">
<!-- Character Name and Profile Link -->
<h3 class="text-warning"><i class="far fa-star"></i> <a href="link" class="text-warning">Name</a></h3>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
</div>
<!--------------- Third Relationship End --------------->
</div>
</div>
<!---------------- Relationship Section End ---------------->
<!-- Credits, Don't Remove -->
<p class="text-right text-warning mb-0">profile html by <a href="https://toyhou.se/hukiolukio" class="text-warning font-weight-bold"><i class="fas fa-user"></i> hukiolukio</p>
</div>