SILK
created by:clowniicat
Custom ColorsHTMLUser
Copy
<!--==========================================
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
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
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")
Text-----------------#704241
Main colour----------#d2e1d7
Light box colour-----#fffcf5
DNI, BYI etc headers-#e8eee6
^^ text colour-------#96b5b4
==========================================-->
<div class="mx-auto p-2" style="max-width:800px;background-color:#d2e1d7;color:#704241">
<div class="row no-gutters">
<div class="col-lg-3 p-1">
<!--================================
ICON
================================-->
<div style="background-color:#fffcf5;background-position:center;background-size:cover;
;background-image:url('https://via.placeholder.com/500/fffcf5/d2e1d7');
;height:192px" class="p-1">
</div>
<!--================================
END OF ICON
================================-->
</div>
<div class="col-lg-9 p-1">
<div style="background-color:#fffcf5;mix-blend-mode:multiply">
<!--================================
BANNER
================================-->
<div style="background-position:center;background-size:cover;
;background-image:url('https://via.placeholder.com/1000/fffcf5/d2e1d7');
;height:96px"></div>
<!--================================
END OF BANNER
================================-->
</div>
<div class="row no-gutters mt-2">
<div class="col-10 pr-2">
<!--================================
SHORT QUOTE
================================-->
<div style="background-color:#fffcf5;height:88px" class="p-2 text-sm-left text-center">
"Quote or something, keep it short. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div>
<!--================================
END OF QUOTE
================================-->
</div>
<div class="col-2">
<div style="background-color:#fffcf5;height:88px" class="p-1">
<!--================================
LITTLE ICON NEXT TO QUOTE
find more icons here
[ https://fontawesome.com ]
================================-->
<i class="fas fa-paw fa-2xl ml-sm-2" style="position:absolute;top:50%;left:25%;font-size:30px"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-3 p-1">
<div style="background-color:#fffcf5;height:350px;overflow:auto" class="p-2">
<!--================================
DNI
================================-->
<div class="p-2 text-center rounded mb-2" style="background-color:#e8eee6;color:#96b5b4">
DNI
</div>
<!--================================
DNI LIST
add more <li> to add more list items
================================-->
<ul style="margin-left:-20px">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
<!--================================
END OF DNI LIST
================================-->
<!--================================
BYI
================================-->
<div class="p-2 text-center rounded mb-2" style="background-color:#e8eee6;color:#96b5b4">
BYI
</div>
<!--================================
BYI LIST
add more <li> to add more list items
================================-->
<ul style="margin-left:-20px">
<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>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</ul>
<!--================================
END OF BYI LIST
================================-->
</div>
</div>
<div class="col-sm-9 p-1">
<div class="row no-gutters">
<div class="col-12 mb-2">
<div style="background-color:#fffcf5;height:50px" class="p-1">
<!--================================
LINKS
you can delete and/or change ones you
dont have! dont just leave the links blank
================================-->
<p class="text-center" style="margin-top:10px">
<a href="INSTAGRAM_LINK" class="text-reset mx-1">
<i class="fas fa-brands fa-instagram"></i>
</a>
<a href="TWITTER_LINK" class="text-reset mx-1">
<i class="fas fa-brands fa-twitter"></i>
</a>
<a href="DEVIANTART_LINK" class="text-reset mx-1">
<i class="fas fa-brands fa-deviantart"></i>
</a>
<a href="CARRD_LINK" class="text-reset mx-1">
<i class="fas fa-id-card"></i>
</a>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</p>
<!--================================
END OF LINKS
================================-->
</div>
</div>
<div class="col-sm-7 pr-sm-1">
<!--================================
ABOUT/DESCRIPTION
================================-->
<div style="background-color:#fffcf5;height:142px;overflow:auto" class="p-2 mb-2">
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>
<!--================================
END OF DESCRIPTION
================================-->
<div style="background-color:#fffcf5;height:142px;overflow:auto" class="p-2">
<div class="row no-gutters">
<!--================================
COMM, AT & REQUEST SECTION
================================-->
<!--=======COMMISSIONS=======-->
<div class="col-6 pr-1">
<div class="p-2 text-center rounded mb-2" style="background-color:#e8eee6;color:#96b5b4">
COMMS
</div>
</div>
<div class="col-6 pl-1">
<div class="p-2 text-center rounded mb-2" style="color:#db8687">
OPEN
</div>
</div>
<!--=======ART TRADES=======-->
<div class="col-6 pr-1">
<div class="p-2 text-center rounded mb-2" style="background-color:#e8eee6;color:#96b5b4">
ART TRADES
</div>
</div>
<div class="col-6 pl-1">
<div class="p-2 text-center rounded mb-2" style="color:#e1d587">
ASK
</div>
</div>
<!--=======REQUESTS=======-->
<div class="col-6 pr-1">
<div class="p-2 text-center rounded mb-2" style="background-color:#e8eee6;color:#96b5b4">
REQUESTS
</div>
</div>
<div class="col-6 pl-1">
<div class="p-2 text-center rounded mb-2" style="color:#a2e389">
OPEN
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
END OF COMMS, AT & REQUESTS SECTION
================================-->
</div>
</div>
<div class="col-sm-5 pl-sm-1 mt-sm-0 mt-2">
<div style="background-color:#fffcf5;height:292px;overflow:auto"
class="pt-2 px-2">
<!--================================
FEATURED CHARACTERS
you can also put friends here and stuff
================================-->
<div class="p-1 mb-2" style="background-color:#e8eee6;color:#96b5b4">
<div class="row no-gutters">
<div class="col-sm-3 col-2">
<img style="height:50px;width:50px;object-fit:cover" src="https://via.placeholder.com/50/fffcf5/d2e1d7">
</div>
<div class="col-sm-9 col-10 pt-1">
<a href="CHARACTER_LINK" class="text-reset">FEATURED OC</a><br>
<span class="ml-2 faded">-sona</span>
</div>
</div>
</div>
<div class="p-1 mb-2" style="background-color:#e8eee6;color:#96b5b4">
<div class="row no-gutters">
<div class="col-sm-3 col-2">
<img style="height:50px;width:50px;object-fit:cover" src="https://via.placeholder.com/50/fffcf5/d2e1d7">
</div>
<div class="col-sm-9 col-10 pt-1">
<a href="CHARACTER_LINK" class="text-reset">FEATURED OC</a><br>
<span class="ml-2 faded">-comfort</span>
</div>
</div>
</div>
<div class="p-1 mb-2" style="background-color:#e8eee6;color:#96b5b4">
<div class="row no-gutters">
<div class="col-sm-3 col-2">
<img style="height:50px;width:50px;object-fit:cover" src="https://via.placeholder.com/50/fffcf5/d2e1d7">
</div>
<div class="col-sm-9 col-10 pt-1">
<a href="CHARACTER_LINK" class="text-reset">FEATURED OC</a><br>
<span class="ml-2 faded">-oc</span>
</div>
</div>
</div>
<div class="p-1 mb-2" style="background-color:#e8eee6;color:#96b5b4">
<div class="row no-gutters">
<div class="col-sm-3 col-2">
<img style="height:50px;width:50px;object-fit:cover" src="https://via.placeholder.com/50/fffcf5/d2e1d7">
</div>
<div class="col-sm-9 col-10 pt-1">
<a href="CHARACTER_LINK" class="text-reset">FEATURED OC</a><br>
<span class="ml-2 faded">-oc</span>
</div>
</div>
</div>
<div class="p-1 mb-2" style="background-color:#e8eee6;color:#96b5b4">
<div class="row no-gutters">
<div class="col-sm-3 col-2">
<img style="height:50px;width:50px;object-fit:cover" src="https://via.placeholder.com/50/fffcf5/d2e1d7">
</div>
<div class="col-sm-9 col-10 pt-1">
<a href="CHARACTER_LINK" class="text-reset">FEATURED OC</a><br>
<span class="ml-2 faded">-oc</span>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
<!--================================
END OF FEATURED CHARACTERS/PEOPLE
================================-->
</div>
</div>
</div>
</div>
<!--================================
CREDIT, DO NOT REMOVE
================================-->
<p class="text-sm-left text-center">
<a href="https://toyhou.se/clowniicat" class="text-reset">
<i class="fas fa-star ml-1"></i>
</a>
</p>
<!--================================
END OF CREDIT
================================-->
</div>