once more, with feeling [F2U]

leoweo

Info

Created: 19 days, 16 hours ago
Creator: leoweo
Favorites: 139

Profile

This is a simple profile code meant to resemble In Stars and Time's menu screen! It comes with both one and two-tabbed versions, with options for both bootstrap and custom colors (er... black and white).

As always, feel free to do whatever you'd like with this code, but please don't remove the credit. Despite my best efforts, this code may look unusual on some smaller mobile browsers.

Additional thanks to insertdisc5 for the icons for Rock/Paper/Scissors, and to Lozy for additional art used in the two tab preview.

OCs pictured: Banquo and Estelle

ONE TAB

Banquo
 Profile
 Stats
Banquo


(he/him)
/
An ex-Housemaiden from Jouvente. He became a Defender because he thought it would be less stressful than his old job.
WEAK TO:
Paper
RESISTANT TO:
Rock/Scissors

code

TWO TABS

Estelle



 Profile


 Stats

The Misfit


(she/they)
A skittish teenager with a sharp tongue and a sharper wit. She's been living underneath the roof of two Vaugardian saviors for the past few years.
WEAK TO:
Scissors
RESISTANT TO:
Rock
AGE:
14
HEIGHT:
5'1" (155cm)
HOMETOWN:
None of your business
Estelle was taken in by the Southern House of Jouvente after the death of her parents, where she first met Siffrin and Isabeau. Over time, they and the rest of their family have grown closer to her, but she's never quite felt at home there...
Estelle's ragtag group of bozos.
ANTOINE
JOHANNE
ÉTOILE

code

One tab (Bootstrap):

<div class="container text-light bg-dark pt-3" style="font-family:Courier, monospace;max-width:50em;">
    <div class="m-1 p-1" style="border:.25em solid #ffffff">
        <p class="text-center font-weight-bold" style="font-size:1.75em">Siffrin</p>
    </div>

    <!----- IMAGE ----->
    <div class="row mx-1 pb-3">
        <div class="col-12 col-md-4 p-3 mb-md-0 mb-1" style="border:.25em solid #fff">
            <div class="h-100" style="background-image: url('https://instarsandtime.wiki.gg/images/9/92/ISAT_Menu_Siffrin_ACT1.png'); background-repeat: no-repeat; background-position:50% 20%; background-size:cover;min-height:25em;"></div>
        </div>
        <div class="col-md-8">
            <div class="row p-1 ml-md-n2" style="border:.25em solid #fff;">
                <div class="col-lg-6 col-md-12 col-sm-6 rounded font-weight-bold" style="border:2px solid #fff;">
                    <p style="font-size:1.25em;text-indent:1em;"><i class="fa-sharp fa-solid fa-sparkles"></i> Profile</p>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6 rounded font-weight-bold">
                    <p style="font-size:1.25em;text-indent:1em;padding:2px;"><i class="fa-sharp fa-solid fa-sword"></i> Stats</p>
                </div>
            </div>
            <div class="row p-1 mt-1 ml-md-n2 tab-content" style="border:.25em solid #fff;height:25em;overflow-y:auto;overflow-x:hidden;">
                <!--- PROFILE TAB ^ ADJUST HEIGHT THERE--->
                <div>
                    <div class="row m-0 p-0">
                        <div class="col font-weight-bold pt-1" style="font-size:1.4em;">
                            <p>Siffrin
                                <br/>
                                <span class="text-white-50">(he/they)</span></p>
                        </div>
                        <div class="col font-weight-bold">
                            <p class="text-right" style="font-size:1.5em;text-indent:.5em;">
                                <img style="width:auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254974_hJ8s1xoRfQiwm9Y.png">
                            </p>
                        </div>
                    </div>
                    <div class="row mx-0">
                        <div class="col-12 py-5 font-weight-bold align-self-center" style="min-height:13.5em;font-size:1.1em;">
                            <p>It's you!</p>
                        </div>
                    </div>
                    <div class="row mx-0 align-self-end">
                        <div class="col-5 font-weight-bold" style="font-size:1.25em;">
                            <p class="text-white-50">WEAK TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254931_T2InOdLN0xbZHwV.png">Rock
                        </div>
                        <div class="col-5 font-weight-bold" style="font-size:1.25em">
                            <p class="text-white-50">RESISTANT TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81255009_y5TFhArAoIqErq6.png">Paper
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container text-muted text-right mt-1" style="font-size:0.9em;max-width:50em;">
    <a target="_blank" rel="noopener noreferrer" href="https://toyhou.se/leoweo" style="color:inherit;text-decoration:none;"><i class="fa-duotone fa-code"></i> code</a>
