F2U ✦ puddle pond | CC

<!---

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!

colors:
title bg color: #3b4559
box borders: #5f749c
fontawesome icons: #5f749c
other box colors: #3b4559
font color:

--->

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

<!--- title box --->

<div class="card bg-faded p-3" style="background-color: #3b4559; border-radius: 0px; width: 600px; border-top: 1px solid #5f749c; border-right: 1px solid #5f749c; border-left: 1px solid #5f749c; Border-bottom: 1px solid #5f749c;">
    <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; color: #5f749c;"><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="color: #929bad; font-size: 25px;">PETRICHOR</p>
        </div>

        <div class="col-lg-1">
            <p class="text-center" style="font-size: 25px; color: #5f749c;"><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 #5f749c; border-right: 1px solid #5f749c; border-left: 1px solid #5f749c; Border-bottom: 1px solid #5f749c;
background-image: url('https://64.media.tumblr.com/90284d42efdd170d63b28f10713526a3/tumblr_ortss8O8zH1rnbw6mo1_540.gif');
background-size: 100%;
background-position: top;">

    <div class="card p-2 mb-4" style="border: 1px solid #5f749c; background-color: #3b4559; 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="color: #929bad; 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="color: #929bad; 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; border: 1px solid #5f749c;
            background-image: url('https://orig00.deviantart.net/c99a/f/2018/126/0/7/07d61d2c31a64bdade38ccfd0bc4ad8d-dcau8th.gif');
            background-size: 300%;
            background-position: top;
            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; border: 1px solid #5f749c;
            background-image: url('https://media.tenor.com/WPqFfKvgIbUAAAAd/stars-train.gif');
            bbackground-size: 100%;
            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; border: 1px solid #5f749c;
            background-image: url('https://i.imgur.com/SRv4doc.gif');
            background-size: 200%;
            background-position: top left;
            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://i.pinimg.com/originals/4e/b7/bd/4eb7bda23bf456a53fd6ba84c1048ba6.gif');
            background-size: 100%;
            background-position: top center;
            height: 50px;"></div>
        </div>

        <!--- about you --->
        <div class="col-lg-7">
            <div class="card bg-faded p-2 mb-4" style="color: #929bad; border: 1px solid #5f749c; background-color: #3b4559; 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="color: #929bad; border: 1px solid #5f749c; background-color: #3b4559; 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 --->