insanitarium tabbed

<!--
colors:
text: #b80000
bg: black
text shadow: #000
header: white
border color + some links: red
if you want the text to be. normal i guess just command f the word "italic" and replace it with normal. normal pilled
-->

<div class="col-md-4 col-sm-12 mx-auto">

    <div class="collapse active show" id="collapse" aria-expanded="true">
    <a href="#collapse" data-toggle="collapse" aria-expanded="true" aria-controls="collapse" style="cursor:pointer;">
        <!-- pagedoll. change https://64.media.tumblr.com/f808aaa1c3baae59a0900bf55e39b00e/b7e95b745706ae77-90/s400x600/aef98e6e2032b33b6d2a9b72d46bedc5276761e2.png to make it your oc -->
    <img src="https://64.media.tumblr.com/f808aaa1c3baae59a0900bf55e39b00e/b7e95b745706ae77-90/s400x600/aef98e6e2032b33b6d2a9b72d46bedc5276761e2.png" style="max-width: 45%; position: absolute; z-index:3; right: -50px; top: 45px">
    </a>
    </div>

    <div class="col-12" style="font-size: 35px; font-family: Georgia; color: white; text-shadow:  1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000; margin-bottom: -20px; z-index: 1">

        <!-- your name -->
        <p style="margin: 0px; text-align: center">SWEETYPUSS</p>
    </div>

    <!-- background image. change https://ih1.redbubble.net/image.1444956834.5287/flat,750x1000,075,f.jpg to your image. -->
    <div class="col-12 p-1" style="background-image: url(https://ih1.redbubble.net/image.1444956834.5287/flat,750x1000,075,f.jpg); background-size: cover">

        <div class="col-12 mt-2 p-2" style="background-color: black; border: #b80000 solid 1px; color: #b80000; font-style: italic; text-align: center; font-size: 12px">

            <div class="tab-content">

                <div class="tab-pane fade active show" id="pronounsinbio">
            <!-- pretty standard just your age pronouns and timezone -->
            <p style="font-style: normal; font-weight: 700; font-size: 15px">pronouns ・ age ・ timezone</p>

            <!-- just a little bioooo. lyrics from intimate with the firebird -->
            <div class="overflow-auto" style="max-height: 100px">
            i'd rather sift through matter / matters not when broken up like / shards of glass fall through side and / melted down and becoming /
            i'd rather sift through matter / matters not when broken up like / shards of glass fall through side and / melted down and becoming /
            i'd rather sift through matter / matters not when broken up like / shards of glass fall through side and / melted down and becoming /
            </div>

            </div>
            <!-- end of tab 1 -->

            <!-- tab 2 commission moment -->
            <div class="tab-pane fade" id="commissions">
                <p style="font-style: normal; font-weight: 700; font-size: 15px; margin-bottom: 1.4px">statuses</p>

                <div class="justify-content-between">
                    <p style="font-weight: 700; margin: 0px">commissions</p>

                    <!-- are your commissions open? -->
                    <p style="margin: 0px; color: red">open</p>
                </div>

                <hr class="mt-1 mb-1" style="border-color: red; border-style: dashed">

                <div class="justify-content-between">
                    <p style="font-weight: 700; margin: 0px">trades</p>

                    <!-- are your trades open? -->
                    <p style="margin: 0px; color: red">open</p>
                </div>

                <hr class="mt-1 mb-1" style="border-color: red; border-style: dashed">

                <div class="justify-content-between">
                    <p style="font-weight: 700; margin: 0px">requests</p>

                    <!-- are your requests open? -->
                    <p style="margin: 0px; color: red">closed 5ever</p>
                </div>

                <hr class="mt-1 mb-1" style="border-color: red; border-style: dashed">


                <!-- just put -->
                <p style="text-align: center; color: red">
                    <a href="#carrdy" style="color: inherit; font-weight: 700">commissions examples + prices</a>
                </p>

            </div>
            <!-- end of tab tue(sday) haha 2/22/22 on a tuesday haha sollux haha what is my sister doing she looks like a carol girl -->

            <!-- your friends aka tab 3 -->
            <div class="tab-pane fade" id="oomfies">

                <!-- ok well i guess if you get no maidens you could also have this be your ocs -->
                <p style="font-style: normal; font-weight: 700; font-size: 15px; margin-bottom: 1.4px">friends</p>

                <div class="overflow-auto" style="max-height: 98.5px">
                    <div class="row no-gutters">

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- change "oomf" to your friend's username -->
                            <a href="/oomf" style="color: red">

                                <!-- profile image i recommend having it square -->
                                <img src="https://64.media.tumblr.com/12112ac7035d7436324fad67aa91f2b5/558692b0161aa71a-9b/s250x400/555ee3064e421ed0947b8b0df45dc119fe8094fc.jpg" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            friend name
                            </a>

                        </div>

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- friend url -->
                            <a href="/oomf" style="color: red">
                                <!-- img src change the thing in quotes to the img link to make it your image. be there or be square -->
                                <img src="https://64.media.tumblr.com/819a5c89f25b6f2267d25b96883ac2c2/d870aec4170f04a2-84/s250x400/e6ceb1a2f189f756f63d9097bf397262c2d7a9e0.jpg" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            this could also be ocs
                            </a>

                        </div>

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- friend user -->
                            <a href="/oomf" style="color: red">
                                <!-- quotes -->
                                <img src="https://64.media.tumblr.com/8e763293f1786b4b4873d3b53f21cc49/558692b0161aa71a-c7/s540x810/e06581652f1bb1b33441645f9e1e1b35d003046a.jpg" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            i dont judge
                            </a>

                        </div>

                        <!-- line 2 -->

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- friend url -->
                            <a href="/oomf" style="color: red">
                                <!-- wow https://www.youtube.com/watch?v=Rp8uQzSXXRc is really good tbh u should listen theres like 15 genres -->
                                <img src="https://pbs.twimg.com/media/FgHYIDpXoAAkwme?format=jpg&name=900x900" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            making another
                            </a>

                        </div>

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- today im really sleepy for some reason -->
                            <a href="/oomf" style="color: red">
                                <!-- as of writing this (october 28th) i have a race 2morrow. it'll be over by the time i post this code but i thought id lyk -->
                                <img src="https://pbs.twimg.com/media/FgGWfKIXgAE3jye?format=png&name=small" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            line of these
                            </a>

                        </div>

                        <div class="col-md-4 col-sm-12 p-1">

                            <!-- but i have to wash my hair. do some homework. instead of doing this -->
                            <a href="/oomf" style="color: red">
                                <!-- i run a lot and its annoying because my hairs always sweaty -->
                                <img src="https://pbs.twimg.com/media/FgLAiAOXgAMcLxO?format=jpg&name=360x360" style="border: 1px dashed red; max-height: 98px">
                                <br>
                            cuz ppl have friends
                            </a>

                        </div>

                    </div>
                </div>
            </div>
            <!-- end of tab 3 -->

            </div>
            <!-- just a bunch of socials. you can change the icon by going to fontawesome.com -->

            <div class="justify-content-between p-1 mt-2" style="font-size: 20px; font-style: normal;">

                <!-- twitter -->
                <a href="#twitter" style="color: inherit"><i class="fab fa-twitter m-0"></i></a>
                ・
                <!-- instant gram -->
                <a href="#insta" style="color: inherit"><i class="fab fa-instagram"></i></a>
               ・
               <!-- deviantart -->
                <a href="#dA" style="color: inherit"><i class="fab fa-deviantart"></i></a>
               ・
               <!-- tumble er -->
                <a href="#tumblr" style="color: inherit"><i class="fab fa-tumblr"></i></a>
               ・
               <!-- carrd. if you wanna replace this with a brand you have to change the fas to fab lmfao -->
                <a href="#carrd" style="color: inherit"><i class="fas fa-id-card"></i></a>

            </div>
        </div>
    </div>

    <!-- nothing to change here so its just the end of the code basically -->

    <div class="col-12 justify-content-start" style="color: white; text-shadow:  1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000; font-size: 35px; font-family: Georgia">
        <ul class="nav nav-tabs border-0">

            <li class="nav-item">
                <a class="nav-link active border-0 p-0 mr-2" data-toggle="tab" href="#pronounsinbio" style="color: inherit; text-shadow: inherit; margin-top: -30px; background: none; border: none">
                1.
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link border-0 p-0 mr-2" data-toggle="tab" href="#commissions" style="color: inherit; text-shadow: inherit; margin-top: -30px; background: none; border: none">
                2.
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link border-0 p-0" data-toggle="tab" href="#oomfies" style="color: inherit; text-shadow: inherit; margin-top: -30px; background: none; border: none">
                3.
                </a>
            </li>

        </ul>
    </div>

    <div class="justify-content-end" style="margin-top: -21px; color: red;">
        <a href="/micro-wave" style="color: inherit;  z-index: 5"><i class="fal fa-microwave"></i></a>
    </div>

    <!-- ok heres the actual end i think. goot bye -->
</div>