<div class="col-lg-11 mx-auto m-3 m-lg-5 text-justify text-white">
<div class="row no-gutters" style="letter-spacing:.5px;font-size:12px;font-family:avenir;background-image:url("IMG%20URL%20HERE");background-size:cover;background-position:bottom;background-repeat:no-repeat;background-attachment:scroll;box-shadow:0 0 15px rgba(0,0,0,0.5);">
<div class="col-lg-7">
<div class="card rounded-0 border-0 p-4" style="max-height:450px;background:rgba(0,0,0,0.5);">
<div class="mx-auto text-center col-12" style="letter-spacing:5px;">
<i class="fas fa-heart fa-xs pb-2"></i>
<i class="fas fa-cloud fa-lg mx-3 pb-2"></i>
<i class="fas fa-heart fa-xs fa-flip-horizontal pb-2"></i>
</div>
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<div class="d-flex" style="min-height:140px;">
<h1 class="m-auto text-uppercase text-center p-4" style="font-size:2rem;font-weight:200;letter-spacing:8px;border:2px solid;background-color:rgba(0,0,0,0.5);">
Name
</h1></div>
<div class="display-4 text-center text-uppercase pb-1" style="font-size:14px;letter-spacing:5px;">
species/race . age . pronouns . sexuality
</div><hr class="w-100 my-3" style="border-color:rgba(255,255,255,0.15);">
<div class="pb-2" style="min-height:120px;max-height:120px;overflow:auto;">
<div class="text-center" style="letter-spacing:.5px;">
<p>
One paragraph is ideal but you could do more because this box scrolls! ;]
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa. Curabitur ligula orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.
</p>
</div>
</div>
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
</div></div>
<div class="col-lg-5 w-100" style="max-height:450px;background:rgba(0,0,0,0.8);">
<div class="px-4 p-3 card-block sticky-top" style="background:rgba(0,0,0,0.5);">
<div class="col-8 mx-auto">
<ul class="nav row no-gutters text-center">
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#one">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#two">
<i class="far fa-heart"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#three">
<i class="far fa-book"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#four">
<i class="far fa-music"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="one">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Profile
</h1><div class="px-2">
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Name</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Age</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Gender</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Species</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Birthday</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Height</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Orientation</span>
<span class="w-50 text-right">content</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Occupation</span>
<span class="w-50 text-right">content</span>
</div>
</div>
<hr style="border-color:rgba(255,255,255,0.15);">
<div class="row no-gutters">
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-check"></i>
</h1><ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul></div>
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-times"></i>
</h1><ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="two">
<div class="px-3 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Trivia
</h1><ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Donec sagittis erat vel quam porta faucibu.</li>
<li>Ut lobortis ornare fermentum</li>
<li class="ml-3">Sub-plot for the above!</li>
<li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa</li>
</ul><hr style="border-color:rgba(255,255,255,0.15);">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Design Notes
</h1><ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Donec sagittis erat vel.</li>
<li>Ut lobortis ornare fermentum.</li>
<li class="ml-3">Sub-plot for the above!</li>
<li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="three">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Aesthetic
</h1><div class="moodboard">
<div class="row no-gutters">
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>

<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
<div class="col-4 p-1">
<div class="rounded" style="min-height:170px;border-radius:10px;background-image:url("https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png");background-size:cover;background-position:center;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="four">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Musicbox
</h1><div>
<iframe src="https://www.youtube.com/embed/STRING%20HERE" class="flex-fill pb-2" style="width:102%;min-height:300px;" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>