<div class="row justify-content-center" style="font-weight: lighter;">
<div class="container rounded-0" style="max-width: 800px;">
<div class="bg-dark p-1 justify-content-between mb-1 text-light" style="font-size: 30px; letter-spacing: 1px;">
<span style="font-weight: 350;">Name</span>
<span style="font-weight:100">Role</span>
</div>
<div class="card col-md-4 bg-dark rounded-0 text-lowercase pull-left mb-1 border-0" style="height: 555px">
<br>
<span class="text-light" style="text-align: left; letter-spacing: 1px;">full name</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">name</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">gender</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">gender</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">pronouns</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">prn/prn</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">orientation</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">sexuality</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">age</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">age</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">birthday</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">d.o.b</span>
<hr style="width: 95%;">
<span class="text-light" style="text-align: left; letter-spacing: 1px;">race</span>
<span class="text-light" style="text-align: right; letter-spacing: 0.7px;">species/race</span>
<hr style="width: 95%;">
</div>
<div class="card col-md-4 bg-dark rounded-0 text-lowercase pull-right text-light p-1 rounded-0 overflow-auto border-0" style="height: 555px">
<span class="h1" style="letter-spacing: 1px;">about</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non odio magna. Fusce porttitor odio fermentum nisl rhoncus, at hendrerit mauris rutrum. Maecenas porta elit at augue sagittis facilisis. Aliquam hendrerit pulvinar quam vel dignissim. Sed facilisis maximus est, ut aliquet nunc vulputate vitae. Donec vulputate vitae nisi vitae blandit. Nulla eu justo vitae arcu finibus euismod a at erat. Ut imperdiet ante ut mi sagittis, eu feugiat velit porttitor. Vivamus semper libero sed neque venenatis, in placerat tortor aliquam. Nullam tempus urna eu diam dictum condimentum. In auctor vehicula ex, in scelerisque lacus bibendum bibendum. Nam volutpat, nulla nec semper euismod, justo metus interdum odio, non iaculis felis elit vitae ante. Donec eget venenatis nibh. Morbi eleifend vehicula odio, sed tincidunt nunc eleifend at. Aliquam fringilla orci nunc, non condimentum tortor lobortis condimentum.
</p>
</div>
<div class="card col-md-4 bg-dark rounded-0 text-lowercase pull-centre p-1 border-0" style="height: 555px">
<img src="https://via.placeholder.com/350x500.png" width="350px" height="500px">
<hr style="width: 95%;">
<i class="far fa-quote-left text-light" style="text-align: left; font-size: 20px;"></i>
<span class="text-light font-italic" style="text-align: center; font-size: 25px;">Quote</span>
<i class="far fa-quote-right text-light" style="text-align: right; font-size: 20px;"></i>
</div>
</div>
</div>
<!--Credit- YOU CAN MOVE, BUT DO NOT REMOVE-->
<div style="text-align:center;">
<a href="https://toyhou.se/theplanisinruins" data-toggle="tooltip" title="Credit"><i class="fas fa-code p-2"></i></a>
</div>
