<!-------
CAT 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
------------------------------------------------------------------------
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
------------------------------------------------------------------------
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Main colour: #000000
Text: #ffffff
-------->
<div class="accordion md-accordion" id="accordionCAT" role="tablist" aria-multiselectable="true">
<div role="tab" id="startCAT">
<div style="max-width:600px" class="mx-auto">
<!------------------------
CAT EARS
------------------------->
<i class="fas fa-triangle ml-5" style="font-size:50px;color:#000000;"></i>
<i class="fas fa-triangle mr-5 pull-right" style="font-size:50px;color:#000000;"></i>
</div>
<div class="p-2 text-center mx-auto" style="background-color:#000000;height:200px;max-width:600px;margin-top:-10px">
<!------------------------
START SCREEN
------------------------->
<i class="fas" style="letter-spacing:5px;margin-left:100px;color:#ffffff">WELCOME !</i>
<br>
<a style="color:#ffffff;height:200px" data-toggle="collapse" data-parent="#accordionCAT" href="#expandCAT" aria-expanded="true"
aria-controls="expandCAT">
<!------------------------
PAW ICON
------------------------->
<i class="fas fa-paw fa-beat fa-2xl" style="margin-top:70px"></i>
</a>
</div>
</div>
</div>
<div id="expandCAT" class="collapse" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordionCAT" style="color:#ffffff">
<div class="p-2 text-center mx-auto" style="background-color:#000000;max-width:600px" id="collapseCAT">
<div class="accordion md-accordion text-left" id="accordion" role="tablist" aria-multiselectable="true">
<div>
<div class="p-3 mb-2 faded" role="tab" id="heading1">
<a data-toggle="collapse" data-parent="#accordion" href="#infoCAT" aria-expanded="true" aria-controls="infoCAT" style="color:#ffffff">
<div class="mb-0">
<!------------------------
ABOUT SECTION
------------------------->
<i class="fas" style="letter-spacing:5px">ABOUT</i>
</div>
</a>
</div>
<div id="infoCAT" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion">
<div class="p-3">
<!------------------------
BIO
you can remove the 'Hi I'm Name'
part, I just did it to use the
font awesome letters for the name
------------------------->
Hi! I'm <i class="fas ml-2 faded" style="letter-spacing:5px;">NAME</i>, 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.
<hr>
<div class="row no-gutters mt-4 ml-sm-5 ml-3">
<div class="col-6">
<!------------------------
INTERESTS SECTION
------------------------->
<i class="fas mx-2 faded" style="letter-spacing:5px">INTERESTS</i>
<ul style="list-style:square">
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</ul>
</div>
<div class="col-6">
<!------------------------
FRIENDS SECTION
------------------------->
<i class="fas mx-2 faded" style="letter-spacing:5px">FRIENDS</i>
<ul style="list-style:square">
<li>
clowniicat
</li>
<li>
clowniicat
</li>
<li>
clowniicat
</li>
<li>
clowniicat
</li>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="p-3 mb-2 faded" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion2" aria-expanded="false" aria-controls="accordion2" style="color:#ffffff">
<div class="mb-0">
<!------------------------
ART STATUS SECTION
------------------------->
<i class="fas" style="letter-spacing:5px">ART STATUS</i>
</div>
</a>
</div>
<div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion">
<div class="p-3">
<div class="row no-gutters">
<!------------------------
COMM INFO STUFF
------------------------->
<div class="col-6 text-uppercase">
<i class="fas" style="letter-spacing:5px">COMMISSIONS</i>
</div>
<div class="col-6 text-uppercase">
<i class="fas text-success" style="letter-spacing:5px">OPEN</i>
</div>
<div class="col-6 text-uppercase">
<i class="fas" style="letter-spacing:5px">ART TRADES</i>
</div>
<div class="col-6 text-uppercase">
<i class="fas text-warning" style="letter-spacing:5px">ASK</i>
</div>
<div class="col-6 text-uppercase">
<i class="fas" style="letter-spacing:5px">REQUESTS</i>
</div>
<div class="col-6 text-uppercase">
<i class="fas text-danger" style="letter-spacing:5px">CLOSED</i>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</div>
</div>
<hr>
<div class="text-center row no-gutters mx-auto mt-4">
<!------------------------
TOS, PRICES, ETC.
------------------------->
<a class="fas col" style="letter-spacing:5px;color:#ffffff" href="TOS LINK">
T.O.S.
</a>
<a class="fas col" style="letter-spacing:5px;color:#ffffff" href="PRICES LINK">
PRICES
</a>
<a class="fas col" style="letter-spacing:5px;color:#ffffff" href="EXAMPLES LINK">
EXAMPLES
</a>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</div>
<div>
<!------------------------
ADDITIONAL INFO
------------------------->
<i class="fas mx-2 mb-2 mt-4 faded" style="letter-spacing:5px">ADDITIONAL INFO</i>
<p>
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.
</p>
</div>
</div>
</div>
</div>
<div>
<div class="p-3 mb-2 faded" role="tab" id="heading3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion3" aria-expanded="false" aria-controls="accordion3" style="color:#ffffff;">
<div class="mb-0">
<!------------------------
DNI & BYI SECTION
------------------------->
<i class="fas" style="letter-spacing:5px">DNI & BYI</i>
</div>
</a>
</div>
<div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordion">
<div class="p-3">
<div class="row no-gutters ml-sm-5 ml-3">
<div class="col-6">
<!------------------------
BYI
(before you interact)
------------------------->
<i class="fas mx-2 faded" style="letter-spacing:5px">BYI</i>
<ul style="list-style:square;max-width:200px;max-height:150px" class="mt-2 overflow-auto">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<li>
Duis porta eros et velit blandit dapibus.
</li>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</ul>
</div>
<div class="col-6">
<!------------------------
DNI
(do not interact)
------------------------->
<i class="fas mx-2 faded" style="letter-spacing:5px">DNI</i>
<ul style="list-style:square;max-width:200px;max-height:150px" class="mt-2 overflow-auto">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<li>
Duis porta eros et velit blandit dapibus.
</li>
<!--------ADD/DELETE ABOVE THIS LINE-------->
</ul>
</div>
</div>
<hr>
<div>
<!------------------------
ADDITIONAL INFO
------------------------->
<i class="fas mx-2 mb-2 mt-4 faded" style="letter-spacing:5px">ADDITIONAL INFO</i>
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------
CAT TAIL
------------------------->
<div style="max-width:600px;margin-bottom:125px" class="mx-auto">
<i class="fas fa-s mr-5 pull-right" style="font-size:200px;color:#000000;margin-top:-75px;margin-right;z-index:-20"></i>
<!------------------------
CREDIT, DO NOT REMOVE
------------------------->
<a href="https://toyhou.se/clowniicat">
<i class="fas fa-star"></i>
</a>
</div>
<!------------------------
CODE END
you are the silliest of all bingusses
------------------------->