Animal Crossing

<div class="p-0 mx-auto col-sm-9 mx-4 card border-0" style="background: #D9EBC5; border-radius: 30px; margin-top: 55px;">
    <!-- FLOATING IMAGE 1 -->
    <div class="p-2 rounded-circle" style="position:absolute; top:-50px; right:-20px; z-index:100; transform:rotate(15deg); background:#70CEBE;">
        <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 100px; width: 100px; border: #46A191 2px dashed;"></div>
    <!-- ======================= HEADER -->
    <div class="p-1" style="background: #FCF9DF; border-radius: 30px 30px 0px 0px;">
        <div class="m-0 row">
            <i class="p-1 px-2 col-auto fas fa-leaf fa-2x" style="color: #5CBEB0;"></i>
            <div class="p-1 col mt-3"> <hr class="m-0 " style="background: #A9A8A6;"> </div>

            <!-- NAME -->
            <h1 class="p-1 px-2 col-auto" style="color: #A9A8A6;">Name</h1>

            <div class="p-1 col mt-3"> <hr class="m-0 " style="background: #A9A8A6;"> </div>
        </div>
    </div>
    <!-- ======================= BODY -->
    <div class="m-0 row">
        <!-- LEFT IMAGE -->
        <div class="p-1 col-lg-4 align-items-center">
            <img class="my-auto" src="https://via.placeholder.com/600x800" style="width: 100%;">
        </div>
        <!-- CENTER COLUMN -->
        <div class="p-1 col-lg-4">
            <!-- QUOTE -->
            <div class="ml-2 m-1">
                <h5 class="p-1 text-center" style="color: #999178; background: #FCF9DF; border-radius: 30px;">
                    "Lorem ipsum dolor sit amet."</h5>
            </div>
            <!-- STATS -->
            <div class="m-2 row" style="color: #504320;">
                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">GENDER</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">BIRTH</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <hr class="m-0 mb-1 p-0 col-12" style="background: #5DBFB0;">

                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">ISLAND</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">HEMISPHERE</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <hr class="m-0 mb-1 p-0 col-12" style="background: #5DBFB0;">

                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">FRUIT</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">DATE ISSUED</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <hr class="m-0 mb-1 p-0 col-12" style="background: #5DBFB0;">

                <div class="m-0 p-1 col-6"><p class="m-0 badge" style="background: #5DBFB0; font-size: 14.4px; border-radius: 20px;">ID</p>
                    <p class="m-0 ml-2"> INFO</p></div>
                <hr class="m-0 mb-1 p-0 col-12" style="background: #5DBFB0;">
            </div>
            <!-- MAP -->
            <div class="m-1 justify-content-center">
                <img src="https://via.placeholder.com/260x210" style="max-height: 210px; width: 260px; border: #FCF9DF 5px dashed;"></div>
        </div>
        <!-- RIGHT -->
        <div class="p-1 col-lg-4 my-auto" style="max-height: 520px; overflow: auto;">
            <!-- VILLAGERS -->
            <div class="m-0 row justify-content-center">
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
                <!-- VILLAGER -->
                <div class="p-1 col-auto" data-toggle="tooltip" title="VILLAGER NAME">
                    <img src="//via.placeholder.com/200" style="height: 95px; width: 95px; border: #46A191 2px dashed;"></div>
            </div>
        </div>
    </div>
    <!-- FLOATING IMAGE 2 -->
    <div class="p-2 rounded-circle hidden-md-down" style="position:absolute; bottom:-20px; left:-20px; z-index:100; transform:rotate(-10deg); background:#70CEBE;">
        <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 100px; width: 100px; border: #46A191 2px dashed;"></div>
    <!-- ======================= CREDIT -->
    <div class="p-2" style="background: #FCF9DF; border-radius: 0px 0px 30px 30px;">
        <div class="m-0 mr-2 justify-content-end">
            <a style="color: #5CBEB0;" data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
            <a style="color: #5CBEB0;" data-toggle="tooltip" title="Layout by Eremiel" href="/Eremiel"><i class="fal fa-paint-brush"></i></a>
        </div>
    </div>
</div>