inkjet (u) code

<!---

INKJET (USER) / by cati/dogboy

    NOTES
    mobile friendly + bootstrap colors! ✔✔✔

    RULES & DISCLAIMERS
    - fav/comment if using pls!
    - not wysiwyg friendly so please turn that off!
    - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
    - have a nice day!!

--->

<div class="container p-3" style="background:none;max-width:700px;margin:30px auto 5px;">
    <div class="row">
        <!--- first column --->
        <div class="col-lg-4 my-auto">
            <!--- icon, feel free to remove if not necessary --->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/30856386_YXc_9721666.png?1611732021" class="rounded-circle card p-1 mx-auto" style="height:150px;">
            <!--- info column, copy-paste the ( <div class="card bg-faded... ) up until the next card bg-faded, and paste under the "</div></div>" for more pills --->
            <div class="card mt-3 p-2" style="border-radius:10px;">
                <div class="card bg-faded px-2 py-1" style="border-radius:20px;font-size:12px;letter-spacing:0.1em;font-weight:350;"><div class="d-flex justify-content-between">
                    <a href="URLHERE"><span data-toggle="tooltip" title="COMMISSIONS"><i class="fad fa-dollar-sign my-auto" /></span></a>  open
                </div></div>
                <div class="card bg-faded px-2 py-1 mt-1" style="border-radius:20px;font-size:12px;letter-spacing:0.1em;font-weight:350;"><div class="d-flex justify-content-between">
                    <a href="URLHERE"><span data-toggle="tooltip" title="ART TRADES"><i class="fad fa-exchange my-auto" /></span></a>  closed
                </div></div>
                <div class="card bg-faded px-2 py-1 mt-1" style="border-radius:20px;font-size:12px;letter-spacing:0.1em;font-weight:350;"><div class="d-flex justify-content-between">
                    <a href="URLHERE"><span data-toggle="tooltip" title="REQUESTS"><i class="fad fa-paint-brush my-auto" /></span></a>  ask
                </div></div>
                <div class="card bg-faded px-2 py-1 mt-1" style="border-radius:20px;font-size:12px;letter-spacing:0.1em;font-weight:350;"><div class="d-flex justify-content-center">
                    <a href="URLHERE"><i class="fab fa-twitter my-auto px-2" /></a>
                    <a href="URLHERE"><i class="fab fa-deviantart my-auto px-2" /></a>
                    <a href="URLHERE"><i class="fab fa-instagram my-auto px-2" /></a>
                    <a href="URLHERE"><i class="fab fa-youtube my-auto px-2" /></a>
                    <a href="URLHERE"><i class="fab fa-tumblr my-auto px-2" /></a>
                </div></div>
            </div>
        </div>
        <!--- second column --->
        <div class="col-lg-8">
            <div class="card p-2 h-100" style="border-radius:10px;">
                <div class="card bg-faded p-2 h-100"><div class="card my-1 px-3 pt-3 h-100" style="border-radius:15px;">
                <!--- quote --->
                <h2 class="text-center" style="font-weight:300;letter-spacing:0.05em;">name / prns / adj</h2>
                <!--- description --->
                    <p class="text-center" style="font-size:12px;letter-spacing:0.02em;height:138px;overflow:auto;">This will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem.
                    <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem.</p>
                <!--- notes header, you can change the icon or header title --->
                <div class="d-flex justify-content-between"><h4 class="my-auto mr-2" style="font-weight:300;letter-spacing:0.05em;">disclaimers</h4> <hr class="w-100"> <i class="fad fa-exclamation-triangle my-auto ml-2" /></div>
                <!--- notes --->
                <ul style="letter-spacing:0.02em;font-size:12px;height:90px;overflow:auto;">
                    <li>Let people know what sort of content your characters might have in their profile.</li>
                    <li>Or if you prefer or don't prefer to be pinged.</li>
                    <li>Etc etc etc!</li>
                    <li>Content</li>
                </ul>
                </div></div>
            </div>
        </div>
    </div>
    <!--- credit, dont remove pls! --->
    <a class="d-block text-muted text-right mr-2 mt-1" href="10184006" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>