trailblazers page code

<!-- ------------------------------


        HEAVY — Custom Colours version.
        (code by jiko)


        RULES
        → Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
        thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]

        → turn OFF WYSIWYG
        → turn ON Code Editor


        TIPPY TIPS
        → insert your img links INSIDE or quotation marks!!
        → for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]


        ACCENT : #ffffff
        → use ctrl + f in the editor to easily replace all!


 ------------------------------- -->
 <div class="row no-gutters mx-auto text-justify" style="font-size:90%; max-width:1000px">
 <!-- ------------------------------


            HEADER
            → can actually be name, lyric or quote!
            → the icon could represent your character's clan!


 ------------------------------- -->
 <div class="col-lg-12 p-1">
 <div class="bg-faded justify-content-between text-uppercase text-right p-3" style="font-size:150%; letter-spacing:0.2em;">

    <i class="fas fa-cat fa-fw my-auto"></i>
    Trailblazers - NAME

 </div>
 </div>
 <!-- ------------------------------


            FIRST SECTION
            → sidebar


 ------------------------------- -->
 <div class="col-lg-4 p-1">
 <div class="bg-faded p-3 px-4 h-100">


    <!-- ------------------------------------
                 AVATAR
    ------------------------------------- -->
    <!--
    → i'd recommand a square image — 200x200 is best!
    → paste [fr-rounded] in the img class if you want a circle icon!
    -->
    <div class="text-center">

        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Square_200x200.svg/1200px-Square_200x200.svg.png"
        class="img-thumbnail rounded-0 p-2 my-2 mx-auto" style="height: 200px; width: 200px;">

    </div>



    <!-- ------------------------------------
                 BASIC INFO
    ------------------------------------- -->
    <div class="row no-gutters mt-4">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Names</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Nicknames</span>
            <span class="text-right">
                TEXT HERE<br>
            </span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Pronouns</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Attraction</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Allegiances</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Birthdate</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Relevance</span>
            <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


        <div class="col-lg-12 justify-content-between">
            <span class="text-uppercase text-muted">Abilities</span>
          <span class="text-right">TEXT HERE</span>
        </div><hr class="mt-2 mb-4 w-100">


    </div>
 </div>
 </div>
 <!-- ------------------------------


            SECOND SECTION
            → profile content


 ------------------------------- -->
 <div class="col-lg-8 p-1">
 <!--
 don't want the scrolling feature?
 delete [style="height: 710px; overflow:auto"] below!
 -->
<div class="card rounded-0 border-0 p-3" style="height: 710px; overflow:auto">


          <img src="https://s3-alpha.figma.com/hub/file/6308025122/83d719d3-68c3-4747-871d-34a6efcd926e-cover.png">


    <!-- ------------------------------------
                 PERSONALITY
    ------------------------------------- -->
    <div class="mb-3">

        <!-- ------ HEADER ------------------------------ -->
        <div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">

            <i class="far fa-heart fa-fw" style="color:#ffffff"></i>
            Personality

        </div>
        <hr class="my-1 mb-2 w-100">


        <!-- ------ CONTENT ------------------------------ -->
        <div class="ml-lg-4 text-muted">

              <b>Personality Traits</b>
              <p>TEXT HERE</p>

              <b>Motives & Methods</b>
              <p>TEXT HERE</p>

              <b>Weaknesses & Flaws</b>
              <p>TEXT HERE</p>

              <b>Quirks & Tropes</b>
              <p>TEXT HERE</p>

        </div>
    </div>


    <!-- ------------------------------------
                 RELATIONSHIPS
    ------------------------------------- -->
    <div class="mb-0">

        <!-- ------ HEADER ------------------------------ -->
 <div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">

            <i class="far fa-link fa-fw" style="color:#ffffff"></i>
            Relationships

        </div>
        <hr class="my-1 mb-2 w-100">

        <!-- ------ CONTENT ------------------------------ -->
        <!--
        optional but feel free to add [†] after [Relation] to show that the character is dead!
        -->
        <div class="row no-gutters">

            <!-- --- RELATIONSHIP --- -->
            <div class="col-lg-6 p-3">

                <!-- GENERAL INFO -->
                <div class="text-uppercase">

                    <a href="https://toyhou.se/4955766.sana" style="color:#ffffff">PERSON RELATED TO</a>

                </div>
                <hr class="my-1 w-100">
                <div class="mb-1 justify-content-between">
                <!--
                full : <i class="fas fa-heart"></i>
                empty: <i class="far fa-heart text-muted"></i>
                -->
                    <span>RELATION</span>
                    <span>
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart text-muted"></i>
                        <i class="fas fa-heart text-muted"></i>
                        <i class="fas fa-heart text-muted"></i>
                    </span>

                </div>

                <!-- IMAGE -->
                <!--
                → i'd recommand a square image
                → delete [fr-rounded] in the img class if you want a square icon!
                -->
                <div class="mr-2 float-left justify-content-center">

                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"
                    class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">

                </div>

                <!-- CONTENT -->
                <div class="pt-2 text-muted">

                    <p>RELATION QUOTE</p>
                    <p>DESCRIPTION OF RELATIONSHIP</p>

                </div>
            </div>

        <!-- add/delete more relationship boxes ABOVE this line! -->
        </div>
    </div>

    <!-- don't touch the below thanks! -->
    </div>
 </div>

 <!-- ------------------------------


            CREDITS
            → please keep credits on the profile
            if you decide to move it!


 ------------------------------- -->
 <div class="col-lg-12 p-1">
    <div class="bg-faded text-right p-2" style="font-size:90%; letter-spacing:0.05em;">

        original code by <a href="https://toyhou.se/5634482.-f2u-heavy-warrior-cats-" style="color:#ffffff; text-decoration: none">jiko</a>

    </div>
 </div>
</div>