<!-------
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
CARDS BOOTSTRAP VERSION
-------->
<center>
<div class="p-2 mx-auto" style="background-size:50%;max-width:800px" >
<div class="row no-gutters mx-auto">
<!------------------------
LEFT PART
------------------------->
<div class="col-sm-4 order-sm-1 order-2 p-2 mt-sm-0 mt-1">
<i class="fas fa-crown mb-2 text-secondary" style="font-size:40px"></i>
<div class="card bg-faded p-3">
<div class="card p-3 overflow-auto" style="height:200px">
<!------------------------
FRIENDS
or you could turn it into designers you like
------------------------->
<div style="position:sticky;top:0">
<div class="card bg-faded p-2 mb-3" style="font-family:georgia,serif">FRIENDS</div>
</div>
<p class="text-sm-left">
<i class="far fa-star"></i> @ username
<br>
<i class="far fa-star"></i> @ username
<br>
<i class="far fa-star"></i> @ username
<br>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</p>
</div>
</div>
<div class="card bg-faded p-3 mt-3">
<div class="card p-3 overflow-auto" style="height:200px">
<!------------------------
DNI
(Do not interact)
------------------------->
<div style="position:sticky;top:0">
<div class="card bg-faded p-2 mb-3" style="font-family:georgia,serif">DNI</div>
</div>
<p class="text-left">
<i class="far fa-chevron-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<i class="far fa-chevron-right"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<br>
<i class="far fa-chevron-right"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
<br>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</p>
</div>
<div class="card p-3 mt-3 overflow-auto" style="height:200px">
<!------------------------
BYI
(Before you interact)
------------------------->
<div style="position:sticky;top:0">
<div class="card bg-faded p-2 mb-3" style="font-family:georgia,serif">BYI</div>
</div>
<p class="text-left">
<i class="far fa-chevron-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<i class="far fa-chevron-right"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<br>
<i class="far fa-chevron-right"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
<br>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</p>
</div>
</div>
<div class="card bg-faded p-3 mt-3">
<!------------------------
COMMISSION INFO
to change the icon just
copy the one you want and
paste it in the place of the
other one
OPEN:
<i class="fas fa-square-check text-success pull-right mt-1 tooltipster" data-toggle="tooltip" title="OPEN" target="_BLANK"></i>
ASK:
<i class="fas fa-square-question text-warning pull-right mt-1 tooltipster" data-toggle="tooltip" title="ASK" target="_BLANK"></i>
CLOSED:
<i class="fas fa-square-xmark text-danger pull-right mt-1 tooltipster" data-toggle="tooltip" title="CLOSED" target="_BLANK"></i>
------------------------->
<div class="card p-3 overflow-auto" style="height:195px">
<p class="text-left">
COMMISSIONS
<i class="fas fa-square-check text-success pull-right mt-1 tooltipster" data-toggle="tooltip" title="OPEN" target="_BLANK"></i>
<br>
ART TRADES
<i class="fas fa-square-question text-warning pull-right mt-1 tooltipster" data-toggle="tooltip" title="ASK" target="_BLANK"></i>
<br>
REQUESTS
<i class="fas fa-square-xmark text-danger pull-right mt-1 tooltipster" data-toggle="tooltip" title="CLOSED" target="_BLANK"></i>
<br>
<!--------ADD/DELETE ABOVE THIS LINE-------->
<div class="card card-inverse" style="border-style: solid none none none;"></div>
<p class="my-auto mb-0" style="font-family:georgia,serif;">
<!------------------------
TOS, PRICES & TO DO LIST LINKS
------------------------->
<a href="TOS LINK">TOS</a>
•
<a href="PRICES LINK">PRICES</a>
•
<a href="TODO LIST LINK">TO-DO</a>
</p>
</p>
</div>
</div>
</div>
<!------------------------
CENTER PART
------------------------->
<div class="col-sm-6 order-sm-2 order-1 p-2">
<div class="card bg-faded p-3">
<!------------------------
ICON
------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="max-width:200px" class="img-thumbnail rounded-circle bg-faded">
<!------------------------
NAME, AGE & STUFF
------------------------->
<p class="mt-2 mb-1" style="font-size:30px;font-family:georgia,serif">NAME</p>
<p class="text-secondary mb-3"> age • pronouns •
thing</p>
</div>
<div class="card bg-faded p-3 mt-3">
<div class="card p-3 px-4 text-justify overflow-auto" style="max-height:300px">
<!------------------------
ABOUT SECTION
------------------------->
<div style="position:sticky;top:0">
<div class="text-center p-2 card bg-faded mb-3" style="font-family:georgia,serif;font-size:16px">
BIO
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<div class="card p-3 mt-4">
<div class="card bg-faded p-2 mb-3">
<!------------------------
FEATURED CHARACTERS
------------------------->
<a href="CHARACTER LINK" style="font-family:georgia,serif;font-size:16px">
CHARACTER NAME
</a>
</div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="img-thumbnail" style="width:200px">
</div>
</div>
</div>
<!------------------------
RIGHT PART
------------------------->
<div class="col-sm-2 order-3 p-2">
<!------------------------
IMAGE 1
------------------------->
<img style="object-fit:cover;height:400px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69994553_auBY0xbp614DA3B.png" class="img-thumbnail mb-2 w-100">
<!------------------------
IMAGE 2
------------------------->
<img style="object-fit:cover;height:300px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69994553_auBY0xbp614DA3B.png" class="img-thumbnail mb-2 w-100">
<!------------------------
IMAGE 3
------------------------->
<img style="object-fit:cover;height:278px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69994553_auBY0xbp614DA3B.png" class="img-thumbnail mb-2 w-100">
</div>
</div>
<!------------------------
CREDIT, DO NOT REMOVE
------------------------->
<div class="row no-gutters">
<div class="col mx-3"><hr class="card card-inverse" style="border-style: solid none none none;"></div>
<div class="col-auto"><a href="https://toyhou.se/clownii"><i class="far fa-star mt-2"></i></a></div>
<div class="col mx-3"><hr class="card card-inverse" style="border-style: solid none none none;"></div>
</div>
</div>
</center>
