BOOTSTRAP:
<!---
COMMISSION THREAD / 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-fluid" style="background:none;border-radius:10px;max-width:1150px;">
<div class="bg-primary p-2" style="border-radius:0px;">
<div class="d-flex justify-content-between"><i class="fas fa-heart-circle fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">title</p><i class="fas fa-heart-circle fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- intro --->
<p class="text-center p-2 m-1" style="font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
<div class="row no-gutters">
<div class="col-lg-6">
<!--- will do --->
<h3 class="text-uppercase font-weight-bold p-0 text-center" style="font-size:30px;">WILL DO:</h3>
<ul style="height:130px;overflow:auto;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<!--- won't do --->
<h3 class="text-uppercase font-weight-bold p-0 text-center" style="font-size:30px;">WON'T DO:</h3>
<ul style="height:130px;overflow:auto;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- first option --->
<div class="row no-gutters">
<div class="col-lg-8">
<div class="row no-gutters">
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
</div>
</div>
<div class="col-lg-4">
<div class="card col-12 bg-primary" style="overflow:auto;max-height:250px;">
<p class="p-1 pt-4 text-center"><strong>COMMISSION TYPE: PRICE</strong>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
</div>
</div>
</div>
<!--- end first option --->
<hr class="m-3" style="width:70%;">
<!--- second option --->
<div class="row no-gutters">
<div class="col-lg-8">
<div class="row no-gutters">
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
</div>
</div>
<div class="col-lg-4">
<div class="card col-12 bg-primary" style="overflow:auto;max-height:250px;">
<p class="p-1 pt-4 text-center"><strong>COMMISSION TYPE: PRICE</strong>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
</div>
</div>
</div>
<!--- end section option, to add more highlight this end until the "hr" and then copy+paste --->
<div class="row no-gutters p-2">
<div class="col-lg-6 p-2">
<div class="bg-primary p-2" style="border-radius:0px;">
<div class="d-flex justify-content-between"><i class="fas fa-star fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- order form title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">order form</p><i class="fas fa-star fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- order form, change if you will --->
<blockquote class="m-3"><strong>Name:</strong>
<br><strong>Character:</strong>
<br><strong>Expression/Pose/Animation:</strong>
<br><strong>Background:</strong>
<br><strong>Additional Information:</strong></blockquote>
</div>
<div class="col-lg-6 p-2">
<div class="bg-primary p-2" style="border-radius:0px;">
<div class="d-flex justify-content-between"><i class="fas fa-list fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- slots title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">slots</p><i class="fas fa-list fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<ul class="m-3" style="font-size:20px;height:150px;overflow:auto;">
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
</ul>
</div>
</div>
<!--- credit, dont remove pls! --->
<div class="p-2 bg-primary"><a class="d-block text-center" href="https://toyhou.se/8661119.commission-thread-f2u-html" style="font-size:12px;color:#FFFFFF;letter-spacing:2px;">code by cati</a></div>
</div>
CUSTOM COLOR:
<!---
COMMISSION THREAD (CC) / by cati/dogboy
NOTES
accent: #E77E79
mobile friendly + custom 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-fluid" style="background:none;border-radius:10px;max-width:1150px;">
<div class="p-2" style="border-radius:0px;background:#E77E79;">
<div class="d-flex justify-content-between"><i class="fas fa-heart-circle fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">title</p><i class="fas fa-heart-circle fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- intro --->
<p class="text-center p-2 m-1" style="font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
<div class="row no-gutters">
<div class="col-lg-6">
<!--- will do --->
<h3 class="text-uppercase font-weight-bold p-0 text-center" style="font-size:30px;">WILL DO:</h3>
<ul style="height:130px;overflow:auto;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<!--- won't do --->
<h3 class="text-uppercase font-weight-bold p-0 text-center" style="font-size:30px;">WON'T DO:</h3>
<ul style="height:130px;overflow:auto;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- first option --->
<div class="row no-gutters">
<div class="col-lg-8">
<div class="row no-gutters">
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
</div>
</div>
<div class="col-lg-4">
<div class="card col-12" style="overflow:auto;max-height:250px;background:#E77E79;">
<p class="p-1 pt-4 text-center"><strong>COMMISSION TYPE: PRICE</strong>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
</div>
</div>
</div>
<!--- end first option --->
<hr class="m-3" style="width:70%;">
<!--- second option --->
<div class="row no-gutters">
<div class="col-lg-8">
<div class="row no-gutters">
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
<div class="col-sm-4 p-2"><img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;"></div>
</div>
</div>
<div class="col-lg-4">
<div class="card col-12" style="overflow:auto;max-height:250px;background:#E77E79;">
<p class="p-1 pt-4 text-center"><strong>COMMISSION TYPE: PRICE</strong>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate.</p>
</div>
</div>
</div>
<!--- end section option, to add more highlight this end until the "hr" and then copy+paste --->
<div class="row no-gutters p-2">
<div class="col-lg-6 p-2">
<div class="p-2" style="border-radius:0px;background:#E77E79;">
<div class="d-flex justify-content-between"><i class="fas fa-star fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- order form title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">order form</p><i class="fas fa-star fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- order form, change if you will --->
<blockquote class="m-3"><strong>Name:</strong>
<br><strong>Character:</strong>
<br><strong>Expression/Pose/Animation:</strong>
<br><strong>Background:</strong>
<br><strong>Additional Information:</strong></blockquote>
</div>
<div class="col-lg-6 p-2">
<div class="p-2" style="border-radius:0px;background:#E77E79;">
<div class="d-flex justify-content-between"><i class="fas fa-list fa-3x p-2" style="color:#FFFFFF;"></i>
<!--- slots title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">slots</p><i class="fas fa-list fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<ul class="m-3" style="font-size:20px;height:150px;overflow:auto;">
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
<li>open!</li>
</ul>
</div>
</div>
<!--- credit, dont remove pls! --->
<div class="p-2"><a class="d-block text-center" href="https://toyhou.se/8661119.commission-thread-f2u-html" style="font-size:12px;color:#FFFFFF;letter-spacing:2px;background:#E77E79;">code by cati</a></div>
</div>