<!------------------------------
[ 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
---------->
<!-- WISHLIST -->
<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-sparkles mr-1"/>Wishlist
</a>
</div>
<!-- FOLDER -->
<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-tags mr-1"/>Adopts
</a>
</div>
<!-- COMMISSIONS -->
<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-dollar mr-1"/>Commissions
</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">
<!-- DO OFFER -->
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Money
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Art
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Trades or swaps
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-check-circle text-success"></i></span>Humanoids
</li>
<!-- Add more above this line! -->
</ul>
<hr>
<!-- DO NOT OFFER -->
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-times-circle text-danger"></i></span>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>Certain species
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-times-circle text-danger"></i></span>Certain style
</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">
<!-- INFO ------------->
<div class="p-3 mb-4" style="border-radius: 10px; background: #fff;">
<ul class="fa-ul">
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Please do not offer on characters outside of the sales/trades folder
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>I accept Paypal in USD
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Money takes priority
</li>
<li class="my-2">
<span class="fa-li"><i class="fas fa-info-circle text-info"></i></span>Leave a comment or DM me
</li>
<!-- Add more above this line! -->
</ul>
</div>
<!-- /INFO ------------>
<!-- DESIGNS ---------->
<div class="p-3" style="border-radius: 10px; background: #fff;">
<div class="row no-gutters">
<!-- 01 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- 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="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- 02 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- 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="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- 03 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- 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="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- 04 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- 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="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- 05 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1605199820234-0811f25a3b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- 06 -->
<div class="col-lg-4 col-md-6 p-2">
<!-- IMAGE -->
<div class="text-center mb-2">
<!-- Replace # with link to design -->
<a href="#">
<!-- Replace image link below to change image -->
<img src="https://images.unsplash.com/photo-1577879674193-f9340fd47115?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="fr-rounded" style="height: 150px; width: 150px; object-fit: cover;">
</a>
</div>
<!-- DETAILS -->
<div class="d-flex justify-content-between my-1">
<span class="faded">Designer</span>
<span>@ username</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Value</span>
<span>$$$</span>
</div>
<div class="d-flex justify-content-between my-1">
<span class="faded">Seeking</span>
<span>money / trade / art</span>
</div>
</div>
<!-- ----->
<!-- Add more above this line! -->
</div>
</div>
<!-- /DESIGNS --------->
</div>
<!-- /CONTENT ------------------------------------------------------->
</div>
</div>
</div>