birthyay for ur oc

<!-- hi. im hara here r the colors
text: white or #fff
bg-color: black or #000
gradient colors: #ff00b2, #ff9400, #ffe500, #8cff00, #00ffd8
-->

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

    <div class="justify-content-between col-12 p-0 text-white" style="font-size: 20px; z-index: 1;  margin-bottom: -20px;">
<!-- oc name plus fontawesome icon -->
        <p style="font-style: italic; font-size: 25px; font-weight: 700; margin-bottom: 5px; margin-left: 5px">KORE</p>
        <i class="fas fa-sparkles" style="margin-right: -10px; margin-top: 12px"></i>
    </div>
 <!-- gradient border, remove colors to remove them from the gradient and add to add to the gradient -->
    <div class="col-12" style="background-image: linear-gradient(120deg, #ff00b2, #ff9400, #ffe500, #8cff00, #00ffd8); padding: 1px; border-radius:5px">

        <div class="col-12 p-1" style="border-radius:5px; background-color: #000; color: white">
            <div class="justify-content-between">
<!-- fa-cat can b changed and unflipped. remove fa-flip-horizontal to unflip and change fa-cat to fa-whatever. find icons @ fontawesome.com  also PRONOUN ALERT! -->
            <p style="font-style: italic; margin-left: 5px; margin-top: 2px; margin-bottom: 0px">she/it
            <i class="fa-thin fa-cat fa-flip-horizontal"></i></p>
<!-- quote? tagline? idk -->
            <p style="margin-top: 2px; margin-bottom: 0px; font-style: italic; margin-right: 5px">plurr</p>
            </div>

            <hr class="m-1" style="border-color: white">
<!-- cat can be changed! fa-cat to fa-something else -->
            <p style="text-align: center; margin-top: -18px; margin-bottom: 0">
                <i class="fas fa-cat rounded-circle ml-2" style="padding: 5px; background-color: black; color: white; border: 1px solid white"></i>
            </p>

            <div class="mb-3" style="text-align: center; color: white">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>

            <hr class="m-1" style="border-color: white">
 <!-- u can change the fontawesome icon u just have to change fa-images to fa-whatever u want -->
            <p style="text-align: center; margin-top: -18px; margin-bottom: 0px">
                <i class="fas fa-images rounded-circle ml-2" style="padding: 5px; background-color: black; color: white; border: 1px solid white"></i>
            </p>

            <div class="row no-gutters mt-2 mb-4">
<!-- replace the thing in parenthesis w ur img. keep the parenthesis -->
                <div class="col-3" style="background-image: url(https://images.unsplash.com/photo-1605584367570-5549284d058a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y3J5c3RhbHMlMjByYWluYm93fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60); padding-bottom: 25%; background-size: cover"></div>
<!-- replace the thing in parenthesis w ur img. keep the parenthesis -->
                <div class="col-3" style="background-image: url(https://images.unsplash.com/photo-1550859492-d5da9d8e45f3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); background-size: cover"></div>
<!-- replace the thing in parenthesis w ur img. keep the parenthesis -->
                <div class="col-3" style="background-image: url(https://images.unsplash.com/photo-1621896715048-4f503c9488cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); background-size: cover"></div>
<!-- replace the thing in parenthesis w ur img. keep the parenthesis -->
                <div class="col-3" style="background-image: url(https://images.unsplash.com/photo-1618018352988-d22b67891324?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=415&q=80); background-size: cover"></div>
            </div>

            <hr class="m-1" style="border-color: white">

            <p style="text-align: center; margin-top: -18px;">
                <i class="fas fa-handshake rounded-circle ml-2" style="padding: 5px; background-color: black; color: white; border: 1px solid white"></i>
            </p>

            <div class="row no-gutters mt-2">
                <div class="col-4 mb-0" style="border-right: 1px solid black">
<!-- replace the img link in quotes with your link. keep the quotation marks -->
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0">
                    <p class="mb-1" style="text-align: center; color: white">
<!-- replace "character name" with your link. keep the quotation marks -->
                        <a href="character name" target=_blank style="color: white">oc naem</a>
                    </p>
<!-- fas = full far = empty -->
                    <p class="mb-0" style="text-align: center; color: white;">
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="far fa-heart"></i>
                        <i class="far fa-heart"></i>
                    </p>
                </div>
                <div class="col-4 mb-0" style="border-right: 1px solid black">
<!-- replace the thing in quotes with your link. keep the quotation marks -->
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0">
                    <p class="mb-1" style="text-align: center; color: white">
<!-- replace "character name" with your link. keep the quotation marks -->
                        <a href="character name" target=_blank style="color: white">longer oc nam3</a>
                    </p>
<!-- fas = full far = empty -->
                    <p class="mb-0" style="text-align: center; color: white;">
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="far fa-heart"></i>
                        <i class="far fa-heart"></i>
                    </p>
                </div>
                <div class="col-4 mb-0" style="border-right: 1px solid black">
<!-- character img replace the thing in quotes w ur img link -->
                    <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0">
                    <p class="mb-1" style="text-align: center; color: white">
<!-- replace "character name" with your link. keep the quotation marks -->
                        <a href="character name" target=_blank style="color: white">oc name</a>
                    </p>
<!-- fas = full far = empty -->
                    <p class="mb-0" style="text-align: center; color: white;">
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="fas fa-heart"></i>
                        <i class="far fa-heart"></i>
                        <i class="far fa-heart"></i>
                    </p>
                </div>

            </div>

           <!-- end. well theres the credit but yk -->

        </div>

    </div>

    <a href="/micro-wave">
        <i class="fa-solid fa-microwave"></i>
    </a>
</div>