your energy

<!--
colors (cmd+f for easy changes):
spectator (default): #7d6a69
seafoam: #51b083
stardust: #877feb
-->

<div class="col-md-8 col-lg-4 col-sm-12 mx-auto p-0 mt-5" style="max-width: 350px">

    <div class="card p-2 bg-faded" style="border-color: #7d6a69; border-radius: 10px">

        <div class="row no-gutters">

        <!-- main shit -->
        <div class="col px-0">

        <div class="row no-gutters">

        <!-- profile picture, i reccomend a square pfp but its not required -->
        <div class="p-2 card rounded border-0 mt-n5">
            <img src="IMGURLHERE" style="height: 80px">
        </div>

        <!-- replace 'admin' with your username on artfight, replace ~username with your username (i reccomend including the tilde) -->
        <div class="col px-2 align-items-center mt-n1">
        <a href="https://artfight.net/~admin" style="color: #7d6a69; font-size: 25px">~username</a>
        </div>

        </div>

        <!-- tabssss -->
        <div class="tab-content mb-2 mt-1">

            <!-- okay this ones boring you can write whatever here, what you attack just a general introduction whatever i dont care -->
            <div class="tab-pane active show" id="first">

                <div class="card border-0 p-2 overflow-auto" style="max-height: 100px">hi 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.</div>

            </div>

            <!-- featured characters -->
            <div class="tab-pane" id="second">

                <div class="justify-content-between">

                    <!-- character 1, replace the IMGURLHERE with the character icon -->
                    <div class="card p-0" style="height: 100px; background-image: url(IMGURLHERE); width: 100px; background-size: cover; border-color: #7d6a69">

                        <!-- replace the # with a link to the characters artfight -->
                        <a href="#" class="stretched-link" target=_blank></a>
                    </div>

                    <!-- character 2, replace the IMGURLHERE with the character icon -->
                    <div class="card p-0" style="height: 100px; background-image: url(IMGURLHERE); width: 100px; background-size: cover; border-color: #7d6a69">

                        <!-- replace the # with a link to the characters artfight -->
                        <a href="#" class="stretched-link" target=_blank></a>
                    </div>

                    <!-- character 2, replace the IMGURLHERE with the character icon -->
                    <div class="card p-0" style="height: 100px; background-image: url(IMGURLHERE); width: 100px; background-size: cover; border-color: #7d6a69">

                        <!-- replace the # with a link to the characters artfight -->
                        <a href="#" class="stretched-link" target=_blank></a>
                    </div>

                </div>

            </div>

            <!-- tab 3, previous teams and other socials -->
            <div class="tab-pane" id="third">

                <!-- get the artfight stamps from https://toyhou.se/27847531.art-fight-stamps/gallery NOT the artfight site they wont link properly -->
                <div class="card border-0 p-2 mb-1 overflow-auto" style="height: 58.5px">
                <p class="text-center">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83806068_M7SFVA35qAwiu3L.png" style="max-height: 32px; max-width: 72px">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83806040_vVqIGHownxtWI0g.png" style="max-height: 32px; max-width: 72px">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83806045_dvzhD5ZfFAmf9WE.png" style="max-height: 32px; max-width: 72px">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83806020_6eQr9e1ICuuMfK1.png" style="max-height: 32px; max-width: 72px">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83806002_zs0JRPTCyqe9kdy.png" style="max-height: 32px; max-width: 72px">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/83805988_Uu7Sw28LVIoD4wV.png" style="max-height: 32px; max-width: 72px">
                </p>
                </div>

                <!-- other socials or important links. like hitlists. replace the # with your link -->
                <div class="card border-0 p-2 text-center">
                <p>
                <a href="#" style="color: #7d6a69">link</a>
                <a href="#" style="color: #7d6a69">link</a>
                <a href="#" style="color: #7d6a69">link</a>
                <a href="#" style="color: #7d6a69">link</a>
                <a href="#" style="color: #7d6a69">link</a>
                </p>
                </div>

            </div>

        </div>

        </div>

        <!-- tab buttons -->
        <div class="col-1 align-items-center px-1" style="margin-right: -1.5em">
        <ul class="nav nav-tabs card-header-tabs row no-gutters p-0">

        <li class="card px-1 rounded-circle border-0">
        <a data-toggle="tab" href="#first" style="color: #7d6a69"><i class="far fa-circle"></i></a>
        </li>

        <li class="card px-1 rounded-circle my-1 border-0">
        <a data-toggle="tab" href="#second" style="color: #7d6a69"><i class="far fa-circle"></i></a>
        </li>

        <li class="card px-1 rounded-circle border-0">
        <a data-toggle="tab" href="#third" style="color: #7d6a69"><i class="far fa-circle"></i></a>
        </li>

        </ul>
        </div>

        </div>

    </div>

    <!-- characters you have -->

    <div class="justify-content-between px-4" style="z-index: 1; position: relative; margin-top: -13px">

        <!-- if you dont have the character type, in the i class (the one with fal fa-___) put a space after that bit and change it to faded -->
        <div class="p-1 card border-0 tooltipster" style="color: #7d6a69" title="feral"><i class="fal fa-cat"></i></div>

        <!-- if you dont have the character type, in the i class (the one with fal fa-___) put a space after that bit and change it to faded -->
        <div class="p-1 card border-0 tooltipster" style="color: #7d6a69" title="anthro"><i class="fal fa-user-alien"></i></div>

        <!-- if you dont have the character type, in the i class (the one with fal fa-___) put a space after that bit and change it to faded -->
        <div class="p-1 card border-0 tooltipster" style="color: #7d6a69" title="human"><i class="fal fa-person"></i></div>

        <!-- if you dont have the character type, in the i class (the one with fal fa-___) put a space after that bit and change it to faded -->
        <div class="p-1 card border-0 tooltipster" style="color: #7d6a69" title="mech"><i class="fal fa-robot"></i></div>

        <!-- if you dont have the character type, in the i class (the one with fal fa-___) put a space after that bit and change it to faded -->
        <div class="p-1 card border-0 tooltipster" style="color: #7d6a69" title="worm"><i class="fal fa-worm"></i></div>

        <!-- CODE CREDIT DONT REMOVE  -->
        <div class="px-1 card border-0 tooltipster" style="color: #7d6a69" title="code by micro-wave"><a href="https://toyhou.se/micro-wave" style="color: #7d6a69"><i class="fal fa-microwave"></i></a></div>

    </div>

</div>