<!------------------------------
[ 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 ]
> 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
-------------------------------->
<!-- Tip: If you're not posting this in forums, remove " margin: -12px; " -->
<div class="p-lg-5 text-muted p-2" style="margin: -12px; font-size: 12px; letter-spacing: .6px;
background: #b8e4e6 url(https://images.unsplash.com/photo-1614481327033-68e5df399653?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2016&q=80) center no-repeat;
background-size: cover;
background-attachment: fixed;">
<div class="row no-gutters mx-auto" style="max-width: 1000px;">
<!-- SIDEBAR -------------------------------------------------------->
<div class="col-lg-4 p-3">
<div class="sticky-top p-3" style="border-radius: 10px; background: #fff;">
<!-- AVATAR -->
<div class="text-center">
<img src="https://images.unsplash.com/photo-1577703451648-77e854069658?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="fr-rounded my-2" style="height: 120px; width: 120px; object-fit: cover;">
</div>
<!-- LINKS | Delete or add more if you want -->
<div class="row no-gutters mt-3 my-2">
<!-- Tip --
- Replace # with link
---------->
<!-- DEVIANTART -->
<div class="col p-1">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1" style="font-size: 12px;">
<i class="fab fa-deviantart"/>
</a>
</div>
<!-- TWITTER -->
<div class="col p-1">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1" style="font-size: 12px;">
<i class="fab fa-twitter"/>
</a>
</div>
<!-- INSTAGRAM -->
<div class="col p-1">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1" style="font-size: 12px;">
<i class="fab fa-instagram"/>
</a>
</div>
<!-- FURAFFINITY -->
<div class="col p-1">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1" style="font-size: 12px;">
<i class="fas fa-paw"/>
</a>
</div>
<!-- KO-FI -->
<div class="col p-1">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1" style="font-size: 12px;">
<i class="fas fa-coffee"/>
</a>
</div>
<!-- Add more above thie line! -->
</div>
<!-- ----------------------------------------->
<!-- SMALL INTRO -->
<div class="text-center my-3">
<p>Hello! Thanks for dropping by.</p>
</div>
<hr class="mt-4">
<!-- WILL DRAW -->
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Humanoids
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Pairings
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Original and canon characters
</li>
<!-- Add more above this line! -->
</ul>
<hr>
<!-- WON'T DRAW -->
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-times-circle text-danger"></i></span>I won't draw this
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-times-circle text-danger"></i></span>That
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-times-circle text-danger"></i></span>Or this
</li>
<!-- Add more above this line! -->
</ul>
<!-- CREDITS | Please do not remove! You can move it somewhere else but please keep credits in somewhere -->
<div class="text-center">
<a href="https://toyhou.se/20795714.f2u-lil-shop" class="faded text-muted tooltipster" title="Code by Sealkitty" style="font-size: 10px;">
<i class="far fa-heart"/>
</a>
</div>
</div>
</div>
<!-- /SIDEBAR ------------------------------------------------------->
<!-- CONTENT -------------------------------------------------------->
<div class="col-lg-8 p-3">
<!-- TOS -------------->
<div class="p-3 mb-4" style="border-radius: 10px; background: #fff;">
<div class="collapse" id="info">
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>State your terms here.
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Contact method? DM, Discord, email, etc?
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Which methods of payment do you accept?
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Estimated completion time?
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Do you provide refunds?
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Commercial Use or Personal Use only?
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Please credit where credit is due.
</li>
<!-- Add more above this line! -->
</ul>
</div>
<!-- BUTTON -------------------------------------->
<a class="btn btn-block btn-outline-info text-center" style="font-size: 12px; letter-spacing: 2px; border-radius: 10px;" data-toggle="collapse" href="#info">
<i class="fas fa-magnifying-glass mr-2"/>Read Terms of Service
</a>
<!-- --------------------------------------------->
</div>
<!-- /TOS ------------->
<!-- ORDER FORM ------->
<div class="p-3 mb-4" style="border-radius: 10px; background: #fff;">
<h3>Order Form</h3>
<hr>
<ul>
<li class="my-1">Style / Type:</li>
<li class="my-1">Pose / Expression:</li>
<li class="my-1">Reference:</li>
<li class="my-1">Notes:</li>
<li class="my-1">Payment method:</li>
</ul>
</div>
<!-- /ORDER FORM ------>
<!-- ART -------------->
<div class="p-3" style="border-radius: 10px; background: #fff;">
<div class="row no-gutters">
<!-- STYLE 1 -->
<div class="col-lg-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="w-100" style="height: 200px; object-fit: cover; border-radius: 10px;">
</div>
<!-- DETAILS -->
<h3>Style 1</h3>
<div class="d-flex justify-content-between my-1">
<span class="faded">Bust</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Half body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Full body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Add chara</span>
<span>$$</span>
</div>
</div>
<!-- ---------->
<!-- STYLE 2 -->
<div class="col-lg-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1590419690008-905895e8fe0d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80" class="w-100" style="height: 200px; object-fit: cover; border-radius: 10px;">
</div>
<!-- DETAILS -->
<h3>Style 2</h3>
<div class="d-flex justify-content-between my-1">
<span class="faded">Bust</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Half body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Full body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Add chara</span>
<span>$$</span>
</div>
</div>
<!-- ---------->
<!-- STYLE 3 -->
<div class="col-lg-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1611267254323-4db7b39c732c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" class="w-100" style="height: 200px; object-fit: cover; border-radius: 10px;">
</div>
<!-- DETAILS -->
<h3>Style 3</h3>
<div class="d-flex justify-content-between my-1">
<span class="faded">Bust</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Half body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Full body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Add chara</span>
<span>$$</span>
</div>
</div>
<!-- ---------->
<!-- STYLE 4 -->
<div class="col-lg-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1601237638872-e940f51ed6bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="w-100" style="height: 200px; object-fit: cover; border-radius: 10px;">
</div>
<!-- DETAILS -->
<h3>Style 4</h3>
<div class="d-flex justify-content-between my-1">
<span class="faded">Bust</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Half body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Full body</span>
<span>$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Add chara</span>
<span>$$</span>
</div>
</div>
<!-- ---------->
<!-- Add more above this line! -->
</div>
</div>
<!-- /ART ------------->
</div>
<!-- /CONTENT ------------------------------------------------------->
</div>
</div>