<!------------------------------
** 2021 Coder Advent Calendar **
Merry Christmas and a Happy New Year!
------------------------
[ TERMS OF SERVICE ]
> Please do not remove credit.
> You may edit and frankenstein with credits/permission from everyone involved.
> You may use my codes as reference but don't heavily reference or steal chunks of it.
> Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
> You are responsible for your own edits.
[ NOTES ]
> Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.
[ TIPS ]
> To change the images, replace the URL in the brackets -> background: url( LINK_HERE )
> Get more icons here: https://fontawesome.com/icons?d=gallery
> It's recommended that you preview your edits before posting
- You can either create a private character
or
- Use circlejourney's Live Preview Editor: https://th.circlejourney.net/
> Learn more about boostrap colours here: https://getbootstrap.com/docs/4.0/utilities/colors/
> Please note if you're posting this as a character and using CSS the colours may be different depending on your CSS theme
-------------------------------->
<div style="margin:-22px; letter-spacing: .6px; font-size: 13px; color: #5c5c5c;">
<!-- BACKGROUND --------------------------------------------------->
<!-- Tips:
- Replace the URL in the brackets to change the background
- If you don't want the background to stay fixed when scrolling, remove " background-attachment: fixed; "
- If you want to use a flat colour, remove the URL in the background and replace #ffffff with a different hex code
-->
<div style="
background: #ffffff url(https://images.unsplash.com/photo-1517639493569-5666a7b2f494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2134&q=80);
background-position: center;
background-repeat: repeat;
background-size: cover;
background-attachment: fixed;
">
<!-- -------------------------------------------------------------->
<div class="mx-auto text-muted" style="max-width: 1000px;">
<div class="py-1 mx-3 bg-faded">
<!-- HEADER ------------------------------------------------------->
<div class="text-center display-4 p-3" style="font-size: 28px; letter-spacing: 6px;">
Commissions
</div><hr class="my-2">
<!-- -------------------------------------------------------------->
<!-- TOP ---------------------------------------------------------->
<div class="row no-gutters p-2">
<!-- USER ------------------------------------------------------->
<div class="col-lg-4 p-2">
<!-- ICON | Replace the URL in the brackets ( ) --------------->
<div class="rounded-circle mx-auto mb-3" style="height: 200px; width: 200px;
background: url(https://images.unsplash.com/photo-1585157603209-378be66bede1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=756&q=80) center no-repeat; background-size: cover;">
</div>
<!-- ---------------------------------------------------------->
<!-- BUTTONS | Delete or add more if you want ----------------->
<div class="row no-gutter">
<!-- Tip:
- If you need more buttons just copy and paste the ones below and replace the icon/text
- Replace the # with a link
-->
<!-- DeviantArt -->
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fab fa-deviantart"></i>
</a></div>
<!-- ------------>
<!-- Twitter -->
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fab fa-twitter"></i>
</a></div>
<!-- ------------>
<!-- Tumblr -->
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fab fa-tumblr"></i>
</a></div>
<!-- ------------>
<!-- Instagram -->
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fab fa-instagram"></i>
</a></div>
<!-- ------------>
<!-- Furaffinity -->
<div class="col">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fas fa-paw"></i>
</a></div>
<!-- ------------>
<!-- Add more above this line -->
</div>
<!-- ---------------------------------------------------------->
<hr class="my-2">
<!-- WRITING AREA --------------------------------------------->
<div class="text-center p-1">
<p>Hello. Write a small intro here.</p>
<p>Thanks for dropping by!</p>
<!-- Add more above this line -->
</div>
<!-- ---------------------------------------------------------->
</div>
<!-- ------------------------------------------------------------>
<!-- INFORMATION ------------------------------------------------>
<div class="col-lg p-2">
<div class="row">
<!-- TOS -------------->
<div class="col-12 mb-2">
<div class="card bg-dark text-white border-0 p-1 px-2">
<div style="font-size: 16px; letter-spacing: 1.4px;"><i class="fas fa-info-circle fa-fw mr-1 my-auto"></i>Terms of Service</div>
</div>
<ul class="my-1">
<li class="my-2">State your terms here.</li>
<li class="my-2">Contact method? DM, Discord, email, etc?</li>
<li class="my-2">Which methods of payment do you accept?</li>
<li class="my-2">Estimated completion time?</li>
<li class="my-2">Do you provide refunds?</li>
<li class="my-2">Commercial Use or Personal Use only?</li>
<li class="my-2">Please credit where credit is due.</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
<!-- WILL DRAW -------->
<div class="col-lg-6 mb-2">
<div class="card bg-success text-white border-0 p-1 px-2">
<div style="font-size: 16px; letter-spacing: 1.4px;"><i class="fas fa-check-circle fa-fw mr-1 my-auto"></i>Will draw</div>
</div>
<ul class="my-1">
<li class="my-2">This</li>
<li class="my-2">That</li>
<li class="my-2">And this</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
<!-- WON'T DRAW ------->
<div class="col-lg-6 mb-2">
<div class="card bg-danger text-white border-0 p-1 px-2">
<div style="font-size: 16px; letter-spacing: 1.4px;"><i class="fas fa-times-circle fa-fw mr-1 my-auto"></i>Won't draw</div>
</div>
<ul class="my-1">
<li class="my-2">This</li>
<li class="my-2">That</li>
<li class="my-2">And this</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
<!-- SLOTS | If not needed, just delete this section ------------>
<div class="col-lg mb-2">
<div class="card bg-dark text-white border-0 p-1 px-2">
<div style="font-size: 16px; letter-spacing: 1.4px;"><i class="fas fa-list fa-fw mr-1 my-auto"></i>Slots</div>
</div>
<ul class="my-1" style="list-style-type: decimal;">
<!-- Note: Add or remove as many as you need. There's no limit. -->
<li class="my-2">@ username</li>
<li class="my-2">@ username</li>
<li class="my-2">@ username</li>
<li class="my-2">@ username</li>
<li class="my-2">@ username</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
<!-- ORDER FORM ------->
<div class="col-lg mb-2">
<div class="card bg-dark text-white border-0 p-1 px-2">
<div style="font-size: 16px; letter-spacing: 1.4px;"><i class="fas fa-pencil fa-fw mr-1 my-auto"></i>Order form</div>
</div>
<ul class="fa-ul my-1 ml-4">
<li class="my-2">Style / Type:</li>
<li class="my-2">Pose / Expression:</li>
<li class="my-2">References:</li>
<li class="my-2">Notes:</li>
<li class="my-2">Payment type:</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
</div>
</div>
<!-- ------------------------------------------------------------>
</div>
<!-- -------------------------------------------------------------->
<!-- ART EXAMPLES ------------------------------------------------->
<div class="row no-gutters p-2">
<!-- Note: You can remove or add as many as you need. -->
<!-- 01 --------------------------------------------------------->
<div class="col-lg-3 mx-auto p-2">
<!-- Replace the URL in the brackets ( ) -->
<div class="mx-auto mb-2" style="height: 300px; border-radius: 6px;
background: url(https://images.unsplash.com/photo-1584804738473-a49b7441c464?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80) center no-repeat; background-size: cover;">
</div>
<!-- STYLE NAME -->
<h3>Style 1</h3>
<!-- ------------->
<hr class="my-2">
<!-- BUST -->
<div class="d-flex justify-content-between my-1">
<span>Bust</span>
<span class="text-right">$$</span>
</div>
<!-- HALF BODY -->
<div class="d-flex justify-content-between my-1">
<span>Half body</span>
<span class="text-right">$$</span>
</div>
<!-- FULL BODY -->
<div class="d-flex justify-content-between my-1">
<span>Full body</span>
<span class="text-right">$$</span>
</div>
<!-- ADDITIONAL CHAR -->
<div class="d-flex justify-content-between my-1">
<span>Add char</span>
<span class="text-right">$$</span>
</div>
<!-- Add more above this line -->
</div>
<!-- ------------------------------------------------------------>
<!-- 02 --------------------------------------------------------->
<div class="col-lg-3 mx-auto p-2">
<!-- Replace the URL in the brackets ( ) -->
<div class="mx-auto mb-2" style="height: 300px; border-radius: 6px;
background: url(https://images.unsplash.com/photo-1584804738473-a49b7441c464?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80) center no-repeat; background-size: cover;">
</div>
<!-- STYLE NAME -->
<h3>Style 2</h3>
<!-- ------------->
<hr class="my-2">
<!-- BUST -->
<div class="d-flex justify-content-between my-1">
<span>Bust</span>
<span class="text-right">$$</span>
</div>
<!-- HALF BODY -->
<div class="d-flex justify-content-between my-1">
<span>Half body</span>
<span class="text-right">$$</span>
</div>
<!-- FULL BODY -->
<div class="d-flex justify-content-between my-1">
<span>Full body</span>
<span class="text-right">$$</span>
</div>
<!-- ADDITIONAL CHAR -->
<div class="d-flex justify-content-between my-1">
<span>Add char</span>
<span class="text-right">$$</span>
</div>
<!-- Add more above this line -->
</div>
<!-- ------------------------------------------------------------>
<!-- 03 --------------------------------------------------------->
<div class="col-lg-3 mx-auto p-2">
<!-- Replace the URL in the brackets ( ) -->
<div class="mx-auto mb-2" style="height: 300px; border-radius: 6px;
background: url(https://images.unsplash.com/photo-1584804738473-a49b7441c464?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80) center no-repeat; background-size: cover;">
</div>
<!-- STYLE NAME -->
<h3>Style 3</h3>
<!-- ------------->
<hr class="my-2">
<!-- BUST -->
<div class="d-flex justify-content-between my-1">
<span>Bust</span>
<span class="text-right">$$</span>
</div>
<!-- HALF BODY -->
<div class="d-flex justify-content-between my-1">
<span>Half body</span>
<span class="text-right">$$</span>
</div>
<!-- FULL BODY -->
<div class="d-flex justify-content-between my-1">
<span>Full body</span>
<span class="text-right">$$</span>
</div>
<!-- ADDITIONAL CHAR -->
<div class="d-flex justify-content-between my-1">
<span>Add char</span>
<span class="text-right">$$</span>
</div>
<!-- Add more above this line -->
</div>
<!-- ------------------------------------------------------------>
<!-- 04 --------------------------------------------------------->
<div class="col-lg-3 mx-auto p-2">
<!-- Replace the URL in the brackets ( ) -->
<div class="mx-auto mb-2" style="height: 300px; border-radius: 6px;
background: url(https://images.unsplash.com/photo-1584804738473-a49b7441c464?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80) center no-repeat; background-size: cover;">
</div>
<!-- STYLE NAME -->
<h3>Style 4</h3>
<!-- ------------->
<hr class="my-2">
<!-- BUST -->
<div class="d-flex justify-content-between my-1">
<span>Bust</span>
<span class="text-right">$$</span>
</div>
<!-- HALF BODY -->
<div class="d-flex justify-content-between my-1">
<span>Half body</span>
<span class="text-right">$$</span>
</div>
<!-- FULL BODY -->
<div class="d-flex justify-content-between my-1">
<span>Full body</span>
<span class="text-right">$$</span>
</div>
<!-- ADDITIONAL CHAR -->
<div class="d-flex justify-content-between my-1">
<span>Add char</span>
<span class="text-right">$$</span>
</div>
<!-- Add more above this line -->
</div>
<!-- ------------------------------------------------------------>
<!-- Add more above this line -->
</div>
<!-- -------------------------------------------------------------->
<!-- CREDIT | Please do not remove! ------------------------------->
<hr class="my-2">
<div class="text-center m-2">
<a href="https://toyhou.se/13870519.-f2u-candy-shop" class="text-muted faded tooltipster" style="font-size: 11px;" title="Code by Sealkitty">
<i class="far fa-code"></i>
</a>
</div>
<!-- -------------------------------------------------------------->
</div>
</div>
</div>
</div>