</div>

One tab (Custom):

<div class="container pt-3" style="background-color:#000;color:#fff;font-family:Courier, monospace;max-width:50em;">
    <div class="m-1 p-1" style="border:.25em solid #ffffff">
        <p class="text-center font-weight-bold" style="font-size:1.75em">Siffrin</p>
    </div>

    <!----- IMAGE ----->
    <div class="row mx-1 pb-3">
        <div class="col-12 col-md-4 p-3 mb-md-0 mb-1" style="border:.25em solid #fff">
            <div class="h-100" style="background-image: url('https://instarsandtime.wiki.gg/images/9/92/ISAT_Menu_Siffrin_ACT1.png'); background-repeat: no-repeat; background-position:50% 20%; background-size:cover;min-height:25em;"></div>
        </div>
        <div class="col-md-8">
            <div class="row p-1 ml-md-n2" style="border:.25em solid #fff;">
                <div class="col-lg-6 col-md-12 col-sm-6 rounded font-weight-bold" style="border:2px solid #fff;">
                    <p style="font-size:1.25em;text-indent:1em;"><i class="fa-sharp fa-solid fa-sparkles"></i> Profile</p>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-6 rounded font-weight-bold">
                    <p style="font-size:1.25em;text-indent:1em;padding:2px;"><i class="fa-sharp fa-solid fa-sword"></i> Stats</p>
                </div>
            </div>
            <div class="row p-1 mt-1 ml-md-n2 tab-content" style="border:.25em solid #fff;height:25em;overflow-y:auto;overflow-x:hidden;">
                <!--- PROFILE TAB ^ ADJUST HEIGHT THERE--->
                <div>
                    <div class="row m-0 p-0">
                        <div class="col font-weight-bold pt-1" style="font-size:1.4em;">
                            <p>Siffrin
                                <br/>
                                <span class="text-white-50">(he/they)</span></p>
                        </div>
                        <div class="col font-weight-bold">
                            <p class="text-right" style="font-size:1.5em;text-indent:.5em;">
                                <img style="width:auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254974_hJ8s1xoRfQiwm9Y.png">
                            </p>
                        </div>
                    </div>
                    <div class="row mx-0">
                        <div class="col-12 py-5 font-weight-bold align-self-center" style="min-height:13.5em;font-size:1.1em;">
                            <p>It's you!</p>
                        </div>
                    </div>
                    <div class="row mx-0 align-self-end">
                        <div class="col-5 font-weight-bold" style="font-size:1.25em;">
                            <p class="text-white-50">WEAK TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254931_T2InOdLN0xbZHwV.png">Rock
                        </div>
                        <div class="col-5 font-weight-bold" style="font-size:1.25em">
                            <p class="text-white-50">RESISTANT TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81255009_y5TFhArAoIqErq6.png">Paper
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container text-muted text-right mt-1" style="font-size:0.9em;max-width:50em;">
    <a target="_blank" rel="noopener noreferrer" href="https://toyhou.se/leoweo" style="color:inherit;text-decoration:none;"><i class="fa-duotone fa-code"></i> code</a>
</div>

Two tabs (Bootstrap):

