AAAA

<!--------------------

POKAR MENU: F2U

Yooou! this is my first code! ^^

How to use it? Just create a folder and set it to your default folder, then put this code in there!

(If you have questions feel free to comment!)

-- -- -- -- -- -- -- -- -- -- -- -- -- --

- Anything you need to edit is marked

- Feel free to change/frankenstein any elements to your needs!

- Don't remove all the coder credits!

- Turn the WYSIWYG off while editing -- this enables code view

- If you have any feedback on using this code, please let me know! ^^

-Comment if you are using this code!

-- -- -- -- -- -- -- -- -- -- -- -- -- --

-------------------->

<div class="fixed-bottom p-2" style="absolute;top:0px;bottom:0px;left:0px;">

<!--- SET THE BACKGROUND ----->

<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background:#140b22 url("https://images.unsplash.com/photo-1530533718754-001d2668365a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80") repeat center; width: 100%; height:100%; z-index: -1;'>

<!--- color strip--->

 <div class="row no-gutters fixed-top">

 <div class="col-12 p-2 " style="background-color: #46688a; z-index: 4;">

 <div class="d-flex">

<ul class="list-inline mx-auto justify-content-center mt-2 ">

<!--- YOUR PROFILE LINK--->

<li class="list-inline-item mx-3 ">

<a href="LINK" style="color:#000;"> <i class="fas fa-home"> </i>  <span class="hidden-sm-down">Profile </span> </a>

</li>

<!--- YOUR CHARACTERS SECTION LINK--->

<li class="list-inline-item mx-3 ">

<a href="LINK" style="color:#000;"> <i class="fas fa-users"> </i> <span class="hidden-sm-down"> Characters </span> </a>

</li>

<!--- YOUR DESIGNS SECTION LINK--->

<li class="list-inline-item mx-3 ">

<a href="LINK" style="color:#000;"> <i class="fas fa-palette"> </i> <span class="hidden-sm-down"> Designs </span> </a>

</li>

<!--- YOUR ART SECTION LINK--->

<li class="list-inline-item mx-3 ">

<a href="LINK" style="color:#000;"> <i class="fas fa-paint-brush"> </i> <span class="hidden-sm-down"> Art </span> </a>

</li>

<!--- YOUR COMMENTS SECTION LINK--->

<li class="list-inline-item mx-3 ">

<a href="LINK" style="color:#000;"> <i class="fas fa-comment"> </i> <span class="hidden-sm-down"> Comments </span> </a>

</li>

</ul>

</div>

 </div>

 </div>

 <p>

 <br>

 </p>

 <p>

 <br>

 </p>

