Rounded - Custom

<!--
HEADER COLOR: 2E385B
CONTENT COLOR: FAFAFA
TEXT COLOR: 263055
HEADERS/BUTTONS COLOR: 6988FA
-->
<div class="p-0 col-md-9 mx-auto">
    <div class="m-3 card border-0" style="color: #263055; background-color: #FAFAFA;border-radius: 40px;">
        <!-- HEADER -->
        <div class="p-1 pl-3 card-header" style="background: #2E385B url('https://cdn.discordapp.com/attachments/579088492152487946/800916228034002965/constellations_small.png'); border-radius: 40px 40px 0px 0px;">
            <h1 class="m-0 ml-2 display-3 justify-content-between" style="color: #6988FA;">
                Name
                <span><i class="mr-2 fal fa-star"></i></span>
            </h1>

            <!-- STAMP/RIBBON ROW -->
            <div class="m-0 row justify-content-center">
                <div class="m-1 p-0 col-auto">
                    <img src="//via.placeholder.com/100"></div>
                <div class="m-1 p-0 col-auto">
                    <img src="//via.placeholder.com/100"></div>
                <div class="m-1 p-0 col-auto">
                    <img src="//via.placeholder.com/100"></div>
                <div class="m-1 p-0 col-auto">
                    <img src="//via.placeholder.com/100"></div>
            </div>
        </div>
        <!-- CONTENT -->
        <div class="m-0 row">
            <!-- LEFT -->
            <div class="p-2 col-lg-8" style="height: 300px; overflow: auto;">
                <h1 class="font-weight-light" style="color: #6988FA; border-bottom: 1px solid;">ABOUT</h1>
                <!-- CONTENT -->
                <div class="mt-3 mb-2 text-center">
                    <!-- IMAGE -->
                    <img class="img-thumbnail rounded-circle" src="//via.placeholder.com/200" style=" height: 130px; width: 130px;">

                    <p class="m-0 text-secondary text-uppercase">
                        adj <i class="fas fa-caret-right fa-lg"></i>
                        pronouns <i class="fas fa-caret-left fa-lg"></i>
                        adj
                    </p>
                    <!-- PARAGRAPH -->
                    <p class="mt-1 m-0">Introduce yourself here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur magna eu facilisis aliquet. Quisque dictum nunc nec sollicitudin elementum. Nam a quam ac dui congue venenatis quis at tortor. Sed in varius ante, id porttitor mi. Integer malesuada justo non justo eleifend condimentum. Vestibulum nulla tortor, vehicula id elit ut, ullamcorper sollicitudin ex. Ut vehicula a purus egestas vestibulum. Curabitur nulla leo, sagittis sed finibus non, sagittis ac leo.</p>
                </div>
            </div> <!-- end left -->
            <!-- RIGHT -->
            <div class="p-1 col-lg-4">
                <div class="mt-5 mx-2 font-weight-bold text-uppercase text-right">
                    <p class="mb-4">
                        <span class="pull-left text-secondary">Requests</span>
                        <span>closed</span>
                    </p>
                    <p class="mb-4">
                        <span class="pull-left text-secondary">Trades</span>
                        <span>mutuals/friends</span>
                    </p>
                    <p class="mb-4">
                        <span class="pull-left text-secondary">Comissions</span>
                        <span>open</span>
                    </p>
                    <!-- BUTTONS -->
                    <div class="m-0 row justify-content-center">
                        <!-- twitter -->
                        <a href="LINK" class="m-1 p-2 col-auto btn text-white rounded-circle" style="background: #6988FA; height: 40px; width: 40px;">
                            <i class="my-1 mx-auto fab fa-lg fa-twitter"></i></a>
                        <!-- deviantart -->
                        <a href="LINK" class="m-1 p-2 col-auto btn text-white rounded-circle" style="background: #6988FA; height: 40px; width: 40px;">
                            <i class="my-1 mx-auto fab fa-lg fa-deviantart"></i></a>
                        <!-- youtube -->
                        <a href="LINK" class="m-1 p-2 col-auto btn text-white rounded-circle" style="background: #6988FA; height: 40px; width: 40px;">
                            <i class="my-1 mx-auto fab fa-lg fa-youtube"></i></a>
                        <!-- tumblr -->
                        <a href="LINK" class="m-1 p-2 col-auto btn text-white rounded-circle" style="background: #6988FA; height: 40px; width: 40px;">
                            <i class="my-1 mx-auto fab fa-lg fa-tumblr"></i></a>
                        <!-- instagram -->
                        <a href="LINK" class="m-1 p-2 col-auto btn text-white rounded-circle" style="background: #6988FA; height: 40px; width: 40px;">
                            <i class="my-1 mx-auto fab fa-lg fa-instagram"></i></a>
                    </div>
                </div>
            </div> <!-- end right -->
        </div>
        <!-- CREDIT -->
        <div class="p-1 text-center">
            <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
            <a data-toggle="tooltip" title="Layout by toffeebuns" href="/toffeebuns"><i class="fal fa-paint-brush"></i></a>
        </div>
    </div>
</div>