Meet The Artist

<div class="row no-gutters mx-auto" style="max-width: 900px;">
    <!-- .......................... LEFT -->
    <div class="col-lg-4">
        <!-- IMAGE - use a vertical image, size will adjust & focus will be on the center -->
        <div style="background-image: url('//via.placeholder.com/500');
            background-position: center; background-size: cover; height: 450px;" class="m-1 bg-faded"></div>
    </div>
    <!-- .......................... RIGHT -->
    <div class="col-lg-8"> <div class="m-1 bg-faded" style="height: 450px; overflow: auto;">
        <!-- USERNAME/BASICS -->
        <div class="m-0 mb-2 p-2 card-header" style="border-radius: 0px;">
            <div class="row no-gutters">
                <div class="pr-2 col-sm order-2 order-sm-1 text-secondary">
                    <p class="m-0">adjective • adjective • adjective</p>
                    <p class="m-0" style="border-top: 1px solid;">age • pro/nouns • origin • bday • MBTI</p>
                </div>
                <h1 class="m-0 col-sm-auto order-1 order-sm-2 display-3">Username</h1>
            </div>
        </div>
        <!-- RIBBONS -->
        <div class="text-center">
            <img title="RIBBON NAME: description." class="mx-1 tooltipster" data-toggle="tooltip"
                 src="https://file.toyhou.se/images/15988440_kyGKU7ZGvay2DYm.png">
            <img title="RIBBON NAME: description." class="mx-1 tooltipster" data-toggle="tooltip"
                 src="https://file.toyhou.se/images/15988440_kyGKU7ZGvay2DYm.png">
            <img title="RIBBON NAME: description." class="mx-1 tooltipster" data-toggle="tooltip"
                 src="https://file.toyhou.se/images/15988440_kyGKU7ZGvay2DYm.png">
        </div>
        <!-- ROW -->
        <div class="my-1 mx-2 row no-gutters">
            <!-- LIKES -->
            <div class="p-1 col-sm-4"> <div class="p-2 card rounded-0 border-0 h-100">
                <i class="fal fa-heart fa-2x text-success" style="position: absolute; top: -5px; right: -5px; transform: rotate(30deg);"></i>
                <div class="row no-gutters">
                    <h1 class="m-0 pr-1 font-weight-light text-success col-auto" style="font-variant: small-caps;">Likes</h1>
                    <div class="col mb-2 text-success" style="border-bottom: 1px solid;"></div> </div>
                <ul class="m-0 pl-4" style="list-style-type: square">
                    <li>The boxes will grow equally with your content, like this.</li>
                    <li>thing</li>
                    <li>thing</li>
                </ul>
            </div> </div>
            <!-- DISLIKES -->
            <div class="p-1 col-sm-4"> <div class="p-2 card rounded-0 border-0 h-100">
                <i class="fal fa-heart-broken fa-2x text-danger" style="position: absolute; top: -5px; right: -5px; transform: rotate(30deg);"></i>
                <div class="row no-gutters">
                    <h1 class="m-0 pr-1 font-weight-light text-danger col-auto" style="font-variant: small-caps;">Dislikes</h1>
                    <div class="col mb-2 text-danger" style="border-bottom: 1px solid;"></div> </div>
                <ul class="m-0 pl-4" style="list-style-type: square">
                    <li>thing</li>
                    <li>thing</li>
                    <li>thing</li>
                </ul>
            </div> </div>
            <!-- HOBBIES -->
            <div class="p-1 col-sm-4"> <div class="p-2 card rounded-0 border-0 h-100">
                <i class="fal fa-headphones fa-2x text-primary" style="position: absolute; top: -5px; right: -5px; transform: rotate(30deg);"></i>
                <div class="row no-gutters">
                    <h1 class="m-0 pr-1 font-weight-light text-primary col-auto" style="font-variant: small-caps;">Hobbies</h1>
                    <div class="col mb-2 text-primary" style="border-bottom: 1px solid;"></div> </div>
                <ul class="m-0 pl-4" style="list-style-type: square">
                    <li>thing</li>
                    <li>thing</li>
                    <li>thing</li>
                </ul>
            </div> </div>
        </div>
        <!-- BIO -->
        <div class="p-2" style="text-indent: 20px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
        </div>
        <!-- ART STATUSES -->
        <div class="p-2 text-center">
            <!-- LINK INFO SHEET/POST -->
            <a href="LINK" class="my-1 p-1 px-2 btn btn-outline-primary"><i class="fas fa-dollar-sign"></i> Commissions: Open</a>
            <a href="LINK" class="my-1 p-1 px-2 btn btn-outline-primary"><i class="fas fa-sync"></i> Trades: Open</a>
            <a href="LINK" class="my-1 p-1 px-2 btn btn-outline-primary"><i class="fas fa-volume-up"></i> Requests: Open</a>
            <a href="LINK" class="my-1 p-1 px-2 btn btn-outline-primary"><i class="fas fa-comment"></i> Roleplay: Open</a>
        </div>
    </div> </div>

    <!-- .......................... FEATURED -->
    <div class="col-lg-12"> <div class="m-1 bg-faded">
        <div class="m-0 mb-2 p-2 card-header" style="border-radius: 0px;">
            <h1 class="m-0 display-3">Featured</h1>
        </div>
        <div class="p-2 row no-gutters" style="font-variant: small-caps;">
            <!-- PERSON -->
            <div class="col-lg-3 col-6 justify-content-center text-center"> <div>
                <img src="//via.placeholder.com/200" style="height: 160px; width: 160px;"> <br>
                <h2><a href="LINK">Name</a></h2>
            </div></div>
            <!-- PERSON -->
            <div class="col-lg-3 col-6 justify-content-center text-center"> <div>
                <img src="//via.placeholder.com/200" style="height: 160px; width: 160px;"> <br>
                <h2><a href="LINK">Name</a></h2>
            </div></div>
            <!-- PERSON -->
            <div class="col-lg-3 col-6 justify-content-center text-center"> <div>
                <img src="//via.placeholder.com/200" style="height: 160px; width: 160px;"> <br>
                <h2><a href="LINK">Name</a></h2>
            </div></div>
            <!-- PERSON -->
            <div class="col-lg-3 col-6 justify-content-center text-center"> <div>
                <img src="//via.placeholder.com/200" style="height: 160px; width: 160px;"> <br>
                <h2><a href="LINK">Name</a></h2>
            </div></div>
        </div>
    </div> </div>

    <!-- .......................... CREDITS -->
    <p class="col-12 text-center">
        <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"> <i class="fal fa-code"></i> </a>
        <a data-toggle="tooltip" title="Ribbons source" href="/4739396.-ribbons"><i class="fal fa-award"></i></a>
    </p>
</div>