<!-------------------------------------------------
F2U Commission Card — Bootstrap Version
(code by jiko)
------------------------------
RULES
> Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
> turn OFF WYSIWYG (in display settings)
> turn ON Code Editor
------------------------------
TIPPY TIPS
> insert your img links INSIDE or quotation marks!!
> looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------------------------->
<div class="mx-auto" style="max-width:800px">
<!-------------------------------------------------
INTRO
------------------------------------------------->
<div class="mb-0">
<!-- HEADER
---------------------------------------------->
<div class="display-3 text-uppercase text-primary" style="letter-spacing:2px">
Commissions
</div>
<!-- EXTRA LINKS
---------------------------------------------->
<div class="mt-2">
<a href="LINK_HERE" class="btn btn-sm btn-primary">
Gallery
</a>
<a href="LINK_HERE" class="btn btn-sm btn-primary">
Trello
</a>
<!-- add more links ahove this line! -->
</div><hr>
<!-- INFORMATION
---------------------------------------------->
<div class="mt-2 text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<hr>
<!-------------------------------------------------
COMMISSION ITEMS
------------------------------------------------->
<!--
> if you want to space the blocks differently (e.g. 3 per row), check out bootstrap grids!
https://getbootstrap.com/docs/4.0/layout/grid/
-->
<div class="mb-0">
<div class="row no-gutters m-n1">
<!-- ITEM ONE
---------------------------------------------->
<div class="col-lg-3 col-md-6 p-1">
<!-- NAME -->
<div class="alert alert-info mb-2 p-1 px-2 text-center">
Title
</div>
<!-- FOCAL IMAGE -->
<div class="my-2 card border-0" style="min-height:300px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center"></div>
<!-- LINKS TO OTHER EXAMPLES -->
<div class="text-center mb-2" style="letter-spacing:4px;">
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
</div>
<!-- PRICES -->
<div class="card p-2 text-monospace small">
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<!-- add more ahove this line! -->
</div>
</div>
<!-- ITEM TWO
---------------------------------------------->
<div class="col-lg-3 col-md-6 p-1">
<!-- NAME -->
<div class="alert alert-info mb-2 p-1 px-2 text-center">
Title
</div>
<!-- FOCAL IMAGE -->
<div class="my-2 card border-0" style="min-height:300px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center"></div>
<!-- LINKS TO OTHER EXAMPLES -->
<div class="text-center mb-2" style="letter-spacing:4px">
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
</div>
<!-- PRICES -->
<div class="card p-2 text-monospace small">
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<!-- add more ahove this line! -->
</div>
</div>
<!-- ITEM THREE
---------------------------------------------->
<div class="col-lg-3 col-md-6 p-1">
<!-- NAME -->
<div class="alert alert-info mb-2 p-1 px-2 text-center">
Title
</div>
<!-- FOCAL IMAGE -->
<div class="my-2 card border-0" style="min-height:300px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center"></div>
<!-- LINKS TO OTHER EXAMPLES -->
<div class="text-center mb-2" style="letter-spacing:4px">
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
</div>
<!-- PRICES -->
<div class="card p-2 text-monospace small">
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<!-- add more ahove this line! -->
</div>
</div>
<!-- ITEM FOUR
---------------------------------------------->
<div class="col-lg-3 col-md-6 p-1">
<!-- NAME -->
<div class="alert alert-info mb-2 p-1 px-2 text-center">
Title
</div>
<!-- FOCAL IMAGE -->
<div class="my-2 card border-0" style="min-height:300px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center"></div>
<!-- LINKS TO OTHER EXAMPLES -->
<div class="text-center mb-2" style="letter-spacing:4px">
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
<a href="LINK_TO_EXAMPLE" style="text-decoration:none">
<i class="fa-solid fa-image"></i>
</a>
</div>
<!-- PRICES -->
<div class="card p-2 text-monospace small">
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<div class="d-flex align-items-center">
<div>Item</div>
<hr class="flex-fill mx-2 my-1">
<div>$$$</div>
</div>
<!-- add more ahove this line! -->
</div>
</div>
<!-- add more above this line! -->
</div>
<!-- EXTRA NOTES
---------------------------------------------->
<ul class="mt-3 pl-4 text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<hr>
<!-------------------------------------------------
INFORMATION
------------------------------------------------->
<div class="row no-gutters m-n1">
<!-- CAN AND CAN'T DRAW
---------------------------------------------->
<div class="col-md-4 p-1">
<div class="my-0">
<div class="alert alert-success p-1 px-2 text-center mb-0">
Will Draw
</div>
<div class="card p-2 mt-2">
<ul class="pl-4 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="mt-2">
<div class="alert alert-warning p-1 px-2 text-center mb-0">
Ask me
</div>
<div class="card p-2 mt-2">
<ul class="pl-4 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="mt-2">
<div class="alert alert-danger p-1 px-2 text-center mb-0">
Will Not Draw
</div>
<div class="card p-2 mt-2">
<ul class="pl-4 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<!-- TERMS OF SERVICES
---------------------------------------------->
<!--
> this doesn't scroll by default and thus, this probably isn't the BEST for a VERY lengthy/thorough TOS
-->
<div class="col-md-8 p-1 flex-column">
<div class="flex-grow-2 alert alert-info p-1 px-2 text-center mb-0">
Terms of Services
</div>
<div class="flex-grow-1 card p-2 mt-2">
<div class="text-uppercase text-muted">Subtitle</div><hr class="w-100 my-1">
<ul class="pl-4">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="text-uppercase text-muted">Subtitle</div><hr class="w-100 my-1">
<ul class="pl-4">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="text-uppercase text-muted">Subtitle</div><hr class="w-100 my-1">
<ul class="pl-4 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<hr>
<!-------------------------------------------------
FORM
------------------------------------------------->
<div class="row no-gutters m-n1">
<!-- FORM
---------------------------------------------->
<div class="col-md-6 p-1">
<div class="display-4 text-uppercase text-primary" style="letter-spacing:2px">
FORM
</div>
<div class="mt-2 text-muted">
<!-- feel free to adjust to your liking! -->
<p class="mb-1">Username:</p>
<p class="mb-1">Commission:</p>
<p class="mb-1">Character/s:</p>
<p class="mb-1">Extras:</p>
<p class="mb-1">Payment Method:</p>
</div>
</div>
<!-- SLOT AVALIABILITY
---------------------------------------------->
<div class="col-md-6 p-1">
<div class="display-4 text-uppercase text-primary" style="letter-spacing:2px">
Slots
</div>
<div class="mt-2 text-muted">
<p class="mb-1">Slot 1: open</p>
<p class="mb-1">Slot 2: open</p>
<p class="mb-1">Slot 3: open</p>
<p class="mb-1">Slot 4: open</p>
<p class="mb-1">Slot 5: open</p>
</div>
</div>
</div>
<hr class="mb-2">
<div class="text-center">
<a href="https://toyhou.se/22123725." class="small">
<i class="fa-regular fa-code fa-fw"></i>
</a>
</div>
</div>