[F2U] Requests Opening template

<!-- ---------------------  CODE BY OneAlbatross  ------------------------
---- ---------------------------------------------------------------------

|[All links, socials, etc]:  https://onealbatross.carrd.co/
|[Tip jar]:  https://ko-fi.com/onealbatross

|[How to use Templates - Video Guide by Indianimations]: https://youtu.be/B-X57fmPuPo?t=93

|[ Rules ]
        - Modify the code as much as you like but please do not redistribute or claim it as your own.
        - Please DO NOT remove credit regardless of how much you edit/Frankenstein the code.
        - Keep WYSIWYG off while adding or editing code
        - Turn "Enable Code Editor" off if you are on mobile to be able to paste.

|[ Images ]
    To fill in/replace images:
        - your desired image can be anywhere online like a free image website, your Deviantart stash, Discord, or here on Toyhouse
        - right click the image and select "copy image address" (should end in .png, .jpg, .gif, etc - NOT a .webp)
        - paste this web address within areas like url(LINK_HERE) or src="IMG URL HERE"

    - Some info on adjusting images can be seen here: https://toyhou.se/4930674](https://toyhou.se/4930674

|[ Icons ]
    - Icons used are from FontAwesome.com and you can find more info here: https://toyhou.se/3536712

---------------------------------------------------------------------------
----------------------------------------------------------------------- -->



<!--

PREMIUM USERS OPTION - CSS snippets that gets rid of the title and gallery
- copy and paste the following snippets into the optional "CSS" field (right under the main code box)

    /* hides top row info */
    #content > div > div.row.profile-header{display:none;}

    /* hides "profile" header line */
    #content > div > div.profile-section.profile-content-section > div.profile-content-title{display:none;}

    /* hides gallery */
    #content > div > div.profile-section.profile-gallery-section{display:none;}


-->





<div class="py-5 px-md-5">

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

        <!-- Optional image section (START) -->
        <div class="col-md-3 row no-gutters">

            <div class="col pr-2 mb-3 mb-md-0" style="min-height:150px">
                <!-- replace link in url('') with your own image address -->
                <div class="h-100 rounded" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/19164156?1670449372'); background-size:cover; background-repeat:no-repeat; background-position:0px -20px"></div>
            </div>

        </div>
        <!-- Optional image section (END) -->



        <div class="col-md pl-md-3">
            <div class="">

                <div class="row mb-1" style="">
                    <div class="col-auto"><h1 class="font-weight-lighter text-muted text-uppercase display-2">Requests</h1></div>
                    <div class="col"><hr></div>
                </div>


                <div class="d-inline-block card bg-faded rounded-left mr-3 mb-3" style="border-style:double; border-width:1px 7px 1px 1px;">
                    <div class="d-inline-block text-uppercase pr-1 py-1 bg-primary rounded px-2 text-dark tooltipster" title="frequency/priority"> <i class="fa-solid fa-business-time"></i></div>
                    <div class="d-inline-block text-muted pl-2 pr-3 py-1">spare-time, in between coms</div>
                </div>


                <div class="d-inline-block card bg-faded rounded-left mr-3 mb-3" style="border-style:double; border-width:1px 7px 1px 1px;">
                    <div class="d-inline-block text-uppercase pr-1 py-1 bg-primary rounded px-2 text-dark tooltipster" title="types of art possible"><i class="fa-solid fa-pencil"></i></div>
                    <div class="d-inline-block text-muted pl-2 pr-3 py-1">doodles, sketches, finished pieces</div>
                </div>


                <div class="d-inline-block card bg-faded rounded-left mr-3 mb-3" style="border-style:double; border-width:1px 7px 1px 1px;">
                    <div class="d-inline-block text-uppercase pr-1 py-1 bg-primary rounded px-2 text-dark tooltipster" title="specialties"><i class="fa-solid fa-square-star"></i></div>
                    <div class="d-inline-block text-muted pl-2 pr-3 py-1">anthros, feral, monsters</div>
                </div>

            </div>

            <div class="d-block bg-faded card p-2">

                <p class="p-2">
                Reasoning, intro, etc. Maybe why you're doing this, you're feelings, approach, idk. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
                </p>

            </div>

        </div>

    </div>


    <div class="row no-gutters">

        <div class="col-md-6 pr-md-3">

            <div class="card bg-faded p-3 h-100">

                <h1 class="font-weight-lighter text-primary text-uppercase mb-3"><i class="fa-solid fa-notes-medical"></i> Directions</h1>

                <ul class="list-unstyled">
                    <li>instructions detailing such requirements like commenting, liking, or following</li>
                    <li>additional instructions of some sort or another</li>
                    <li>some more instructions of whatever type</li>
                    <li class="faded">slightly more optional or less important instructions</li>

                </ul>

            </div>

        </div>

        <div class="col-md-6 mt-3 mt-md-0" >

            <div class="card bg-faded p-3 mt-md-0 mt-0 h-100">

