TH CODE 08 || SIMPLY SERENE (CHARACTER)

<!-- 08 || SIMPLY SERENE (CHARACTER) by icecreampizzer
    USER VERSION IS FOUND HERE: https://pastebin.com/aCb8dXUw

        RULES:
            - Don't remove my credit please!
            - Feel free to modify/frankenstein as much as you want!
            - Don't redistribute my codes please!

        COLOR GUIDE:
            #9F5C37
            #BE7D4B
            #292213
            #474419
            #C1BDBE
            text-secondary - accents

        find (ctrl + f) URLHERE for links, IMG for image addresses
            -->

<!-- WHOLE thing -->
<div class="container p-0 mt-4" style="max-width: 700px; letter-spacing: 0.2px">

    <div class="row no-gutters">

        <!-- side image -->
        <div class="card col-md-4 push-md-8 border-0 rounded-0" style="background:url(IMG) center; background-size: cover; background-repeat: no-repeat; min-height: 300px;">

            <!-- image credit -->
            <div class="mt-auto text-right p-2">
                <a class="bg-faded px-2 mx-1 rounded" href="URLHERE" data-toggle="tooltip" data-placement="top" title="image credit" style="font-size: 1.5rem;">
                    <i class="fas fa-image"></i>
                </a>
            </div>

        </div>
        <!-- end side image -->

        <!-- color palette -->
        <div class="card col-md-1 push-md-3 border-0 rounded-0">
            <div class="row no-gutters h-100">
                <div class="col-md col p-3" style="background:#9F5C37;"></div>
                <div class="col-md col p-3" style="background:#BE7D4B;"></div>
                <div class="col-md col p-3" style="background:#292213;"></div>
                <div class="col-md col p-3" style="background:#474419;"></div>
                <div class="col-md col p-3" style="background:#C1BDBE;"></div>
            </div>
        </div>
        <!-- end color palette -->

        <!-- main text content -->
        <div class="card col-md pull-md-5 border-0 rounded-0" style="text-align: justify;">

            <!-- title - for the icon, find your pick at https://fontawesome.com ! replace fas fa-leaf with the icon of your choice. -->
            <div class="text-md-right text-center text-secondary px-3 pb-3 mx-3 mt-2 mb-3" style="border-bottom: 1px solid">
                <p class="mb-0" style="font-size: 2.3rem; font-weight: 100;"><i class="fas fa-leaf fa-sm px-1"></i> NAME</p>
                <p style="font-size: 1.2rem; font-weight: 100;">adjective / adjective / adjective</p>
            </div>
            <!-- end title -->

            <!-- scrolling text content - if you don't like the scrolling, delete the HEIGHT and OVERFLOW in the line below. the palette and image will expand with the text! -->
            <div class="px-3 mx-1" style="height: 350px; overflow: auto;">

                <!-- gen info -->
                <div class="row no-gutters mb-3 text-secondary">
                    <div class="col">
                        <i class="fal fa-user pr-1"></i> Name<br>
                        <i class="fal fa-clock pr-1"></i> Age<br>
                        <i class="fal fa-transgender-alt pr-1"></i> Pronouns<br>
                        <i class="fal fa-id-card pr-1"></i> Occupation<br>
                    </div>

                    <div class="col">
                        <i class="fal fa-dna pr-1"></i> Species<br>
                        <i class="fal fa-birthday-cake pr-1"></i> Birthday<br>
                        <i class="fal fa-heart pr-1"></i> Orientation<br>
                        <a class="text-secondary" href="#"><i class="fal fa-music pr-1"></i> Theme</a><br>
                    </div>
                </div>
                <!-- end gen info -->

                <p><span class="px-3"></span> A simple character code! This will scroll with text. Best for short character descriptions! But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
                <p><span class="px-3"></span> Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?</p>
            </div>
        </div>
        <!-- end main text content -->

        <!-- aes images - these are clickable, and will redirect to the source! -->
        <div class="card col-md-12 mt-3 border-0 rounded-0">
            <div class="row no-gutters">

                <!-- image -->
                <div class="card border-0 rounded-0 col mr-3" style="background:url(IMG) center; background-size:cover; background-repeat: no-repeat; height: 150px;">

                    <!-- source -->
                    <a class="h-100" href="URLHERE" data-toggle="tooltip" data-placement="top" title="source"></a>
                </div>

                <!-- image -->
                <div class="card border-0 rounded-0 col mr-3" style="background:url(IMG) center; background-size:cover; background-repeat: no-repeat; height: 150px;">

                    <!-- source -->
                    <a class="h-100" href="URLHERE" data-toggle="tooltip" data-placement="top" title="source"></a>
                </div>

                <!-- image -->
                <div class="card border-0 rounded-0 col" style="background:url(IMG) center; background-size:cover; background-repeat: no-repeat; height: 150px;">

                    <!-- source -->
                    <a class="h-100" href="URLHERE" data-toggle="tooltip" data-placement="top" title="source"></a>
                </div>

            </div>
        </div>
        <!-- end aes images -->

    </div>

    <!-- credits! please dont remove <3 -->
    <p class="text-secondary text-right mt-2" style="font-size: 0.7rem;">code by <a href="https://toyhou.se/icecreampizzer">icecreampizzer</a></p>

</div>