[USER] Minimal butterflies
created by:FlowerlyRat
HTMLCustom ColorsUser
Copy
<!--
December 2023 Coders' Quarters || Layout challenge: crossing
Minimal butterflies: code by FlowerlyRat || Images from various ressources [clickable links to each]
Accent color: #a2b85d
Card background color [rgb value]: 37, 26, 38
to replace everything at once, highlight the part you want to change, then do ctrl+F and replace it with the desired color
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BACKGROUND IMAGE AND CREDIT
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Background-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background-color: #1c141d; background-image: url(https://i.pinimg.com/564x/13/51/eb/1351eb077f9e7f57c41202e499e47b6d.jpg); background-size: cover; background-position: center; filter: blur(5px); z-index: -1"></div>
<!--Background credit-->
<a href="https://fineartamerica.com/featured/yellow-butterfly-on-pink-flowers-garry-gay.html?epik=dj0yJnU9Ykc1Nmo1R3VreE5DMWdOUktuLThpbmV3ZmotVFBQcHcmcD0wJm49Vjlhb2xNaVFWVFQzMHlwVk5tUjNIQSZ0PUFBQUFBR1dDeGxB" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Garry Gay [Fine Art America]" style="position: absolute; top: 0px; left: 10px; color: #a2b85d; z-index: 5"></i></a>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MAIN PROFILE CODE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center p-3" style="margin-left: -15px; margin-right: -15px; color: #fff; overflow: hidden">
<div class="my-4" style="max-width: 800px">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TOP ROW [Includes profile picture, banner, links and music player]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROFILE PICTURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8)">
<div class="row no-gutters">
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up fa-flip-horizontal">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
<div class="col-auto card rounded-0 p-1 m-auto" style="border-color: #403640; background-color: #1c141d; height: 167px; width: 167px">
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903584-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; top: -42px; left: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/584/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; transform: rotate(30deg)"></a>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROFILE PICTURE IMAGE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////IMAGE NEEDS TO BE A SQUARE TO AVOID BEING SQUISHED////////-->
<img class="img-thumbnail rounded-0 tooltipster" style="height: 157px; width: 157px; border-width: 2px; border-color: #a2b85d; background-color: #1c141d" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png"
title="Art by --- [platform]">
</div>
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; animation-delay: 2s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; animation-delay: 1s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
</div>
</div>
</div>
<!--===Image end===-->
<!--===Right===-->
<div class="col-sm mt-auto">
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8); height: 100px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.pngwing.com/en/free-png-ybdau" style="z-index: 5" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75045664_xSpFsjgzk1Mn77G.png" style="position: absolute; top: 30px; left: -35px; width: 70px; transform: rotate(330deg); filter: brightness(120%)"></a>
<!--Decorative butterfly end-->
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: #a2b85d;">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
USERNAME
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto" style="position: absolute; top: -50px; left: -25px; z-index: 5"><p style="font-family: Garamond, serif; font-weight: bold; font-size: 40px; text-shadow: 0 1px 0 #1c141d, 0 -1px 0 #1c141d, 1px 0 0 #1c141d, -1px 0 0 #1c141d, 1px 1px 0 #1c141d, -1px -1px 0 #1c141d, -1px 1px 0 #1c141d, 1px -1px 0 #1c141d">
Username</p></div>
<!--/////USERNAME end/////-->
<div class="card rounded-0 border-0" style="overflow: hidden">
<!--Credit to image below-->
<a href="https://unsplash.com/fr/photos/un-bouquet-de-marguerites-blanches-et-jaunes-dans-un-champ-g13htuLK2HY" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Meriç Tuna [unsplash]" style="position: absolute; top: 2px; left: 2px; color: #a2b85d; opacity: 0.7; z-index: 5"></i></a>
<!--Link to image below--><!--Change the "top" and "left" variable to show the part of the image you want--><!--You can also play with the hue, saturation, and brightness of the picture-->
<img style="top: 0px; left: 0px; min-width: 100%; filter: hue-rotate(340deg) saturate(180%) brightness(150%)"
src="https://images.unsplash.com/photo-1684711945687-b6e312c93d87?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
</div>
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LINKS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<div class="col m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px">
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Links</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters">
<!--Feel free to replace or delete links! Just keep in mind it should not be more than 8 or the code will break on mobile!-->
<!--Link 1-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Website/carrd"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-globe"></i>
</div>
</div>
<!--Link 1 end-->
<!--Link 2-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Instagram"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-instagram"></i>
</div>
</div>
<!--Link 2 end-->
<!--Link 3-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Twitter/X"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-twitter"></i>
</div>
</div>
<!--Link 3 end-->
<!--Link 4-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="DISCORD_HANDLE"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-discord"></i>
</div>
</div>
<!--Link 4 end-->
<!--Link 5-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Tumblr"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-tumblr"></i>
</div>
</div>
<!--Link 5 end-->
<!--Link 6-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Art Fight"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-pencil-paintbrush"></i>
</div>
</div>
<!--Link 6 end-->
<!--Link 7-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Ko-Fi"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-coffee"></i>
</div>
</div>
<!--Link 7 end-->
<!--Link 8-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Trello"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-trello"></i>
</div>
</div>
<!--Link 8 end-->
</div>
</div>
</div>
<!--Links end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUSIC PLAYER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px; width: 75px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: #a2b85d;">
<div class="card bg-transparent border-0 rounded-0 m-auto tooltipster"
title="Title - Artist">
<!--Song name + artist right above-->
<i class="fat fa-spinner-third fa-spin" style="position: absolute; top: -8px; left: -9px; font-size: 35px; color:#ffd96e"></i>
<i class="fad fa-play" style="margin-left: 1.5px;font-size: 20px; color: #a2b85d">
<span>
<iframe class="flex-fill" style="position: absolute; top: -13px; left: -16px; width: 45px; height: 45px; opacity: 0.005; z-index: 5;" frameborder="0" src="
https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!--ONLY REPLACE "VIDEOID" WITH THE SERIES OF LETTERS AND NUMBERS FOUND AFTER "watch?v=" ON THE VIDEO LINK-->
</iframe>
</span>
</i>
</div>
</div>
</div>
</div>
</div>
<!--Music end-->
</div>
</div>
<!--===Right===-->
</div>
<!--===///TOP ROW end///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BOTTOME ROW [includes the about me section, featured mutual, featured characters and art status]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--===Left===-->
<div class="col-sm-4 m-1">
<!--Decorative flowers-->
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 25s; position: absolute; top: -20px; right: -15px; width: 40px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 15s; position: absolute; top: -20px; right: 30px; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 5s; position: absolute; top: 25px; right: -6px; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<!--Decorative flowers end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ABOUT ME SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 mb-2 pt-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">About me</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 245px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(162, 184, 93, 1) rgba(0, 0, 0, 0)">
<!--===TEXT===-->
<p class="text-justify">
This is a text box to write a bit about yourself and things you like! This box scrolls so you can write as MUCH as you want!!! <span style="text-decoration: line-through">And bonus point, the scrolling sidebar on computer is hidden and covered with that green div on the side to look prettier and better fit the code's aesthetic!<br>
Had to sacrifice the text being centered for that sadly,,, sorry if it annoys you 😔</span> SCROLLBAR NOW HAS AN ACTUAL CUSTOM COLOR YIPPEE!
</p>
<!--===TEXT end===-->
</div>
</div>
</div>
<!--===About section end===-->
<div class="col-sm">
<!--===DECORATIVE + CODE CREDITS===-->
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8)">
<a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" targer="_blank"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74755183_ZKVKFTLfv6QnXvu.png?1703356398" class="tooltipster" data-placement="top" title="Code by FlowerlyRat"></a>
</div>
<!--===DECORATIVE + CODE CREDITS end===-->
<div class="row no-gutters">
<div class="col-sm m-1 order-md-2">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903580-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; bottom: -10px; right: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/580/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; filter: brightness(110%)"></a>
<!--Decorative butterfly end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ART STATUS SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 pt-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Art status</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 182px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(162, 184, 93, 1) rgba(0, 0, 0, 0)">
<!--===STATUS: COMMS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between mt-2 mb-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_COMM_SHEET_HERE">
<span class="ml-n2">
Commissions</span><i style="margin-top: 2px;" class="fas
fa-check
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: COMMS end===-->
<!--===STATUS: TRADES===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_TRADE_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Trades</span><i style="margin-top: 2px;" class="fas
fa-question
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: TRADES end===-->
<!--===STATUS: REQUESTS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="disabled nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_REQUEST_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Requests</span><i style="margin-top: 2px;" class="fas
fa-cancel
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: REQUESTS end===-->
<!--===STATUS: REQUESTS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_REQUEST_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Optional additional slot</span><i style="margin-top: 2px;" class="fas
fa-question
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: REQUESTS end===-->
</div>
</div>
</div>
<!--===Art status end===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUTUAL FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-auto m-1">
<div class="card border-0 rounded-0 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decorative flowers-->
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -10px; z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 30px; filter: hue-rotate(50deg) saturate(150%) brightness(70%)"></a>
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -13px; transform: rotate(20deg); z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 20px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a>
<!--Decorative flowers end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Featured mutuals</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters mt-auto">
<!--===Mutual 1===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 1 end===-->
<!--===Mutual 2===-->
<div class="col mx-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 2 end===-->
<!--===Mutual 3===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 3 end===-->
<!--===Mutual 4===-->
<div class="col ml-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 4 end===-->
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 p-2 mt-1" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decoraive butterfly-->
<a href="https://www.pngegg.com/en/png-fxeid" target="_blank" style="position: absolute; top: -8px; left: -10px; transform: rotate(40deg); z-index: 5">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a>
<!--Decoraive butterfly end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Featured characters</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters mt-auto">
<!--===Character 1===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 1 end===-->
<!--===Character 2===-->
<div class="col mx-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 2 end===-->
<!--===Character 3===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 3 end===-->
<!--===Character 4===-->
<div class="col ml-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 4 end===-->
</div>
</div>
</div>
<!--===Friend feature end===-->
</div>
</div>
</div>
<!--===///BOTTOM ROW end///===-->
</div>
</div>Copy
<!--
December 2023 Coders' Quarters || Layout challenge
Minimal butterflies: code by FlowerlyRat || Images from various ressources
Accent color: {{c!Color!}}
Card background color [rgba value]: 37, 26, 38
to replace everything at once, highlight the part you want to change, then do ctrl+F and replace it with the desired color
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BACKGROUND IMAGE AND CREDIT
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Background-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background-color: #1c141d; background-image: url(https://i.pinimg.com/564x/13/51/eb/1351eb077f9e7f57c41202e499e47b6d.jpg); background-size: cover; background-position: center; filter: blur(5px); z-index: -1"></div>
<!--Background credit-->
<a href="https://fineartamerica.com/featured/yellow-butterfly-on-pink-flowers-garry-gay.html?epik=dj0yJnU9Ykc1Nmo1R3VreE5DMWdOUktuLThpbmV3ZmotVFBQcHcmcD0wJm49Vjlhb2xNaVFWVFQzMHlwVk5tUjNIQSZ0PUFBQUFBR1dDeGxB" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Garry Gay [Fine Art America]" style="position: absolute; top: 0px; left: 10px; color: {{c!Color!}}; z-index: 5"></i></a>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MAIN PROFILE CODE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center p-3" style="margin-left: -15px; margin-right: -15px; color: #fff; overflow: hidden">
<div class="my-4" style="max-width: 800px">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TOP ROW [Includes profile picture, banner, links and music player]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROFILE PICTURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8)">
<div class="row no-gutters">
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up fa-flip-horizontal">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
<div class="col-auto card rounded-0 p-1 m-auto" style="border-color: #403640; background-color: #1c141d; height: 167px; width: 167px">
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903584-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; top: -42px; left: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/584/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; transform: rotate(30deg)"></a>
<!--////////IMAGE NEEDS TO BE A SQUARE TO AVOID BEING SQUISHED////////-->
<img class="img-thumbnail rounded-0 tooltipster" style="height: 157px; width: 157px; border-width: 2px; border-color: {{c!Color!}}; background-color: #1c141d" src="
{{u!Profile picture link!}}"
title="{{!Profile picture credit!}}">
</div>
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; animation-delay: 2s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; animation-delay: 1s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
</div>
</div>
</div>
<!--===Image end===-->
<!--===Right===-->
<div class="col-sm mt-auto">
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8); height: 100px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.pngwing.com/en/free-png-ybdau" style="z-index: 5" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75045664_xSpFsjgzk1Mn77G.png" style="position: absolute; top: 30px; left: -35px; width: 70px; transform: rotate(330deg); filter: brightness(120%)"></a>
<!--Decorative butterfly end-->
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: {{c!Color!}};">
<!--/////USERNAME/////-->
<div class="col-auto" style="position: absolute; top: -50px; left: -25px; z-index: 5"><p style="font-family: Garamond, serif; font-weight: bold; font-size: 40px; text-shadow: 0 1px 0 #1c141d, 0 -1px 0 #1c141d, 1px 0 0 #1c141d, -1px 0 0 #1c141d, 1px 1px 0 #1c141d, -1px -1px 0 #1c141d, -1px 1px 0 #1c141d, 1px -1px 0 #1c141d">
{{!Username!}}</p></div>
<!--/////USERNAME end/////-->
<div class="card rounded-0 border-0" style="overflow: hidden">
<!--Credit to image below-->
<a href="https://unsplash.com/fr/photos/un-bouquet-de-marguerites-blanches-et-jaunes-dans-un-champ-g13htuLK2HY" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Meriç Tuna [unsplash]" style="position: absolute; top: 2px; left: 2px; color: {{c!Color!}}; opacity: 0.7; z-index: 5"></i></a>
<!--Link to image below--><!--Change the "top" and "left" variable to show the part of the image you want--><!--You can also play with the hue, saturation, and brightness of the picture-->
<img style="top: 0px; left: 0px; min-width: 100%; filter: hue-rotate(340deg) saturate(180%) brightness(150%)"
src="https://images.unsplash.com/photo-1684711945687-b6e312c93d87?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
</div>
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LINKS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<div class="col m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px">
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 {{c!Color!}}">Links</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, {{c!Color!}}, {{c!Color!}}, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters">
<!--Feel free to replace or delete links! Just keep in mind it should not be more than 7 or the code will break!-->
{{%Platforms max 8%
<!--Link 1-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: {{c!Color!}}">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="{{u%Social link%}}"
title="{{%Social name%}}"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="{{i%Social FA icon%}}"></i>
</div>
</div>
<!--Link 1 end-->
%end%}}
</div>
</div>
</div>
<!--Links end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUSIC PLAYER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px; width: 75px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: {{c!Color!}};">
<div class="card bg-transparent border-0 rounded-0 m-auto tooltipster"
title="{{!Song title + artist!}}">
<!--Song name + artist right above-->
<i class="fat fa-spinner-third fa-spin" style="position: absolute; top: -8px; left: -9px; font-size: 35px; color:#ffd96e"></i>
<i class="fad fa-play" style="margin-left: 1.5px;font-size: 20px; color: {{c!Color!}}">
<span>
<iframe class="flex-fill" style="position: absolute; top: -13px; left: -16px; width: 45px; height: 45px; opacity: 0.005; z-index: 5;" frameborder="0" src="
https://www.youtube.com/embed/{{!YouTube video ID!}}?ps=docs&controls=1">
<!--ONLY REPLACE "VIDEOID"-->
</iframe>
</span>
</i>
</div>
</div>
</div>
</div>
</div>
<!--Music end-->
</div>
</div>
<!--===Right===-->
</div>
<!--===///TOP ROW end///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BOTTOME ROW [includes the about me section, featured mutual, featured characters and]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--===Left===-->
<div class="col-sm-4 m-1">
<!--Decorative flowers-->
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 25s; position: absolute; top: -20px; right: -15px; width: 40px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 15s; position: absolute; top: -20px; right: 30px; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 5s; position: absolute; top: 25px; right: -6px; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<!--Decorative flowers end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ABOUT ME SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 mb-2 pt-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 {{c!Color!}}">About me</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, {{c!Color!}}, {{c!Color!}}, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 245px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: {{c!Color!}} rgba(0, 0, 0, 0)">
<!--===TEXT===-->
<p class="text-justify">
{{l!About me section!}}
</p>
<!--===TEXT end===-->
</div>
</div>
</div>
<!--===About section end===-->
<div class="col-sm">
<!--===DECORATIVE + CODE CREDITS===-->
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8)">
<a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" targer="_blank"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74755183_ZKVKFTLfv6QnXvu.png?1703356398" class="tooltipster" data-placement="top" title="Code by FlowerlyRat"></a>
</div>
<!--===DECORATIVE + CODE CREDITS end===-->
<div class="row no-gutters">
<div class="col-sm m-1 order-md-2">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903580-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; bottom: -10px; right: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/580/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; filter: brightness(110%)"></a>
<!--Decorative butterfly end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IDK SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 pt-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 {{c!Color!}}">Art status</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, {{c!Color!}}, {{c!Color!}}, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 182px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: {{c!Color!}} rgba(0, 0, 0, 0)">
<!--===STATUS: COMMS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="{{!Comms: add ||disbled|| to disable the button!}} nav-link btn btn-outline-warning rounded-0 justify-content-between mt-2 mb-3" style="border-color: {{c!Color!}}; box-shadow: none"
href="{{u!Commission link!}}">
<span class="ml-n2">
Commissions</span><i style="margin-top: 2px;" class="fas
{{i!Comms FA icons [fa-cancel, fa-question, or fa-check!}}
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: COMMS end===-->
<!--===STATUS: TRADES===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="{{!Trade: add ||disbled|| to disable the button!}} nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: {{c!Color!}}; box-shadow: none"
href="{{u!Trade form/bulletin line!}}">
<span class="ml-n2">
Trades</span><i style="margin-top: 2px;" class="fas
{{i!Trades FA icons [fa-cancel, fa-question, or fa-check!}}
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: TRADES end===-->
<!--===STATUS: REQUESTS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="{{!Reqs: add ||disbled|| to disable the button!}} nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: {{c!Color!}}; box-shadow: none"
href="{{u!Request form/bulletin line!}}">
<span class="ml-n2">
Requests</span><i style="margin-top: 2px;" class="fas
{{i!Requests FA icons [fa-cancel, fa-question, or fa-check!}}
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: REQUESTS end===-->
{{%Optional slot%
<!--===STATUS: OPTIONAL===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="{{%Reqs: add ||disbled|| to disable the button%}} nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: {{c!Color!}}; box-shadow: none"
href="{{u%Opt slot form/bulletin line%}}">
<span class="ml-n2">
Optional additional slot</span><i style="margin-top: 2px;" class="fas
{{i%Opt slot FA icons [fa-cancel, fa-question, or fa-check%}}
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: OPTIONAL end===-->
%end%}}
</div>
</div>
</div>
<!--===Idk end===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUTUAL FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===Mutual feature===-->
<div class="col-sm-auto m-1">
<div class="card border-0 rounded-0 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decorative flowers-->
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -10px; z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 30px; filter: hue-rotate(50deg) saturate(150%) brightness(70%)"></a>
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -13px; transform: rotate(20deg); z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 20px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a>
<!--Decorative flowers end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 {{c!Color!}}">Featured mutuals</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, {{c!Color!}}, {{c!Color!}}, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters mt-auto">
{{%Featured mutuals max 4%
<!--Mutual 1-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="{{u%Mutual link%}}" target="_blank">
<!--Image + tooltip below-->
<img src="
{{u%Mutual image link%}}
" title="{{%Mutual name%}}"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: {{c!Color!}}; object-fit: cover" >
</a>
</div>
<!--Mutual 1 end-->
%end%}}
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 p-2 mt-1" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decoraive butterfly-->
<a href="https://www.pngegg.com/en/png-fxeid" target="_blank" style="position: absolute; top: -8px; left: -10px; transform: rotate(40deg); z-index: 5">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a>
<!--Decoraive butterfly end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 {{c!Color!}}">Featured characters</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, {{c!Color!}}, {{c!Color!}}, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters mt-auto">
{{%Featured characters max 4%
<!--Character 1-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="{{u%Character link%}}">
<!--Image + tooltip below-->
<img src="
{{u%Character image link%}}
" title="{{%Character name%}}"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: {{c!Color!}}; object-fit: cover" >
</a>
</div>
<!--Character 1 end-->
%end%}}
</div>
</div>
</div>
<!--===Friend feature end===-->
</div>
</div>
</div>
<!--===///BOTTOM ROW end///===-->
</div>
</div>
Copy
<!--
December 2023 Coders' Quarters || Layout challenge: crossing
Minimal butterflies: code by FlowerlyRat || Images from various ressources [clickable links to each]
Accent color: #a2b85d
Card background color [rgb value]: 37, 26, 38
to replace everything at once, highlight the part you want to change, then do ctrl+F and replace it with the desired color
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BACKGROUND IMAGE AND CREDIT
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Background-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background-color: #1c141d; background-image: url(https://i.pinimg.com/564x/13/51/eb/1351eb077f9e7f57c41202e499e47b6d.jpg); background-size: cover; background-position: center; filter: blur(5px); z-index: -1"></div>
<!--Background credit-->
<a href="https://fineartamerica.com/featured/yellow-butterfly-on-pink-flowers-garry-gay.html?epik=dj0yJnU9Ykc1Nmo1R3VreE5DMWdOUktuLThpbmV3ZmotVFBQcHcmcD0wJm49Vjlhb2xNaVFWVFQzMHlwVk5tUjNIQSZ0PUFBQUFBR1dDeGxB" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Garry Gay [Fine Art America]" style="position: absolute; top: 0px; left: 10px; color: #a2b85d; z-index: 5"></i></a>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MAIN PROFILE CODE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center p-3" style="margin-left: -15px; margin-right: -15px; color: #fff; overflow: hidden">
<div class="my-4" style="max-width: 800px">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
TOP ROW [Includes profile picture, banner, links and music player]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROFILE PICTURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8)">
<div class="row no-gutters">
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up fa-flip-horizontal">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
<div class="col-auto card rounded-0 p-1 m-auto" style="border-color: #403640; background-color: #1c141d; height: 167px; width: 167px">
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903584-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; top: -42px; left: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/584/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; transform: rotate(30deg)"></a>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROFILE PICTURE IMAGE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////IMAGE NEEDS TO BE A SQUARE TO AVOID BEING SQUISHED////////-->
<img class="img-thumbnail rounded-0 tooltipster" style="height: 157px; width: 157px; border-width: 2px; border-color: #a2b85d; background-color: #1c141d" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png"
title="Art by --- [platform]">
</div>
<!--Decorative-->
<div class="col m-3 align-items-center hidden-sm-up">
<ul class="list-unstyled my-auto">
<li class="justify-content" style="position: absolute; top: 90px; transform: rotate(20deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; animation-delay: 2s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content" style="position: absolute; top: 50px; right: 15px; transform: rotate(340deg); z-index: 1"><a href="https://www.pngegg.com/en/png-fxeid" target="_blank">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 10s; animation-delay: 1s; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a></li>
<li class="justify-content-center" style="animation-duration: 20s; position: absolute; bottom: -24px"><a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 50px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a></li>
</ul>
</div>
<!--Decorative end-->
</div>
</div>
</div>
<!--===Image end===-->
<!--===Right===-->
<div class="col-sm mt-auto">
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8); height: 100px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.pngwing.com/en/free-png-ybdau" style="z-index: 5" target="_blank">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75045664_xSpFsjgzk1Mn77G.png" style="position: absolute; top: 30px; left: -35px; width: 70px; transform: rotate(330deg); filter: brightness(120%)"></a>
<!--Decorative butterfly end-->
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: #a2b85d;">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
USERNAME
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto" style="position: absolute; top: -50px; left: -25px; z-index: 5"><p style="font-family: Garamond, serif; font-weight: bold; font-size: 40px; text-shadow: 0 1px 0 #1c141d, 0 -1px 0 #1c141d, 1px 0 0 #1c141d, -1px 0 0 #1c141d, 1px 1px 0 #1c141d, -1px -1px 0 #1c141d, -1px 1px 0 #1c141d, 1px -1px 0 #1c141d">
Username</p></div>
<!--/////USERNAME end/////-->
<div class="card rounded-0 border-0" style="overflow: hidden">
<!--Credit to image below-->
<a href="https://unsplash.com/fr/photos/un-bouquet-de-marguerites-blanches-et-jaunes-dans-un-champ-g13htuLK2HY" target="_blank"><i class="fas fa-image-polaroid tooltipster" data-placement="top" title="By Meriç Tuna [unsplash]" style="position: absolute; top: 2px; left: 2px; color: #a2b85d; opacity: 0.7; z-index: 5"></i></a>
<!--Link to image below--><!--Change the "top" and "left" variable to show the part of the image you want--><!--You can also play with the hue, saturation, and brightness of the picture-->
<img style="top: 0px; left: 0px; min-width: 100%; filter: hue-rotate(340deg) saturate(180%) brightness(150%)"
src="https://images.unsplash.com/photo-1684711945687-b6e312c93d87?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
</div>
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LINKS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<div class="col m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px">
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Links</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters">
<!--Feel free to replace or delete links! Just keep in mind it should not be more than 8 or the code will break on mobile!-->
<!--Link 1-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Website/carrd"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-globe"></i>
</div>
</div>
<!--Link 1 end-->
<!--Link 2-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Instagram"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-instagram"></i>
</div>
</div>
<!--Link 2 end-->
<!--Link 3-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Twitter/X"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-twitter"></i>
</div>
</div>
<!--Link 3 end-->
<!--Link 4-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="DISCORD_HANDLE"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-discord"></i>
</div>
</div>
<!--Link 4 end-->
<!--Link 5-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Tumblr"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-tumblr"></i>
</div>
</div>
<!--Link 5 end-->
<!--Link 6-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Art Fight"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-pencil-paintbrush"></i>
</div>
</div>
<!--Link 6 end-->
<!--Link 7-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Ko-Fi"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fas fa-coffee"></i>
</div>
</div>
<!--Link 7 end-->
<!--Link 8-->
<div class="col justify-content-center">
<!--Social media link below-->
<div class="card bg-transparent p-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 30px; font-size: px; color:#ffd96e; border-color: #a2b85d">
<a style="position: absolute; top: 0; bottom: 0; width: 100%"
href="LINK_HERE"
title="Trello"
target="_blank" class="btn btn-outline-warning p-1 border-0 rounded-0 tooltipster"></a>
<i class="fab fa-trello"></i>
</div>
</div>
<!--Link 8 end-->
</div>
</div>
</div>
<!--Links end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUSIC PLAYER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto m-1">
<div class="card border-0 rounded-0 p-2" style="background-color: rgba(37, 26, 38, 0.8); height: 75px; width: 75px">
<div class="card rounded-0 p-1 h-100" style="border-color: #403640; background-color: #1c141d">
<div class="card rounded-0 p-1 h-100" style="background-color: #1c141d; border-width: 2px; border-color: #a2b85d;">
<div class="card bg-transparent border-0 rounded-0 m-auto tooltipster"
title="Title - Artist">
<!--Song name + artist right above-->
<i class="fat fa-spinner-third fa-spin" style="position: absolute; top: -8px; left: -9px; font-size: 35px; color:#ffd96e"></i>
<i class="fad fa-play" style="margin-left: 1.5px;font-size: 20px; color: #a2b85d">
<span>
<iframe class="flex-fill" style="position: absolute; top: -13px; left: -16px; width: 45px; height: 45px; opacity: 0.005; z-index: 5;" frameborder="0" src="
https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!--ONLY REPLACE "VIDEOID" WITH THE SERIES OF LETTERS AND NUMBERS FOUND AFTER "watch?v=" ON THE VIDEO LINK-->
</iframe>
</span>
</i>
</div>
</div>
</div>
</div>
</div>
<!--Music end-->
</div>
</div>
<!--===Right===-->
</div>
<!--===///TOP ROW end///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BOTTOME ROW [includes the about me section, featured mutual, featured characters and art status]
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters">
<!--===Left===-->
<div class="col-sm-4 m-1">
<!--Decorative flowers-->
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 25s; position: absolute; top: -20px; right: -15px; width: 40px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 15s; position: absolute; top: -20px; right: 30px; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<a href="https://www.vecteezy.com/png/14033597-white-daisy-transparent" target="_blank"><img class="tooltipster my-2 fa-spin fa-spin-reverse" data-placement="top" title="By Love Mandala [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/014/033/597/non_2x/white-daisy-transparent-free-png.png" style="animation-duration: 5s; position: absolute; top: 25px; right: -6px; width: 20px; filter: hue-rotate(340deg) saturate(90%) brightness(110%); transform: rotate(30deg); z-index: 5"></a>
<!--Decorative flowers end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ABOUT ME SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 mb-2 pt-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">About me</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 245px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(162, 184, 93, 1) rgba(0, 0, 0, 0)">
<!--===TEXT===-->
<p class="text-justify">
This is a text box to write a bit about yourself and things you like! This box scrolls so you can write as MUCH as you want!!! <span style="text-decoration: line-through">And bonus point, the scrolling sidebar on computer is hidden and covered with that green div on the side to look prettier and better fit the code's aesthetic!<br>
Had to sacrifice the text being centered for that sadly,,, sorry if it annoys you 😔</span> SCROLLBAR NOW HAS AN ACTUAL CUSTOM COLOR YIPPEE!
</p>
<!--===TEXT end===-->
</div>
</div>
</div>
<!--===About section end===-->
<div class="col-sm">
<!--===DECORATIVE + CODE CREDITS===-->
<div class="card border-0 rounded-0 p-2 m-1" style="background-color: rgba(37, 26, 38, 0.8)">
<a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" targer="_blank"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74755183_ZKVKFTLfv6QnXvu.png?1703356398" class="tooltipster" data-placement="top" title="Code by FlowerlyRat"></a>
</div>
<!--===DECORATIVE + CODE CREDITS end===-->
<div class="row no-gutters">
<div class="col-sm m-1 order-md-2">
<!--Decorative butterfly-->
<a class="fa-flip-horizontal" href="https://www.vecteezy.com/png/12903580-botanical-zinnia-flower-and-leaf-isolated-on-transparent-background" target="_blank" style="position: absolute; bottom: -10px; right: -30px; z-index: 5">
<img class="tooltipster" data-placement="top" title="By Maenjari Studio [vecteezy]" src="https://static.vecteezy.com/system/resources/previews/012/903/580/non_2x/botanical-zinnia-flower-and-leaf-isolated-on-transparent-background-free-png.png" style="width: 70px; filter: brightness(110%)"></a>
<!--Decorative butterfly end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ART STATUS SECTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 pt-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--Header-->
<div class="row no-gutters align-items-center px-2 pb-2">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Art status</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0 px-3 pb-3" style="height: 182px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(162, 184, 93, 1) rgba(0, 0, 0, 0)">
<!--===STATUS: COMMS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between mt-2 mb-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_COMM_SHEET_HERE">
<span class="ml-n2">
Commissions</span><i style="margin-top: 2px;" class="fas
fa-check
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: COMMS end===-->
<!--===STATUS: TRADES===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_TRADE_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Trades</span><i style="margin-top: 2px;" class="fas
fa-question
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: TRADES end===-->
<!--===STATUS: REQUESTS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="disabled nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_REQUEST_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Requests</span><i style="margin-top: 2px;" class="fas
fa-cancel
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: REQUESTS end===-->
<!--===STATUS: REQUESTS===-->
<!--To disable a button, add "disabled" in the "a class"-->
<a class="nav-link btn btn-outline-warning rounded-0 justify-content-between my-3" style="border-color: #a2b85d; box-shadow: none"
href="LINK_TO_REQUEST_FORM_OR_BULLETIN_HERE">
<span class="ml-n2">
Optional additional slot</span><i style="margin-top: 2px;" class="fas
fa-question
mr-n2"></i></a>
<!--Change the icon above: fa-cancel, fa-question, or fa-check-->
<!--===STATUS: REQUESTS end===-->
</div>
</div>
</div>
<!--===Art status end===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUTUAL FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-6 m-1">
<div class="card border-0 rounded-0 pt-2 px-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decorative flowers-->
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -10px; z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 30px; filter: hue-rotate(50deg) saturate(150%) brightness(70%)"></a>
<a href="https://www.pngwing.com/en/free-png-sdrzi" target="_blank" style="position: absolute; bottom: 0; right: -13px; transform: rotate(20deg); z-index: 1">
<img class="tooltipster" data-placement="top" title="From pngwing" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75083392_WfeCgMCz4amHVJr.png" style="width: 20px; filter: hue-rotate(50deg) saturate(150%) brightness(90%)"></a>
<!--Decorative flowers end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Featured mutuals</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; overflow-y: hidden; overflow-x: hidden">
<div class="row no-gutters flex-nowrap pb-1" style="margin-bottom: -50px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(162, 184, 93, 1) rgba(0, 0, 0, 0)">
<!--===Mutual 1===-->
<div class="col-3 mr-1 mb-2 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 1 end===-->
<!--===Mutual 2===-->
<div class="col-3 mr-1 mb-2 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 2 end===-->
<!--===Mutual 3===-->
<div class="col-3 mr-1 mb-2 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 3 end===-->
<!--===Mutual 4===-->
<div class="col-3 mr-1 mb-2 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE" target="_blank">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="MUTUAL_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Mutual 4 end===-->
</div>
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0 p-2 mt-1" style="background-color: rgba(37, 26, 38, 0.8); height: 110px">
<!--Decoraive butterfly-->
<a href="https://www.pngegg.com/en/png-fxeid" target="_blank" style="position: absolute; top: -8px; left: -10px; transform: rotate(40deg); z-index: 5">
<img class="tooltipster fa-flip" data-placement="top" title="From pngegg" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75046508_WI4DUC8ozyfgWcs.png?1703081679" style="animation-duration: 20s; width: 30px; filter: hue-rotate(340deg) saturate(90%) brightness(110%)"></a>
<!--Decoraive butterfly end-->
<!--Header-->
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-family: Garamond, serif; font-size: 20px; text-shadow: 0 1.5px 0 #a2b85d">Featured characters</p></div>
<div class="col border-0 rounded-0 mt-1 ml-1" style="height: 2px; background: linear-gradient(to right, #a2b85d, #a2b85d, rgba(0,0,0,0))"></div>
</div>
<!--Header end-->
<div class="row no-gutters mt-auto">
<!--===Character 1===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 1 end===-->
<!--===Character 2===-->
<div class="col mx-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 2 end===-->
<!--===Character 3===-->
<div class="col justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 3 end===-->
<!--===Character 4===-->
<div class="col ml-1 justify-content-center">
<!--Profile link below-->
<a href="PROFILE_LINK_HERE">
<!--Image + tooltip below-->
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" title="OC_NAME"
class="btn btn-outline-warning p-1 rounded-0 tooltipster" style="width: 60px; height: 60px; border-color: #a2b85d; object-fit: cover" >
</a>
</div>
<!--===Character 4 end===-->
</div>
</div>
</div>
<!--===Friend feature end===-->
</div>
</div>
</div>
<!--===///BOTTOM ROW end///===-->
</div>
</div>