CHARACTER PROFILE:
<!---
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>USER PROFILE:
<!---
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>
