<!------------------------------
** 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
-------------------------------->
<!-- Tip: If you're posting this as a character, remove " margin: -22px; " otherwise it'll just overlap and clip through things -->
<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;">
Sales & Trades
</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-1514517521153-1be72277b32f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&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
-->
<!-- BUTTON 01 | Replace # with a link -->
<div class="col-6">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fas fa-star mr-2"></i>Wishlist
</a></div>
<!-- ------------>
<!-- BUTTON 02 | Replace # with a link -->
<div class="col-6">
<a href="#" class="btn btn-block btn-outline-primary border-0 p-1 my-1" style="font-size: 13px;">
<i class="fas fa-tag mr-2"></i>UFS/T Folder
</a></div>
<!-- ----------->
<!-- Add move 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">
<!-- INFO ------------->
<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>Information</div>
</div>
<ul class="my-1">
<li class="my-2">Please do not offer on characters outside of the sales/trades folder</li>
<li class="my-2">I accept Paypal in USD</li>
<li class="my-2">Money takes priority</li>
<li class="my-2">Leave a comment or DM me</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
<!-- LOOKING FOR ------>
<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>Looking for</div>
</div>
<ul class="my-1">
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- -------------->
<!-- NOT LOOKING FOR -->
<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>Not looking for</div>
</div>
<ul class="my-1">
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<li class="my-2">Content</li>
<!-- Add more above this line -->
</ul>
</div>
<!-- ------------------>
</div>
</div>
<!-- ------------------------------------------------------------>
</div>
<!-- -------------------------------------------------------------->
<!-- DESIGNS ------------------------------------------------------>
<div class="row no-gutters p-2">
<!-- 01 --------------------------------------------------------->
<div class="col-lg-3 mx-auto p-2">
<!-- Replace the URL in the brackets ( ) -->
<div class="mx-auto mb-2" style="height: 220px; border-radius: 6px;
background: url(https://images.pexels.com/photos/6798334/pexels-photo-6798334.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) center no-repeat; background-size: cover;">
<!-- Replace the # with a link to the design -->
<a href="#" class="btn btn-block btn-outline-secondary border-0 faded" style="border-radius: 6px; height: 100%; width: 100%;"></a>
</div>
<!-- DESIGNER -->
<div class="d-flex justify-content-between my-1">
<span>Designer</span>
<span class="text-right">@ username</span>
</div>
<!-- SPECIES -->
<div class="d-flex justify-content-between my-1">
<span>Species</span>
<span class="text-right">info</span>
</div>
<!-- VALUE -->
<div class="d-flex justify-content-between my-1">
<span>Value</span>
<span class="text-right">$$</span>
</div>
<!-- SEEKING -->
<div class="d-flex justify-content-between my-1">
<span>Seeking</span>
<span class="text-right">money / trade / art</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: 220px; border-radius: 6px;
background: url(https://images.pexels.com/photos/325526/pexels-photo-325526.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) center no-repeat; background-size: cover;">
<!-- Replace the # with a link to the design -->
<a href="#" class="btn btn-block btn-outline-secondary border-0 faded" style="border-radius: 6px; height: 100%; width: 100%;"></a>
</div>
<!-- DESIGNER -->
<div class="d-flex justify-content-between my-1">
<span>Designer</span>
<span class="text-right">@ username</span>
</div>
<!-- SPECIES -->
<div class="d-flex justify-content-between my-1">
<span>Species</span>
<span class="text-right">info</span>
</div>
<!-- VALUE -->
<div class="d-flex justify-content-between my-1">
<span>Value</span>
<span class="text-right">$$</span>
</div>
<!-- SEEKING -->
<div class="d-flex justify-content-between my-1">
<span>Seeking</span>
<span class="text-right">money / trade / art</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: 220px; border-radius: 6px;
background: url(https://images.pexels.com/photos/1289363/pexels-photo-1289363.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) center no-repeat; background-size: cover;">
<!-- Replace the # with a link to the design -->
<a href="#" class="btn btn-block btn-outline-secondary border-0 faded" style="border-radius: 6px; height: 100%; width: 100%;"></a>
</div>
<!-- DESIGNER -->
<div class="d-flex justify-content-between my-1">
<span>Designer</span>
<span class="text-right">@ username</span>
</div>
<!-- SPECIES -->
<div class="d-flex justify-content-between my-1">
<span>Species</span>
<span class="text-right">info</span>
</div>
<!-- VALUE -->
<div class="d-flex justify-content-between my-1">
<span>Value</span>
<span class="text-right">$$</span>
</div>
<!-- SEEKING -->
<div class="d-flex justify-content-between my-1">
<span>Seeking</span>
<span class="text-right">money / trade / art</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: 220px; border-radius: 6px;
background: url(https://images.pexels.com/photos/1191639/pexels-photo-1191639.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) center no-repeat; background-size: cover;">
<!-- Replace the # with a link to the design -->
<a href="#" class="btn btn-block btn-outline-secondary border-0 faded" style="border-radius: 6px; height: 100%; width: 100%;"></a>
</div>
<!-- DESIGNER -->
<div class="d-flex justify-content-between my-1">
<span>Designer</span>
<span class="text-right">@ username</span>
</div>
<!-- SPECIES -->
<div class="d-flex justify-content-between my-1">
<span>Species</span>
<span class="text-right">info</span>
</div>
<!-- VALUE -->
<div class="d-flex justify-content-between my-1">
<span>Value</span>
<span class="text-right">$$</span>
</div>
<!-- SEEKING -->
<div class="d-flex justify-content-between my-1">
<span>Seeking</span>
<span class="text-right">money / trade / art</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>
</div>
