Webkins

<!--
FFF0C9 >> PAGE BACKGROUND
CDC0A1 >> PAGE SHADOW
8F01D1 >> BOX BACKGROUND
7805AE >> BOX BORDER
FFCA01 >> BUTTON
00005B >> BUTTON TEXT
-->
<div class="m-3 p-1 row no-gutters mx-auto" style="max-width: 800px; background: #FFF0C9; box-shadow: 10px 10px #CDC0A1; border-radius: 10px;">
    <!-- LEFT -->
    <div class="col-lg-8 row no-gutters">
        <!-- NAME -->
        <div class="col-12 order-1"> <div class="m-1 p-2" style="background: #8F01D1; border-radius: 7px; border: 4px outset #7805AE;">
            <h1 class="m-0 text-center font-weight-bold">Character Title</h1>
        </div> </div>

        <!-- BASICS -->
        <div class="p-1 col-sm-8 col-6 order-2"> <div class="p-2" style="background: #8F01D1; border-radius: 7px; border: 4px outset #7805AE; height: 100%;">
            <h3 class="m-0 text-center font-weight-bold">Gender | Pro/noun | Age</h3>
        </div> </div>
        <!-- ARCHETYPE -->
        <div class="p-1 col-sm-4 col-6 order-3"> <div class="p-2" style="background: #8F01D1; border-radius: 7px; border: 4px outset #7805AE; height: 100%;">
            <h3 class="m-0 text-center font-weight-bold">Archetype</h3>
        </div> </div>

        <!-- IMAGE -->
        <div class="col-sm-6 order-4">
            <div class="m-1 p-2" style="background: #8F01D1; border-radius: 7px; border: 4px outset #7805AE;">
                <h3 class="m-0 text-center font-weight-bold">Appearance</h3>
            </div>
            <div style="background: url('//via.placeholder.com/500') top center;
                background-size: cover; border-radius: 7px; height: 250px;" class="m-1"></div>
        </div>
        <!-- BIO -->
        <div class="col-sm-6 order-5">
            <div class="m-1 p-2" style="background: #8F01D1; border-radius: 7px; border: 4px outset #7805AE;">
                <h3 class="m-0 text-center font-weight-bold">Biography</h3>
            </div>
            <div style="border-radius: 7px; border: 4px solid #CDC0A1; text-indent: 20px; height: 250px; overflow: auto;" class="m-1 p-2 text-dark">
                <p>Write about your character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vestibulum tortor, sit amet viverra ante. Morbi eget porttitor orci. Proin dictum mauris in maximus dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo nisl risus, ut scelerisque odio pharetra tincidunt. Nam vulputate dignissim augue sed vulputate. Morbi odio felis, mattis consequat sagittis non, interdum sit amet justo. Aliquam a ullamcorper nisi.</p>
                <p>Vivamus at odio sit amet nibh blandit iaculis. Fusce in lorem diam. Ut vestibulum consectetur augue eu eleifend. Phasellus nec pellentesque nunc. Duis consectetur dolor id enim congue, a eleifend est aliquam. Aenean auctor, nunc et condimentum mattis, augue felis vestibulum dolor, sit amet molestie arcu sapien at magna. Curabitur malesuada lorem in felis rutrum tristique. Praesent eget diam ligula. Nullam consectetur in dui et pellentesque. Donec massa ante, feugiat vitae blandit dictum, mattis id ex. </p>
            </div>
        </div>

        <!-- CREDITS -->
        <div class="p-1 col-lg-6 order-lg-6 order-7">
            <div class="text-center h-100 align-items-center justify-content-center" style="background: #FFCA01; border-radius: 30px; border: 4px outset #7805AE; font-size: 16px;">
                <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes" style="color: #00005B;"><i class="fas fa-code"></i></a>
                <a data-toggle="tooltip" title="Layout by errorz" href="/errorz" style="color: #00005B;"><i class="mx-2 fas fa-paint-brush"></i></a>
                <a data-toggle="tooltip" title="Ribbons source" href="/4739396.-ribbons" style="color: #00005B;"><i class="fas fa-award"></i></a>
            </div>
        </div>
        <!-- RIBBONS -->
        <div class="col-lg-6 order-lg-7 order-6"> <div class="m-1 text-center">
            <!-- RIBBON IMAGES: KEEP AT 3 MAX! -->
            <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> </div>
    </div>
    <!-- RIGHT- MOOD IMAGE -->
    <div class="p-1 col-lg-4">
        <div style="background: url('//via.placeholder.com/500') center;
            background-size: cover; border-radius: 7px; min-height: 250px; height: 100%;"></div>
    </div>
</div>