F2U ✦ starstruck / character profile 02

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

✦ ⋯ ACCENT COLORS
     > accent #1: a66359

✦ ⋯ TO CHANGE THE MARGINS
     > adjust the max-width: 550px; to what best suits your tastes.
     > you may also add a certain height to it (min-height: 0px;),
     though i do not think it looks good.

--------------------------------------------------------------------------------->


  <div class="card bg-transparent m-5 border-0 mx-auto"
       style="max-width: 900px;">


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

✦ ⋯ START OF THE CODE
     > main information

--------------------------------------------------------------------------------->


    <div class="row no-gutters">

        <!--------- doll / decoration image ------------------------------------->
        <div class="col-lg-4">
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/95343866_BdCXpIxUXLkemeC.png">
    </div>


    <div class="col-lg-8">
        <p class="m-2"
           style="font-size: 18px;">
            <font style="color:#a66359;">
                ✸
            </font>

            <font style="letter-spacing: .2em">
                <i>PREFIXSUFFIX</i>
            </font>

            <font style="opacity: 0.4;
                         color:#a66359;">
                ✦
            </font>

            TRAIT 01

            <font style="opacity: 0.4;
                         color:#a66359;">
                ✦
            </font>

            TRAIT 02

            <font style="opacity: 0.4;
                         color:#a66359;">
                ✦
            </font>

            TRAIT 03
        </p>


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

✦ ⋯ DIVIDER
     > to add an IMAGE divider, simply use this code instead:
     > you can adjust or entirely remove opacity if you wish.

     <img class="mb-2 my-2"
         src="URL"
         style="opacity: 0.3;">

--------------------------------------------------------------------------------->


    <!--------- divider --------------------------------------------------------->
    <div class="card bg-transparent mb-3 my-3"
         style="border-top: 1px solid #a66359;
                border-bottom: 0px solid;
                border-left: 0px solid;
                border-right: 0px solid;
                filter: drop-shadow(0px 0px 2px #a66359);
                opacity: 0.5;"></div>

    <!--------- about ----------------------------------------------------------->
    <div class="row no-gutters">
        <div class="col-sm-1">
            <i class="fa-duotone fa-solid fa-quote-left"
               style="opacity: 0.5;
                      color: #a66359;"></i>
        </div>

        <!--------- quote ------------------------------------------------------->
        <!--- put a quote here. make it as long as you want! -------------------->
        <div class="col-sm-10">
            <p class="m-1"
               style="text-align: center; font-size: smaller;">

                am i evil, archivist? is a thing evil when it simply obeys its own nature? when it embodies its nature? when that nature is created by those which revile it? — the magnus archives

            </p>
        </div>

        <div class="col-sm-1">
            <i class="fa-duotone fa-solid fa-quote-right"
               style="opacity: 0.5;
                      color: #a66359;"></i>
        </div>
    </div>


    <!--------- divider --------------------------------------------------------->
    <div class="card bg-transparent mb-3 my-3"
         style="border-top: 1px solid #a66359;
                border-bottom: 0px solid;
                border-left: 0px solid;
                border-right: 0px solid;
                filter: drop-shadow(0px 0px 2px #a66359);
                opacity: 0.5;"></div>


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

✦ ⋯ GENERAL INFO

--------------------------------------------------------------------------------->


    <!--------- TITLE / SECTION ------------------------------------------------->
    <p class="m-2"
       style="font-size: 18px;">
            <font style="letter-spacing: .2em">
                <i>GENERAL</i>
            </font>
    </p>


    <!--------- name ------------------------------------------------------------>
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             NAME
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        PREFIX
                    </font>
                     ;

                    description of why they were given this name.
                </li>

                <li>
                    <font style="color:#a66359;">
                        SUFFIX
                    </font>
                     ;

                    description of why they were given this name.
                </li>

                <li>
                    <font style="color:#a66359;">
                        NICKNAME/s
                    </font>
                     ;

                    any nicknames this character goes by.
                </li>

            </ul>
        </font>
    </p>


    <!--------- gender ----------------------------------------------------------->
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             GENDER
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        AMAB / AFAB, ETC
                    </font>
                </li>

                <li>
                    <font style="color:#a66359;">
                        PRO / NOUNS
                    </font>
                </li>

            </ul>
        </font>
    </p>


    <!--------- affiliations ------------------------------------------------------>
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             AFFILIATION
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        CURRENT
                    </font>

                    ;

                    current affiliation
                </li>

                <li>
                    <font style="color:#a66359;">
                        PREVIOUS
                    </font>

                    ;

                    previous affiliations
                </li>

            </ul>
        </font>
    </p>


    <!--------- roles + training --------------------------------------------------->
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             ROLES & TRAINING
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        RANK
                    </font>

                    ;

                    current rank
                </li>

                <li>
                    <font style="color:#a66359;">
                        ROLES
                    </font>

                    ;

                    forager, gardener, etc
                </li>

                <li>
                    <font style="color:#a66359;">
                        PAST RANKS
                    </font>

                    ;

                    past ranks
                </li>

                <li>
                    <font style="color:#a66359;">
                        MENTOR/s
                    </font>

                    ;

                    name
                </li>

                <li>
                    <font style="color:#a66359;">
                        TRAINEES
                    </font>

                    ;

                    name, name
                </li>

            </ul>
        </font>
    </p>


    <!--------- age ------------------------------------------------------------->
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             AGE
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        MOONS
                    </font>

                    ;

                    number moons
                </li>

                <li>
                    <font style="color:#a66359;">
                        YEARS EQUIVILANT
                    </font>

                    ;

                    number years
                </li>

            </ul>
        </font>
    </p>


    <!--------- orientation + romance ------------------------------------------->
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             ORIENTATION & ROMANCE
        ）

        <font style="font-size: smaller;
                     text-indent: 5px;;">
            <ul>

                <li>
                    <font style="color:#a66359;">
                        BLANKSEXUAL \ monogamous, poly, etc
                    </font>

                    ;

                    subcategories (demisexual, aromantic, etc)
                </li>

                <li>
                    <font style="color:#a66359;">
                        LOOKING FOR?
                    </font>

                    ;

                    yes / no
                </li>

                <li>
                    <font style="color:#a66359;">
                        PARTNER / s
                    </font>

                    ;

                    name / s
                </li>

                <li>
                    <font style="color:#a66359;">
                        CRUSH / s
                    </font>

                    ;

                    name / s
                </li>

            </ul>
        </font>
    </p>


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

✦ ⋯ CREDITS
     > please do not remove!
     > you MAY edit / move it around for aesthetics / personal aesthetics,
     however it must STILL remain visible !

--------------------------------------------------------------------------------->


  <p class="mx-auto p-2">
      <a href="https://toyhou.se/29519406.f2u-starstruck">
          <i class="fa-solid fa-code tooltipster"
             title="code by bumblebree" data-toggle-original="code by bumblebree"
             style="color: #a66359;
                    opacity: 0.4;"></i>
      </a>
  </p>
  </div>

  </div>