Boxed - User

<div class="m-3 p-3 mx-auto row no-gutters" style="
    background: url('BACKGROUND_IMAGE');
    background-size: cover; background-position: center;
    max-width: 800px; border-radius: 20px;">

    <!-- ...................................... PROFILE PICTURE -->
    <div class="p-2 col-sm-4 text-center">
        <img src="//via.placeholder.com/500" class="rounded-circle" style="max-width: 100%; max-height: 200px;">
    </div>
    <!-- ...................................... RIGHT -->
    <div class="col-sm-8 my-auto">
        <!-- BASICS -->
        <div class="m-2 p-2 card text-center" style="border-radius: 20px;">
            <h1 class="m-0 display-3">Username</h1>

            <div class="row no-gutters">
                <div class="col"> <h3 class="m-1" style="font-variant: small-caps;">
                    pro/noun</h3> </div>
                <div class="col"> <h3 class="m-1" style="font-variant: small-caps;">
                    age</h3> </div>
            </div>
        </div>
        <!-- LINKS -->
        <div class="m-2 p-2 card text-center text-primary" style="border-radius: 20px;">
            <h3 class="m-1" style="font-variant: small-caps;">
                <a href="LINK">Link</a> —
                <a href="LINK">Link</a> —
                <a href="LINK">Link</a>
            </h3>
        </div>
    </div>

    <!-- ...................................... ART STATUS -->
    <div class="p-2 col-sm-4"> <div class="p-2 card h-100" style="border-radius: 20px;">
        <h3 class="m-1 text-center" style="font-variant: small-caps;">Art Status</h3>
        <!-- DIVIDER -->
        <div class="mt-n1 row no-gutters faded text-muted">
            <div class="mx-1 col my-auto" style="border-top: 2px solid;"></div> <i class="mt-1 col-auto far fa-chevron-down fa-lg"></i> <div class="mx-1 col my-auto" style="border-top: 2px solid;"></div>
        </div>
        <!-- CONTENT -->
        <div class="mx-n1 text-right my-auto">
            <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Requests</strong>
                Closed</p>
            <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Trades</strong>
                Closed</p>
            <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Collabs</strong>
                Closed</p>
            <p class="m-1"><strong class="text-secondary pull-left" style="font-variant: small-caps;">Commissions</strong>
                Closed</p>
        </div>
    </div> </div>
    <!-- ...................................... ABOUT -->
    <div class="col-sm-8"> <div class="m-2 card" style="border-radius: 20px; overflow: hidden;">
        <div class="p-2 overflow-auto" style="height: 220px; text-indent: 20px;">
            <h3 class="m-1" style="font-variant: small-caps; text-indent: 0px;"><i class="fas fa-chevron-right"></i> About</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis enim quis justo vulputate ullamcorper. Nam eget eleifend nisi. Nunc non nibh leo. Quisque elementum dolor et lorem sagittis maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id justo varius dolor viverra faucibus.  </p>
            <p>Morbi dictum placerat mauris, a commodo purus imperdiet ut. Suspendisse imperdiet ipsum massa. Phasellus euismod, dui vel interdum lobortis, nibh justo tempus mi, vitae vestibulum magna nisi eget leo.</p>
        </div>
    </div> </div>

    <!-- ...................................... CREDITS -->
    <div class="m-n1 col-12 text-center">
        <a data-toggle="tooltip" title="HTML by SparlyCodes" href="/SparklyCodes"> <i class="fas fa-code"></i></a>
        <a data-toggle="tooltip" title="Layout by connorthecanoe" href="/connorthecanoe"><i class="mx-2 fas fa-paint-brush"></i></a>
        <a data-toggle="tooltip" title="Background" href="BG-LINK"> <i class="fas fa-image"></i> </a>
    </div>
</div>