<div class="container text-light bg-dark pt-3" style="font-family:Courier, monospace;max-width:50em;">
    <div class="m-1 p-1" style="border:.25em solid #ffffff">
        <p class="text-center font-weight-bold" style="font-size:1.75em">Siffrin</p>
    </div>

    <!----- IMAGE ----->
    <div class="row mx-1 pb-3">
        <div class="col-12 col-md-4 p-3 mb-md-0 mb-1" style="border:.25em solid #fff">
            <div class="h-100" style="background-image: url('https://instarsandtime.wiki.gg/images/9/92/ISAT_Menu_Siffrin_ACT1.png'); background-repeat: no-repeat; background-position:50% 20%; background-size:cover;min-height:20em;"></div>
        </div>
        <div class="col-md-8">
            <div class="row p-1 ml-md-n2" style="border:.25em solid #fff;">

                <div class="col-12">
                    <ul class="nav row no-gutters my-1 mx-n3">
                        <li class="nav-item col mr-1">
                            <a class="btn nav-link border font-weight-bold text-light" style="border:2px solid #fff;box-shadow:none;font-size:1.25em;padding:3px;" data-toggle="tab" href="#ONE">
                                <i class="fa-sharp fa-solid fa-sparkles"></i> Profile</a>
                        </li>
                        <li class="nav-item col ml-1">
                            <a class="btn nav-link border font-weight-bold text-light" style="border:2px solid #fff;box-shadow:none;font-size:1.25em;padding:3px;" data-toggle="tab" href="#TWO">
                                <i class="fa-sharp fa-solid fa-sword"></i> Stats</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row p-1 mt-1 ml-md-n2 tab-content" style="border:.25em solid #fff;height:25em;overflow-y:auto;overflow-x:hidden;">
                <!--- PROFILE TAB ^ ADJUST HEIGHT THERE--->
                <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
                    <div class="row m-0 p-0">
                        <div class="col font-weight-bold pt-1" style="font-size:1.4em;">
                            <p>Siffrin
                                <br/>
                                <span class="text-white-50">(he/they)</span></p>
                        </div>
                        <div class="col rounded font-weight-bold">
                            <p class="text-right" style="text-indent:.5em;"><img style="width:auto;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254974_hJ8s1xoRfQiwm9Y.png"></p>
                        </div>
                    </div>
                    <div class="row mx-0">
                        <div class="col-12 py-5 font-weight-bold align-self-center" style="min-height:13.5em;font-size:1.1em;">
                            <p>It's you!</p>
                        </div>
                    </div>
                    <div class="row mx-0 align-self-end" style="bottom:0px">
                        <div class="col-5 font-weight-bold" style="font-size:1.25em;">
                            <p class="text-white-50">WEAK TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <p><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254931_T2InOdLN0xbZHwV.png">Rock</p>
                        </div>
                        <div class="col-5 font-weight-bold" style="font-size:1.25em">
                            <p class="text-white-50">RESISTANT TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <p><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81255009_y5TFhArAoIqErq6.png">Paper</p>
                        </div>
                    </div>
                </div>
                <!--- STATS TAB --->
                <div class="tab-pane fade font-weight-bold p-3" data-toggle="tab" id="TWO">
                    <ul class="px-3" style="list-style-type:none;font-size:1.1em;">
                        <li><span class="pull-left">AGE:</span>
                        <span class="pull-right text-white-50">Mid to late 20s</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                        <li><span class="pull-left">HEIGHT:</span>
                        <span class="pull-right text-white-50">Short</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                        <li><span class="pull-left">HOMETOWN:</span>
                        <span class="pull-right text-white-50">Dunno</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                    </ul>
                    <div class="pt-2" style="text-indent:1em">
                        <p>Back to the stage, Siffrin.</p>
                    </div>
                    
                    <hr class="mt-4 mb-0" style="border-top:1px solid rgba(255,255,255,0.5);">
                    <p class="px-3 mt-3 text-center">Your party, minus one Kid.</p>
                    <div class="row justify-content-center">
                        <!-- Feel to ree to add more/remove some! -->
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Isabeau"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/2/26/ISAT_Battle_Isabeau.png"></a>
                            <p class="text-center text-uppercase">Isabeau</p>
                        </div>
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Mirabelle"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/e/ee/ISAT_Battle_Mirabelle.png"></a>
                            <p class="text-center text-uppercase">Mirabelle</p>
                        </div>
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Bonnie"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/6/6c/ISAT_Battle_Odile.png"></a>
                            <p class="text-center text-uppercase">Odile</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Two tabs (Custom):

