F2U ✦ loafer & skip | 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 p-2 bg-faded mx-auto" style="width: 760px; border-radius: 0px;">

<div class="row no-gutters">

    <!--- left collum info. general information --->
    <div class="col-lg-6">

    <!--- nickname & username --->
    <div class="m-3 mb-2 bg-faded text-muted" style="font-size: 30px; border-radius: 0px; border: solid 0px;">

    <!--- nickname goes here --->
    <div class="row no-gutters">
        <div class="col-lg-11">
            <p class="text-right p-1" style="letter-spacing: 0.1em;">
                <b>N</b><i>ICKNAME</i>
            </p>
        </div>

    <!--- aesthetic image, icon, etc goes here --->
        <div class="col-lg-1">
            <p class="p-1 text-right">
                <i class="fa-duotone fa-flower fa-spin" style="--fa-animation-duration: 15s;"></i>
            </p>
        </div>
    </div>

    <!--- username goes here. remove the dot if you want the link to work. --->
    <p class="text-lowercase text-right" style="font-size: 15px; opacity: 0.5;">
        @.username
    </p>

    </div>

    <!--- pronouns & info --->
    <div class="m-3 mb-4 bg-faded text-muted" style="border-radius: 0px; border: solid 0px;">
    <div class="row no-gutters">

        <!--- tip: change collum size depending on how long each text is, etc!
        example: col-lg is set at 7 right now, if you want it smaller lower the number, if you want it bigger, raise it. but make sure you lower or raise the other collum as well.
        the values have to equal 12. i.e, 4 would equal 8, 7 equals 5, 6 equals 6, etc etc --->
        <div class="col-lg-7">
            <p class="text-lowercase text-right" style="font-size: 12px;">
                age, orient, starsign, etc
            </p>
        </div>

        <div class="col-lg-5">
            <p class="text-uppercase text-right" style="font-size: 12px; font-weight: 800;">
                pro / nouns / etc
            </p>
        </div>
    </div>

        <p class="text-right" style="font-size: 12px;">
            hello! brief introduction to yourself, what you are like, etc! keep this three lines long, but honestly just put whatever feels best aesthetically / whatever matches your layout!
        </p>
    </div>

    <!--- aesthetic image #1 / its best to choose an image with equal proportions --->
    <div class="card m-3 mb-4 bg-faded text-muted" style="
    background-image: url('https://cdn.discordapp.com/attachments/1031759070069280890/1117714284370219008/skipandloafer5.png');
    background-size: 100%;
    background-position: center;
    height: 82px;
    border-radius: 0px;
    border: 1px solid;">
    </div>

    <!--- interests, likes, etc etc! --->
    <div class="p-2 m-3 mb-4 bg-faded text-muted" style="font-size: 12px; border-radius: 0px; border: solid 1px; overflow-y: scroll; height: 75px;">
        <p class="text-left" style="font-size: 12px;">
            <b>INTERESTS</b>

            interest, interest number two, interest number three, another interest, etc etc. try to keep it to three lines long. if you cant though, this box will scroll.
        </p>
    </div>

    <!--- before you follow. i.e, your a minor, you dont want to interact with minors/adults, etc --->
    <div class="p-2 m-3 bg-faded text-muted" style="font-size: 12px; border-radius: 0px; border: solid 1px; overflow-y: scroll; height: 55px;">
        <p class="text-left" style="font-size: 12px;">
            <b>BYF / TW</b>

            before you follow criteria. list everything here, trigger warns, etc. keep this two lines long.
        </p>
    </div>

    </div>
    <!--- end of the left collum --->

    <!--- right collum info. other information --->
    <div class="col-lg-6">

    <!--- aesthetic image #3 / its best to choose an image with equal proportions --->
    <div class="card m-3 bg-faded text-muted" style="
    background-image: url('https://cdn.discordapp.com/attachments/1031759070069280890/1117695387457818704/skipandloafer1.png');
    background-size: 110%;
    background-position: center;
    height: 305px;
    border-radius: 0px;
    border: 1px solid;"></div>

    <!--- this box is specifically for the line border for the right side of the collum. if you dont like it asthetically, just delete the border bit and put border-radius: 0px; !! --->
    <div class="bg-faded p-2 m-3 text-muted" style="border-left: 1px solid; border-top: 0px solid; border-right: 0px solid; border-bottom: 1px solid;">

    <!--- DNI info --->
    <p class="text-left text-muted mb-2" style="font-size: 12px;">
        <b>DO NOT INTERACT!</b>

        <i>list everything here. keep it to two lines, but do whatever feels aesthetically best for you.</i>
    </p>

    <!--- aesthetic images --->
    <div class="row no-gutters">
        <div class="col-lg-4">
            <!--- aesthetic image #4 / its best to choose an image with a wider width proportion --->
            <div class="card m-2 bg-faded" style="
            background-image: url('https://cdn.discordapp.com/attachments/1031759070069280890/1117711620056023120/skipandloafer2.png');
            background-size: 110%;
            background-position: center;
            height: 50px;
            border-radius: 0px;
            border: 1px solid;"></div>
        </div>

        <!--- aesthetic image #5 / its best to choose an image with a wider width proportion --->
        <div class="col-lg-4">
            <div class="card m-2 bg-faded" style="
            background-image: url('https://cdn.discordapp.com/attachments/1031759070069280890/1117711620328673322/skipandloafer3.png');
            background-size: 90%;
            background-position: center;
            height: 50px;
            border-radius: 0px;
            border: 1px solid;"></div>
        </div>

        <!--- aesthetic image #6 / its best to choose an image with a wider width proportion --->
        <div class="col-lg-4">
            <div class="card m-2 bg-faded" style="
            background-image: url('https://cdn.discordapp.com/attachments/1031759070069280890/1117711620546756658/skipandloafer4.png');
            background-size: 110%;
            background-position: center;
            height: 50px;
            border-radius: 0px;
            border: 1px solid;"></div>
        </div>
    </div>
    </div>
    </div>
    </div>
    <!--- end of the right collum --->

    <!--- list of friends, or whatever else you want to put here tbh! --->

    <div class="row no-gutters">

        <!--- social medias, links, etc etc --->
        <div class="col-6">
            <p class="text-right p-2 text-muted" style="font-size: 20px; letter-spacing: 0.5em;">

           <!--- an about page, carrd, etc --->
            <a href="#"><i class="fa-solid fa-user tooltipster" title="about me" style="opacity: 0.9;"></i></a>

            <!--- twitter, or you can replace it with any other social media (with limitations to font awesome --->
            <a href="#"><i class="fa-brands fa-twitter tooltipster" title="social media" style="opacity: 0.9;"></i></a>

            <!--- commissions --->
            <a href="#"><i class="fa-solid fa-pencil tooltipster" title="commissions: open, closed, etc" style="opacity: 0.9;"></i></a>

            <!--- character sales folder --->
            <a href="#"><i class="fa-solid fa-dollar tooltipster" title="sales folder" style="opacity: 0.9;"></i></a>

            <!--- trades --->
            <i class="fa-solid fa-arrow-right-arrow-left tooltipster" title="trades: open, closed, etc" style="opacity: 0.9;"></i>

            <!--- requests --->
            <i class="fa-solid fa-gift tooltipster" title="requests: open, closed, etc" style="opacity: 0.9;"></i>
            </p>
        </div>

        <div class="col-lg-6">
            <div class="bg-faded m-2 text-muted">

                <!--- my coding credit. DO NOT REMOVE! --->
                <p class="text-right text-muted" style="font-size: 20px; letter-spacing: 0.5em; opacity: 0.3;">
                    ☄. *. ⋆` ✧.* +

                    <a href="https://toyhou.se/bumblebree/characters"><i class="fa-solid fa-code tooltipster" title="code by honeybree"></i></a>
                </p>

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

</div>

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