PODZOL - Arkan Profile

<!-- HELLO WORLD! My name is Jam and here's some important information for you

        I've tried to make this code as easy to navigate as possible! I've indicated which parts should be edited as best I can.

        LINKS and IMAGE codes are indicated by a '###' - ctrl+f to find easily.

-->

<div class="container col-lg-8 p-3" style="background: url(###); border-radius: 20px;" > <!-- BACKGROUND image here -->
    <div class="flex-column flex-md-row">

        <!-- FIRST BOX - left side -->
        <div class="p-2 col-md-5" style="border-radius: 10px; background: #625750">
            <div class="justify-content-between">
                <h1 class="text-center ml-1" style="text-transform: uppercase;">
                    NAME </h1>
                <i class="fas fa-crown" style="font-size: 20px;"></i>
            </div><hr style="border-top: 1px solid white; margin: -5px 0 0 0;">

            <div class="justify-content-around mb-2">
                <div class="m-1">
                    #ID NO
                </div>
                <div class="m-1">
                    <a href="###" style="color: white;"> <!-- link to DA registry -->
                        REGISTRY PAGE
                    </a>
                </div>
            </div>

            <div class="flex-row">
                GENDER <hr class="flex-fill ml-2 mr-2" style="display: inline-block; border: 1px dashed white;">
            [CONTENT]  <!-- replace CONTENT with gender ; keep or remove brackets on personal preference -->
            </div> <div class="flex-row">
                AGE <hr class="flex-fill ml-2 mr-2" style="display: inline-block; border: 1px dashed white;">
            [CONTENT] <!-- replace CONTENT with age ; keep or remove brackets on personal preference -->
            </div> <div class="flex-row">
                HEIGHT <hr class="flex-fill ml-2 mr-2" style="display: inline-block; border: 1px dashed white;">
            [CONTENT] <!-- replace CONTENT with height ; keep or remove brackets on personal preference -->
            </div> <div class="flex-row">
                TIER <hr class="flex-fill ml-2 mr-2" style="display: inline-block; border: 1px dashed white;">
            [CONTENT] <!-- replace CONTENT with tier ; keep or remove brackets on personal preference -->
            </div>
        </div>

        <!-- SECOND BOX - middle -->
        <div class="p-2 col-md-2 ml-1 mr-1 flex-column" style="border-radius: 10px; background: #625750;">
            <div class="justify-content-between">
                <h1 class="text-center ml-1" style="text-transform: uppercase;">
                    TRAITS </h1>
                <i class="fad fa-dna" style="font-size: 20px;"></i>
            </div><hr style="border-top: 1px solid white; margin: -5px 0 0 0;">

            <!-- COPY INDICATOR // to add more traits: start copying on this line -->
            <div class="d-inline-block m-1">
                [X]   <!-- change letter to your trait rank IE: C for common, M for mutation -->
                trait <!-- edit this to the name of the current trait -->
                <i class="fad fa-circle small" style="color: #"> <!-- change color to reflect trait rank (recomended colours below)--> </i>
            </div>
            <!-- COPY INDICATOR // to add more traits: end copying on this line and paste directly below -->

            <!-- paste here -->

            <!-- colors & ranks:
                [C] common (brown):         #964B00
                [U] unique (turquoise):     #30D599
                [R] rare (pink):            #FFC0CB
                [V] very rare (purple):     #800080
                [E] epic (maroon):          #FF0000
                [S] superlative (orange):   #FFA500
                [L] legendary (blue):       #4287f5
                [G] god (black):            #000000
                [M] mutation (lime):        #a6ff00
            -->
            </div>

        <!-- LAST BOX - right side -->
        <div class="p-2 flex-column col-md-5" style="border-radius: 10px; background: #625750;">

            <div class="justify-content-between">
                <h1 class="text-center ml-1" style="text-transform: uppercase;">
                    HERITAGE</h1>
                <i class="fad fa-sitemap" style="font-size: 20px;"></i>
            </div><hr style="border-top: 1px solid white; margin: -5px 0 0 0;">

            <div class="progress m-1">
                <div class="progress-bar align-items-center" role="progressbar" style="height: 30px; background: #d3d3d3; color: black; font-weight: bold; width: 100%;"> <!-- edit WIDTH to change % of bar -->
                    <span class="w-100">HEALTH: 100% </span></div> <!-- change the % here too (if not 100%) -->
            </div>
            <div class="progress m-1">
                <div class="progress-bar align-items-center" role="progressbar" style="height: 30px; background: #d3d3d3; color: black; font-weight: bold; width: 100%;"> <!-- edit WIDTH to change % of bar -->
                    <span class="w-100">FERTILITY: 100% </span></div> <!-- change the % here too (if not 100%) -->
            </div>

            <div class="flex-row">
                LINEAGE <hr class="flex-fill ml-2 mr-2" style="display: inline-block; border: 1px dashed white;">
            [CONTENT]  <!-- replace CONTENT with lineage position ; keep or remove brackets on personal preference -->
            </div>

            <div class="flex-row justify-content-around m-1">
                <div class="badge badge-pill p-2 flex-fill mr-1" style="background: #d3d3d3; color: black;"><i class="fas fa-mars"></i> NAME</div> <!-- reflecting the male name: you or the mate : if no mate, put N/A -->
                <div class="badge badge-pill p-2 flex-fill ml-1" style="background: #d3d3d3; color: black;"><i class="fas fa-venus"></i> NAME</div> <!-- reflecting the female name: you or the mate : if no mate, put N/A -->
            </div>
                <div class="badge badge-pill p-2 m-1" style="background: #d3d3d3; color: black;"> <i class="fas fa-baby"></i> NAME</div> <!-- Child's name here - if no children, put N/A // to add more children, just copy this line directly below -->

        </div>
    </div>

    <!-- main arkan image -->
    <div class="col-12 mt-3" style="width: 100%;">
        <img src="###" style="object-fit: contain; width: 100%; border-radius: 20px;">
    </div>

    <!-- bottom box -->
    <div class="col-12 p-2 mt-1" style="background: #625750; border-radius: 10px;">
        <h1>personality</h1>
        <p class="m-0"><i class="fad fa-certificate"></i> HIERARCHY STATUS: </p>
        long long long long long long long long long long long long long long long long long long long long long
        long long long long long long long long long long long long long long long long long long long long long
        long long long long long long long long long long long long long long long long long long long long long
        long long long long long long long long long long long long long long long long long long long long long
        <p class="mt-3 m-0"><i class="fad fa-certificate"></i> ITEMS:</p>
        <p class="m-0"><i class="fad fa-certificate"></i> PETS:</p>
    </div>

    <div class="credit text-right">
        <a href="https://toyhou.se/stainedjam/characters/folder:1685088"><i class="fad fa-lemon"></i></a>
    </div>

</div>