Stor8

<!--
    F2U - CHARACTER CODE: FIVE - CUSTOM COLORS
    by SparklyCodes @ Toyhou.se
	
    Make sure to read all the rules and instructions!
    
    -- TOS --
    
    1. Turn WYSIWYG off when coding. Even after you're done.
        1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
    3. Use on TH only.
    4. Do not redistribute.
    5. Do not remove credit.
    6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
    7. Free to use as reference, credit in this case isn't required but appreciated!
    
    -- RESOURCES --
    
    fa-star >> custom icon
    
    #7BB5E1 >> outline
    #E8F5FF >> background
    #D6EDFF >> relationship background
    #164466 >> text
    
-->
<div class="m-3 p-1 card border-0 mx-auto" style="max-width: 900px; background-color: #7BB5E1; color: #164466;"><div class="row no-gutters">
    <!-- LEFT -->
    <div class="col-lg-5">
        <!-- IMAGE -->
        <div class="m-1 rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 400px;"></div>
        <!-- INFO -->
        <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-2" style="height: 200px; overflow: auto;">
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">NAME</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">NICKNAME</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">AGE</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">GENDER</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">ORIENTATION</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">RACE</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">HEIGHT</b> Information</p>
            <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">MBTI</b> Information</p>
        </div></div>
        <!-- MOODBOARD -->
        <div class="mx-1 mb-1 row no-gutters">
            <div class="pr-1 col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
            <div class="pr-1 col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
            <div class="col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
        </div>
    </div>
    <!-- RIGHT -->
    <div class="col-lg-7">
        <!-- BIO -->
        <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-2" style="height: 500px; overflow: auto;">
            <p class="m-0 font-italic text-center">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
            
            <h2 class="m-0 text-primary"><i class="far fa-user"></i> ABOUT</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur metus non auctor viverra. Pellentesque faucibus, nunc a commodo tempus, libero est ullamcorper lectus, a aliquam tellus nulla ut tortor. Proin elementum ut mauris eu ullamcorper. Morbi a dapibus mauris. Mauris mi justo, dignissim eu lacus quis, sodales vestibulum augue. Praesent mattis at nulla vitae fringilla. Morbi pretium, augue vitae viverra vestibulum, nunc est fringilla elit, ut tincidunt nunc neque sit amet nisi. Maecenas gravida magna ac auctor posuere. Etiam semper condimentum nisl, quis molestie neque iaculis a.</p>
            
            <h2 class="m-0 text-primary"><i class="far fa-book-open"></i> STORY</h2>
            <p>Vivamus nec dictum velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis nisi nec augue lacinia lobortis nec in mauris. Donec bibendum eros id turpis posuere, non sollicitudin est pharetra. Donec commodo turpis nec diam lobortis luctus. Suspendisse in risus vel enim blandit laoreet vitae pulvinar turpis. Duis ut justo pulvinar, tempus felis eget, convallis turpis.</p>
            <p>Nunc gravida, dui eget scelerisque molestie, dolor purus mollis mauris, sed ullamcorper felis metus eu erat. Suspendisse at lacus lectus. Nam porttitor varius tristique. Suspendisse ex arcu, condimentum sed luctus eget, tincidunt eu turpis.</p>
            
            <h2 class="m-0 text-primary"><i class="far fa-star"></i> TRIVIA</h2>
            <ul class="m-0 pb-1 pl-4">
                <li>Duis nec tortor rutrum, gravida sem in, euismod dui. Vivamus sit amet sapien non dolor dictum vestibulum et vel sapien.</li>
                <li>Cras ut elit nec nunc posuere varius. Etiam luctus porttitor neque a fermentum.</li>
                <li>Proin rhoncus sollicitudin turpis, ultrices placerat dolor pulvinar ut. Duis vel elementum ante.</li>
                <li>Quisque mollis tempus lectus, viverra vulputate massa dapibus ac.</li>
            </ul>
        </div></div>
        <!-- LINKS -->
        <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-1" style="height: 254px; overflow: auto;">
            <!-- CHARACTER -->
            <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
                <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
                <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
                <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
            </div>
            <!-- CHARACTER -->
            <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
                <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
                <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
                <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
            </div>
            <!-- CHARACTER -->
            <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
                <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
                <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
                <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
            </div>
        </div></div>
    </div>
</div></div>
<!-- CREDIT, DON'T MOVE -->
<div class="col-12 text-center mt-n3 p-1"> 
    <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
</div>