MANGA ; Mini Profile

<div class="container mx-auto my-5 p-0" style="border-radius: 0px;

background-image: url(http://artwiki.wikidot.com/local--files/creating-screentones/Screentone1.jpg);
width: 400px;
height: 300px;">

<!--- start of the code --->

    <div class="card mx-auto p-0 m-0 border-0" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0.9); height: 300px; width: 400px;">

    <!--- icon 1 --->
    <div class="w-100" style="margin-left:-40px; margin-top:30px; position:absolute;">
        <div class="card" style="border-radius: 0px; background-color: transparent;
        background-image: url(https://i.pinimg.com/originals/75/23/74/752374a216eb8786ed242af931f89b32.png);
        height: 150px;
        width: 150px;
        background-size: contain;
        transform: rotate(-3deg);
        position: absolute;
        top: -50px;
        left: -20px;
        border: 2px solid #000;

        "></div>
    </div>

    <!--- icon 2 --->
    <div class="w-100" style="margin-left:-40px; margin-top:30px; position:absolute;">
        <div class="card" style="border-radius: 0px; background-color: transparent;
        background-image: url(https://i.pinimg.com/736x/59/43/fb/5943fbdad4baebd37d54d1e59d8469ad.jpg);
        height: 150px;
        width: 150px;
        background-size: 110%;
        background-position: center;
        transform: rotate(3deg);
        position: absolute;
        top: 95px;
        left: 310px;
        border: 2px solid #000;

        "></div>
    </div>

    <div class="row no-gutters">
        <div class="col-3">
            <!--- filler --->
        </div>

        <div class="col-9">

        <!--- title, tags, and links --->
        <div class="w-100" style="margin-left:20px; margin-top:20px; position:absolute;">
        <div class="text-left" style="font-size: 20px; font-weight: 500; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.8);">
            <i class="fa fa-at" style=" color: rgba(0, 0, 0, 0.4);"></i>USERNAME
        </div>

        <div class="text-left mb-2" style="font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, 0.8); text-transform: uppercase;">
            nickname • pro/nouns • ETC • ETC
        </div>

        <div class="text-left" style="font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, 0.8); text-transform: uppercase;">

            <a href="#"><i class="fa fa-user fa-fw tooltipster" title="carrd" data-original-title="carrd" style=" color: rgba(0, 0, 0, 0.8);"></i></a>

            <a href="#"><i class="fa-brands fa-twitter fa-fw tooltipster" title="twitter" data-original-title="twitter" style=" color: rgba(0, 0, 0, 0.8);"></i></a>

            <a href="#"><i class="fa-brands fa-instagram fa-fw tooltipster" title="instagram" data-original-title="instagram" style=" color: rgba(0, 0, 0, 0.8);"></i></a>

            <a href="#"><i class="fa fa-paintbrush fa-fw tooltipster" title="commissions • open" data-original-title="commissions • open" style=" color: rgba(0, 0, 0, 0.8);"></i></a>

            <i class="fa fa-arrow-right-arrow-left fa-fw tooltipster" title="trades • ask" data-original-title="trades • ask" style=" color: rgba(0, 0, 0, 0.8);"></i>

            <i class="fa fa-gift fa-fw tooltipster" title="requests • closed" data-original-title="requests • closed" style=" color: rgba(0, 0, 0, 0.8);"></i>

        </div>
        </div>

        </div>
    </div>

    <div class="row no-gutters">
        <div class="col-1">
            <!--- filler --->
        </div>

        <div class="col-6">

        <!--- title, tags, and links --->
        <div class="w-100" style="margin-left:0px; margin-top:150px; position:absolute;">
        <div class="text-right" style="font-size: 20px; font-weight: 500; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.8);">
            ABOUT ME
            <i class="fa fa-exclamation" style=" color: rgba(0, 0, 0, 0.8); transform: rotate(10deg);"></i>
            <i class="fa fa-exclamation" style=" color: rgba(0, 0, 0, 0.8); transform: rotate(10deg);"></i>
        </div>

        <div class="card p-0 mx-auto" style="border-radius: 0px; border: 1px solid #000; background-color: transparent; overflow-y: scroll; height: 90px;">
            <div class="text-right p-1" style="font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, 0.8);">
                Lil about and stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum arcu vel viverra.
        </div>
        </div>

        </div>

        <div class="col-5">
            <!--- filler --->
        </div>
    </div>

    <!--- credits. do NOT remove --->

    <div class="w-100" style="margin-left:186px; margin-top:276px; position:absolute;">
        <div class="text-center" style="font-size: 15px; font-weight: 600; letter-spacing: 0.1em; color: rgba(0, 0, 0, 0.5);">
                <a href="https://toyhou.se/honeybree"><i class="fa fa-code fa-fw tooltipster" title="code by honeybree" data-original-title="code by honeybree" style=" color: rgba(0, 0, 0, 0.4);"></i></a>
        </div>
    </div>

    </div>

<!--- end of the code --->

</div>