In Summary,

<!-- COLORS:
    8C9097 >> Borders
    515581 >> Text/Tags background
    F2F3E2 >> Tags text/Content background
    D7A55B >> Accent text
-->
<div class="m-3 p-1 mx-auto row no-gutters" style="background-color: #8C9097; color: #515581; max-width: 700px; border-radius: 10px; font-size: .87em">
    <!-- .............................. LEFT -->
    <div class="p-2 col-sm-4">
        <div style="background: url('IMG_LINK') center;
        background-size: cover; height: 290px; border-radius: 10px;" class="w-100"></div>

        <div class="pt-1 align-items-center justify-content-center flex-wrap font-italic" style="height: 50px;">
            <a href="LINK" class="px-2" style="background-color: #515581; color: #F2F3E2; border-radius: 10px;">#tagI</a>
            <a href="LINK" class="px-2 ml-1" style="background-color: #515581; color: #F2F3E2; border-radius: 10px;">#tagII</a>
            <a href="LINK" class="px-2 ml-1" style="background-color: #515581; color: #F2F3E2; border-radius: 10px;">#tagIII</a>
            <a href="LINK" class="px-2 ml-1" style="background-color: #515581; color: #F2F3E2; border-radius: 10px;">#tagIV</a>

            <!-- CREDITS - DON'T TOUCH -->
            <a href="/SparklyCodes" class="px-2 ml-1 tooltipster" title="Code by SparklyCodes" style="background-color: #515581; color: #fff; border-radius: 10px;">
                <i class="fal fa-code"></i>
            </a>
        </div>
    </div>
    <!-- .............................. RIGHT -->
    <div class="p-2 col-sm-8"> <div style="background-color: #F2F3E2; border-radius: 10px; overflow: hidden;">
        <!-- CONTENT -->
        <div class="p-2 overflow-auto" style="height: 300px;">
            <!-- HEADER -->
            <div class="mb-1 row no-gutters">
                <h2 class="m-0 pr-1 col-auto text-monospace" style="color: #D7A55B">
                    NAME
                </h2>
                <div class="mx-1 col my-auto" style="border-top: 2px solid #D7A55B"></div>
                <p class="m-0 pl-1 col-auto">
                    pro/nouns <i class="fal fa-snowflake" style="color: #D7A55B"></i>
                    age <i class="fal fa-snowflake" style="color: #D7A55B"></i>
                    orientation <i class="fal fa-snowflake" style="color: #D7A55B"></i>
                    race(/species)
                </p>
            </div>
            <!-- ABOUT -->
            <div style="text-indent: 20px;">
                <h2 class="m-0 text-monospace" style="color: #D7A55B; text-indent: 0px">ABOUT</h2>
                <p>Introduction here. Sed sit amet lectus tristique urna sollicitudin imperdiet. Aenean sed eros sed ex sodales ornare. Morbi eget quam aliquet, tempus ante vitae, pretium erat. Suspendisse in nunc efficitur, convallis lectus ut, faucibus nulla. Aenean in neque aliquam, congue orci id, rhoncus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ornare mauris in enim venenatis bibendum. Sed vitae laoreet elit.  </p>
            </div>
            <!-- DIVIDER -->
            <div class="my-2" style="border-top: 2px solid #D7A55B"></div>
            <!-- STORY -->
            <div style="text-indent: 20px;">
                <h2 class="m-0 text-monospace" style="color: #D7A55B; text-indent: 0px">STORY</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet lectus nec ante gravida volutpat eu sit amet lorem. Sed sollicitudin ac lacus et dictum. Quisque tincidunt ante tincidunt quam elementum vehicula at ullamcorper lectus. Nulla facilisi. Curabitur tempus nulla justo, ac lobortis lectus aliquam eu. Etiam vitae sollicitudin libero, et facilisis nibh. Proin tincidunt malesuada urna, at imperdiet orci fermentum ac. Vivamus malesuada, ipsum nec vehicula egestas, massa diam tempor dolor, sed euismod mi orci quis quam.</p>
                <p>Vestibulum eu justo vel leo sodales dictum. Vestibulum pretium sed urna eget fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sit amet porta nunc. Sed facilisis dui non pharetra vulputate. Aenean suscipit, lorem vel dictum malesuada, risus quam facilisis elit, quis faucibus arcu tellus in enim.</p>
                <p>Integer ac nisi ante. Nunc mollis ante neque, ut molestie dui aliquet nec. In in libero egestas, dictum nibh non, ullamcorper dolor. Nam sed ultrices magna, commodo tincidunt mi. Vestibulum vulputate mollis nisi. Aenean in ante sit amet nisi tempor pretium vel ac lacus. Etiam ante lacus, suscipit ultrices justo id, malesuada vehicula massa. </p>
            </div>
            <!-- DIVIDER -->
            <div class="my-2" style="border-top: 2px solid #D7A55B"></div>
            <!-- RELATIONSHIPS -->
            <div>
                <h2 class="m-0 text-monospace" style="color: #D7A55B">RELATIONSHIPS</h2>
                <!-- PERSON -->
                <div class="my-1 row no-gutters">
                    <img src="IMG_LINK" class="col-auto" style="max-height: 100px;">
                    <p class="px-1 col">
                        <span style="font-size: 1.3em"><a style="color: #D7A55B" href="LINK">Name</a> - relationship</span><br>
                        Aliquam eget ipsum pulvinar, imperdiet augue in, gravida lorem. Nullam egestas sodales urna, hendrerit euismod mi tempor et.
                    </p>
                </div> <!-- person end -->
                <!-- PERSON -->
                <div class="my-1 row no-gutters">
                    <img src="IMG_LINK" class="col-auto" style="max-height: 100px;">
                    <p class="px-1 col">
                        <span style="font-size: 1.3em"><a style="color: #D7A55B" href="LINK">Name</a> - relationship</span><br>
                        Aliquam eget ipsum pulvinar, imperdiet augue in, gravida lorem. Nullam egestas sodales urna, hendrerit euismod mi tempor et.
                    </p>
                </div> <!-- person end -->
                <!-- ADD MORE ABOVE HERE -->
            </div>
        </div>
        <!-- MUSIC PLAYER -->
        <div class="mb-1 p-2 row no-gutters" style="color: #D7A55B">
            <h2 class="m-0 pr-1 col-auto text-monospace">
                Song Name
            </h2>
            <div class="mx-1 col my-auto" style="border-top: 2px solid"></div>
            <div class="m-0 pl-1 col-auto">
                <!-- VIDEO LINK - copy everything after v= in the youtube URL and replace VIDEOID with it -->
                <iframe src="//www.youtube.com/embed/VIDEOID"
                allowfullscreen frameborder="0" style="height: 25px; width: 25px; opacity: 0.01; right: -5px; z-index: 1000; position: absolute;"></iframe> <i class="far fa-play fa-lg"></i>
            </div>
        </div>
    </div> </div>
</div>