<!-------
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 CUSTOM COLOUR VERSION
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, put them on toyhouse in the code editor, select the color you want to change, press the 3 dots to the right and press "find")
Main Boxes: #555555
Secondary Boxes: #333333
Text: #eeeeee
Secondary Text: #999999
Links: #2fb1ff
Dividers: #444444
Commission Info part:
Open: #a8e779
Ask: #d2d770
Closed: #fa7c7c
-------->
<center>
<div class="p-2 mx-auto" style="background-size:50%;max-width:800px;color:#eeeeee">
<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" style="font-size:40px;color:#999999"></i>
<div class="card p-3" style="background-color:#555555;">
<div class="card p-3 overflow-auto" style="height:200px;background-color:#333333;">
<!------------------------
FRIENDS
or you could turn it into designers you like
------------------------->
<div style="position:sticky;top:0">
<div class="card p-2 mb-3" style="font-family:georgia,serif;background-color:#555555;">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 p-3 mt-3" style="background-color:#555555;">
<div class="card p-3 overflow-auto" style="height:200px;background-color:#333333">
<!------------------------
DNI
(Do not interact)
------------------------->
<div style="position:sticky;top:0">
<div class="card p-2 mb-3" style="font-family:georgia,serif;background-color:#555555;">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;background-color:#333333;">
<!------------------------
BYI
(Before you interact)
------------------------->
<div style="position:sticky;top:0">
<div class="card p-2 mb-3" style="font-family:georgia,serif;background-color:#555555;">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 p-3 mt-3" style="background-color:#555555;">
<!------------------------
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 pull-right mt-1 tooltipster" style="color:#a8e779" data-toggle="tooltip" title="OPEN" target="_BLANK"></i>
ASK:
<i class="fas fa-square-question pull-right mt-1 tooltipster" style="color:#d2d770" data-toggle="tooltip" title="ASK" target="_BLANK"></i>
CLOSED:
<i class="fas fa-square-xmark pull-right mt-1 tooltipster" style="color:#fa7c7c" data-toggle="tooltip" title="CLOSED" target="_BLANK"></i>
------------------------->
<div class="card p-3 overflow-auto" style="height:195px;background-color:#333333;">
<p class="text-left">
COMMISSIONS
<i class="fas fa-square-check pull-right mt-1 tooltipster" style="color:#a8e779" data-toggle="tooltip" title="OPEN" target="_BLANK"></i>
<br>
ART TRADES
<i class="fas fa-square-question pull-right mt-1 tooltipster" style="color:#d2d770" data-toggle="tooltip" title="ASK" target="_BLANK"></i>
<br>
REQUESTS
<i class="fas fa-square-xmark pull-right mt-1 tooltipster" style="color:#fa7c7c" 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;border-color:#444444"></div>
<p class="my-auto mb-0" style="font-family:georgia,serif;">
<!------------------------
TOS, PRICES & TO DO LIST LINKS
------------------------->
<a href="TOS LINK" style="color:#2fb1ff">TOS</a>
•
<a href="PRICES LINK" style="color:#2fb1ff">PRICES</a>
•
<a href="TODO LIST LINK" style="color:#2fb1ff">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 p-3" style="background-color:#555555;">
<!------------------------
ICON
------------------------->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="max-width:200px;background-color:#555555;border:1px solid #999999" class="img-thumbnail rounded-circle">
<!------------------------
NAME, AGE & STUFF
------------------------->
<p class="mt-2 mb-1" style="font-size:30px;font-family:georgia,serif">NAME</p>
<p class="mb-3" style="color:#999999"> age • pronouns •
thing</p>
</div>
<div class="card p-3 mt-3" style="background-color:#555555;">
<div class="card p-3 px-4 text-justify overflow-auto" style="max-height:300px;background-color:#333333;">
<!------------------------
ABOUT SECTION
------------------------->
<div style="position:sticky;top:0">
<div class="text-center p-2 card mb-3" style="font-family:georgia,serif;font-size:16px;background-color:#555555;">
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" style="background-color:#333333;">
<div class="card p-2 mb-3" style="background-color:#555555;">
<!------------------------
FEATURED CHARACTERS
------------------------->
<a href="CHARACTER LINK" style="font-family:georgia,serif;font-size:16px;color:#2fb1ff">
CHARACTER NAME
</a>
</div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" class="img-thumbnail" style="width:200px;background-color:#333333;border:1px solid #999999">
</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" style="border:1px solid #999999" class="img-thumbnail mb-2 w-100 bg-transparent">
<!------------------------
IMAGE 2
------------------------->
<img style="object-fit:cover;height:300px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69994553_auBY0xbp614DA3B.png" style="border:1px solid #999999" class="img-thumbnail mb-2 w-100 bg-transparent">
<!------------------------
IMAGE 3
------------------------->
<img style="object-fit:cover;height:278px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/69994553_auBY0xbp614DA3B.png" style="border:1px solid #999999" class="img-thumbnail mb-2 w-100 bg-transparent">
</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;border-color:#444444"></div>
<div class="col-auto"><a href="https://toyhou.se/clownii" style="color:#2fb1ff"><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;border-color:#444444"></div>
</div>
</div>
</center>
