Stor8

<!------------------------------------------------------------------------------------
[ ART FIGHTER ] // default version
    f2u code by skysong

[ color palette ]
    see line 23!

[ resources ]
    icons           https://fontawesome.com/
    TH colors       https://toyhou.se/7850218.bootstrap-color-combos
    TH fonts        https://toyhou.se/23372355.fonts
    editing (TH)    https://th.circlejourney.net/#
    editing (AF)    https://af.circlejourney.net/#
    img hosting     https://freeimage.host/
    code link       https://toyhou.se/39425504.16-art-fighter

~ code updated as of nov 10 2026

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

<div class="mx-auto my-4" style="max-width:800px;

--main:#3862e1;
--accent1:#7b9af4;
--accent2:#1d2c6e;

">

<!--[ accent1 is used in icons and accent 2 is used for the top borders ]-->
<!--[ changing these colors will update the whole code to match! ]-->

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

    SECTION 1 | BASICS

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

<div class="row m-0">

<!--TITLE COL START-->
    <div class="col-sm-5 p-0">
    <div class="h-100 d-flex flex-column">

<!--TITLE-->
    <div style="font-family:monospace; font-style:italic; font-weight:bold; font-size:30px; color:var(--main)">TEMPLATE</div>

<!--QUOTE-->
    <div class="ml-4 mb-sm-0 mb-4"><p>
    <!--ICON-->
        <span style="color:var(--accent1)"><i class="fa fa-sharp fa-quote-left"></i></span>
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</i>
        <!--[ remove <i> and </i> if you don't want this italicized! ]-->
    </p></div>

<!--SPACER-->
    <div class="flex-fill"></div>

<!--LINKS-->
    <div class="mb-sm-0 mb-4">
    <!--LINK 1-->
        <a href="https://toyhou.se/" title="toyhouse" style="color:var(--main); text-decoration:none">
            <!--[ href="EDITHERE" | replace with your link ]-->
        <i class="fa fa-sharp fa-house"></i>
            <!--[ fa-house | replace with your icon ]-->
        </a>
    <!--LINK 2-->
        <a href="https://open.spotify.com/" title="playlist" class="ml-1" style="color:var(--main);  text-decoration:none">
        <i class="fa fa-sharp fa-music"></i>
            <!--[ fa-music | replace with your icon ]-->
        </a>
    <!--LINK 3-->
        <!--[ do not edit! ]-->
        <a href="https://toyhou.se/39425504.16-art-fighter" title="code by sky" class="ml-1" style="color:var(--main); text-decoration:none">
        <i class="fa-light fa-sharp fa-ticket-airline"></i>
        </a>
    </div>

</div></div> <!--title col end-->

<!--BASICS COL START-->
    <div class="col-sm ml-sm-3 p-0" style="border-radius:3px; border:1px solid var(--main); margin:3px 0;">
    <div class="p-3 card h-100" style="border-radius:3px; border:1px solid var(--accent2); margin: -5px 5px 5px -5px; min-height:200px;">
    <!--FULL NAME-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-id-card fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">FULL NAME</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">Blank Template</div>
        </div>
    <!--NICKNAMES-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-signature fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">NICKNAME(S)</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">"Tem" (by Nobody)</div>
        </div>
    <!--AGE-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-cake-candles fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">AGE</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">0 years</div>
        </div>
    <!--SPECIES-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-user fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">SPECIES</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">Creature</div>
        </div>
    <!--PRONOUNS-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-comments fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">PRONOUNS</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">Any/all</div>
        </div>
    <!--GENDER-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-venus-mars fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">GENDER</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">Nah</div>
        </div>
    <!--ORIENTATION-->
        <div class="d-flex">
        <!--ICON-->
            <span style="color:var(--accent1)">
            <i class="fal fa-heart fa-fw"></i>
            </span>
        <!--LABEL-->
            <div class="ml-2" style="font-weight:bold; font-family:monospace">
            <span style="background:var(--main);">ORIENTATION</span></div>
        <!--TEXT-->
            <div class="flex-fill"></div>
            <div class="w-50 text-right">Ramen</div>
        </div>

</div></div> <!--basics col end-->
</div> <!--end section 1-->


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

    SECTION 2 | ABOUT

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

<div class="mt-sm-2 mt-4">

<!--TRAITS-->
    <span style="font-family:monospace; font-weight:bold; background:var(--main)">TRAITS:</span>
    A quick list of traits here, lorem ipsum, dolor sit amet, consectetur

<!--ABOUT-->
    <div class="mt-3" style="border-radius:3px; border:1px solid var(--main); margin:3px 0;">
    <div class="p-3 card" style="border-radius:3px; border:1px solid var(--accent2); margin: -5px 5px 5px -5px;">
    <p>Quick summary of their history or character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    </div></div>
    
</div> <!--end section 2-->


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

    SECTION 3 | DESIGN

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

<div class="row mx-0 mt-4">

<!--NOTES-->
    <div class="col-sm p-0" style="border-radius:3px; border:1px solid var(--main); margin:3px;">
    <div class="p-3 card" style="border-radius:3px; border:1px solid var(--accent2); margin: -5px 5px 5px -5px; min-height:200px;">
    <!--KEY-->
        <div class="text-center" style="font-family:monospace">
        <!--MANDATORY-->
            <span style="color:var(--accent1)">
            <i class="fa-sharp fa-square fa-fw"></i>
            </span>mand.
        <!--MANDATORY-->
            <span class="ml-3" style="color:var(--accent1)">
            <i class="fa-sharp-duotone fa-square fa-fw"></i>
            </span>opt.
        <!--MANDATORY-->
            <span class="ml-3" style="color:var(--accent1)">
            <i class="fa-sharp fa-light fa-square fa-fw"></i>
            </span>other
        </div>
    <div class="mt-3">
    <!--MAND NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-square fa-fw"></i>
        </span>A design note here.
        <br>
    <!--MAND NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-square fa-fw"></i>
        </span>A design note here. It can also be a bit longer!
        <br>
    <!--MAND NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-square fa-fw"></i>
        </span>A design note here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br>
    <!--OPT NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp-duotone fa-square fa-fw"></i>
        </span>A design note here. 
        <br>
    <!--OPT NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp-duotone fa-square fa-fw"></i>
        </span>A design note here. 
        <br>
    <!--MISC NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-light fa-square fa-fw"></i>
        </span>A design note here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br>
    <!--MISC NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-light fa-square fa-fw"></i>
        </span>A design note here. 
        <br>
    <!--MISC NOTE-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-light fa-square fa-fw"></i>
        </span>A design note here. 
        <br>
    </div></div></div>

<!--COLOR PALETTE-->
    <div class="col-sm-auto p-0 ml-sm-1">
    <div class="d-flex flex-sm-column">
    <!--COLOR-->
        <span style="color:var(--accent2)">
        <i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
        </span>
    <!--COLOR-->
        <span style="color:var(--main)">
        <i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
        </span>
    <!--COLOR-->
        <span style="color:var(--accent1)">
        <i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
        </span>
    <!--COLOR-->
        <a href="https://artfight.net/" title="art by user" style="color:var(--main); text-decoration:none">
            <!--[ href="EDITHERE" | replace with artist url ]-->
            <!--[ title="EDITHERE" | replace with artist credit ]-->
        <i class="fa-sharp fa-light fa-image fa-fw ml-sm-0 ml-2"></i>
        </a>
    </div></div>

<!--PAGEDOLL COL-->
    <div class="col-sm-4 p-0 d-flex align-items-end justify-content-end">
    <!--PAGEDOLL-->
        <img src="https://placehold.co/500?text=pagedoll\nplaceholder" class="w-75 fa-bounce">
        <!--[ src="EDITHERE" | replace with your image url ]-->
    </div>
    
</div> <!--end section 3-->

<!----------------------------------------------------------------------------------------->
</div> <!--end code-->