<!-------------------------------------- [[[ MAIN CONTAINER ]]---------------------------------------------------------->

<div class="card-transparent p-2 " style="height:720px; overflow-y:auto;overflow-x:hidden;scrollbar-width: none;">

<div class="row no-gutters mt-4 pl-1">

<div class="container p-2">

<div class="row no-gutters">

<!--------------------------NAVIGATION ITEMS (MOBILE) ------------------------------------>

<div class="col p-0 d-lg-none my-1 d-flex order-2">

<ul class="nav mx-auto ">

<!---FOLDER 1--->

<li class="nav-item ml-1"style="background:#3b6d63;height:36px;width:50px;border-radius:10px;">

<a class="nav-link btn" data-toggle="tab"data-target="#FOLDER1">

<i class="fas fa-star text-white "> </i>

</a>

</li>

<!---FOLDER 2--->

<li class="nav-item ml-1"style="background:#3b6d63;height:36px;width:50px;border-radius:10px;">

<a class="nav-link btn" data-toggle="tab" data-target="#FOLDER2">

<i class="fas fa-gamepad text-white "> </i>

</a>

</li>

<!---FOLDER 3--->

<li class="nav-item ml-1"style="background:#3b6d63;height:36px;width:50px;border-radius:10px;">

<a class="nav-link btn" data-toggle="tab"data-target="#FOLDER3">

<i class="fas fa-paw text-white "> </i>

</a>

</li>

<!---FOLDER 4--->

<li class="nav-item ml-1"style="background:#3b6d63;height:36px;width:50px;border-radius:10px;">

<a class="nav-link btn" data-toggle="tab" data-target="#FOLDER4">

<i class="fas fa-acorn text-white "> </i>

</a>

</li>

</ul>

</div>

<!--------------------------NAVIGATION ITEMS (DESKTOP)------------------------------------>

<div class="p-0 d-none d-lg-flex order-lg-3">

<ul class="nav flex-lg-column flex-row justify-content-start">

<br> <br>

<!---FOLDER 1--->

<li class="nav-item">

<a class="nav-link tooltipster" data-toggle="tab" style="cursor:crosshair;" title="FOLDER NAME" data-target="#FOLDER1">

<span class="fa-stack fa-2x fa-flip-horizontal" style="font-size:20px;">

<i class="fas fa-bookmark fa-rotate-90 fa-3x fa-stack-1x "style="color:#3b6d63;" > </i>

<i class="fas fa-star  pl-2 text-white fa-stack-1x"> </i>

</span>

</a>

</li>

<!---FOLDER 2--->

<li class="nav-item">

<a class="nav-link tooltipster" data-toggle="tab" style="cursor:crosshair;" title="FOLDER NAME" data-target="#FOLDER2">

<span class="fa-stack fa-2x fa-flip-horizontal" style="font-size:20px;">

<i class="fas fa-bookmark fa-rotate-90 fa-3x fa-stack-1x "style="color:#3b6d63;" > </i>

<i class="fas fa-gamepad  pl-2 text-white fa-stack-1x"> </i>

</span>

</a>

</li>

<!---FOLDER 3--->

<li class="nav-item">

<a class="nav-link tooltipster" data-toggle="tab" style="cursor:crosshair;" title="FOLDER NAME" data-target="#FOLDER3">

<span class="fa-stack fa-2x fa-flip-horizontal" style="font-size:20px;">

<i class="fas fa-bookmark fa-rotate-90 fa-3x fa-stack-1x "style="color:#3b6d63;" > </i>

<i class="fas fa-paw  pl-2 text-white fa-stack-1x"> </i>

</span>

</a>

</li>

<!---FOLDER 4--->

<li class="nav-item">

<a class="nav-link tooltipster" data-toggle="tab" style="cursor:crosshair;" title="FOLDER NAME" data-target="#FOLDER4">

<span class="fa-stack fa-2x fa-flip-horizontal" style="font-size:20px;">

<i class="fas fa-bookmark fa-rotate-90 fa-3x fa-stack-1x "style="color:#3b6d63;" > </i>

<i class="fas fa-acorn  pl-2 text-white fa-stack-1x"> </i>

</span>

</a>

</li>

</ul>

</div>

<div class="col-lg-11 order-2">

<div  style="max-width:1045px; height:455px;">

<div class="tab-content">

<!---------------------------- [[FOLDER 1 CONTENT]] ------------------------------------------>

<div class="tab-pane fade active show" id="FOLDER1">

<div class =" text-center py-2 px-5 m-0 h6 border-0 text-white" style=" max-width:500px; border-top-left-radius:19px;border-top-right-radius:19px;background:#23433c;">

<span>  <i class="fa-solid fa-star"> </i> FOLDER 1 NAME  </span>

</div>

<!----Characters---->

<div class="card  border-0  p-3  w-100" style="height:450px;  border-top-left-radius:0px; background:#080808;">

<div style=" overflow-x:auto;overflow-y:hidden;">

<div class="container-fluid align-items-center px-0 mb-4">

<!------//////CHATACTER 1/////////------------>

<div class=" display:inline-block">  

<!---FOLDER DESCRIPTION--->

<div class ="  px-2  my-1 ml-2 h6 border-0  text-white" style="border-top-right-radius:19px;background:#d67f38;">

FOLDER DESCRIPTION </div> <!--better keep short!-->

<!----character--->

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>  

<!--you can add more characters above this line! -->

<!------------------>

</div>  </div>

<!----END CARD---->

</div>

</div>

<!---------------------------- [[FOLDER 2 CONTENT]] ------------------------------------------>

<div class="tab-pane fade" id="FOLDER2">

<div class =" text-center py-2 px-5 m-0 h6 border-0 text-white " style=" max-width:500px; border-top-left-radius:19px;border-top-right-radius:19px;background:#23433c;">

<span>  <i class="fa-solid fa-gamepad"> </i> FOLDER NAME  </span>

</div>

<!----Characters---->

<div class="card  border-0  p-3  w-100" style="height:450px;  border-top-left-radius:0px; background:#080808;">

<div style=" overflow-x:auto;overflow-y:hidden;">

<div class="container-fluid align-items-center px-0 mb-4">

<!------//////CHATACTER 1/////////------------>

<div class=" display:inline-block">  

<!---FOLDER NAME--->

<div class ="  px-2  my-1 ml-2 h6 border-0  text-white" style="border-top-right-radius:19px;background:#d67f38;">

FOLDER DESCRIPTION </div>  <!--better keep short!-->

<!----character--->

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>  

<!--you can add more characters above this line! -->

<!--------------->

</div>  </div>

<!----END CARD---->

</div>

</div>

<!---------------------------- [[FOLDER 3 CONTENT]] ------------------------------------------>      

<div class="tab-pane fade" id="FOLDER3">

<div class =" text-center py-2 px-5 m-0 h6 border-0 text-white" style=" max-width:500px; border-top-left-radius:19px;border-top-right-radius:19px;background:#23433c;">

<span>  <i class="fa-solid fa-paw"> </i> FOLDER NAME  </span>

</div>

<!----Characters---->

<div class="card  border-0  p-3  w-100" style="height:450px;  border-top-left-radius:0px; background:#080808;">

<div style=" overflow-x:auto;overflow-y:hidden;">

<div class="container-fluid align-items-center px-0 mb-4">

<!------//////CHATACTER 1/////////------------>

<div class=" display:inline-block">  

<!---FOLDER NAME--->

<div class ="  px-2  my-1 ml-2 h6 border-0  text-white" style="border-top-right-radius:19px;background:#d67f38;">

FOLDER DESCRIPTION </div>

<!----chara--->

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="MALLOW"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="MALLOW"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>  

<!------//////CHATACTER///////------------>  

<!--you can add more characters above this line! -->

<!----------->

</div>  </div>

<!----END CARD---->

</div>

</div>

<!---------------------------- [[FOLDER 4 CONTENT]] ------------------------------------------>      

<div class="tab-pane fade" id="FOLDER4">

<div class =" text-center py-2 px-5 m-0 h6 border-0 text-white" style=" max-width:500px; border-top-left-radius:19px;border-top-right-radius:19px;background:#23433c;">

<span>  <i class="fa-solid fa-paw"> </i> FOLDER NAME  </span>

</div>

<!----Characters---->

<div class="card  border-0  p-3  w-100" style="height:450px;  border-top-left-radius:0px; background:#080808;">

<div style=" overflow-x:auto;overflow-y:hidden;">

<div class="container-fluid align-items-center px-0 mb-4">

<!------//////CHATACTER 1/////////------------>

<div class=" display:inline-block">  

<!---FOLDER NAME--->

<div class ="  px-2  my-1 ml-2 h6 border-0  text-white" style="border-top-right-radius:19px;background:#d67f38;">

FOLDER DESCRIPTION </div>

<!----chara--->

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="NAME"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="MALLOW"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>    

<!------//////CHATACTER///////------------>

<div class=" display:inline-block">    <br>

<div class="card mx-1 my-4"

style="height:350px;width:200px;overflow:hidden;font-family:georgia;

background-color:#000;border-color:#000;">

<!---link--->

<a href="LINK" class="stretched-link tooltipster" title="MALLOW"> </a>

<!--------- image ----------------->

<div class="card mx-auto border-0" style="height:340px;width:195px;

background-image:url(IMAGE_URL);background-color:transparent;

background-size:cover;background-position:top center;overflow:hidden;">

<div class="card rounded-0" style="position:absolute;left:80.3px;background-color:transparent;border-top:17px solid #000;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:0px solid transparent;max-width:300px;"> </div>

</div>

<!--------- title------->

<div class="card rounded-0 border-0  " style="position:absolute;left:0px;bottom:0px;height:65px;width:200px;background:linear-gradient(to top, rgba(0,0,0,1) 25%, rgba(25,25,25,0) 100%);">

<p class="text-center m-0 pt-1" style="color:#fff;font-size:17px"> <i class="fa-solid fa-crown"> </i> </p>

<p class="text-center text-uppercase" style="color:#fff;font-size:20px;">

NAME

</p>

</div>

</div>  </div>  

<!------//////CHATACTER///////------------>  

<!--you can add more characters above this line! -->

<!----------->

</div>  </div>

<!----END CARD---->

</div>

</div>  

<!--- end tabs---->  

</div>

</div>  

</div>

</div>

<!----END CONTENT---->

</div>

</div>

 <!----end main container----->

 </div> </div>

 <!----CREDITS----->

   <div class="d-flex fixed-bottom no-gutters">

<ul class="list-inline mx-auto justify-content-center">

<li class="list-inline-item mx-3 ">

<i class="fad fa-info-circle tooltipster  fa-beat-fade" style="font-size:11px;color:#d9d9d9;" title="This is a frankensein code made using resources from these coders!"> </i>

</li>

<li class="list-inline-item mx-1 ">

<a href="https://toyhou.se/BlooSyrell" style="font-size:10px;color:#d9d9d9;" class="tooltipster" title="Bloo Syrell (Me!)">

<i class="fal fa-frosty-head"> </i> </a>

</li>

<li class="list-inline-item mx-1 ">

<a href="https://toyhou.se/13343541" style="font-size:10px;color:#d9d9d9;" class="tooltipster" title="Leporidactic">

,  <i class="fal fa-rabbit"> </i> <i class="fal fa-cauldron"> </i> </a>

</li>

<li class="list-inline-item mx-1 ">

<a href="https://toyhou.se/sikes" class="tooltipster" style="font-size:10px;color:#d9d9d9;" title="Sikes">

,  <i class="fal fa-paw"> </i> </a>

</li>

<li class="list-inline-item mx-1">

<a href="https://toyhou.se/Arkaingel" class="tooltipster" style="font-size:10px;color:#d9d9d9;" title="Arkaingel">

,  <i class="fal fa-leaf"> </i> </a>

</li>

<li class="list-inline-item mx-1">

<a href="https://toyhou.se/kyecodes" class="tooltipster" style="font-size:10px;color:#d9d9d9;" title="Kyecodes">

,  <i class="fal fa-music"> </i> </a>

</li>

</ul>

</div>

 <!---------END ALL-------------->

 </div>

 </div>