art wishlist
created by:sunxrice
Mixed ColorsHTMLMiscellaneous
Copy
<!--
art info
by sunxrice
accent color: #358fe9
use find and replace!
please refer to symbol key for the individual fa-square symbols and text-colors! anything that says
"fa-square text-body"
is something you probably need to change
-->
<div class="container" style="max-width:940px">
<div class="row">
<!-- sidebar-->
<div class="col-sm-3 bg-faded p-3 mb-3">
<div class="sticky-top py-2">
<!-- title / header -->
<p class="text-center mb-2" style="font-size:1.2em">
<b style="color:#358fe9">yourname</b>'s
art info
</p>
<p>put a short description here if you want idk</p>
<!-- symbol key -->
<div class="card p-2 my-3">
<ul class="fa-ul ml-2 my-0">
<!-- preferred, wanted, "please draw" -->
<li><span class="mr-2 far
fa-square-heart text-primary
"></span> most wanted
</li>
<!-- allowed, okay -->
<li><span class="mr-2 far
fa-square-check text-success
"></span> allowed
</li>
<!-- friends only, depends on artist -->
<li><span class="mr-2 far
fa-square-star text-secondary
"></span> friends only
</li>
<!-- maybe, depends on character / situation -->
<li><span class="mr-2 far
fa-square-minus text-warning
"></span> depends
</li>
<!-- ask before drawing (for info / permission ) -->
<li><span class="mr-2 far
fa-square-question text-info
"></span> ask
</li>
<!-- not allowed at all / creator only -->
<li><span class="mr-2 far
fa-square-xmark text-danger
"></span> not allowed
</li>
</ul>
</div>
<!-- /symbol -->
<!-- af info -->
<!-- username -->
<p class="my-0 justify-content-between">
<b style="color:#358fe9">artfight username</b>
<a class="text-right" style="color:#358fe9"
href="aflink">
username
</a>
</p>
<!-- current team -->
<p class="my-0 justify-content-between">
<b style="color:#358fe9">team</b>
<span class="text-right">
content
</span>
</p>
<!-- friendly fire -->
<p class="my-0 justify-content-between align-items-center">
<b style="color:#358fe9">friendly fire</b>
<span class="text-right far
fa-square text-body
"></span>
</p>
<!-- revenge -->
<p class="my-0 justify-content-between align-items-center">
<b class="tooltipster" style="color:#358fe9"
title="will i revenge you at all?">revenge</b>
<span class="text-right far
fa-square text-body
"></span>
</p>
<!-- revenge chain -->
<p class="my-0 justify-content-between align-items-center">
<b class="tooltipster" style="color:#358fe9"
title="will i revenge you multiple times / start a chain?">revenge chain</b>
<span class="text-right far
fa-square text-body
"></span>
</p>
<!-- /af -->
<hr>
<!-- non af info - other things outside af -->
<!-- art trades -->
<p class="my-0 justify-content-between align-items-center">
<b style="color:#358fe9">art trades</b>
<span class="text-right far
fa-square text-body
"></span>
</p>
<!-- gift art -->
<p class="my-0 justify-content-between align-items-center">
<b class="tooltipster" style="color:#358fe9"
title="are other people allowed to draw my characters without asking (outside of artfight)?">gift art</b>
<span class="text-right far
fa-square text-body
"></span>
</p>
<!-- /non -->
<hr>
<!-- code credit -->
<p class="text-center"><a class="far fa-sun-haze tooltipster" style="color:#358fe9" title="code by sunxrice" href="https://toyhou.se/24989641"></a></p>
</div>
</div>
<!-- /sidebar -->
<!-- main content -->
<div class="col-sm px-3">
<!-- individual characters - "favorite ocs", ocs you would like drawn the most -->
<div class="bg-faded text-center py-2 mb-2">
<b style="color:#358fe9; font-size:1.2em">favorite ocs</b>
<div class="flex-wrap justify-content-center">
<!-- character -->
<div class="p-0 pt-5 m-2 card" style="min-width:100px; background-position:center; background-size:cover;
background-image:url();
"><a class="p-1 text-light" style="background:rgba(0,0,0,0.75)"
href="">
character
</a>
</div>
<!-- character -->
<div class="p-0 pt-5 m-2 card" style="min-width:100px; background-position:center; background-size:cover;
background-image:url();
"><a class="p-1 text-light" style="background:rgba(0,0,0,0.75)"
href="">
character
</a>
</div>
<!-- character -->
<div class="p-0 pt-5 m-2 card" style="min-width:100px; background-position:center; background-size:cover;
background-image:url();
"><a class="p-1 text-light" style="background:rgba(0,0,0,0.75)"
href="">
character
</a>
</div>
<!-- character -->
<div class="p-0 pt-5 m-2 card" style="min-width:100px; background-position:center; background-size:cover;
background-image:url();
"><a class="p-1 text-light" style="background:rgba(0,0,0,0.75)"
href="">
character
</a>
</div>
<!-- put more characters above this line - keep it to a low amount (3 or 4 is probably ideal) -->
</div>
</div>
<!-- /individual -->
<!-- ships -->
<div class="row bg-faded mx-0 my-2 p-2">
<b class="col-12" style="color:#358fe9; font-size:1.2em">oc ships</b>
<div class="col-lg-7" style="max-height:400px; overflow-y:auto">
<!-- ship -->
<div class="d-flex my-2">
<!-- image -->
<div class="card p-3 mr-2" style="min-width:100px; background-position:center; background-size:cover;
background-image:url()
"></div>
<!-- info -->
<div>
<p class="mb-0" style="font-size:1.2em">
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
and
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
</p>
<p>
<b style="color:#358fe9">
(romantic)
</b>
describe here. keep it short.
</p>
</div>
</div>
<!-- /ship -->
<!-- ship -->
<div class="d-flex my-2">
<!-- image -->
<div class="card p-3 mr-2" style="min-width:100px; background-position:center; background-size:cover;
background-image:url()
"></div>
<!-- info -->
<div>
<p class="mb-0" style="font-size:1.2em">
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
and
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
</p>
<p>
<b style="color:#358fe9">
(platonic)
</b>
entire section scrolls if too long so put as many ships as you want but still. keep short
</p>
</div>
</div>
<!-- /ship -->
<!-- ship -->
<div class="d-flex my-2">
<!-- image -->
<div class="card p-3 mr-2" style="min-width:100px; background-position:center; background-size:cover;
background-image:url()
"></div>
<!-- info -->
<div>
<p class="mb-0" style="font-size:1.2em">
<a style="font-weight:bold; color:#358fe9"
href="">character</a>,
<a style="font-weight:bold; color:#358fe9"
href="">character</a>, and
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
</p>
<p>
<b style="color:#358fe9">
(sibling)
</b>
you can also have more than 2 characters!
</p>
</div>
</div>
<!-- /ship -->
<!-- ship -->
<div class="d-flex my-2">
<!-- image -->
<div class="card p-3 mr-2" style="min-width:100px; background-position:center; background-size:cover;
background-image:url()
"></div>
<!-- info -->
<div>
<p class="mb-0" style="font-size:1.2em">
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
and
<a style="font-weight:bold; color:#358fe9"
href="">character</a>
</p>
<p>
<b style="color:#358fe9">
(etc)
</b>
stuff in parentheses is the type of relationship (friends, siblings, etc etc)
</p>
</div>
</div>
<!-- /ship -->
<!-- put more ships above this line -->
</div>
<div class="col-lg py-2" style="max-height:400px; overflow-y:auto">
<!-- other ships -->
<ul class="fa-ul ml-2 my-0">
<!-- ship -->
<li><span class="mr-2 far fa-heart"></span>
<a style="color:#358fe9"
href="">character</a>
and
<a style="color:#358fe9"
href="">character</a>
(type)
</li>
<!-- ship -->
<li><span class="mr-2 far fa-heart"></span>
<a style="color:#358fe9"
href="">character</a>
and
<a style="color:#358fe9"
href="">character</a>
(type)
</li>
<!-- ship -->
<li><span class="mr-2 far fa-heart"></span>
<a style="color:#358fe9"
href="">character</a>
and
<a style="color:#358fe9"
href="">character</a>
(type)
</li>
<!-- put more above this line -->
</ul>
<!-- /other -->
<hr>
<!-- interaction permissions -->
<ul class="fa-ul ml-2 my-0">
<!-- diff universe interaction -->
<li><span class="mr-2 far
fa-square text-body
"></span> characters from different stories interact
</li>
<!-- diff creator interaction -->
<li><span class="mr-2 far
fa-square text-body
"></span> interactions with others' characters
</li>
<!-- thing -->
<li><span class="mr-2 far
fa-square text-body
"></span> non-canon ships
</li>
<!-- content -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- put more above this line -->
</ul>
<!-- /interaction -->
</div>
</div>
<!-- /ships -->
<!-- other character related permissions -->
<div class="row mx-n1">
<!-- themes -->
<div class="col-sm bg-faded px-4 py-3 mx-1 my-2 my-sm-0">
<b style="color:#358fe9; font-size:1.2em">themes</b>
<ul class="fa-ul ml-2 my-1">
<!-- joke -->
<li><span class="mr-2 far
fa-square text-body
"></span> joke art
</li>
<!-- gore -->
<li><span class="mr-2 far
fa-square text-body
"></span> moderate gore
</li>
<!-- gore+ -->
<li><span class="mr-2 far
fa-square text-body
"></span> extreme gore
</li>
<!-- body horror -->
<li><span class="mr-2 far
fa-square text-body
"></span> body horror
</li>
<!-- nudity -->
<li><span class="mr-2 far
fa-square text-body
"></span> nudity
</li>
<!-- nsfw -->
<li><span class="mr-2 far
fa-square text-body
"></span> nsfw / suggestive
</li>
<!-- thing -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- thing -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- put more above this line -->
</ul>
<p>notes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- /themes -->
<!-- design changes -->
<div class="col-sm bg-faded px-4 py-3 mx-1 my-2 my-sm-0">
<b style="color:#358fe9; font-size:1.2em">design changes</b>
<ul class="fa-ul ml-2 my-1">
<!-- outift -->
<li><span class="mr-2 far
fa-square text-body
"></span> different outfit
</li>
<!-- hairstyle -->
<li><span class="mr-2 far
fa-square text-body
"></span> different hairstyle
</li>
<!-- gender -->
<li><span class="mr-2 far
fa-square text-body
"></span> different gender
</li>
<!-- body -->
<li><span class="mr-2 far
fa-square text-body
"></span> different body type
</li>
<!-- race -->
<li><span class="mr-2 far
fa-square text-body
"></span> different race
</li>
<!-- species -->
<li><span class="mr-2 far
fa-square text-body
"></span> different species (i.e. changing a human to a cat)
</li>
<!-- simple -->
<li><span class="mr-2 far
fa-square text-body
"></span> simplifying design
</li>
<!-- complex -->
<li><span class="mr-2 far
fa-square text-body
"></span> complexifying design
</li>
<!-- thing -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- thing -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- put more above this line -->
</ul>
<p>notes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- /design -->
</div>
<!-- /other -->
<!-- misc -->
<div class="bg-faded px-4 py-3 mx-0 my-2">
<b style="color:#358fe9; font-size:1.2em">general wishlist</b>
<ul class="ml-n3 my-1">
<!-- list item -->
<li>
put general things you want here.
</li>
<!-- list item -->
<li>
content
</li>
<!-- list item -->
<li>
content
</li>
<!-- put more above this line -->
</ul>
<hr>
<b style="color:#358fe9; font-size:1.2em">other notes</b>
<ul class="fa-ul ml-2 my-1">
<!-- list item -->
<li><span class="mr-2 far
fa-square text-body
"></span> put other things you might want people to take note of here.
</li>
<!-- list item -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- list item -->
<li><span class="mr-2 far
fa-square text-body
"></span> content
</li>
<!-- put more above this line -->
</ul>
<p>notes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- /misc -->
</div>
<!-- /main -->
</div>
</div>
<!-- end -->