say it aint socal

<!--

hi guys welcome back to my youtube channel in this episode we Die of Death and Pain
there arent any colors besides the buttons so u can change bg-info to bg-warning bg-danger bg-success bg-dark bg-light bg-primary bg-secondary whateva whateva
also im gonna try to release atleast one code purr month so i can keep my skills sharp :-)
anywho did you know that i named the tab i placed this in "i gave up on coder's quarters"? because i did Lol

-->

<div class="col-12 p-2">

    <div class="col-md-10 col-sm-12 card rounded-0 mx-auto ">
        <div class="row">

        <div class="col-md-3 col-sm-6 p-1 card rounded-0">
            <div class="row no-gutters">

            <div class="col-md-4 col-sm-6 p-3">

              <!-- fontawesome.com go here you can change the icon by getting rid of the "-cat" lol -->
                <i class="fad fa-cat fa-3x"></i>
            </div>

            <div class="col-md-7 col-sm-6 p-3">

              <!-- ok oomfie put their name here -->
                <h1>
                    <em>

                        OINGO ?????

                    </em>
                </h1>



                </div>

                <div class="col-md-9 col-sm-6 mx-auto " style="font-weight: 300">
                  <!-- put some other info here. like their age pro-nouns and sexuality -->
                <small>ageless . they/she . lesbian</small>
                </div>

            </div>
        </div>

        <div class="col-md-4 col-sm-6 p-3 card rounded-0">
            <div class="row no-gutters">



            <div class="col-12 mb-3">
                <div class="row no-gutters">

                <span>

                  <!-- ok i aint explaining this again basically ya put the end of the youtube link to replace "eh8TsCoo6CM" https://www.youtube.com/watch?v=[JA2TPK0NeFI] the thing in brackets is what im talkin bout -->
            <iframe class="flex-fill"
            style="height: 2em; width: 2em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
            allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
            allowfullscreen
            src="https://www.youtube.com/embed/eh8TsCoo6CM"></iframe>
                 <i class="fad fa-megaphone fa-3x " ></i>
                 </span>

                <h1 style="font-weight: 200; margin-top: 10px; margin-left: 10px">
                    <em>

                        VOICE CLAIM

                    </em>
                </h1>

                </div>
            </div>







                <div class="col-12 ml-5 " style="text-align: right; align: right">
                <div class="row no-gutters" style="text-align: right; align: right">



                <h1 style="font-weight: 200; margin-top: 8px; margin-right: 10px; align: right; text-align: right;">
                    <em>

                         THEME SONG

                    </em>
                </h1>

                 <span>

                   <!--- same as before this is just for their theme song --->
            <iframe class="flex-fill"
            style="height: 2em; width: 2em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
            allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
            allowfullscreen
            src="https://www.youtube.com/embed/doTitxvv_CM"></iframe>
                <i class="fad fa-compact-disc fa-3x fa-pulse" style="align: right; text-align: right;"></i>

                </span>

                </div>
            </div>


            </div>
        </div>

        <div class="col-md-3 col-sm-5 p-1 card rounded-0">


            <div class="col-md-12 col-sm-9 p-3">
                <div class="row no-gutters" style="font-weight: 300">

                    <p>
            <i class="fad fa-quote-left " style="font-size: 20px;"></i>

                <em style="font-size: 20px">
                  <!--- ok heres a quote lol --->
            NOTHING BAD EVER HAPPENS TO ME!
            </em>

            <i class="fad fa-quote-right " style="font-size: 20px; text-align: right"></i>

            </p>

            </div>

            </div>


        </div>

        <!--- put the characters profile picha in replacement of "https://f2.toyhou.se/file/f2-toyhou-se/characters/11264864?1622076820" yahoo --->
        <div class="col-2 card rounded-0 p-0" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/11264864?1622076820); background-size: contain; background-repeat: no-repeat; background-position: center; max-height: 150px; max-width: 150px">



        </div>


        </div>

        <div class="row">

        <div class="col-md-9 col-sm-12 card rounded-0 p-0 mx-0">

        <div id="yass" class="carousel slide col-12 p-0" data-ride="carousel">


        <div class="carousel-inner col-12 p-0">

        <div class="carousel-item active col-12 p-0">

         <!-- put ur ocs ref sheet or smth in replacement of "https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80" lol-->

        <div class="col-12 p-3" style="background: url(https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80); background-position:center center; background-size: cover; background-repeat: no-repeat; height: 570px"></div>

        </div>

        <div class="carousel-item col-12 p-0">

        <!-- if you want to remove an item from the carousel get rid of "

        <div class="carousel-item col-12 p-0">

        <div class="col-12 p-3" style="background: url(imgurlhere); background-position:center center; background-size:cover; background-repeat: no-repeat; height: 570px"></div>

        </div>"

        that or if u wanna add one im not gonna judge

        -->
        <div class="col-12" style="background: url(https://images.unsplash.com/photo-1581843219903-b7c94a6ed384?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2232&q=80); background-position:center center; background-size:cover; background-repeat: no-repea; height: 570px"></div>

        </div>

        <!-- did u know that oingo has a counterpart? his names boingo and hes the deity of hell -->

        <div class="carousel-item col-12 p-0">

        <div class="col-12 p-3" style="background: url(https://images.unsplash.com/photo-1534946231844-e2c0a1fda1df?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=778&q=80); background-position:center center; background-size:cover; background-repeat: no-repeat; height: 570px"></div>

        </div>

        </div>



  </div>


        </div>



        <div class="col-md-3 col-sm-12 card rounded-0">


        <div class="mx-auto my-2">
            <div class="row no-gutters">



            <h1 style="font-weight: 300">

            <em>

                TRIVIA

            </em>

        </h1>

        <!-- dont delete this pwetty pwease -->
        <p style="opacity: 0"> /</p>

        <em>

            <i class="fad fa-exclamation fa-2x"></i>


        </em>



        </div>
        </div>

        <div style="max-height: 520px; overflow: scroll">

        <ul class="fa-ul">

            <!-- add the trivia after the </span> is over. if u wanna change the bullet point you can because its a fontawesome icon. once again fontawesome.com its very useful tee bee ache -->
            <li><span class="fa-li"><i class="fad fa-square"></i></span> was the second person to die after kaeya was formed, which is why she has her status as the deity of heaven</li>
            <li> <span class="fa-li"><i class="fad fa-square"></i></span> is not boingo's sibling, the two were (and still are!) very good friends in their past life</li>
            <li> <span class="fa-li"><i class="fad fa-square"></i></span> their colors seemed to be simplified in the afterlife to be only two. the reason for this is unknown.</li>
            <li> <span class="fa-li"><i class="fad fa-square"></i></span> they tend to be a very happy-go-lucky and hyper person, no matter the situation. the time they're most serious is when boingo's involved somehow </li>
            <li> <span class="fa-li"><i class="fad fa-square"></i></span> they are (obviously) a big oingo boingo fan. how she found out they exist while they're in a different universe is up for interpretation</li>
            <li> <span class="fa-li"><i class="fad fa-square"></i></span> has a human form, how you draw it is up to you. their appearance is a feminine amab person with loong hair</li>


        </ul>

        </div>


        </div>

        <div class="col-12 card rounded-0 p-2">
            <div class="row no-gutters">

            <div class="col-6">
            <p style="font-weight: 300">

                <!-- some credits! dont delete this one please-->
                <em>
                code by <a href="/micro-wave">micro-wave</a>
                </em>

                <span class="text-muted" style="font-size: 16px; font-weight: 800">||</span>

                <em>
                ref by <a href="https://unsplash.com/photos/rW-I87aPY5Y">unsplash</a>
                </em>

                <span class="text-muted" style="font-size: 16px; font-weight: 800">||</span>

                <em>
                icon by <a href="/hopeiess">hopeIess</a>
                </em>
            </p>

            <!-- if you want to add more, use this after the last </em>

            <span class="text-muted" style="font-size: 16px; font-weight: 800">||</span>

                <em>
                credit by <a href="/linkhere">someone cool</a>
                </em>
                -->

            </div>

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


                <div class=" col-3 p-1 mx-auto" >


  </div>

  </div>

  </div>
            </div>

        </div>

        </div>
    </div>

    <div class="col-6 mx-auto">


    <!-- its the carousel buttons bestie! yay -->

    <a class="carousel-control-prev btn btn-info p-3" style="opacity: 1" href="#yass" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">nay</span>






  <a class="carousel-control-next btn btn-info p-3" style="opacity: 1" href="#yass" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">yay</span>
  </a>

    </div>

</div>