<!-- Upper quote -->
<div class="container p-4 mb-1 justify-content-between col-12-md" style="width: 700px; background-color: #6C3216; color: #C46F46; font-weight: lighter; letter-spacing: 0.5px; font-size: 25px;">
<div class="container p-4 text-center col-12" style="background-image:url(https://images.unsplash.com/photo-1506202687253-52e1b29d3527?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);background-attachment:fixed; background-repeat: no-repeat;background-position: center;"><div class="card border-0 p-2" style="background-color: #6C3216;">
<i class="fal fa-quote-left text-left"></i>
<span><i>Quote</i></span>
<i class="fal fa-quote-right text-right"></i>
</div> </div>
</div>
<!-- /Upper quote -->
<!-- Name + Role -->
<div class="container p-4 col-12-md justify-content-between mb-1" style="width: 700px; background-color: #6C3216; color: #C46F46; font-weight: lighter; letter-spacing: 0.5px; font-size: 25px;">
<span class="text-right">Name</span>
<span class="text-left"><i>Role</i></span>
</div>
<!-- /Name + Role -->
<!-- Overview -->
<div class="container col-12-md p-1 mb-1 overflow-auto" style="width: 700px; background-color: #6C3216; color: #C46F46; font-weight: lighter; letter-spacing: 0.5px;">
<!-- Small Image -->
<div class="card" style="width: 200px; height: 200px; float: right">
<img src="https://via.placeholder.com/200x200">
</div>
<!-- /Small Image -->
<!-- Brief About -->
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Full name</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Alias</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Gender</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Pronouns</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Orientation</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<div class="row">
<div class="col-sm" style="font-weight: normal; font-size: 20px;">Age</div>
<div class="col-auto p-2 hidden-xs-down">
</div>
<div class="col-sm" style="font-size: 20px;">Content</div>
</div>
<!-- /Brief About -->
</div>
<!-- /Overview -->
<!-- Main Profile -->
<div class="container col-12-md p-1 mb-1" style="width: 700px; background-color: #6C3216; color: #C46F46; font-weight: lighter; letter-spacing: 0.5px;">
<!-- About -->
<span class="col-12" style="font-size: 20px; font-weight: normal;">About <i class="far fa-sparkles text-left"></i></span>
<div class="col-12" style="font-size: 15px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr width="80%" >
<!-- /About -->
<!-- Personality -->
<span class="col-12" style="font-size: 20px; font-weight: normal;">Personality <i class="far fa-cloud text-left"></i></span>
<div class="col-12" style="font-size: 15px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr width="80%" >
<!-- /Personality -->
<!-- Appearance -->
<span class="col-12" style="font-size: 20px; font-weight: normal;">Appearance <i class="far fa-brush text-left"></i></span>
<hr width="80%" >
<div class="col-12" style="font-size: 15px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr width="80%" >
<!-- /Appearance -->
</div>
<!-- /Main Profile -->
<!-- Lower Image -->
<div class="container p-4 mb-1 justify-content-between col-12-md" style="width: 700px; background-color: #6C3216; color: #C46F46; font-weight: lighter; letter-spacing: 0.5px; font-size: 32px;">
<div class="container p-4 text-center col-12" style="background-image:url(https://images.unsplash.com/photo-1506202687253-52e1b29d3527?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);background-attachment:fixed; background-repeat: no-repeat;background-position: center;">
</div>
</div>
<!-- /Lower Image -->
<!-- Credit- DO NOT REMOVE -->
<div class="text-center" style="color: #A55027">
<a href="https://toyhou.se/theplanisinruins" data-toggle="tooltip" title="Code credit"><i class="fas fa-code"></i></a>
<a href="https://unsplash.com/photos/yuiJO6bvHi4" data-toggle="tooltip" title="Image credit"><i class="fas fa-images"></i></a>
</div>
<!-- /Credit- DO NOT REMOVE -->