F2U ✦ puddle pond | BS

<!---

beginning of the code.
do note remove my credit tags.
feel free to stitch and edit my codes to your hearts content, just please remember to credit me propperly.

if you have any questions, comments, or concerns, please comment on the code profile and ping @honeybree (main account), and i will get back to you asap!

--->

<div class="card m-2 text-muted mx-auto border-0" style="border-radius: 0px; width: 600px; background-color: transparent;">

<!--- title box --->

<div class="card bg-faded p-3 text-muted" style="border-radius: 0px; width: 600px; border-top: 1px solid; border-right: 1px solid; border-left: 1px solid; Border-bottom: 1px solid;">
    <div class="row no-gutters">

        <!--- dA styled / equivelant font awesome icons, can change to whatever though! --->
        <div class="col-lg-1">
            <p class="text-center" style="font-size: 25px;"><i class="fa fa-light fa-file-lines"></i></p>
        </div>

        <!--- label/title. change it to whatever you want! could even be a quote! --->
        <div class="col-lg-10">
            <p class="text-left" style="font-size: 25px;">PETRICHOR</p>
        </div>

        <div class="col-lg-1">
            <p class="text-center" style="font-size: 25px;"><i class="fa fa-light fa-square-pen"></i></p>
        </div>
    </div>
</div>

<!--- end of title box --->

<!--- main content box --->

<div class="card p-5" style="border-radius: 0px; width: 600px; border-top: 0px solid; border-right: 1px solid; border-left: 1px solid; Border-bottom: 1px solid;">

    <div class="card bg-faded p-2 text-muted mb-4" style="border-radius: 0px;">
        <div class="row no-gutters">

            <!--- name and nickname. can make it whatever you'd like though! --->
            <div class="col-lg-4">
                <p class="text-center" style="font-size: 14px;">
                    <b>NAME</b> nickname
                </p>
            </div>

            <div class="col-lg-1">
            </div>

            <!--- age / etc! --->
            <div class="col-lg-7">
                <p class="text-left" style="font-size: 14px;">
                    age ▪ pronouns ▪ etc ▪ etc
                </p>
            </div>
        </div>
    </div>

    <!--- aesthetic images --->
    <div class="row no-gutters">
        <div class="col-lg-2">
            <div class="card bg-faded mb-4" style="border-radius: 0px;
            background-image: url('https://i.pinimg.com/originals/c4/0d/b6/c40db678aa354ba91257f6258a1521e1.gif');
            background-size: 300%;
            background-position: bottom right;
            height: 80px;"></div>
        </div>

        <div class="col-lg-1"></div>

        <div class="col-lg-4">
            <div class="card bg-faded mb-4" style="border-radius: 0px;
            background-image: url('https://64.media.tumblr.com/c5de3a2b1302da99850cc1e1335aee72/be2087e1faf08fe8-9d/s500x750/81f82133bb7224cbc56aaa3542384a2437f3e842.gifv');
            bbackground-size: 300%;
            background-position: center;
            height: 80px;;"></div>
        </div>

        <div class="col-lg-1"></div>

        <div class="col-lg-4">
            <div class="card bg-faded mb-4" style="border-radius: 0px;
            background-image: url('https://media.tenor.com/Ytq6nXI6eTcAAAAC/pixel-aesthetic.gif');
            background-size: 200%;
            background-position: bottom right;
            height: 80px;"></div>
        </div>
    </div>

    <!--- divider --->
    <div class="card bg-faded mb-4" style="border-radius: 0px;"></div>

    <!--- little "journal doll", whatever you want to aesthetically go here! --->
    <div class="row no-gutters">
        <div class="col-lg-5">
            <div class="card h-100 border-0" style="border-radius: 0px;
            background-color: transparent;
            background-image: url('https://bestanimations.com/media/music/2082734005anime-dancing-girl-44.gif');
            background-size: 100%;
            background-position: center;
            height: 50px;"></div>
        </div>

        <!--- about you --->
        <div class="col-lg-7">
            <div class="card bg-faded p-2 mb-4" style="border-radius: 0px; height: 105px; overflow-y: scroll;">
                <p class="text-center" style="font-size: 12px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>

            <!--- DNI's or whatever you want to put here (BYF, triggers, etc can be anything --->
            <div class="card bg-faded p-2" style="border-radius: 0px;">
                <p class="text-center" style="font-size: 12px;">
                    <b>DNI</b> ▪ put everything here.
                </p>
            </div>
        </div>
    </div>

</div>

<!--- end of main content box --->

<!--- coding credit. DO NOT REMOVE!! --->

<p class="text-center p-2" style="font-size: 12px; opacity: 0.3;">
    <a href="https://toyhou.se/bumblebree/characters"><i class="fa fa-solid fa-code"></i></a>
</p>

</div>

<!--- end of code --->