F2U ✦ entangled | CC

<!--------------------- COLOR CODES

TIP: Use CTRL + F to quickly find colors, and replace them!

MAIN BOX: #5e7a66
SECONDARY BOX: #83a68d

MAIN FONT COLOR: #233b2a;
SECONDARY FONT COLOR: #34523d

----------------------------------->

<div class="container my-5 mx-auto" style="width: 600px;">

<div class="row no-gutters">
    <div class="col-lg-4">

        <!--- image --->

        <div class="h-100" style="border-radius: 3px; background-size: cover; position: center; background-image: url('#');"></div>
    </div>

    <div class="col-lg-8">
        <div class="card p-3 m-2 text-warning border-0" style="background-color: transparent;">
        <div class="card p-2 mb-2 text-warning" style="background-color: #5e7a66;">

            <!--- info --->

            <div class="row no-gutters">
                <div class="col-lg-4">
                    <p class="p-1 text-left" style="color: #233b2a; font-size: 17px;">
                        NAME
                    </p>
                </div>

                <div class="col-lg-8">
                    <p class="p-1 text-right" style="color: #233b2a; font-size: 17px; opacity: 0.7;">
                        PRO / NOUNS • AGE
                    </p>
                </div>
            </div>

            <!--- about --->

            <div class="card text-warning" style="background-color: #83a68d;">
                <div class="card p-1 text-warning bg-faded border-0" style="background-color: transparent; overflow-y: scroll; height: 45px;">
                    <p class="text-center" style="color: #34523d; font-size: 12px;">
                    Put whatever you want here, it scrolls! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>

            <!--- art status --->

            <div class="row no-gutters">
                <div class="col-lg-5">
                    <p class="p-2 text-center" style="color: #233b2a; font-size: 12px;">
                        <a href="#" class="text-warning"><i class="fa fa-pencil fa-fw tooltipster" style="color: #34523d;" title="commissions • open" data-original-title="commissions • open"></i></a>

                        COMMISSIONS
                    </p>
                </div>

                <div class="col-lg-3">
                    <p class="p-2 text-center" style="color: #233b2a; font-size: 12px;">
                        <a href="#" class="text-warning"><i class="fa fa-arrow-right-arrow-left fa-fw tooltipster" style="color: #34523d;" title="trades • open" data-original-title="trades • open"></i></a>

                        TRADES
                    </p>
                </div>

                <div class="col-lg-4">
                    <p class="p-2 text-center" style="color: #233b2a; font-size: 12px;">
                        <i class="fa fa-gift fa-fw tooltipster" style="color: #34523d;" title="requests • closed" data-original-title="requests • closed"></i>

                        REQUESTS
                    </p>
                </div>
            </div>
        </div>

        <!--- links --->

        <div class="card p-2" style="background-color: #5e7a66;">
            <p class="p-1 text-center" style="color: #34523d; font-size: 17px;">
            <a href="#" class="m-2"><i class="fa fa-user fa-fw tooltipster" style="color: #34523d;" title="about" data-original-title="about"></i></a>

            <a href="#" class="m-2"><i class="fa-brands fa-twitter fa-fw tooltipster" style="color: #34523d;" title="twitter" data-original-title="twitter"></i></a>

            <a href="#" class="m-2"><i class="fa-brands fa-instagram fa-fw tooltipster" style="color: #34523d;" title="instagram" data-original-title="instagram"></i></a>

            <a href="#" class="m-2"><i class="fa-brands fa-deviantart fa-fw tooltipster" style="color: #34523d;" title="deviantart" data-original-title="deviantart"></i></a>

            <a href="#" class="m-2"><i class="fa-brands fa-youtube fa-fw tooltipster" style="color: #34523d;" title="youtube" data-original-title="youtube"></i></a>

            <i class="fa-brands fa-discord fa-fw tooltipster m-2" title="user#0000" data-original-title="user#0000"></i>

            <!--- DO NOT REMOVE --->

            <a href="https://toyhou.se/bumblebree/characters" class="m-2"><i class="fa fa-code fa-fw tooltipster" title="code by honeybree" style="color: #34523d;" data-original-title="code by honeybree"></i></a>
            </p>
        </div>

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

</div>