<!--------------------------------
"CHARACTER LISTING" - F2U HTML by @StormyStarlight
VERSION - 8 Feb 2023
https://toyhou.se/7033436.-f2u-html-character-listing
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<!------ NAME ------------------->
<div class="row no-gutters d-flex justify-content-center"><div class="col-lg-8"> <!-- change this number to adjust the width of the layout -->
<div class="card bg-secondary p-3 mb-3">
<h2 class="text-center text-uppercase text-light m-0">
NAME • LISTING
</h2>
</div>
<!------------------------------->
<div class="row no-gutters d-flex justify-content-center">
<!------ IMAGE ------------------>
<div class="col-lg-6 col-8 pr-lg-3 pr-md-0 my-auto text-center"><img class="rounded" src="
IMAGELINK
"></div>
<!------------------------------->
<div class="col-lg-6 my-auto">
<!------ CHAR INFO -------------->
<div class="card bg-faded p-3 my-xl-auto my-lg-auto mt-3">
<h2 class="text-center text-uppercase m-0">Character Information</h2>
<div class="col-sm">
<!------------------------------
Add or remove extra sections where needed:
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-muted text-uppercase">TITLE</div>
<div class="text-right">CONTENT</div>
</div>
------------------------------->
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-muted text-uppercase">Name</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Pronouns</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Species</div>
<div class="text-right">Or race</div>
</div>
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Source Material</div>
<div class="text-right">CONTENT</div>
</div>
</div>
</div>
<!------ TECH INFO -------------->
<div class="card bg-faded p-3 mt-3">
<h2 class="text-center text-uppercase m-0">Technical Information</h2>
<div class="col-sm">
<!------------------------------
Add or remove extra sections where necessary:
<div class="justify-content-between mt-2">
<div class="font-weight-bold text-muted text-uppercase">TITLE</div>
<div class="text-right">CONTENT</div>
</div>
------------------------------->
<div class="d-flex justify-content-between mt-2">
<div class="font-weight-bold text-muted text-uppercase">Sale Type</div>
<div class="text-right">OTA/Auction/Flatsale/etc.</div>
</div>
<div class="d-flex justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Looking For</div>
<div class="text-right">Points/Characters/Art/Writing/etc.</div>
</div>
<div class="d-flex justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Autobuy</div>
<div class="text-right">$0.00 USD (PayPal)</div>
</div>
<div class="d-flex justify-content-between mt-2">
<div class="font-weight-bold text-uppercase text-muted">Creation Date</div>
<div class="text-right">CONTENT</div>
</div>
</div>
</div>
<!------------------------------->
</div>
</div>
<!------ OTHER INFO ------------->
<div class="card bg-faded p-3 mt-3">
<h2 class="text-center text-uppercase">Other Information</h2>
<p>Put any other information about the character or sale here or in the list below. Remember to clearly label fan-characters. 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. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla.</p>
<ul class="mt-2 mb-0">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
<li>Integer fermentum est vitae dui pretium fermentum.</li>
<li>Fusce quis velit vel sem pellentesque iaculis congue non lorem.</li>
</ul>
<div class="row no-gutters justify-content-between mt-3">
<a class="btn btn-default col mr-1" href="FOLDERLINK"><i class="fas fa-stars"></i> Wishlist</a>
<a class="btn btn-default col mx-1" href="/~messages/create/YOURUSERNAME"><i class="fas fa-envelope"></i> Make an Offer</a>
<!--------------------------------
If you would rather be contacted through comments than messages for offers, replace the above button code with this:
<a class="btn btn-default col mx-1" href="CHARACTERCOMMENTSLINK"><i class="fas fa-comment"></i> Make an Offer</a>
--------------------------------->
<a class="btn btn-default col ml-1" href="WISHLISTLINK"><i class="fas fa-folder"></i> More for Sale</a>
</div>
</div>
</div></div>
<!------ CREDIT - DON'T DELETE -->
<a class="profile-gallery-title btn btn-default float-right d-inline-flex tooltipster ml-1 mt-3" href="/7033436.-f2u-html-character-listing" title="F2U HTML by StormyStarlight"><i class="far fa-code" style="font-size: 1.1rem;"></i></a>