<!---------------------------------
BIT [F2U]
COLOURS:
- White: #fff
- Black: #000
--------------------------------->
<div class="container p-0" style="max-width:500px;">
<!-- HEADER -->
<div class="col-12 p-0">
<div class="card rounded-0 p-1" style="background-color:#000; border:1px solid #000; color:#fff">
<span class="fa-stack fa-inverse fa-sm">
<i class="fal fa-square fa-stack-2x"></i>
<i class="fas fa-question fa-stack-1x"></i>
</span>
</div>
</div>
<!-- CONTENT BOX -->
<div class="col-12 p-0">
<div class="card rounded-0 p-1" style="background-color:#fff; border:1px solid #000; color:#000;">
<!-- PSA BOX; If you don't want this, add 'hide' to "class="col-12 p-1" below. -->
<div class="col-12 p-1">
<div class="row no-gutters">
<div class="card col-1 rounded-0 p-2 justify-content-center" style="background-color:#000; color:#fff; border-radius:5px 0px 0px 5px">
<i class="text-center fas fa-thumbtack fa-bounce"></i>
</div>
<div class="card col-11 rounded-0 p-4 text-center" style="background-color:#fff; border:1px solid #000; border-radius:0px 5px 5px 0px; font-size:13px;">
<p>psa, important message, quote, etc; expands when you type!<br>looks best with 1-2 lines. <i>maybe</i> 3 lines, but it's up to you!</p>
</div>
</div>
</div>
<!-- ABOUT BOX -->
<div class="row no-gutters">
<div class="col-7 p-1">
<!-- FIRST -->
<div class="card rounded-0 p-1 text-uppercase font-weight-bold" style="background-color:#000; color:#fff; border:1px #000 solid; border-width:1px 1px 0px 1px; font-size:13px; border-radius:5px 5px 0px 0px;">
<span>
<i class="fas fa-user fa-sm pl-1 pr-1"></i>
<span>about:</span>
</span>
</div>
<!-- If you don't want this box to scroll, and you want it to expand when you type, remove "height:150px; overflow:auto;" from the style section! -->
<div class="card rounded-0 p-3" style="height:150px; overflow:auto; background-color:#fff; border:1px solid #000; font-size:13px; border-radius:0px 0px 5px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a arcu lorem. Suspendisse vel est ultrices, convallis orci eget, hendrerit augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ligula erat, pharetra id metus eget, eleifend vulputate turpis. Pellentesque egestas, ipsum quis efficitur sagittis, est leo tincidunt purus, non facilisis risus velit in urna.</p>
</div>
<!-- FIRST; END -->
<!-- SECOND; If you don't want this, just delete it! -->
<div class="card mt-1 rounded-0 p-1 text-uppercase font-weight-bold" style="background-color:#000; color:#fff; border:1px #000 solid; border-width:1px 1px 0px 1px; font-size:13px; border-radius:5px 5px 0px 0px;">
<span>
<i class="fas fa-warning fa-sm pl-1 pr-1"></i>
<span>DO NOT INTERACT IF:</span>
</span>
</div>
<!-- If you don't want this box to scroll, and you want it to expand when you type, remove "height:150px; overflow:auto;" from the style section! -->
<div class="card rounded-0 p-3" style="height:150px; overflow:auto; background-color:#fff; border:1px solid #000; font-size:13px; border-radius:0px 0px 5px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a arcu lorem. Suspendisse vel est ultrices, convallis orci eget, hendrerit augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ligula erat, pharetra id metus eget, eleifend vulputate turpis. Pellentesque egestas, ipsum quis efficitur sagittis, est leo tincidunt purus, non facilisis risus velit in urna.</p>
</div>
<!-- SECOND; END -->
</div>
<!-- SIDEBAR IMAGE; The image's height expands with the lefthand side, so be careful not to make it too long! -->
<div class="col-5 p-1">
<div class="card border-0 h-100" style="background-image:url(IMG_URL); background-size:cover; background-position:center;"></div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="col-12 p-0">
<div class="card rounded-0 p-1" style="background-color:#000; border:1px solid #000; color:#fff">
<div class="row no-gutters">
<!-- SOCIALS SECTION -->
<div class="col-6">
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<a href="CARRD_URL" style="color:#fff;"><i class="fas fa-id-card fa-stack-1x"></i></a>
</span>
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<a href="DA_URL" style="color:#fff;"><i class="fa-brands fa-deviantart fa-stack-1x"></i></a>
</span>
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<a href="TWITTER_URL" style="color:#fff;"><i class="fa-brands fa-twitter fa-stack-1x"></i></a>
</span>
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<a href="INSTA_URL" style="color:#fff;"><i class="fa-brands fa-instagram fa-stack-1x"></i></a>
</span>
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<a href="TUMBLR_URL" style="color:#fff;"><i class="fa-brands fa-tumblr fa-stack-1x"></i></a>
</span>
<span class="fa-stack fa-inverse fa-sm" style="margin-right:-10px;">
<i class="fal fa-square fa-stack-2x"></i>
<i class="fa-brands fa-discord fa-stack-1x tooltipster" title="name#0000"></i>
</span>
</div>
<!-- CREDITS SECTION; Do not tamper or remove the code credit.-->
<div class="col-6 text-right">
<span class="fa-stack fa-inverse fa-sm">
<i class="fal fa-square fa-stack-2x"></i>
<a href="/itemlabel" style="color:#fff;"><i class="fas fa-code fa-stack-1x"></i></a>
</span>
</div>
</div>
</div>
</div>
</div>