<!-- THIS CODE USES CUSTOM COLORS
==============================================
41. || Witching || F2U
==============================================
ACCENT COLOR == #6c599b
CONTENT BOXES BG == #cac3dc
TEXT COLOR == #1b1727
Use CTRL+F to quickly find & replace the colors!
-->
<div class="py-5">
<div class="container card p-2 py-2 rounded-0 border-0" style="max-width: 680px; color: #1b1727;">
<hr class="w-100 mb-1" style="border-width: 4px; border-color: #6c599b;">
<hr class="w-100 mt-2" style="border-width: 4px; border-color: #6c599b;">
<div class="card rounded-0 border-0"
style="background-color: #6c599b;">
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0; background-image: url('https://www.toptal.com/designers/subtlepatterns/uploads/checkerboard-cross.png'); mix-blend-mode: luminosity; opacity: .6;"></div>
<div class="card rounded-0 bg-transparent p-2 border-top-0 border-bottom-0" style="border: solid 10px; border-color: rgba(255,255,255, .5);">
<div class="row no-gutters">
<!--
========================================================================
LEFT PART (USER AVATAR + LINKS + INTRO)
========================================================================
-->
<div class="col-12 col-lg-5 px-2 px-lg-4 pb-lg-3 flex-column">
<!--
====================================
USER IMAGE
====================================
-->
<div class="card mt-n5 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-3 mt-n5" style="color: #6c599b;">
<i class="fas fa-hat-witch fa-8x hidden-md-down" style="position: absolute; transform: rotate(52deg); top: -40px; right: -70px;"></i>
<i class="fas fa-flask-round-potion fa-2x" style="position: absolute; right: -5px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fad fa-cat fa-5x" style="position: absolute; right: 20px; bottom: 0px;"></i>
<i class="fas fa-books fa-4x" style="position: absolute; left: -5px; bottom: 0px;"></i>
<div class="p-2" style="border: solid 3px #6c599b;">
<div style="height: 190px;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
====================================
SOCIAL LINKS
====================================
-->
<div class="row justify-content-around mt-3 px-3" style="font-size: 22px;">
<!-- SOCIAL LINK -->
<a style="color: #6c599b;"
href="LINK_HERE">
<i class="fab fa-twitter"></i>
</a>
<!-- SOCIAL LINK -->
<a style="color: #6c599b;"
href="LINK_HERE">
<i class="fab fa-tumblr"></i>
</a>
<!-- SOCIAL LINK -->
<a style="color: #6c599b;"
href="LINK_HERE">
<i class="fab fa-instagram"></i>
</a>
<!-- SOCIAL LINK -->
<a style="color: #6c599b;"
href="LINK_HERE">
<i class="fab fa-telegram"></i>
</a>
<!-- SOCIAL LINK -->
<a class="tooltipster" style="color: #6c599b;"
title="Name#xxxx">
<i class="fab fa-discord"></i>
</a>
<!-- YOU CAN ADD MORE LINKS/DELETE SOME ABOVE -->
</div>
<!--
====================================
LITTLE DESCRIPTION
====================================
-->
<div class="card rounded-0 mt-2 p-2 d-block d-lg-flex" style="font-size: 14px; border: double 2px; border-top-width: 6px; border-right-width: 6px; border-color: rgba(255,255,255, .6); background-color: #cac3dc; min-height: 96px;">
<div style="flex: 1 1 0; overflow-y: auto;">
<p>
Write a little desc/intro. Just a few sentences will do.
</p>
</div>
</div>
</div>
<!--
========================================================================
RIGHT PART (ALL THE MAIN INFORMATION + NAVIGATION BUTTONS)
========================================================================
-->
<div class="col-12 col-lg-7 flex-column p-2 pb-lg-0 pr-lg-3 pl-lg-2 pt-4">
<!--
====================================
DECORATIONS ROW (HIDDEN ON MOBILE)
====================================
-->
<div class="row no-gutters justify-content-between mx-n2 mb-3 mt-n5 hidden-md-down" style="color: #6c599b;">
<!-- FA ICON == You ca replace "mistletoe" with another icon name -->
<i class="fas fa-mistletoe fa-2x"></i>
<i class="fas fa-mistletoe fa-2x"></i>
<i class="fas fa-mistletoe fa-2x"></i>
<i class="fas fa-mistletoe fa-2x"></i>
<i class="fas fa-mistletoe fa-2x"></i>
</div>
<!--
====================================
MAIN INFO CONTENT
====================================
-->
<div class="card rounded-0 mb-3 mb-lg-4" style="border: double 2px; border-left-width: 6px; border-bottom-width: 6px; border-color: rgba(255,255,255, .6); background-color: #cac3dc;">
<div class="tab-content">
<!--
=====================================================
BASIC INFORMATION
=====================================================
-->
<div class="tab-pane fade in active show p-2" style="height: 250px; overflow: auto;" id="intro">
<!--
================================================
BASICS
================================================
-->
<div class="row no-gutters">
<!-- PRONOUNS -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-comments fa-fw fa-2x" style="color: #6c599b; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
Cont/cont
</p>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-hourglass fa-fw fa-2x" style="color: #6c599b; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
Content
</p>
</div>
</div>
</div>
<!-- MBTI -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-head-side-brain fa-fw fa-2x" style="color: #6c599b; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
XXXX-X
</p>
</div>
</div>
</div>
<!-- SIGN -->
<div class="col-12 col-lg-6 mb-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center pr-1">
<i class="fad fa-star-shooting fa-fw fa-2x" style="color: #6c599b; font-size: 24px;"></i>
</div>
<div class="col align-items-center">
<p class="mb-0">
Content
</p>
</div>
</div>
</div>
</div>
<!--
================================================
LANGUAGE SECTION
================================================
-->
<div style="font-variant: small-caps;">
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4" style="font-size: 25px; color: #6c599b;"><i class="fad fa-language"></i>
I speak...
</p>
<!-- LANGUAGE BLOCK -->
<div class="row no-gutters my-1 ml-2">
<span class="px-2" style="color: #6c599b; border-left: solid 3px; border-color: rgba(255,255,255, .3);">
language:
</span>
<span>
level
</span>
</div>
<!-- LANGUAGE BLOCK -->
<div class="row no-gutters my-1 ml-2">
<span class="px-2" style="color: #6c599b; border-left: solid 3px; border-color: rgba(255,255,255, .3);">
language:
</span>
<span>
level
</span>
</div>
<!-- YOU CAN ADD MORE LANGUAGE BLOCKS ABOVE -->
</div>
<!--
================================================
PLEASE NOTE SECTION
================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: #6c599b;"><i class="fad fa-circle-info"></i>
Please note
</p>
<ul class="fa-ul">
<!-- NOTE ITEM -->
<li><span class="fa-li"><i class="fad fa-info" style="color: #6c599b;"></i></span>
Content
</li>
<!-- NOTE ITEM -->
<li><span class="fa-li"><i class="fad fa-info" style="color: #6c599b;"></i></span>
Content
</li>
<!-- NOTE ITEM -->
<li><span class="fa-li"><i class="fad fa-info" style="color: #6c599b;"></i></span>
Content
</li>
<!-- NOTE ITEM -->
<li><span class="fa-li"><i class="fad fa-info" style="color: #6c599b;"></i></span>
Content
</li>
<!-- YOU CAN ADD MORE NOTE ITEMS ABOVE -->
</ul>
</div>
<!--
================================================
DNI SECTION
================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: #6c599b;"><i class="fad fa-circle-xmark"></i>
DNI
</p>
<ul class="fa-ul">
<!-- DNI ITEM -->
<li><span class="fa-li"><i class="fad fa-xmark" style="color: #6c599b;"></i></span>
Content
</li>
<!-- DNI ITEM -->
<li><span class="fa-li"><i class="fad fa-xmark" style="color: #6c599b;"></i></span>
Content
</li>
<!-- DNI ITEM -->
<li><span class="fa-li"><i class="fad fa-xmark" style="color: #6c599b;"></i></span>
Content
</li>
<!-- DNI ITEM -->
<li><span class="fa-li"><i class="fad fa-xmark" style="color: #6c599b;"></i></span>
Content
</li>
<!-- YOU CAN ADD MORE DNI ITEMS ABOVE -->
</ul>
</div>
</div>
<!--
=====================================================
STATUS + LINKS + I DRAW + INTERESTS
=====================================================
-->
<div class="tab-pane fade" style="height: 250px; overflow: auto;" id="status">
<!--
=================================================
STATUS + LINKS
=================================================
-->
<div class="row no-gutters">
<!--
=================================================
STATUS INFO
=================================================
-->
<div class="col-12 col-lg-4 p-2 align-items-center">
<div class="w-100">
<!-- COMMISSIONS STATUS -->
<div class="text-center">
<p class="mb-n2">
commissions
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: #6c599b; font-size: 25px;">
open
</span>
</div>
<!-- DIVIDER -->
<hr class="mx-n2 my-1" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<!-- TRADES STATUS -->
<div class="text-center">
<p class="mb-n2">
trades
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: #6c599b; font-size: 25px;">
ask
</span>
</div>
<!-- DIVIDER -->
<hr class="mx-n2 my-1" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<!-- REQUESTS STATUS -->
<div class="text-center">
<p class="mb-n2">
requests
</p>
<span class="text-lowercase display-4" style="font-variant: small-caps; color: #6c599b; font-size: 25px;">
closed
</span>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="col-auto hidden-md-down" style="border-right: solid 1px; border-color: rgba(255,255,255, .3);"></div>
<!--
=================================================
CUSTOM LINKS
=================================================
-->
<div class="col-12 col-lg px-2 py-1 text-lowercase" style="font-variant: small-caps;">
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: #6c599b; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="LINK_HERE">
t.o.s.
</a>
</div>
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: #6c599b; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="LINK_HERE">
Commissions info
</a>
</div>
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: #6c599b; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="LINK_HERE">
UFT/UFS folder
</a>
</div>
<!-- LINK BUTTON -->
<div class="card rounded-0 bg-transparent border-0 text-center my-1">
<a class="btn rounded-0" style="background-color: #6c599b; color: #fff; border-right-width: 6px; border-color: rgba(255,255,255, .3);"
href="LINK_HERE">
Link name
</a>
</div>
</div>
</div>
<!-- DIVIDER -->
<hr class="mt-0 mb-1" style="border-color: rgba(255,255,255, .3);">
<!--
=================================================
I DRAW + INTERESTS
=================================================
-->
<div class="p-2">
<!--
=================================================
I DRAW
=================================================
-->
<div>
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: #6c599b;"><i class="fad fa-paintbrush"></i>
I draw...
</p>
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-pencil" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-pencil" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-pencil" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-pencil" style="color: #6c599b;"></i></span>
Content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
=================================================
INTERESTS
=================================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-variant: small-caps; font-size: 25px; color: #6c599b;"><i class="fad fa-circle-heart"></i>
Interests
</p>
<ul class="fa-ul">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-heart-half-stroke" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-heart-half-stroke" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-heart-half-stroke" style="color: #6c599b;"></i></span>
Content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fad fa-heart-half-stroke" style="color: #6c599b;"></i></span>
Content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
=====================================================
UPDATES INFORMATION
=====================================================
-->
<div class="tab-pane fade p-2" style="height: 250px; overflow: auto;" id="updates">
<!-- ADD THE NEWER BLOCKS BELOW -->
<!--
================================================
UPDATE BLOCK
================================================
-->
<div class="mb-2">
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b; font-variant: small-caps;"><i class="fad fa-calendar-day"></i>
month date year
</p>
<div class="ml-2 px-2 text-justify" style="border-left: solid 3px; border-color: rgba(255,255,255, .3); font-size: 13px;">
<p>
Text of the update. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
<!--
================================================
UPDATE BLOCK
================================================
-->
<div class="mb-2">
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b; font-variant: small-caps;"><i class="fad fa-calendar-day"></i>
month date year
</p>
<div class="ml-2 px-2 text-justify" style="border-left: solid 3px; border-color: rgba(255,255,255, .3); font-size: 13px;">
<p>
Text of the update. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
<!--
================================================
UPDATE BLOCK
================================================
-->
<div class="mb-2">
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b; font-variant: small-caps;"><i class="fad fa-calendar-day"></i>
month date year
</p>
<div class="ml-2 px-2 text-justify" style="border-left: solid 3px; border-color: rgba(255,255,255, .3); font-size: 13px;">
<p>
Text of the update. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
<!--
================================================
UPDATE BLOCK
================================================
-->
<div class="mb-2">
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b; font-variant: small-caps;"><i class="fad fa-calendar-day"></i>
month date year
</p>
<div class="ml-2 px-2 text-justify" style="border-left: solid 3px; border-color: rgba(255,255,255, .3); font-size: 13px;">
<p>
Text of the update. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
</div>
</div>
<!--
=====================================================
FEATURED CHARACTERS/FRIENDS
=====================================================
-->
<div class="tab-pane fade p-2" style="height: 250px; overflow: auto;" id="featured">
<!--
==============================================
FEATURED CHARACTER
==============================================
-->
<div>
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b;"><i class="fad fa-sparkles"></i>
Featured characters
</p>
<div class="row no-gutters justify-content-center">
<!--
====================================
CHARACTER BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-wheat"></i>
</div>
</div>
<!--
====================================
CHARACTER BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-wheat"></i>
</div>
</div>
<!--
====================================
CHARACTER BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-wheat"></i>
</div>
</div>
<!-- YOU CAN ADD MORE CHARACTER BLOCKS ABOVE -->
</div>
</div>
<!--
==============================================
FEATURED FRIENDS
==============================================
-->
<div>
<!-- DIVIDER -->
<hr class="mx-n2 my-2" style="border-width: 1px; border-color: rgba(255,255,255, .3);">
<p class="display-4 mb-2" style="font-size: 25px; color: #6c599b;"><i class="fad fa-cauldron"></i>
Friends
</p>
<div class="row no-gutters justify-content-center">
<!--
====================================
FRIEND BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-broom"></i>
</div>
</div>
<!--
====================================
FRIEND BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-broom"></i>
</div>
</div>
<!--
====================================
FRIEND BLOCK
====================================
-->
<div class="col-6 col-lg-4 p-1">
<div class="p-1 mb-1" style="border: solid 3px; border-color: rgba(255,255,255, .5);">
<a class="card rounded-0 bg-transparent border-0"
href="LINK_HERE"
style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
height: 100px;"></a>
</div>
<div class="text-center" style="background-color: #6c599b; color: #fff; border-right: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-broom"></i>
</div>
</div>
<!-- YOU CAN ADD MORE FRIEND BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
====================================
NAVIGATION ROW
====================================
-->
<div class="card rounded-0 border-0 bg-transparent mb-n3">
<div class="card rounded-0 border-0 p-3 mb-n5">
<div style="background-color: #6c599b; z-index: 3;">
<ul class="nav row no-gutters py-1">
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link py-1" style="color: rgba(255,255,255, .7)" data-toggle="tab" href="#intro">
<i class="fal fa-portrait"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#status">
<i class="fal fa-pencil-paintbrush"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#updates">
<i class="fal fa-newspaper"></i>
</a>
</li>
<li class="col-3 nav-item text-center" style="font-size: 20px;">
<a class="nav-link p-1" style="color: rgba(255,255,255, .7);" data-toggle="tab" href="#featured">
<i class="fal fa-users"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<hr class="w-100 mb-1" style="border-width: 4px; border-color: #6c599b; z-index: 2;">
<div class="row no-gutters mt-3 mt-lg-0">
<div class="card rounded-0 border-0 col-12 col-lg-auto text-center ml-lg-5 mt-lg-n3 px-2" style="z-index: 5;">
<a class="tooltipster" title="Code by ChiiAka" href="https://toyhou.se/ChiiAka" style="color: #6c599b; font-size: 18px; margin-top: -3px;">
<i class="fad fa-code"></i>
</a>
</div>
</div>
</div>
</div>
