Select All
<!DOCTYPE HTML>
<!--Rules:
Modular Art Thread
For the Coders Quarters June 2023 challenge
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
- Headers: bg-primary, text-white
- Dividers: bg-secondary
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="container" style="max-width:1000px">
<div class="row">
<!--/// NAVIGATION ///-->
<div class="col-lg-3">
<div class="card rounded-0 mb-3 p-2 mx-auto" style="max-width:250px;position:sticky;top:20px;font-size:1.25em;box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--Page Navbar-->
<span>Navigation</span><br>
<div class="my-2 bg-secondary" style="height:1px;"></div>
<a href="#top">( Top )</a><br>
<a href="#canwont"><i class="fa-regular fa-circle-check"></i> Can / Won't dos</a><br>
<a href="#chara"><i class="fa-regular fa-magnifying-glass"></i> Looking for...</a><br>
<a href="#artex"><i class="fa-regular fa-pen-paintbrush"></i> Art Examples</a><br>
<a href="#form"><i class="fa-regular fa-pen-to-square"></i> Order Form</a><br>
</div>
</div>
<!--/// END NAVIGATION ///-->
<!--/// MAIN BODY ///-->
<div class="col-lg-9">
<!-- /// HEADER /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="top" style="min-height:30px;font-size:2.5em">
<span><i class="fa-regular fa-pen-paintbrush"></i> Username's Comms/Trades</span>
</div>
<div class="card-body p-2">
<div class="row">
<!--blurb-->
<div class="col-md-8 mb-3 mb-md-0">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--links-->
<div class="col-md-4">
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-regular fa-circle-exclamation"></i> Terms of Service</a>
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-brands fa-trello"></i> Trello</a>
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-regular fa-globe"></i> (misc. link)</a>
</div>
</div>
</div>
</div>
<!--Status-->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-check"></i> Status: Open!</span>
</div>
</div>
<!--can & cant't do's-->
<div class="row">
<!--can do's-->
<div class="col-sm-6">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="canwont" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-check"></i> I can do...</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
</div>
</div>
</div>
<!--can't do's-->
<div class="col-sm-6">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-xmark"></i> I won't do...</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
</div>
</div>
</div>
<!--misc. notes-->
<div class="col-12">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-pen"></i> Misc. Notes</span>
</div>
<div class="card-body p-2">
<p>Any relevant info (ie: work time, & other things that affect you're ability to do art) </p>
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
<!-- /// END HEADER /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// PREFRENCES (art trade use) /// -->
<!--section header-->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="pref" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-heart"></i> Prefrences</span>
</div>
</div>
<div class="row">
<!--ok-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-check"></i> Ok</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
</div>
</div>
</div>
<!--not ok-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-xmark"></i> Not Ok</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
</div>
</div>
</div>
<!--ask-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-question"></i> Ask</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
</div>
</div>
</div>
</div>
<!-- /// END PREFRENCES /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// "LOOKING FOR" SECTION /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="chara" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-magnifying-glass"></i> Looking for art of...</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>For art trade threads: any specific details of what you're looking for. You can also swap this section with a few regular images if there's only one OC you're looking for art of.</p>
<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. Duis porta eros et velit blandit dapibus..</p>
</div>
</div>
<!-- /// CHARACTERS /// -->
<div class="row">
<!--character 1-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
<!--character 2-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
<!--character 3-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
</div>
<!-- /// END CHARACTERS /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// ART EXAMPLES /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="artex" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-pen-paintbrush"></i> Art Examples</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>Any specific details about your artwork (ie: different styles you're offering)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
</div>
</div>
<!--image gallery - example images are set at max-height:200px-->
<a href="https://pixabay.com/photos/dove-bird-flight-wings-white-bird-2516641/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/spring-bird-bird-tit-spring-blue-2295434/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295434_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/kingfisher-bird-close-up-perched-2046453/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/bird-fluttering-berries-wings-tit-1045954/" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_1280.jpg" class="mb-1" style="max-height:200px"></a>
<!-- /// END ART EXAMPLES/// -->
<div class="my-3 bg-secondary" style="height:1px;"></div>
<!-- /// ORDER FORM /// -->
<div class="row">
<!--form-->
<div class="col-md-8">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="form" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-pen-to-square"></i> Order Form</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>Mostly for Comms use (but it probably could work for trades too).</p>
<hr>
<!--NOTE: the example form here is in an unstyled list to be easier for people to copy-paste-->
<ul>
<li>Username: </li>
<li>Art type: </li>
<li>Refrences: </li>
<li>Misc notes:</li>
</ul>
</div>
</div>
</div>
<!--slots-->
<div class="col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="order" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-clipboard-list"></i> Slots</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
</div>
</div>
</div>
</div>
<!-- /// END ORDER FORM /// -->
</div>
<!--/// END MAIN BODY ///-->
</div>
<!--Credit. You may move it, but please do not delete/remove-->
<hr class="my-1">
<p style="text-align:right">HTML by <a href="https://toyhou.se/22135456"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
</p>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
Modular Art Thread
For the Coders Quarters June 2023 challenge
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
- Headers: bg-primary, text-white
- Dividers: bg-secondary
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="container" style="max-width:1000px">
<div class="row">
<!--/// NAVIGATION ///-->
<div class="col-lg-3">
<div class="card rounded-0 mb-3 p-2 mx-auto" style="max-width:250px;position:sticky;top:20px;font-size:1.25em;box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--Page Navbar-->
<span>Navigation</span><br>
<div class="my-2 bg-secondary" style="height:1px;"></div>
<a href="#top">( Top )</a><br>
<a href="#canwont"><i class="fa-regular fa-circle-check"></i> Can / Won't dos</a><br>
<a href="#chara"><i class="fa-regular fa-magnifying-glass"></i> Looking for...</a><br>
<a href="#artex"><i class="fa-regular fa-pen-paintbrush"></i> Art Examples</a><br>
<a href="#form"><i class="fa-regular fa-pen-to-square"></i> Order Form</a><br>
</div>
</div>
<!--/// END NAVIGATION ///-->
<!--/// MAIN BODY ///-->
<div class="col-lg-9">
<!-- /// HEADER /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="top" style="min-height:30px;font-size:2.5em">
<span><i class="fa-regular fa-pen-paintbrush"></i> Username's Comms/Trades</span>
</div>
<div class="card-body p-2">
<div class="row">
<!--blurb-->
<div class="col-md-8 mb-3 mb-md-0">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--links-->
<div class="col-md-4">
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-regular fa-circle-exclamation"></i> Terms of Service</a>
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-brands fa-trello"></i> Trello</a>
<a href="#" class="btn btn-primary btn-block rounded-0 mb-2"><i class="fa-regular fa-globe"></i> (misc. link)</a>
</div>
</div>
</div>
</div>
<!--Status-->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-check"></i> Status: Open!</span>
</div>
</div>
<!--can & cant't do's-->
<div class="row">
<!--can do's-->
<div class="col-sm-6">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="canwont" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-check"></i> I can do...</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
<span><i class="fa-solid fa-check"></i> Thing</span><br>
</div>
</div>
</div>
<!--can't do's-->
<div class="col-sm-6">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-xmark"></i> I won't do...</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
<span><i class="fa-solid fa-xmark"></i> Thing</span><br>
</div>
</div>
</div>
<!--misc. notes-->
<div class="col-12">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-pen"></i> Misc. Notes</span>
</div>
<div class="card-body p-2">
<p>Any relevant info (ie: work time, & other things that affect you're ability to do art) </p>
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
<!-- /// END HEADER /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// PREFRENCES (art trade use) /// -->
<!--section header-->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="pref" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-heart"></i> Prefrences</span>
</div>
</div>
<div class="row">
<!--ok-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-check"></i> Ok</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
<span><i class="fa-regular fa-heart"></i> Thing</span><br>
</div>
</div>
</div>
<!--not ok-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-xmark"></i> Not Ok</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
<span><i class="fa-regular fa-ban"></i> Thing</span><br>
</div>
</div>
</div>
<!--ask-->
<div class="col-sm-6 col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-circle-question"></i> Ask</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
<span><i class="fa-regular fa-comment"></i> Thing</span><br>
</div>
</div>
</div>
</div>
<!-- /// END PREFRENCES /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// "LOOKING FOR" SECTION /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="chara" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-magnifying-glass"></i> Looking for art of...</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>For art trade threads: any specific details of what you're looking for. You can also swap this section with a few regular images if there's only one OC you're looking for art of.</p>
<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. Duis porta eros et velit blandit dapibus..</p>
</div>
</div>
<!-- /// CHARACTERS /// -->
<div class="row">
<!--character 1-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
<!--character 2-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
<!--character 3-->
<div class="col-sm-6 col-md-4">
<!--image-->
<div class="card rounded-0 mb-3 mx-auto" style="height:225px;max-width:225px;box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background-image:url(https://cdn.pixabay.com/photo/2019/03/28/18/13/bird-4087736_1280.jpg);
background-size:cover;
background-position:center">
<!--link-->
<div class="bg-primary text-white px-2 mt-auto" style="min-height:30px;font-size:1.5em">
<a href="#" class="text-white">Character Name</a>
</div>
</div>
</div>
</div>
<!-- /// END CHARACTERS /// -->
<div class="mb-3 bg-secondary" style="height:1px;"></div>
<!-- /// ART EXAMPLES /// -->
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<!--section header-->
<div class="bg-primary text-white px-2" id="artex" style="min-height:30px;font-size:2em">
<span><i class="fa-regular fa-pen-paintbrush"></i> Art Examples</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>Any specific details about your artwork (ie: different styles you're offering)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
</div>
</div>
<!--image gallery - example images are set at max-height:200px-->
<a href="https://pixabay.com/photos/dove-bird-flight-wings-white-bird-2516641/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/spring-bird-bird-tit-spring-blue-2295434/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295434_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/kingfisher-bird-close-up-perched-2046453/" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_1280.jpg" class="mb-1" style="max-height:200px"></a>
<a href="https://pixabay.com/photos/bird-fluttering-berries-wings-tit-1045954/" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_1280.jpg" class="mb-1" style="max-height:200px"></a>
<!-- /// END ART EXAMPLES/// -->
<div class="my-3 bg-secondary" style="height:1px;"></div>
<!-- /// ORDER FORM /// -->
<div class="row">
<!--form-->
<div class="col-md-8">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="form" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-pen-to-square"></i> Order Form</span>
</div>
<!--blurb-->
<div class="card-body p-2">
<p>Mostly for Comms use (but it probably could work for trades too).</p>
<hr>
<!--NOTE: the example form here is in an unstyled list to be easier for people to copy-paste-->
<ul>
<li>Username: </li>
<li>Art type: </li>
<li>Refrences: </li>
<li>Misc notes:</li>
</ul>
</div>
</div>
</div>
<!--slots-->
<div class="col-md-4">
<div class="card rounded-0 mb-3" style="box-shadow: 2px 2px 3px rgba(0,0,0,0.5)">
<div class="bg-primary text-white px-2" id="order" style="min-height:30px;font-size:1.5em">
<span><i class="fa-regular fa-clipboard-list"></i> Slots</span>
</div>
<div class="card-body p-2" style="line-height:1.8em">
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
<span><i class="fa-solid fa-chevron-right"></i> (open)</span><br>
</div>
</div>
</div>
</div>
<!-- /// END ORDER FORM /// -->
</div>
<!--/// END MAIN BODY ///-->
</div>
<!--Credit. You may move it, but please do not delete/remove-->
<hr class="my-1">
<p style="text-align:right">HTML by <a href="https://toyhou.se/22135456"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
</p>
</div>
