updated party?

<!--  hi y'all. remember not to remove the credit lol -->

<div class="mx-auto my-4">


  <!-- did u know that u can change da bootstrap color? https://toyhou.se/2621177.color-references-bs-pkmn- heres a guide by togedemaru :3 (change the bg-info to bg-warning or whatever bg color u want) -->

    <div class="p-4 progress-bar-striped progress-bar-animated bg-info" style="max-width: 500px; margin-left: auto; margin-right: auto;">

        <div class="column">
        <div class="row gx-6">

<!-- u can change the fas fa-cat if u want. heres the database it uses https://fontawesome.com/ -->

            <div class="col-4">

            <i class="fas fa-cat fa-2x"></i>

            </div>

            <div class="col-8">
                <div class="row no-gutters">

            <i class="fas fa-quote-left" style="font-size: 19px"></i>

<!-- quote! yay -->
            <p style="margin-top: 5px; margin-left: 8px; margin-right: 8px; font-size: 19px">
So to America the brave..
</p>
            <i class="fas fa-quote-right" style="font-size: 19px"></i>

                </div>
            </div>

        </div>
        </div>


    </div>

<!-- u can get rid of da shadow by getting rid of box-shadow: 0px 0px 8px ! if u dont like how blurry it is or want it to be farther out the 8px is blurryness and the 0px is distance from the div  -->
    <div class="p-4 bg-dark my-3" style="max-width: 500px; margin-left: auto; margin-right: auto; box-shadow: 0px 0px 8px">
        <div class="column">
        <div class="row no-gutters">

        <div class="col-md-8 col-sm-12">
           <div class="p-3" style="border: 5px ridge; width: auto; height: auto; margin: 5px; align: center; max-height: 150px; overflow: auto;">

        <!--  ur name age n pronouns -->

               <p class="text-light" style="text-align: center; font-size: 20px;"> name . age . pronouns </p>


         <!--  write about urself m8 -->
               <p class="text-light" style="text-align: center; font-size: 18px;">

                  this box scrolls if you put too much content in it. go ham! 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 class="col-md-3 col-sm-12">

		<!-- change the url in the parenthesis to your pfp url-->
        <div class="p-5" style="border: 5px ridge; height: 150px; width: 150px; background-image: url(https://cdn.discordapp.com/attachments/770430630706151447/882441136998854666/memoriesofgreen-612bce168de32.gif); background-size: cover; margin: 5px">
        </div>
        </div>


        <div class="col-md-8 col-sm-12">
            <div class="p-3" style="border: 5px ridge; width: auto; height: auto; margin: 5px; align: center">
                <div class="column">
                    <div class="row gx-6">

               <div class="col-6" style="text-align: center">


<!-- featured characters. change the url of the image to your characters and remove the # and replace it with ur characters url -->
                   <a href="#">
               <img src="https://64.media.tumblr.com/cc464424fc420dc4bbf9006caf52ba8c/5bc92bb7ccd1f9c4-5f/s100x200/3aed04f2085b60656e84544e21b1b500c0c66a37.jpg" style="max-width: 100px; max-height: 100px">
               </a>

<!-- change the char 1 to ur characters name and the # to their url -->
               <a href="#" class="text-light" style="text-align: center; font-size: 19px">
                   char 1
                   </a>

               </div>


               <div class="col-6" style="text-align: center">

                   <!-- same as before. im tired -->
                <a href="#">
               <img src="https://64.media.tumblr.com/d293479f004cd348d369b80a6e23f5f4/4fd5142622a08b40-47/s100x200/99ab3154634cd31914dd574f0a03875e8c9df180.gifv" style="max-width: 100px; max-height: 100px">
                </a>

               <a href="#" class="text-light" style="text-align: center; font-size: 19px">
                   char 2
                   </a>

               </div>

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


              <div class="col-sm-12 col-md-3">
        <div class="p-2" style="border: 5px ridge; height: 170px; width: 150px;  margin: 5px; ">

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

<!-- change the closed to ur status on trades-->

            <span class="pull-left text-light">trades</span> <span class="pull-right text-info">closed</span>

            </div>

            <hr>

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

<!-- change the open to ur status on commissions -->
            <span class="pull-left text-light">commissions</span> <span class="pull-right text-success">open</span>

            </div>

            <hr>

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

<!-- change the never to ur status of requests -->
            <span class="pull-left text-light">requests</span> <span class="pull-right text-warning">Never</span>

            </div>


            </div>
            </div>






        </div>
        </div>



    </div>



    <div class="p-4 progress-bar-striped progress-bar-animated bg-info" style="max-width: 500px; margin-left: auto; margin-right: auto">
        <div class="justify-content-between text-muted">


        <!-- replace # with ur twitter. u can also change the icon if u dont have twitter (like me!) -->
        <a href="#" class="text-dark">
        <i class="fab fa-twitter fa-2x"></i>
        </a>

<!-- replace # with ur deviantart. u can also change the icon if u dont have deviantart -->
        <a href="#" class="text-dark">
        <i class="fab fa-deviantart fa-2x"></i>
        </a>

<!-- replace # with ur furaffinity. u can also change the icon if u dont have furaffinity (like me!) -->
        <a href="#" class="text-dark">
        <i class="fas fa-paw fa-2x"></i>
        </a>

<!-- replace # with ur tumblr. u can also change the icon if u dont have tumblr -->
        <a href="#" class="text-dark">
        <i class="fab fa-tumblr fa-2x"></i>
        </a>

<!-- replace # with ur artfight. u can also change the icon if u dont have artfight -->
        <a href="#" class="text-dark">
        <i class="fas fa-pencil-paintbrush fa-2x"></i>
        </a>



        </div>

    </div>

<!-- dont remove my credit pls pls -->
     <div class="col-md-2 col-sm-12" style="margin-left: auto; margin-right: auto; font-size: small">
        <a href="/micro-wave">
            <i class="fas fa-microwave"></i>
            code by micro-wave</a>
        </div>

</div>