Stor8

<!--
    F2U - CHARACTER CODE: PILLAR
    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!
    
-->

<!-- BASICS -->
<div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
    <div class="mx-auto m-0 text-center text-monospace">
        <!-- IMAGE -->
        <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 150px; width: 150px;">
        <!-- INFO -->
        <div class="mt-2">
            <h3 class="text-primary m-0">NAME</h3>
            <p class="text-secondary m-0">age . gender . mbti</p>
            <hr class="m-1"> <!-- DIVIDER -->
            <p class="ml-3 mr-3" style="font-size: 13px;">This box will expand with content. 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.</p>
        </div>
    </div>
</div>
<!-- THEME -->
<div class="m-2 p-0 col-lg-6 mx-auto" style="border-radius: 15px;">
    <!-- THEME -->
    <a href="SONGLINK" class="btn btn-outline-primary m-0 w-100" style="border-radius: 15px; border-width: 2px;" target="_blank">♫ SONGNAME ♫</a>
</div>
<!-- INFO -->
<div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
    <div class="mx-auto m-0 text-justify text-monospace" style="font-size: 13px; height: 250px; overflow: auto;">
        <!-- ABOUT -->
        <div class="m-2">
            <h3 class="text-primary m-0 mt-2">About</h3>
            <p class="text-secondary m-0">adjective . adjective . adjective</p>
            <p>This box will scroll, put whatever you need here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, dui sed lacinia suscipit, orci nisi cursus tellus, id semper orci elit eget libero. Mauris lobortis ex nisl, a gravida erat condimentum sit amet.</p>
            <p>Integer sed porta tortor. Pellentesque imperdiet nec ipsum sit amet volutpat. Praesent ac tempus mauris. Nulla placerat diam vel ornare feugiat. Aenean suscipit euismod arcu, nec bibendum enim vestibulum et. Nullam in molestie risus. Nunc nec accumsan magna. </p>
        </div>
        <!-- PREFERENCES -->
        <div class="m-2">
            <h3 class="text-primary m-0 mt-2">Preferences</h3>
            <p class="m-0"><span class="text-secondary">LIKES:</span> thing . thing . thing . thing </p>
            <p class="m-0"><span class="text-secondary">DISLIKES:</span> thing . thing . thing . thing </p>
        </div>
        <!-- TRIVIA -->
        <div class="m-2">
            <h3 class="text-primary m-0 mt-2">Trivia</h3>
            <ul class="m-0" style="list-style-type: square;">
                <li>Some trivia here.</li>
                <li>Maybe something quirky here.</li>
                <li>Go wild idk.</li>
            </ul>
        </div>
        <!-- END BOX -->
    </div>
</div>
<!-- LINKS -->
<div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
    <div class="mx-auto m-0 p-2 w-100 text-justify text-monospace" style="font-size: 13px; height: 300px; overflow: auto;">
        <h3 class="text-primary mt-0 mb-2 ml-2">Links</h3>
        <div class="row m-0 justify-content-center">
            <!-- you can add as many people as you want, rows will adjust according to your resolution -->
            <!-- PERSON 1 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- PERSON 3 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- PERSON 3 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- PERSON 4 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- PERSON 5 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- PERSON 6 -->
            <div class="m-1">
                <!-- IMAGE -->
                <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
                <!-- NAME -->
                <p class="text-secondary mt-2">
                    <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
                    RELATIONSHIP
                </p>
            </div>
            <!-- ADD MORE PEOPLE ABOVE HERE -->
        </div>
    </div>
</div>
<!-- CREDIT, DON'T MOVE -->
<div class="text-center"> 
    <a data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
</div>