<div class="container pt-3" style="background:#000;color:#fff;font-family:Courier, monospace;max-width:50em;">
    <div class="m-1 p-1" style="border:.25em solid #ffffff">
        <p class="text-center font-weight-bold" style="font-size:1.75em">Siffrin</p>
    </div>

    <!----- IMAGE ----->
    <div class="row mx-1 pb-3">
        <div class="col-12 col-md-4 p-3 mb-md-0 mb-1" style="border:.25em solid #fff">
            <div class="h-100" style="background-image: url('https://instarsandtime.wiki.gg/images/9/92/ISAT_Menu_Siffrin_ACT1.png'); background-repeat: no-repeat; background-position:50% 20%; background-size:cover;min-height:20em;"></div>
        </div>
        <div class="col-md-8">
            <div class="row p-1 ml-md-n2" style="border:.25em solid #fff;">

                <div class="col-12">
                    <ul class="nav row no-gutters my-1 mx-n3">
                        <li class="nav-item col mr-1">
                            <a class="btn nav-link border font-weight-bold text-light" style="border:2px solid #fff;box-shadow:none;font-size:1.25em;padding:3px;" data-toggle="tab" href="#ONE">
                                <i class="fa-sharp fa-solid fa-sparkles"></i> Profile</a>
                        </li>
                        <li class="nav-item col ml-1">
                            <a class="btn nav-link border font-weight-bold text-light" style="border:2px solid #fff;box-shadow:none;font-size:1.25em;padding:3px;" data-toggle="tab" href="#TWO">
                                <i class="fa-sharp fa-solid fa-sword"></i> Stats</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row p-1 mt-1 ml-md-n2 tab-content" style="border:.25em solid #fff;height:25em;overflow-y:auto;overflow-x:hidden;">
                <!--- PROFILE TAB ^ ADJUST HEIGHT THERE--->
                <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
                    <div class="row m-0 p-0">
                        <div class="col font-weight-bold pt-1" style="font-size:1.4em;">
                            <p>Siffrin
                                <br/>
                                <span class="text-white-50">(he/they)</span></p>
                        </div>
                        <div class="col rounded font-weight-bold">
                            <p class="text-right" style="text-indent:.5em;"><img style="width:auto;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254974_hJ8s1xoRfQiwm9Y.png"></p>
                        </div>
                    </div>
                    <div class="row mx-0">
                        <div class="col-12 py-5 font-weight-bold align-self-center" style="min-height:13.5em;font-size:1.1em;">
                            <p>It's you!</p>
                        </div>
                    </div>
                    <div class="row mx-0 align-self-end" style="bottom:0px">
                        <div class="col-5 font-weight-bold" style="font-size:1.25em;">
                            <p class="text-white-50">WEAK TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <p><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81254931_T2InOdLN0xbZHwV.png">Rock</p>
                        </div>
                        <div class="col-5 font-weight-bold" style="font-size:1.25em">
                            <p class="text-white-50">RESISTANT TO:</p>
                        </div>
                        <div class="col-7 font-weight-bold" style="font-size:1.25em">
                            <p><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/81255009_y5TFhArAoIqErq6.png">Paper</p>
                        </div>
                    </div>
                </div>
                <!--- STATS TAB --->
                <div class="tab-pane fade font-weight-bold p-3" data-toggle="tab" id="TWO">
                    <ul class="px-3" style="list-style-type:none;font-size:1.1em;">
                        <li><span class="pull-left">AGE:</span>
                        <span class="pull-right text-white-50">Mid to late 20s</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                        <li><span class="pull-left">HEIGHT:</span>
                        <span class="pull-right text-white-50">Short</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                        <li><span class="pull-left">HOMETOWN:</span>
                        <span class="pull-right text-white-50">Dunno</span></li>
                        <hr class="my-2" style="border-top:1px solid rgba(255,255,255,0.5);">
                    </ul>
                    <div class="pt-2" style="text-indent:1em">
                        <p>Back to the stage, Siffrin.</p>
                    </div>
                    
                    <hr class="mt-4 mb-0" style="border-top:1px solid rgba(255,255,255,0.5);">
                    <p class="px-3 mt-3 text-center">Your party, minus one Kid.</p>
                    <div class="row justify-content-center">
                        <!-- Feel to ree to add more/remove some! -->
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Isabeau"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/2/26/ISAT_Battle_Isabeau.png"></a>
                            <p class="text-center text-uppercase">Isabeau</p>
                        </div>
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Mirabelle"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/e/ee/ISAT_Battle_Mirabelle.png"></a>
                            <p class="text-center text-uppercase">Mirabelle</p>
                        </div>
                        <div class="col-sm-4 col-6 mt-3">
                            <a target="_blank" rel="noopener noreferrer" href="https://instarsandtime.wiki.gg/wiki/Bonnie"><img class="w-100 mb-1" style="border:solid 2px #fff;" src="https://instarsandtime.wiki.gg/images/6/6c/ISAT_Battle_Odile.png"></a>
                            <p class="text-center text-uppercase">Odile</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Recent Images

Details

Viewing full image.

Credits

27 Apr 2024, 8:39:10 pm

insertdisc5

Characters

once more, with feeling [F2U]
Details

Viewing full image.

Credits

27 Apr 2024, 8:38:26 pm

insertdisc5

Characters

once more, with feeling [F2U]
Details

Viewing full image.

Credits

27 Apr 2024, 8:37:35 pm

insertdisc5

Characters

once more, with feeling [F2U]

once more, with feeling [F2U]

leoweo

Info

Profile

ONE TAB

TWO TABS

Recent Images

Details

Credits

Characters

Details

Credits

Characters

Details

Credits

Characters