[USER] Minimal butterflies
created by:FlowerlyRat
Custom ColorsHTMLUser
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">
<!--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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: #a2b85d; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 245px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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!!! 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 😔
</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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: #a2b85d; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 182px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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: OPTIONAL===-->
<!--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: OPTIONAL 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!}}">
<!--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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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!}}">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: {{c!Color!}}; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 245px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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!}}">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: {{c!Color!}}; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 182px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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">
<!--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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 245px; width: 20px; background-color: #a2b85d; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 245px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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!!! 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 😔
</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 p-2 mb-2" style="background-color: rgba(37, 26, 38, 0.8); overflow: hidden">
<!--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">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 border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: #fff"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 38px; right: -15px; height: 182px; width: 20px; background-color: #a2b85d; mix-blend-mode: multiply; z-index: 1"></div>
<div class="card bg-transparent border-0 rounded-0 pl-2" style="height: 182px; padding-right: 23px; margin-right: -20px; overflow-y: auto">
<!--===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: OPTIONAL===-->
<!--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: OPTIONAL end===-->
</div>
</div>
</div>
<!--===Art status end===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MUTUAL FEATURE
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-sm-6 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="card bg-transparent border-0 rounded-0" style="height: 300px; overflow-y: hidden; overflow-x: hidden">
<div class="row no-gutters flex-nowrap" style="margin-bottom: -50px; overflow-x: auto; overflow-y: hidden">
<!--===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>