<!---
ART TRADE 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>
<div class="row no-gutters">
<div class="col-lg-9">
<!--- intro --->
<p class="text-center p-2 m-1" style="font-size:18px;">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 class="col-lg-3 mb-2">
<!--- characters to choose from --->
<div class="bg-primary p-2 mt-3" style="border-radius:0px;">
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:10px;letter-spacing:3px;">characters to choose from:</p>
</div>
<div style="height:100px;overflow:auto;">
<!--- IMAGES OPTION START, if you want buttons, highlight from here to IMAGES OPTION END and delete. if you want more images, highlight <div class="row no-gutters.."> until the </div> right before the next <div class="row.." and then paste under the next </div> --->
<div class="row no-gutters justify-content-between">
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
</div>
<div class="row no-gutters justify-content-between">
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/80');background-size:cover;background-position:center;width:80px;height:80px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE"></a>
</div>
</div>
<!--- IMAGES OPTION END --->
<!--- BUTTONS OPTION START, if you want to remove this, highlight until BUTTONS OPTION END and delete. if you want to add more, highlight every <a href> to the </a> and copy/paste onto a new line --->
<a href="URLHERE" class="btn btn-secondary btn-block btn-sm mt-2 py-2">Tag</a>
<a href="URLHERE" class="btn btn-secondary btn-block btn-sm mt-2 py-2">Or character</a>
<a href="URLHERE" class="btn btn-secondary btn-block btn-sm mt-2 py-2">Whichever you want!</a>
<!--- BUTTONS OPTION END --->
</div>
</div>
</div>
<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:100px;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:100px;overflow:auto;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="bg-primary p-2 mb-3" style="border-radius:0px;">
<div class="d-flex justify-content-between"><i class="fas fa-palette fa-3x p-2" style="color:#FFFFFF;"></i>
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">samples</p><i class="fas fa-palette fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- first row samples --->
<div class="row no-gutters">
<div class="col-lg-12">
<div class="row no-gutters">
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
</div>
</div>
</div>
<!--- end first row --->
<hr>
<!--- second row samples --->
<div class="row no-gutters">
<div class="col-lg-12">
<div class="row no-gutters">
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
<div class="col-sm-3 p-2">
<img class="mx-auto d-flex fr-fic fr-dii" src="https://via.placeholder.com/250" style="height:250px;">
<p class="text-center p-2 m-1" style="font-size:13px;">caption here</p>
</div>
</div>
</div>
</div>
<!--- end second row, 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>
<!--- form title --->
<p align="center" class="text-uppercase p-2 font-weight-bold" style="color:#FFFFFF;font-size:30px;letter-spacing:3px;">form</p><i class="fas fa-star fa-3x p-2" style="color:#FFFFFF;"></i></div>
</div>
<!--- form, change if you will --->
<blockquote class="m-3"><strong>Name:</strong>
<br><strong>Character You'll Draw:</strong>
<br><strong>Character I'll Draw:</strong>
<br><strong>Type of Trade:</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/8678253.art-trade-thread-f2u-html" style="font-size:12px;color:#FFFFFF;letter-spacing:2px;">code by cati</a></div>
</div>