Sandbox

<!--
    THEME BY CIRCLEJOURNEY FOR AZRAEL
    Icon version
-->
<!-- Replace the URL inside the url() brackets below to change the background image -->
<div class="justify-content-center" style="background-image: url(https://images-assets.nasa.gov/image/PIA14731/PIA14731~medium.jpg); margin: -15px; background-size: cover; min-height: 750px; position: relative;">
    <div class="row m-auto no-gutters p-2 pb-4" style="max-width: 600px;">
        <div class="col-12 mb-4 text-center">
            <!-- Replace the URL inside the src property below to change the icon image -->
            <img class="rounded-circle img-thumbnail bg-faded border-0 p-2 fr-fic fr-dii cc_pointer" src="https://f2.toyhou.se/file/f2-toyhou-se/images/21719414_4NVUXAcX1L7yIbP.png" width="198" height="280">
            <div class="card bg-faded p-2 pt-3 w-50 mx-auto" style="margin-top: -15px;"><span class="text-uppercase font-weight-bold" style="font-size: 12pt;">&nbsp;Azrael <span class="text-muted">&nbsp;20 &bull; F &bull; She/They&nbsp;</span></span>
            </div>
        </div>

        <!-- Nav buttons -->
        <ul class="col-lg-4 d-flex flex-column justify-content-between nav nav-pills pr-lg-2 mb-lg-0 mb-2" style="min-height: 150px;">
            <li class="nav-item"><a class="nav-link active btn btn-primary btn-lg w-100" href="#profile-1" data-toggle="tab">About</a></li>
            <li class="nav-item"><a class="nav-link btn btn-primary btn-lg w-100" href="#profile-2" data-toggle="tab">Projects</a></li>
            <li class="nav-item"><a class="nav-link btn btn-primary btn-lg w-100" href="#profile-3" data-toggle="tab">Links</a></li>
            <li class="nav-item"><a class="nav-link btn btn-primary btn-lg w-100" href="#profile-4" data-toggle="tab">Disclaimer</a></li>
        </ul>

        <div class="tab-content col-lg-8 card table-responsive" style="height: 250px; overflow-x: hidden;" id="profiles">

            <!-- ABOUT tab -->
            <div class="tab-pane show card-block w-100 active cc_cursor" id="profile-1">

                <p class="text-center" style="font-size: 16pt;"><i class="fa fa-user"></i> About</p>

                <p>This is where I put my characters, images, and stories. I will be very inactive on here because of school, with spurts of activity here and there as I find time to work on my characters. If you need to get ahold of me faster than pming on here, just message me on discord at @Azrael#1903. Anything else is on my cardd.co (;3) My little sister is @Crystalghostcat, if you need anything from her just talk to me!</p>
            </div>

            <!-- PROJECTS tab -->
            <div class="tab-pane card-block w-100" id="profile-2">

                <p class="text-center" style="font-size: 16pt;"><i class="fa fa-books cc_cursor"></i> Projects</p>

                <p class="text-uppercase text-muted" style="font-size: 14pt;">Area 51</p>

                <p>Area 51 is my main project, it focuses on a Fantasy/Sci-Fi world where both supernatural and sci-fi elements come together to produce multiple stories that each have their own uniqueness. +18 and Up.</p>
                <!-- Copy this part to add more projects -->
                <hr>

                <p class="text-uppercase text-muted" style="font-size: 14pt;">Town of Pearlside</p>

                <p>This story follows a young Tsu Gumo as she teams up with her fellow friends to stop the tyranny of King Xiang, more well known as the Evil King. All throughout her travels on the way to defeat him, Tsu and allies learn to better their characters through meeting new people and encountering new situations, teaching her and the viewer/reader all at the same time. If you&#39;re looking for a heartwarming story that will teach realistic morals while showing how to cope with the world at large, this is the one you&#39;re looking for. +15 and Up.</p>
                <!-- End of part to copy -->
                <!-- Copy this part to add more projects -->
                <hr>

                <p class="text-uppercase text-muted" style="font-size: 14pt;">Fandoms</p>

                <p>I have a couple fandoms that I have several characters for, and am constantly working on adding and developing said characters. E for Everyone, depending on the character itself.</p>
                <!-- End of part to copy -->
            </div>

            <!-- LINKS tab -->
            <div class="tab-pane card-block w-auto" id="profile-3">

                <p class="text-center" style="font-size: 16pt;"><i class="fa fa-users"></i> Links</p>
                <br>
                <div class="list-group" style="font-size: 13pt;">
                    <!-- Update LINK in each a tag to your preferred link -->
                    <a href="https://leviathansdaughter.carrd.co/#" target="_blank"><i class="fa fa-address-card"></i> Carrd.co</a>
                    <a href="https://www.deviantart.com/child-of-azrael" target="_blank"><i class="fa fa-deviantart"></i> DeviantArt</a>
                    <a href="https://painted-rocks.tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i> Tumblr</a>
                    <a href="https://twitter.com/Just_Some_Alien" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
                    <a href="https://www.deviantart.com/child-of-azrael/art/O-2020-Commissions-Sheet-826667128" target="_blank"><i class="fa fa-info"></i> Commissions</a></div>
                    <p style="line-height: 0px; opacity: 0;">---------------------------------------------------------------</p>
            </div>

            <!-- DISCLAIMER tab -->
            <div class="tab-pane card-block w-100" id="profile-4">

                <p class="text-center" style="font-size: 16pt;"><i class="fa fa-warning"></i> Disclaimer</p>

                <p>This should go without saying, but please do not kin, steal, or use my characters as a reference! Also, my favorites is not a shopping list, I just like characters who&#39;s designs I think are neat, and favorite codes that I think would be useful in the future. ;</p>
            </div>
        </div>
    </div>
    <div class="d-flex" style="position: absolute; bottom: 5px; right: 5px; font-size: 9pt; opacity: 0.8;"><a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580" target="_blank"><i class="fa fa-code"></i> theme by circlejourney</a></div>
</div>