F2U ✦ starstruck / character profile 03

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

✦ ⋯ 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>


    <!--------- 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>


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

    ✦ ⋯ ATTRIBUTES

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


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


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

        （
             DESCRIPTION
        ）

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

                <li>
                    a short character description, warriors wiki style.
                </li>

                <li>
                    a longer description, go crazy with this one.
                </li>

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

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

        （
             PHYSICAL
        ）

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

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

                    ;

                    lean, muscular, lithe, etc
                </li>

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

                    ;

                    breed, species, etc.
                </li>

                <li>
                    <font style="color:#a66359;">
                        HEIGHT & WEIGHT
                    </font>

                    ;

                    etc, etc
                </li>

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

                    ;

                    scent descriptiors
                </li>

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

                        /

                        <a style="color:#a66359;" href="#">voiceclaim</a>
                    </font>

                    ;

                    voice description (soft, deep, etc)
                </li>

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

                    ;

                    scars, etc
                </li>

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


    <!--------- 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>


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


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

    ✦ ⋯ PERSONALITY

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


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

        （
             POSITIVE
        ）

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

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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

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

        （
             NEUTRAL
        ）

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

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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

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

        （
             NEGATIVE
        ）

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

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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

                    ;

                    description of trait, maybe the dictionary defintion. can also add a quote of an in character response that they might respond with, or say.
                </li>

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


    <!--------- 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>


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

    ✦ ⋯ ABILITIES

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


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


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

        （
             ABILITIES
        ）

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

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

                    ;

                    00 / +0
                </li>

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

                    ;

                    00 / +0
                </li>

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

                    ;

                    00 / +0
                </li>

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

                    ;

                    00 / +0
                </li>

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

                    ;

                    00 / +0
                </li>

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


    <!--------- 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>


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

    ✦ ⋯ HISTORY

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


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


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

        （
             ACT ONE
        ）

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

                <li>
                    <font style="color:#a66359;">
                        SUMMARY & WARNINGS
                    </font>

                    ;

                    trigger warningd associated with this arc. a breif description of the history.
                </li>

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

                    ;

                    a longer description & recount of canon historical moments in this characters arc.
                </li>

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


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

        （
             ACT TWO
        ）

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

                <li>
                    <font style="color:#a66359;">
                        SUMMARY & WARNINGS
                    </font>

                    ;

                    trigger warningd associated with this arc. a breif description of the history.
                </li>

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

                    ;

                    a longer description & recount of canon historical moments in this characters arc.
                </li>

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


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

        （
             ACT THREE
        ）

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

                <li>
                    <font style="color:#a66359;">
                        SUMMARY & WARNINGS
                    </font>

                    ;

                    trigger warningd associated with this arc. a breif description of the history.
                </li>

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

                    ;

                    a longer description & recount of canon historical moments in this characters arc.
                </li>

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


    <!--------- 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>


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

    ✦ ⋯ RELATIONSHIPS

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


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


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

        （
             PARENT / s
        ）

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

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">PARENT NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">PARENT NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

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


    <!--------- other relatives / siblings, cousins, etc -------------------------->
    <p class="m-1">
        <font style="color:#a66359;">
            ⯏
        </font>

        （
             OTHER
        ）

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

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">SIBLING NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">SIBLING NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

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


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

        （
             PARTNER / s
        ）

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

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

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


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

        （
             CHILDREN
        ）

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

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">CHILD NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </li>

                <li>
                    <font style="color:#a66359;">
                        <a style="color:#a66359;" href="#">CHILD NAME</a>

                        /

                        positive, negative, etc
                    </font>

                    ;

                    description of their dyanimc and relationship.
                </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>