Custom Color Narrow Character Relations Code

<!--------------------------------------
    Free to Use Character Relationship Code by LeafJelly
            Verison: Custom Colors Narrow
         ideal for wide character codes


    Copy and paste the entire code for multiple chara relationships!

This code is meant to be added onto other existing character codes, not used on it's own. But you can if u want to.
Adding this code onto other codes is considered frankensteining codes, please check with other coder's rules to see if they're okay with it!
My codes can be frankensteined/mix n match with other codes as long as all the coders are credited.

    Colors
BG: #111
Text: #777
Text-Accent: #999
-------------------------------------->

<div class="col-12 col-lg-5 my-1" style="margin:auto">
<hr>
<div class="row no-gutter">

<!-------------Character Info------------------->
    <div class="col-12 col-md-5 col-lg-5 px-1 align-items-center">
        <div class="card border-0 py-3" style="background:#111;font-variant:small-caps;color:#777;">
        <div class="row no-gutters">
        <!----------Character Image use a square image
            You can change the container shape to a square by replacing class="rounded-circle" with class="square"
        -------------------->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" class="rounded-circle" style="height:150px;width:150px;margin:auto">

            <div class="col-12 text-center text-uppercase" style="font-size:1.4em;font-weight:500;color:#999">
                <p><i class="px-1 fa-solid fa-handshake fa-sm"></i>Relationship type</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Name <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content </p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Pronouns <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content/Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Age <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Species <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Met via <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Highschool</p></div>

        <!-------Copy and paste above here if you want more rows. You can also remove a bunch of rows---------->
        </div></div>
    </div>

<!----------Relationship Info-------------->
    <div class="col-12 col-md-7 col-lg-7 p-0 px-1">
        <div class="card border-0 p-3 h-100" style="background:#111;">
        <!---------Quote Delete if you don't want it--------->
            <p class="text-center" style="margin:auto;font-size:1.1em;color:#999"><i class="pr-2 fa-solid fa-quote-left fa-sm"></i>
            Narrow Version for thin character profiles. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<i class="pl-2 fa-solid fa-quote-right fa-sm"></i></p>

        <!---------Relationship info
        If the box looks too long to you, change the height here
        --------->
        <div class="mt-2" style="overflow:auto;height:200px;color:#777;">
            <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est elit, condimentum at turpis sit amet, feugiat fermentum leo. In malesuada rutrum dictum. Nulla gravida tempor laoreet. Donec tincidunt dolor eget orci faucibus, a hendrerit arcu faucibus. Nam venenatis vestibulum fermentum. Nulla id ipsum at risus gravida sollicitudin. Morbi ultrices hendrerit turpis, id venenatis nibh pretium vel. Mauris imperdiet at ex quis accumsan. Donec pharetra turpis vel pharetra condimentum. Vestibulum quis tempor nisl.
            </p>

            <p>
             Nullam eros dui, dictum ut arcu maximus, fringilla volutpat quam. Vestibulum aliquam, ante nec iaculis posuere, metus tortor vestibulum leo, sit amet sollicitudin dolor ligula sit amet felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eleifend porttitor aliquam. Nam tincidunt elit nisi, ac fringilla enim rhoncus vitae. Nunc in eros elit. Suspendisse quam nunc, fermentum eu diam id, consectetur finibus neque. Curabitur malesuada sed augue at elementum. Quisque mauris elit, posuere at scelerisque eget, tempor a eros. Donec ornare efficitur elit id viverra. Sed et dictum quam, nec vulputate nulla.
            </p>

            <p>
             Duis vel velit urna. Fusce risus ligula, vehicula aliquam auctor in, maximus id tortor. Pellentesque pretium blandit sollicitudin. Fusce bibendum sit amet turpis eu fermentum. Pellentesque at vehicula ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nunc mi, tempor a mauris porta, commodo ullamcorper lectus. Ut ac justo iaculis, fermentum eros quis, gravida nisi.
            </p>

            <p>
             Maecenas vulputate non metus ut euismod. Vestibulum et tellus ac neque pulvinar viverra. Suspendisse non scelerisque sem, et ornare enim. Nam maximus urna bibendum tellus consectetur, nec posuere ligula posuere. Proin sed mi metus. Praesent sodales in ante sit amet maximus. Integer eget condimentum leo. Nulla vehicula imperdiet velit, vitae rhoncus turpis maximus nec. Ut laoreet sed lectus vitae bibendum. Proin at odio scelerisque, gravida tortor ut, suscipit libero. Sed lorem massa, dictum sed ultricies nec, dapibus at lorem. Curabitur feugiat efficitur faucibus. Nulla dictum tempor feugiat. Curabitur lacinia lacus augue, id mattis libero bibendum quis.
            </p>
            <a href="https://toyhou.se/LeafJelly" title="Code by LeafJelly"><i class="px-3 pull-right text-muted fa-solid fa-code fa-sm"></i></a>

        </div>
        </div>

    </div>


</div>
</div>


<div class="col-12 p-5 m-5"></div>