inkjet code

<!---

INKJET / 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/31613485_0QP.png" class="rounded-circle card p-1 mx-auto" style="height:150px;">
            <!--- info column, remove the ( <div class="card bg-faded... ) up until + including the "</div></div>" before the next card bg-faded to delete 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">
                    <i class="fad fa-pencil my-auto" />  name
                </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">
                    <i class="fad fa-calendar my-auto" />  age
                </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">
                    <i class="fad fa-transgender-alt my-auto" />  gender
                </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">
                    <i class="fad fa-suitcase my-auto" />  job
                </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">
                    <i class="fad fa-ruler my-auto" />  height
                </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">
                    <i class="fad fa-heart my-auto" />  status
                </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 font-italic" style="font-weight:300;letter-spacing:0.05em;">" keep it to one line. "</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;">notes</h4> <hr class="w-100"> <i class="fad fa-sticky-note my-auto ml-2" /></div>
                <!--- notes --->
                <ul style="letter-spacing:0.02em;font-size:12px;height:90px;overflow:auto;">
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</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="10183997" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>