<!-- things you like section  -->
                    <div class="card border-0 bg-faded pt-1 pb-2 d-block">
                        <div class="d-inline-block tooltipster" title="things I want to practice / better chance of being chosen"><i class="fa-solid fa-heart-square pr-2 text-success fa-xl"></i></div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">anthros</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">feral</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">uncommon species</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">clothes</div>

                    </div>


<!-- things you're hesitant about section  -->
                    <div class="card border-0 bg-faded pt-1 pb-2 d-block">
                        <div class="d-inline-block tooltipster" title="very experimental / not good with it, but practicing"><i class="fa-solid fa-seal-question pr-2 text-warning fa-xl"></i></div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">humans</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">mech</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">background elements</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">complex designs</div>

                    </div>


<!-- things you're not interested in section  -->
                    <div class="card border-0 bg-faded pt-1 pb-0 d-block">
                        <div class="d-inline-block tooltipster" title="non-interest / not attempting"><i class="fa-solid fa-do-not-enter pr-2 text-danger fa-xl"></i></div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">monsters</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">object heads</div>
                        <div class="card d-inline-block text-muted px-2 py-1 mb-2">neon, bright colors</div>

                    </div>


                </div>
            </div>

        </div>

        <div class="row no-gutters card bg-faded mt-3">

        <div class="row no-gutters px-3 pt-3" >

            <div class="col-md-6">
            <div class="card px-3 pt-3 mb-3 mr-md-3 mr-0">
                <div>
                <h3 class="font-weight-lighter text-muted text-uppercase">Feel free to</h3>
                <hr>
                <ul class="list-unstyled" style="height:80px; overflow:auto">
                    <li><i class="fa-solid fa-chevron-right text-primary"></i> things you can do</li>
                    <li><i class="fa-solid fa-chevron-right text-primary"></i> like suggest poses or expressions</li>
                    <li><i class="fa-solid fa-chevron-right text-primary"></i> link multiple characters</li>



                </ul>
                </div>

            </div>
            </div>


            <div class="col-md-6">
            <div class="card px-3 pt-3 mb-3 mr-md-3 mr-0">

                <div>
                <h3 class="font-weight-lighter text-muted text-uppercase">Please don't</h3>
                <hr>
                <ul class="list-unstyled" style="height:80px; overflow:auto">
                    <li><i class="fa-solid fa-chevron-right text-danger"></i> things to not do</li>
                    <li><i class="fa-solid fa-chevron-right text-danger"></i> like contact for updates, asking about certain things, etc</li>
                    <li><i class="fa-solid fa-chevron-right text-danger"></i> these boxes scroll</li>



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

        </div>

        </div>




<!-- Optional bottom row containing message and links (START) -->

    <div class="row no-gutters mt-3 card bg-faded">

        <div class="row p-3" style="overflow: hidden; ">

<!-- hands and heart decoration -->
            <div class="col-auto d-none d-md-block">
                <i class="fa-solid fa-hands-holding-heart text-muted " style="font-size:40px; opacity:40%;"></i>
            </div>

<!-- message -->
            <div class="col-auto pt-2">
                <div class="" style="">

                Subs, and favs are always appreciated! <span class=" px-2 faded">- You can also tip my Ko-fi</span>

                </div>
            </div>

<!-- decorative line -->
            <div class="col-md"><hr></div>

<!-- links section -->
            <div class="col display-4 w-100 " >
                <div class="w-100 d-flex justify-content-around align-items-center">
                    <div><a class="px-2 " style="text-decoration: none;" href="LINK_HERE"><i class="fa-brands fa-instagram"></i></a></div>
                    <div><a class="px-2 " style="text-decoration: none;" href="LINK_HERE"><i class="fa-brands fa-deviantart"></i></a></div>
                    <div><a class="px-2 " style="text-decoration: none;" href="LINK_HERE"><i class="fa-solid fa-mug-hot"></i></a></div>
                    <div><a class="px-2 " style="text-decoration: none;" href="LINK_HERE"><i class="fa-brands fa-patreon"></i></a></div>
                </div>

            </div>

        </div>

    </div>
<!-- Optional bottom row containing message and links (END) -->



<!-- CREDIT - DO NOT REMOVE ---------------- --><div class="mx-auto" style="opacity:50%" ><a href="https://toyhou.se/OneAlbatross/characters/folder:3801186" class="text-decoration-none text-light pull-right pt-1" style="font-size:.7rem; " title="Code by OneAlbatross" data-toggle="tooltip" data-placement="bottom" ><i class="fa-solid fa-code"></i></a></div>


</div>