Theme for Azrael (pagedoll version)

<!--
    THEME BY CIRCLEJOURNEY FOR AZRAEL
    Pagedoll version
-->
<!-- Replace the URL inside the url() brackets below to change the background image -->
<div class="justify-content-center" style="background-image: url(https://apod.nasa.gov/apod/image/1501/TrapeziumCluster_Francsics_apod1024.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 pagedoll image -->
                <img class="border-0 p-2" src="https://i.imgur.com/2kQI4xm.png" style="height: 250px; z-index: 2;">
            <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;">

                    Name

                </span>
                <span class="text-muted">

                    age &bull; gender &bull; pronouns

                </span>
            </div>
        </div>

        <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 id="profile-1" class="tab-pane show active card-block w-100">
                    <p class="text-center" style="font-size: 16pt;">
                        <i class="fa fa-user"></i> About
                    </p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                </div>

                <!-- PROJECTS tab -->
                <div id="profile-2" class="tab-pane card-block w-100">
                    <p class="text-center" style="font-size: 16pt;">
                        <i class="fa fa-books"></i> Projects
                    </p>

                    <p class="text-uppercase text-muted" style="font-size: 14pt;">Project 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                    <!-- Copy this part to add more projects -->
                    <hr>

                    <p class="text-uppercase text-muted" style="font-size: 14pt;">Project 2</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <!-- End of part to copy -->
                </div>

                <!-- LINKS tab -->
                <div id="profile-3" class="tab-pane card-block w-100">
                    <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="LINK" target="_blank"><i class="fa fa-address-card"></i> Carrd.co</a>

                        <a href="LINK" target="_blank"><i class="fa fa-deviantart"></i> DeviantArt</a>

                        <a href="LINK" target="_blank"><i class="fa fa-tumblr"></i> Tumblr</a>

                        <a href="LINK" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>

                        <a href="LINK" target="_blank"><i class="fa fa-info"></i> Commissions</a>
                    </div>
                </div>

                <!-- DISCLAIMER tab -->
                <div id="profile-4" class="tab-pane card-block w-100">
                    <p class="text-center" style="font-size: 16pt;">
                        <i class="fa fa-warning"></i> Disclaimer
                    </p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>