Character Code

<div class="container">
<Name>
<h3 class="text-center display-4 text-muted"><i>"Quote"</i></h3>
<div class="card card-block bg-faded mb-3">
<div class="card card-block pb-0 mb-3">
<!-- TOP SECTION --- You can add and remove content lines -- Don't forget to properly
size your image -->
<div class="row mb-3">
<div class="col-sm-6 mb-2 text-center">
<img src="Image URL"
class="float-sm-right" style="height: 350px;">
</div>
<div class="col-sm-6">
<ul class="mb-0 list-unstyled">
<li class="mb-2"><i class="fa fa-star"></i> <strong>Name ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Nickname ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Age ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Gender ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Pronouns ||</strong>
Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Species ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Origin ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Occupation ||</strong> Info</li>
<li class="mb-2"><i class="fa fa-star"></i> <strong>Theme ||</strong> Info</li>
</ul>
</div>
</div>
</div>
<!------------ PERSONALITY SECTION --------------------------------->
<h1 class="display-3 text-center mt-3"><i class="fa fa-key mr-1"></i> Personality</h1>
<div class="card card-block mb-3">
<h1>⇀ Description</h1>
<p>Personality goes here</p>
</div>
<div class="card card-block pb-0 mb-3">
<div class="row mx-auto mb-2" style="width:85">
<h1>⇀ Preferences</h1>
<!-----------LIKES AND DISLIKES -->
<div class="row mx-auto" style="width: 85%;">
<div class="col-sm-6">
<h3 class="text-center">Likes</h3>
<ul>
<li> +</li>
<li>+</li>
<li>+</li>
<li>+</li>
</ul>
</div>
<div class="col-sm-6">
<h3 class="text-center">Dislikes</h3>
<ul>
<li> -</li>
<li>-</li>
<li>-</li>
<li>-</li>
</ul>
</div>
</div>
</div>
<!------------ DESIGN SECTION --------------------------------->
<h1 class="display-3 text-center mt-3"><i class="fa fa-user-circle"></i> Design</h1>
<div class="card card-block d-block mb-3">
<h1>⇀ Description</h1>
<img src="Image URL"
style="height:400px;" class="float-sm-right ml-sm-1 rounded">
<ul class="mb-0 list-unstyled">
<li class="mb-2"><b>Height</b> || Info</li>
<li class="mb-2"><b>Build</b> || Info</li>
<li class="mb-2"><b>Eyes</b> || Info</li>
<li class="mb-2"> <b>Demeanor</b> || Info</li>
<li class="mb-2"> <b>Style</b> || Info</li>
<li class="mb-2">
<b>Important Notes</b> ||
<ul>
<li class="mb-2">Info </li>
<li class="mb-2">Info </li>
<li class="mb-2">Info </li>
<li class="mb-2">Info </li>
<li class="mb-2">Info </li>
</ul>
</li>
</ul>
</div>
</div>
</div>