Boo

<!--
    111111 >> BLACK
    ffffff >> WHITE
    9465C3 >> PURPLE
    F9A02D >> ORANGE
    78DE48 >> GREEN
    rgba(255,255,255,.1) >> TRANSPARENT WHITE
-->
<div class="m-3 p-2 mx-auto card border-0" style="max-width: 750px; border-radius: 8px; background-color: #111111; color: #ffffff; box-shadow: 8px 8px 8px #9465C3">
    <!-- ICONS -->
    <div style="z-index:1000; text-shadow: 0px 0px 6px #F9A02D"> <!-- STARS -->
        <i class="fad fa-skull fa-2x fa-swap-opacity" style="position:absolute; top:-15px; left:-10px; transform: rotate(-25deg)"></i>
        <i class="fad fa-candy-corn fa-lg" style="position:absolute; top:-10px; left: 20px; transform: rotate(25deg)"></i>

        <i class="fad fa-broom fa-lg" style="position:absolute; top:0px; right:25px;"></i>
        <i class="fad fa-jack-o-lantern fa-swap-opacity fa-2x" style="position:absolute; top:-10px; right:-10px;"></i>
    </div>
    <!-- CONTENT -->
    <div class="row no-gutters">
        <!-- IMAGE -->
        <div class="p-1 col-sm-3">
            <div style="background: url('//via.placeholder.com/500') center;
            background-size: cover; height: 100%; width: 100%; min-height: 200px; border-radius: 8px;"></div>
        </div>
        <!-- BIO -->
        <div class="p-1 col-sm-9">
            <div class="p-2 h-100" style="background: rgba(255,255,255,.1); border-radius: 8px;">
                <h1 class="text-uppercase font-weight-light" style="text-shadow: 0px 0px 6px #78DE48">Name</h1>
                <h5 style="text-shadow: 0px 0px 6px #9465C3">00 | pro/nouns | orientation</h5>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel enim dui. Maecenas laoreet arcu nisi, at tincidunt sem mollis eget. Integer sed nulla nec massa interdum vestibulum a sed lectus. Mauris facilisis urna et pretium dignissim. Sed lobortis quam in eros rhoncus, in mollis ligula commodo.</p>
                <p>Nam congue, dolor sed scelerisque maximus, nunc lacus iaculis mi, at congue tellus mi sit amet risus. Nulla at ligula eu elit accumsan suscipit. Ut tellus mi, interdum non interdum quis, pretium vitae nisi. Donec vestibulum imperdiet accumsan.</p>

                <i class="fad fa-candle-holder fa-lg" style="position:absolute; bottom:0px; left:25px; text-shadow: 0px 0px 6px #F9A02D"></i>
                <i class="fad fa-ghost fa-swap-opacity fa-2x" style="position:absolute; bottom:0px; left:-5px; text-shadow: 0px 0px 6px #F9A02D"></i>
            </div>
        </div>
        <!-- NOTES -->
        <div class="p-1 col-sm-5">
            <div class="p-2" style="background: rgba(255,255,255,.1); border-radius: 8px; height: 350px; overflow: auto">
                <h1 class="text-uppercase font-weight-light" style="text-shadow: 0px 0px 6px #78DE48">NOTES</h1>

                <ul class="m-0 pl-4">
                    <li>Integer tristique urna a eros laoreet, volutpat auctor lectus vehicula.</li>
                    <li>Pellentesque quis lectus lacinia, porttitor velit sed, ullamcorper lectus.</li>
                    <li>Etiam commodo accumsan felis vel tristique. Pellentesque enim nibh, fringilla vitae magna eu, porta cursus justo.</li>
                    <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
                    <li>Vivamus fermentum eget sem vitae dictum.</li>
                    <li>Integer dapibus mauris magna, sit amet facilisis nibh efficitur eget.</li>
                </ul>

                <i class="fad fa-knife-kitchen fa-lg" style="position:absolute; bottom:0px; left:35px; text-shadow: 0px 0px 6px #F9A02D"></i>
                <i class="fad fa-bat  fa-2x" style="position:absolute; bottom:-10px; left:-5px; text-shadow: 0px 0px 6px #F9A02D"></i>
            </div>
        </div>
        <!-- BACKGROUND -->
        <div class="p-1 col-sm-7">
            <div class="p-2" style="background: rgba(255,255,255,.1); border-radius: 8px; height: 350px; overflow: auto">
                <h1 class="text-uppercase font-weight-light" style="text-shadow: 0px 0px 6px #78DE48">BACKGROUND</h1>

                <p>Mauris faucibus ipsum lorem, et porttitor leo aliquet eget. Sed pellentesque elit diam, at venenatis est mollis nec. Nullam euismod libero nec varius consectetur. Duis tempus leo sit amet tristique molestie. Integer a orci in tortor blandit gravida. Ut facilisis mi at pulvinar euismod. Nullam nulla nulla, porttitor ut mollis a, porttitor a nibh. Sed mollis, velit nec facilisis porta, ante ante iaculis sem, sed eleifend felis sem ut purus. Pellentesque quis tortor commodo, ornare ipsum a, sodales ligula.</p>
                <p>Aliquam tristique consequat quam eu ultricies. Nunc metus nulla, iaculis at porttitor eget, blandit vitae justo. Curabitur non mollis sapien. Quisque odio ligula, bibendum at convallis eget, porta sit amet libero. In orci mi, rhoncus et massa scelerisque, viverra placerat quam.</p>
                <p>Morbi consequat, eros venenatis suscipit luctus, quam ligula tempor metus, at fermentum nibh sem at sem. Vestibulum sed consectetur felis. Phasellus porttitor lobortis est sit amet placerat. Maecenas pulvinar eget nisi vitae euismod. Curabitur molestie ipsum lacinia iaculis consectetur.</p>
                <p>Cras sit amet eleifend ligula, quis scelerisque purus. Nulla lobortis lectus justo, non molestie lectus pharetra et. In vitae finibus elit, eget molestie mi. Nunc tincidunt ipsum vitae neque eleifend, sit amet tempus tellus sagittis.</p>

                <i class="fad fa-coffin fa-lg" style="position:absolute; bottom:0px; right:35px; text-shadow: 0px 0px 6px #F9A02D; transform: rotate(20deg)"></i>
                <i class="fad fa-flask-poison fa-3x fa-swap-opacity" style="position:absolute; bottom:-10px; right:-5px; text-shadow: 0px 0px 6px #F9A02D"></i>
            </div>
        </div>
        <!-- CREDIT -->
        <div class="p-1 col-12">
            <div class="p-1 text-center" style="background: rgba(255,255,255,.1); border-radius: 8px;">
                <a href="/SparklyCodes" data-toggle="tooltip" title="HTML by SparklyCodes"><i class="fas fa-code"></i></a>
            </div>
        </div>
    </div>
</div>