Test: Unterschied zwischen den Versionen

Aus Sandpoint Haven
Zur Navigation springen
VisuellWikitext
oi
 
Keine Bearbeitungszusammenfassung
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<!-- < Thank You for your Support >
== Testseite ==
-------------------------------------------------- --


- Hi there! Thanks for supporting me and my work. Every penny goes to helping me and my family
=== Charakter-Infobox ===
and I honestly can't thank you enough for your generosity, you're the best! >
{{Infobox_Character
| name        = Charakter Name
| image        = test.png
| caption      = Bildunterschrift
| age          = XX Jahre
| gender      = M/W/D
| species      = Mensch/Anderes
| affiliations = [[Beispiel-Gruppe]]
}}


=== Persönlichkeit ===
Der Charakter ist mutig, intelligent und hat eine komplexe Vergangenheit...
Test esfessefsefsefes


        <!-- < Terms of Service >
=== Aussehen ===
-------------------------------------------------- --
Er/sie/es hat blaue Haare und trägt meistens eine schwarze Jacke...


- By purchasing and using my codes you're agreeing with the following rules.
=== Geschichte ===
==== Hintergrund ====
Geboren in einer kleinen Stadt, wuchs er/sie/es unter schwierigen Bedingungen auf...


- Please do not remove credit, that's what helps people find my page and purchase my works
==== Wichtige Ereignisse ====
I always try my best to make the credit the least intrusive possible.


- Do not use my codes to promote hate speech, violence, political propaganda, bullying, and or sexual misconduct.
Teilnahme am Turnier von 2025


- You are allowed to frankstein the code freely.
Rettung der Welt von der großen Bedrohung


- Do not use my code for monetary gain.
=== Trivia ===


- Do not redistribute my codes for free.
Lieblingsessen: Sushi


- Purchasing the code does not give you unlimited access to it, if you happen to lose the code,
Hat Angst vor Spinnen
I may be able to replenish you with another copy but not always.


 
=== Quellen ===
You can always contact me @MAXLevelhazard. Once again, thanks for supporting me. Enjoy your code!
 
 
 
        <!-- < COLOR TABLE >
--------------------------------------------------------------------------------
 
TEXT:#fff
HIGHLIGHTS: #00baba
 
ARTICLE'S BACKGROUND: #0e191a
SOLID COLOR BACKGROUND: #002a32
SEMI_TRANSPARENT BACKGROUND (Borders): rgba(24, 26, 27, 0.5)
"PAGE UNDER CONSTRUCTION" BACKGROUND: #003838
 
TABLE TITLE: #2c212c ; #363949
TABLE ENTRY: #43475a
TABLE BORDERS: #4c5067
 
SPOILER BAR: #1b1c24
SHOW SPOILERS DISABLED: #00baba
SHOW SPOILERS ENABLED: #fff
 
FOOTER SOCIAL MEDIA LINKS: rgba(255,255,255,0.5)
 
"ADD A COMMENT" BORDER: rgba(86,89,102,0.6)
COMMENT HORIZONTAL BAR: #50596a
COMMENT BACKGROUND: #20242c
 
UPVOTE: #00baba
DOWNVOTE: #ba0013
 
 
To change ALL colors in one action, press CTRL + H
On the first box, insert the color you want to replace
And on the second box place the desired color that you want the page to be.
Press "ALL". That should replace the colors with the one you desire. If something goes wrong, you can always press Ctrl + Z to undo the changes.
 
You can also use the left and right arrows (up and down in some browsers) to navigate and replace the colors manually.
 
 
        <!-- < IMAGES USED >
--------------------------------------------------------------------------------
 
PLACEHOLDER IMAGE: (https://i.imgur.com/gxfmNfD.png)
 
FANDOM LOGO: (https://i.imgur.com/XOWL8AH.png)
 
FANDOM APP LOGO: (https://i.imgur.com/0epteeQ.png)
 
APPLE STORE AD: (https://i.imgur.com/0WT6VLv.png)
 
GOOGLE PLAY AD: (https://i.imgur.com/EuAQdb1.png)
 
 
I got all flag icons from the Overwatch wiki, but you should be able to use any picture you want, just make sure they all have the same aspect ratio.
 
FLAGS: (https://overwatch.fandom.com/wiki/Template:Flag)
 
 
        <!-- < ❓ STILL HAVING ISSUES? ❓>
--------------------------------------------------------------------------------
 
Still having issues? Feel free to commission me. Since you already bought the code, you get a special discount.
All I'll need is a few instructions on what you're looking for, maybe a few images, and i'll get to work!
 
You can find more information on my VGen page: https://vgen.co/maxlevelhazard/service/custom-wiki/646bf94a-43a5-4f8d-9711-e6a844a11c43
 
 
 
 
 
 
 
 
<!-- < ⭐ START OF THE CODE , TEMPLATE STARTS HERE ⭐>
-------------------------------------------------------------------------------->
 
 
 
 
 
<!-- < Minimized Window Section >
-------------------------------------------------------------------------------->
 
 
<div class="card border-0 rounded-0 w-100" style="position:absolute;top:0;bottom:0;left:0; max-height:140px; overflow-x:hidden; overflow: hidden">
<div class="bg-faded" style="margin:-0.05rem -.05rem 1rem;">
<div class="bg-dark text-light" style="font-size:1rem;font-weight:700;padding:.4rem .75rem;">
<p class="faded mt- mb-n2 float-right"><small>
   
    Wikia Fandom Theme | Created by @MAXlevelhazard | Version: 2.0</small></p>
<i class="far fa-globe faded"></i>
<span style="padding:0 .25rem;">
   
   
  WIKI NAME HERE
   
   
    <i class="fa-duotone fa-grip-lines-vertical faded mr-2 ml-1"></i> <a data-toggle="collapse" data-target=".full-width" href="#">
<span class="badge badge-warning tooltipster m2-2 px-2" style=" padding:5px" data-placement="bottom">Maximize</span></a>
</div>
</div>
<!-- < FEEL FREE TO DELETE OR REPLACE THIS MESSAGE >
-------------------------------------------------------------------------------->
<div class="px-3">
<div class="alert alert-warning mb-2 py-2 px-3" style="margin-bottom:.5rem !important;">
<p><b><i class="fad fa-message-exclamation"></i> Warning:</b> If you're reading this message, it's likely because you've either minimized the template or encountered an issue with the code. Remember to regularly test the functionality of the minimize button; if it suddenly stops working, it could indicate that an action you've taken has disrupted the code. Check for any unclosed variables that might be causing problems. Prioritize creating backups while editing, so that in case of any missteps, you can easily revert to a previous version and fix any errors that may have occurred.</p>
</div>
</div>
<!--End of Message-->
</div>
 
 
<!-- < MEME IMAGE / CUSTOM SPACE >
--------------------------------------------------------------------------------
You can put anything in here, another page, another template, anything,
it will only be visible once the viewer minimizes the WIKI screen.
 
(Some themes/templates may not be compatible, and break OR push the wiki template) -->
 
 
 
<img src="https://i.pinimg.com/originals/8e/e8/ee/8ee8ee67ca8917c0f14d45bae70c1b21.png" style="width:200px" class="p-5">
 
 
 
<!--End of Custom Space-->
 
 
<div class="collapse fade full-width show"
style="transition: height 0s ease,opacity 0s ease;">
 
 
<!-- < BACKGROUND >
--------------------------------------------------------------------------------
If you want an image as the background, replace IMAGE HERE with a link of your choice.
DO NOT USE DISCORD MEDIA LINKS, THEY WILL BREAK, discord will no longer support the use of embed files in the following months.
I reccomend sites like Imgurr, File Garden, and Postimages.
 
You can also make the image blurry by increasing "blur(0px)" to any variable, I reccomend (5px)
-->
 
<div style="position: fixed;z-index: 100;top: 0;bottom: 0;left: 0;right: 0;
   
    background-color: #002a32;
    background-image: url(IMAGE HERE);
    background-position: top;
    background-size: repeat;
    filter: blur(0px)">
   
</div>
 
<div class="row no-gutters mt-3" style="position: absolute;z-index:125;top:0;right:0;left:0;">
<div class="col">
 
<!-- < TRANSPARENT BACKGROUND (BORDERS) >
-------------------------------------------------------------------------------->
<div class="mx-auto w-100" style="display: table;position: relative;min-height: 100vh;max-width: ;
        background-color: rgba(24, 26, 27, 0.5)">
   
   
<!-- < TOP BAR >
-------------------------------------------------------------------------------->
 
<div class="card border-0 rounded-0 fixed-topbar row no-gutters mb-n3" style="height:80px ;z-index: 100;
 
          background-color: #002a32;
          background-image: url(IMAGE HERE);
          background-position: top;
          filter: blur(0px)">
 
<!-- < WIKI LOGO >
--------------------------------------------------------------------------------
Replace (https://i.imgur.com/XOWL8AH.png) with whatever image you want.
You can change the resolution by messing with min-width and max width.
If the image doesn't fit quite right, you case use margins to more the image up, down, left and right.
 
you can pick numbers between 0 and 5.
mt = margin top
mb = margin bottom
ml = margin left
mr = margin right
 
you can put the letter N to make the value negative, so for example:
mt-n1 = "margin top equals -1"
 
You can also put a link on the logo, just replace the hashtag with any link you want.
-->
 
 
            <div class="col-lg py-2 text-lg-left text-center">
            <div class="d-flex justify-content-left pl-4 py-2">
 
        <a href="#" id="">
        <img class="mb-0 mt-0 ml-0 mr-0" style="min-width:100px; max-width:220px;" src="https://i.imgur.com/XOWL8AH.png"></a>
    </div>
    </div>
    </div>
   
   
<!--Wiki Logo end-->
 
 
 
<!-- < NAVIGATION BAR >
-------------------------------------------------------------------------------->
 
  <div class="fixed-topbar" style="z-index: 100;
 
  position: sticky;
  top: 0px;
  word-spacing: 2px;
          background-color: #002a32;
          box-shadow: 0px 20px 1px 0px rgba(0,0,0,0.1);">
     
<!-- < NAVIGATION ITEMS: LEFT SIDE >
-------------------------------------------------------------------------------->      
     
  <div class="col-lg p-1 mx-3 mt-2 mb-n1 text-lg-left text-center">
  <div style="margin-top:-20px">
  <div class="row no-gutters align-items-center px-2" style="margin-top:10px; margin-bottom:-6px; color:#fff">
     
     
<!--NAVIGATION BUTTONS-->
<div class="col p-1 py-3">
<div class="d-flex flex-row align-items-center flex-wrap ml-n2" style="line-height:2">
  <!--EXPLORE-->
  <div class="dropdown mr-1">
<a class="btn btn-secondary dropdown-toggle btn-sm border-0 text-uppercase" style="background-color:#00baba; cursor: pointer"
  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false;">
    <span class="text-uppercase" style="font-family: Helvetica, sans-serif;">
   
    <i class="fa-regular fa-book-open mr-2"></i> <!--icon-->
    <b>Explore</b>
    </span></a>
       
        <!--EXPLORE: NAVIGATION-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
<i class="fa-regular fa-home mr-1"></i> Main Page</a>
<a class="dropdown-item" href="#">
<i class="fa-regular fa-messages mr-1"></i> Discuss</a>
</div>
    </div>
<!-------------------------------------------------------------------------------->  <!--EXPLORE end-->  
  <!--Universe-->
  <div class="dropdown">
<a class="btn btn-secondary dropdown-toggle btn-sm border-0 text-uppercase bg-transparent" style="cursor: pointer"
  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false;">
    <span class="text-uppercase" style="font-family: Helvetica, sans-serif;">
   
    <b>Universe</b>
    </span></a>
 
        <!--UNIVERSE: NAVIGATION-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"> Characters</a>
<a class="dropdown-item" href="#"> Groups</a>
<a class="dropdown-item" href="#"> Locations</a>
<a class="dropdown-item" href="#"> Objects</a>
<a class="dropdown-item" href="#"> Timedivne</a>
</div>
        </div>
<!-------------------------------------------------------------------------------->  <!--UNIVERSE end-->  
 
 
  <!--MEDIA-->
  <div class="dropdown">
<a class="btn btn-secondary dropdown-toggle btn-sm border-0 text-uppercase bg-transparent" style="cursor: pointer"
  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false;">
    <span class="text-uppercase" style="font-family: Helvetica, sans-serif;">
   
    <b>Media</b>
    </span></a>
 
        <!--MEDIA: NAVIGATION-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"> Games</a>
<a class="dropdown-item" href="#"> Music</a>
<a class="dropdown-item" href="#"> Comics</a>
<a class="dropdown-item" href="#"> Animated Series</a>
</div>
        </div>
<!-------------------------------------------------------------------------------->  <!--MEDIA end-->  
 
 
  <!--NAVIGATION-->
  <div class="dropdown">
<a class="btn btn-secondary dropdown-toggle btn-sm border-0 text-uppercase bg-transparent" style="cursor: pointer"
  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false;">
    <span class="text-uppercase" style="font-family: Helvetica, sans-serif;">
   
    <b>NAVIGATION</b>
    </span></a>
 
        <!--NAVIGATION: NAVIGATION-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#"> Contributors and<br>Supporters</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> Recent Blogs</a>
</div>
        </div>
<!-------------------------------------------------------------------------------->  <!--NAVIGATION end-->  
 
  <!--COMMUNITY-->
  <div class="dropdown">
<a class="btn btn-secondary dropdown-toggle btn-sm border-0 text-uppercase bg-transparent" style="cursor: pointer"
  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false;">
    <span class="text-uppercase" style="font-family: Helvetica, sans-serif;">
   
    <b>COMMUNITY</b>
    </span></a>
 
        <!--COMMUNITY: NAVIGATION-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"> Tumblr</a>
<a class="dropdown-item" href="#"> Twitter</a>
<a class="dropdown-item" href="#"> Youtube Channel</a>
<a class="dropdown-item" href="#"> Toyhouse Page</a>
</div>
        </div>        
<!-------------------------------------------------------------------------------->  <!--COMMUNITY end-->        
 
 
</div>
</div>  <!--NAVIGATION ITEMS: LEFT end-->
<!-- < NAVIGATION ITEMS: RIGHT SIDE >
-------------------------------------------------------------------------------->
 
 
<div class="col-lg-auto p-1 justify-content-end">
<div class="row no-gutters align-items-center">
<!--BUTTONS-->
<div class="col-md-auto flex-row p-1 order-md-last justify-content-end">
                            <!--SEARCH BUTTON-->
<div class="card border bg-transparent border-right-0" style="border-bottom-left-radius:02x; border-top-left-radius:2px;border-bottom-right-radius:0px; border-top-right-radius:0px;  border-width: 1px; Border-color:#fff; font-size:18px">
<a class="text-white" style="text-decoration: none" href="#">
<i class="fa-regular fa-search fa-fw tooltipster" style="margin:7px" data-placement="bottom" title="Search"></i></a>
</div>
                            <!--DISCUSSION BUTTON-->
<div class="card border bg-transparent border-right-0" style="border-radius:0px;  border-width: 1px; Border-color:#fff; font-size:18px">
<a class="text-white" style="text-decoration: none" href="#">
<i class="fa-regular fa-messages fa-fw tooltipster" style="margin:7px" data-placement="bottom" title="Discuss"></i></a>
</div>
 
                            <!--RECENT CHANGES BUTTON-->
<div class="card border bg-transparent border-right-0" style="border-radius:0px;  border-width: 1px; Border-color:#fff; font-size:18px">
<a class="text-white" style="text-decoration: none" href="#">
<i class="fa-regular fa-wave-pulse fa-fw tooltipster" style="margin:7px" data-placement="bottom" title="Recent Changes"></i></a>
</div>
                           
                            <!--LIGHT THEME BUTTON-->
<div class="card border bg-transparent border-right-0" style="border-radius:0px;  border-width: 1px; Border-color:#fff; font-size:18px">
<a class="text-white" style="text-decoration: none" href="#">
<i class="fa-regular fa-house fa-fw tooltipster" style="margin:7px" data-placement="bottom" title="Light Theme"></i></a>
</div>
 
                            <!--OPTIONS BUTTON-->
<div class="card border bg-transparent" style="border-bottom-left-radius:0px; border-top-left-radius:0px;border-bottom-right-radius:2px; border-top-right-radius:2px;  border-width: 1px; Border-color:#fff; font-size:18px">
<a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent  h-100" style="background: #0f1111; max-width:35px" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:6px; margin-left:-2px;"></i></a>
                                       
                                        <!--DROP DOWN CONTENTS-->
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="" data-toggle="collapse" data-target=".SPECIAL_ARTICLES"> Special Articles</a>
<a class="dropdown-item" href="#"> Gallery</a>
</div>
</div>
</div> <!--BUTTONS end-->
<!--PAGE COUNTER-->
<div class="col-md-auto p-1">
<div class="row no-gutters align-items-center flex-nowrap justify-content-end">
<div class="col-auto">
<p class="font-weight-bold text-right" style="font-family:'Calibri'; font-size:20px; letter-spacing:1.5px; line-height:.85;">
11,351        <br><span style="font-size:16px; letter-spacing:1px;">
PAGES        </span></p>
 
</div> <!--PAGE COUNTER end-->
<!--SPOILER TOGGLE-->
<div class="col-auto pl-2">
<div class="card d-inline-flex flex-row align-items-center bg-transparent rounded-0 p-1"
style="border-width: 1px;
Border-color:#fff;
border-radius:4px;">
<div class="px-2"
style="color:#fff">
Show Spoilers
</div>
<!--CHECK BOX-->
<div class="card border-0 rounded-0 ml-2 justify-content-center align-items-center text-white"
style="width:25px;
height:25px;
background-color:#00baba;
border-radius:3px">
<i class="fas fa-times" style="color:#fff"></i> <!--icon: disabled -->
<div class="collapse fade SPOILERS" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0.00s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-items-center text-white"
style="background:#fff;
border-radius:3px">
<i class="fas fa-check" style="color:black"></i> <!--icon: enabled -->
</div>
</div>
</div>
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0;" data-toggle="collapse" href="#" data-target=".SPOILERS"></a>
</div>
</div> <!--show spoiler box end-->
        </div>
    </div>
    </div>
</div> <!--NAVIGATION ITEMS: RIGHT SIDE end-->
</div>
 
 
</div>
</div>
</div>
 
 
 
<!-- < MAIN PAGE >
-------------------------------------------------------------------------------->
<div class="rounded clearfix m-3 p-1 mt-n2 mb-n1" style="min-height: 75vh;">
    <div class="card mx-auto border-0 pb-3 pt-1 px-4"
   
    style="background-color:#0e191a;
    border-radius:0px;
    color:#fff;
    font-size:16px;
    line-height:1.75;">
       
 
<!--WIDGETS (SIDE BUTTONS)-->
<div class="pt-2" style="position:sticky; top:5rem; margin-left:-2.65rem; margin-top:25px; margin-bottom:-25px; max-width:1px; z-index: 1">
<!--EXPAND TOGGLE-->
<div class="card border-0 rounded-circle align-items-center justify-content-center tooltipster" title="Expand" data-placement="right"
style="background-color:#20242c;
color:#00baba;
width:35px;
height:35px;
box-shadow:0 0 .25rem rgba(0,0,0,0.5);">
   
   
<i class="fas fa-expand"></i> <!--icon-->
<a class="btn btn-outline-secondary border-0 rounded-circle" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.85;" data-toggle="collapse" data-target=".full-width" href="#"></a>
</div> <!--expand toggle end-->
<!--CONTENTS TABLE-->
        <div class="card border-0 rounded-circle align-items-center justify-content-center mt-2 btn-group dropright"
       
        style="background-color:#20242c;
        color:#00baba;
        width:35px;
        height:35px;
        box-shadow:0 0 .25rem rgba(0,0,0,0.5);">
           
           
<a type="button" class="btn-group dropright btn btn-outline-secondary border-0 rounded-circle tooltipster" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.85; border-radius:50px; cursor: pointer; " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Contents" data-placement="right"></a>
<i class="fas fa-list"></i> <!--icon-->
       
        <!--DROP DOWN CONTENTS-->
        <div class="dropdown-menu ml-2">
<p class="px-3">Contents <span class="pull-right"><a class="p-2 mr-n2" style="cursor:pointer">
<i class="fa fa-times faded" aria-hidden="true"></i></a></span></p>
<div class="dropdown-divider"></div>
<div class="p-1" style="max-height:280px; overflow:auto;">
<a class="dropdown-item" href="#"><span style="color:#909193;">1.</span>
Personality</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">2.</span>
Appearance</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">3.</span>
Story</a>
 
      <a class="dropdown-item" href="#"><span class="ml-3" style="color:#909193;">3.1.</span>
      Background</a>
 
      <a class="dropdown-item" href="#"><span class="ml-3" style="color:#909193;">3.2.</span>
      Event Name Here</a>
 
<a class="dropdown-item" href="#"><span style="color:#909193;">4.</span>
Character Stats</a>
 
    <a class="dropdown-item" href="#"><span class="ml-3" style="color:#909193;">4.1.</span>
    Items</a>
   
        <a class="dropdown-item" href="#"><span class="ml-5" style="color:#909193;">4.1.1.</span>
        Backpack</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">5.</span>
Achievements</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">6.</span>
Censorship</a>
    <a class="dropdown-item" href="#"><span class="ml-3" style="color:#909193;">6.1.</span>
    Episode Name</a>
 
<a class="dropdown-item" href="#"><span style="color:#909193;">7.</span>
Voice Acting</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">8.</span>
Notes</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">9.</span>
Trivia</a>
<a class="dropdown-item" href="#"><span style="color:#909193;">10.</span>
Appearances</a>
    <a class="dropdown-item" href="#"><span class="ml-3" style="color:#909193;">10.1.</span>
    Non-Canon Appearances</a>
 
<a class="dropdown-item" href="#"><span style="color:#909193;">10.</span>
References</a>
</div>
</div>
</div> <!--DROP DOWN CONTENTS end-->
<!--EDIT BUTTON (Cosmetic)-->
<div class="card border-0 rounded-circle align-items-center justify-content-center tooltipster mt-2" title="Edit" data-placement="right"
style="background-color:#20242c;
color:#00baba;
width:35px;
height:35px;
box-shadow:0 0 .25rem rgba(0,0,0,0.5);">
   
   
<i class="fas fa-pencil"></i> <!--icon-->
<a class="btn btn-outline-secondary border-0 rounded-circle" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.85; cursor: pointer;"></a>
</div>
<!-- < SPECIAL ARTICLES >
-------------------------------------------------------------------------------->
<div class="collapse fade SPECIAL_ARTICLES" style="transition: height 0s ease,opacity 0.5s ease;">
<!--SPECIAL ARTICLES WIDGETS-->
<!--GO BACK WIDGET (only appears on this page)-->
<div class=" mt-4 card border-0 rounded-circle align-items-center justify-content-center tooltipster mt-2" title="Go Back" data-placement="right"
style="background-color:#20242c;
color:#00baba;
width:35px; height:35px;
box-shadow:0 0 .25rem rgba(0,0,0,0.5);">
   
<i class="fa-solid fa-turn-down-left"></i> <!--icon-->
<a class="btn btn-outline-secondary border-0 rounded-circle" href="" data-toggle="collapse" data-target=".SPECIAL_ARTICLES" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.85; cursor: pointer;"></a>
</div> <!--GO BACK WIDGET end-->
<!--CONTENTS TABLE (SPECIAL ARTICLES)-->
<div class="card bg-transparent border-0 rounded-circle align-items-center justify-content-center btn-group dropright" style="width:35px; height:35px; margin-top:-137px">
<a type="button" class="btn-group dropright btn btn-outline-secondary border-0 rounded-circle tooltipster" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.85; border-radius:50px; cursor: pointer;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Contents" data-placement="right"></a>
    <!--DROP DOWN CONTENTS-->
    <div class="dropdown-menu ml-2">
        <p class="px-3">Contents<span class="pull-right"><a class="p-2 mr-n2" style="cursor:pointer">
        <i class="fa fa-times faded" aria-hidden="true"></i></a></span></p>
        <div class="dropdown-divider"></div>
        <div class="p-1" style="max-height:280px; overflow:auto;">
    <a class="dropdown-item" href="#"><span style="color:#909193;">1.</span> Behind the Scenes</a>
    <a class="dropdown-item" href="#"><span style="color:#909193;">2.</span> Non-Canon SPECIAL_ARTICLES</a>
    </div>
    </div>
    </div>  <!--CONTET TABLE (SPECIAL ARTICLES) end-->
    </div>  <!--SPECIAL ARTICLES WIDGETS end-->
            </div>
   
   
    <!-- MAIN PAGE -->
   
   
    <!-- SIDE BUTTONS (RIGHT) -->
   
    <!-- Discussion Bubble (Default number is 9) -->
<div style="margin-top:-6.0rem; font-size:86%">
<div class="collapse fade SPECIAL_ARTICLES show" style="transition: height 0s ease,opacity 1s ease;">
<div class="col-lg-auto mr-1 hidden-sm-down d-flex justify-content-center float-right">
<div class="border bg-transparent border-right-0" style="font-size:18px;">
<a style="text-decoration:none; color:#00baba;" href="#">
<span class="fa-stack tooltipster" data-placement="bottom" title="" style="vertical-align:top;" data-original-title="Discussion">
<i class="fa-solid fa-circle fa-stack-1x" style="font-size:90%;margin-top:-9px;"></i> <!-- circle icon -->
<i class="fa-solid fa-9 fa-stack-1x" style="font-size:50%;margin-top:-9px;color:#FFFFFF;"></i> <!-- number icon (Default number is 9) -->
<i class="fa-regular fa-comment fa-fw" style="font-size:110%;"></i> <!-- speech bubble icon -->
</span></a>
</div> <!-- end of Discussion bubble -->
<!-- EDIT BUTTON (Cosmetic) -->
<div class="mx-2 ml-n1" style="border-left:4px solid;height:16px;border-width:2px;margin:auto;margin-top:9px;color:#444c4d;"></div>
<div class="bg-transparent border-0 ml-n2" style="font-size:18px;">
    <a style="text-decoration:none;color:#00baba;" href="#"><i class="fa-regular fa-pen fa-fw mr-n1" style="margin:7px;"></i>
    <span class="font-weight-bold" style="letter-spacing:1px;font-family:calibri;font-size:90%;display:inline-block;vertical-align:middle;line-height:normal;margin-top:-4px;margin-left:5px;">EDIT</span></a>
</div> <!-- end of EDIT BUTTON -->
<!-- OPTIONS BUTTON -->
<div class="mx-2" style="border-left:4px solid;height:16px;border-width:2px;margin:auto;margin-top:9px;color:#444c4d;"></div>
<div class="bg-transparent" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:-2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
   
    <!-- DROPDOWN CONTENTS -->
   
    <div class="dropdown-menu">
       
        <a class="dropdown-item" href="" data-toggle="collapse" data-target=".SPECIAL_ARTICLES">
        Special Articles</a>
       
        <a class="dropdown-item" href="#"> Gallery</a>
       
    </div> <!-- end of DROPDOWN CONTENTS -->
   
</div>
</div> <!-- end of SIDE BUTTONS (RIGHT) -->
<!-- TAGS -->
<div class="text-white" style="color:black; font-size:100%; margin-left:11px">
    in:
    <a style="color:#00baba;" href="#" data-toggle="collapse">
    Page or tag goes here</a>,
    <a style="color:#00baba;" href="#" data-toggle="collapse">
    Another One</a>,
   
    <a style="color:#00baba;" href="#" data-toggle="collapse">
    One more</a>, and
    <a style="color:#00baba;" href="#" data-toggle="collapse">
    7 more</a>
</div><!-- end of TAGS -->
<!--TAB CONTENT-->
<div class="tab-content mx-3 mt-2">
<!--MAINPAGE SECTION-->
<div class="tab-pane fade show active" id="MAINPAGE">
<!--BANNER-->
<div class="card mb-2 mt-4"
style="border-color:#00baba;
border-left-width:8px;
background-color:#003838;
line-height:1.5;">
   
<div class="row no-gutters">
<!--ICON IMAGE-->
<div class="col-auto p-2">
   
<img style="max-width:70px;
max-height:70px;"
src="https://i.imgur.com/gxfmNfD.png">
</div> <!--icon image end-->
<div class="col p-2">
   
<p class="mb-0">
<b>This page is still in construction.</b></p>
<p>You can contribute by expanding its content. Every little bit counts!</p>
</div>
</div>
</div> <!--banner end-->
<!-- < CHARACTER INFO-BOX >
-------------------------------------------------------------------------------->
 
<div class="float-xl-right ml-xl-3 mt-3 d-block mx-auto mb-3" style="max-width:300px; word-break:break-word; border: 3px solid  #00baba; border-radius:7px 7px 5px 5px;">
<!--NAME HEADER-->
<div class="card border-0 p-3 text-center" style="background-color:#00baba; color:#1a1d23; border-radius:4px 4px 0 0;">
<h1 class="mb-0 font-weight-bold">Character Name</h1>
</div> <!--name header end-->
<!--TITLE-->
<div class="card rounded-0 px-2 py-1 text-center" style="background-color:#2c212c; color:#00baba; border-color:#4c5067;">
<p class="font-weight-bold" style="font-size:larger;">Title</p>
</div> <!--title end-->
<!--IMAGES TAB BUTTONS-->
<div class="card border-top-0 border-bottom-0 rounded-0" style="background-color:#353847; color:#00baba; border-color:#4c5067; font-size:smaller;">
<ul class="nav nav-pills">
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Current <a class="active btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#CURRENT-IMG"></a>
</li>
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Flashback <a class="btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#FLASHBACK-IMG"></a>
</li>
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Pilot <a class="btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#PILOT-IMG"></a>
</li>
</ul>
</div> <!--images tab buttons end-->
<!--IMAGES TAB CONTENT-->
<div class="tab-content">
<!--CURRENT IMAGE SECTION-->
<div class="tab-pane fade show active" id="CURRENT-IMG">
<div class="card bg-transparent rounded-0 border-bottom-0 align-items-center justify-content-center" style="border-color:#4c5067;">
<img src="https://i.imgur.com/gxfmNfD.png">
</div>
</div> <!--current image section end-->
<!--FLASHBACK IMAGE SECTION-->
<div class="tab-pane fade" id="FLASHBACK-IMG">
<div class="card bg-transparent rounded-0 border-bottom-0 align-items-center justify-content-center" style="border-color:#4c5067;">
<img src="https://i.imgur.com/gxfmNfD.png">
</div>
</div> <!--flashback image section end-->
<!--PILOT IMAGE SECTION-->
<div class="tab-pane fade" id="PILOT-IMG">
<div class="card bg-transparent rounded-0 border-bottom-0 align-items-center justify-content-center" style="border-color:#4c5067;">
<img src="https://i.imgur.com/gxfmNfD.png">
</div>
</div> <!--pilot image section end-->
</div> <!--images tab content end-->
<table class="table-bordered w-100 border-0 text-center" style="line-height:1.25; font-size:smaller;">
<tr style="background-color:#272935;">
<td style="border-color:#4c5067;">
<p class="font-weight-bold mb-1">Weapon</p>
<p>
<img src="https://i.imgur.com/gxfmNfD.png" style="width:20px; margin-top:-2px"> Name
</p>
</td>
<td style="border-color:#4c5067;">
<p class="font-weight-bold mb-1">Power</p>
<p>
<img src="https://i.imgur.com/gxfmNfD.png" style="width:20px; margin-top:-2px"> Name
</p>
</td>
</tr>
</table>
<!--BASIC INFO TAB BUTTONS-->
<div class="card border-top-0 border-bottom-0 rounded-0" style="background-color:#353847; color:#00baba; border-color:#4c5067; font-size:smaller;">
<ul class="nav nav-pills">
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Bio <a class="active btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#BIO"></a>
</li>
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Family <a class="btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#FAMILY"></a>
</li>
<!--BUTTON-->
<li class="card bg-transparent border-0 rounded-0 px-3 py-2 font-weight-bold text-center"> Voice Actors <a class="btn btn-outline-secondary border-0 rounded-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:lighten; opacity:.25;" data-toggle="pill" href="#VOICE-ACTORS"></a>
</li>
</ul>
</div> <!--basic info tab buttons end-->
<!--BASIC INFO TAB CONTENT-->
<div class="tab-content">
<!--BIO SECTION-->
<div class="tab-pane show active" id="BIO">
<table class="table-bordered w-100 border-0" style="table-layout:fixed; background-color:#272935; font-size:smaller;">
<tr>
<td class="font-weight-bold border-right-0" style="width:35%; border-color:#4c5067;">Full Name</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Species</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Age</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Gender</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Pronouns</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Sexuality</td>
<td class="border-left-0" style="border-color:#4c5067;">Info</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Affiliations</td>
<td class="border-left-0" style="border-color:#4c5067;">
<ul class="mb-0 pl-3" style="list-style-type:disc;">
<li>Info</li>
<li>Info</li>
<li>Info</li>
</ul>
</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Aligment</td>
<td class="border-left-0" style="border-color:#4c5067;"><a href="#" style="color:#00baba;">Aligment Here</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Status</td>
<td class="border-left-0" style="border-color:#4c5067;">
<p>
<span class="card border-0 rounded-0 d-inline-block bg-transparent" style="width:80px; padding-left:5px; margin-left:-5px;">
<span class="collapse fade show SPOILERS tooltipster" data-placement="right" title="Toggle Spoiler" data-toggle="collapse" data-target=".SPOILERS" style="position:absolute; top:0; left:-.05rem; right:-.05rem; bottom:0; background-color:#1b1c24; transition-duration:0.00s;">
   
<a style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; cursor:pointer" data-toggle="collapse" data-target=".SPOILERS"></a> <!--toggle-->
</span> Alive </span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">First Appearance</td>
<td class="border-left-0 faded" style="border-color:#4c5067;">TBN</td>
</tr>
</table>
<!--Nicknames HEADER-->
<div class="d-block font-weight-bold border-top-0 border-bottom-0" style="background-color:#353847; font-size:smaller; border:1px solid #4c5067;">
<p class="px-3 py-2" style="border-bottom:3px solid #00baba; color:#00baba; max-width:110px;">Nicknames</p>
</div> <!--Nicknames header end-->
<!--Nicknames-->
<div class="card p-2" style="background-color:#272935; border-radius:0 0 4px 4px; font-size:smaller; border-color:#4c5067;">
<ul class="mb-0 pl-3" style="list-style-type:disc;">
<li>Name Here</li>
<li>Name Here</li>
<li>Name Here</li>
</ul>
</div> <!--Nicknames end-->
</div> <!--bio section end-->
<!--FAMILY SECTION-->
<div class="tab-pane" id="FAMILY">
<table class="table-bordered w-100 border-0" style="table-layout:fixed; background-color:#272935; font-size:smaller;">
<tr>
<td class="font-weight-bold border-right-0" style="width:35%; border-color:#4c5067;">Family Name</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Info</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Father</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Mother</td>
<td class="border-left-0" style="border-color:#4c5067;">
<div class=" w-100 rounded-0 border-bottom-0" style="background-color:#272935; border-color:#4c5067; width:100%">
<div class="fade show SPOILERS" style="transition-duration:0.00s;">
<a href="#" style="color:#00baba;">Name Here</a>
</div>
<div class="collapse fade SPOILERS" style="transition-duration:0.00s;">
<a href="#" style="color:#00baba;">Name Here</a> (Deceased)
</div>
</div><!--Nicknames end-->
</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Siblings</td>
<td class="border-left-0" style="border-color:#4c5067;">
<ul class="mb-0 pl-3" style="list-style-type:disc;">
<li><a style="color:#00baba;" href="#" data-toggle="collapse">Info</a> (Relationship)</li>
<li><a style="color:#00baba;" href="#" data-toggle="collapse">Info</a> (Relationship)</li>
<li><a style="color:#00baba;" href="#" data-toggle="collapse">Info</a> (Relationship)</li>
</ul>
</td>
</tr>
</table>
</div> <!--family section end-->
<!--VOICE ACTORS SECTION-->
<div class="tab-pane" id="VOICE-ACTORS">
<table class="table-bordered w-100 border-0" style="table-layout:fixed; background-color:#272935; font-size:smaller;">
<tr>
<td class="font-weight-bold border-right-0" style="width:35%; border-color:#4c5067;">English (US)</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Portuguese<br>(PT-BR)</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">German</td>
<td class="border-left-0" style="border-color:#4c5067;">
<a style="color:#00baba;" href="#" data-toggle="collapse">Name</a> <small>(1st Voice)</small>
<br>
<a style="color:#00baba;" href="#" data-toggle="collapse">Name</a> <small>(2nd Voice)</small>
</td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Spanish</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Ukranian</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Filipino</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Korean</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Japanese</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
<tr>
<td class="font-weight-bold border-right-0" style="border-color:#4c5067;">Chinese</td>
<td class="border-left-0" style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name</a></td>
</tr>
</table>
</div> <!--voice actors section end-->
</div> <!--basic info tab content end-->
</div> <!--basic info end-->
<!-- < ARTICLE >
-------------------------------------------------------------------------------->
<p class="font-weight-bold mb-3 mx-2" style="font-size:180%">Character Name</p>
<!--character quote-->
<div class="pl-3 ml-3 pr-3 mb-4 mt-2 text-center text-white" style="width:50%; ;font-size:95%" id="quote">
<i class="fas fa-quote-left pull-left p-1" style="color: #fff"></i>
<i class="fas fa-quote-right pull-right p-1" style="color: #fff"></i>
<p style="font-size:110%"><i>A quote that a character has said here.</i></p>
<p style="font-size:110%; margin-top:-18px"><i>Or something like that I don't know.</i></p>
<p class="text-right mt-n2" style="color:white; font-size:80%">— Whoever said the quote.</p>
</div><!--character quote end-->
<p><b>Name here</b> is a character in <a style="color:#00baba;" href="#" data-toggle="collapse">Universe Name</a>. Lorem ipsum dolor sit amet, consectetur <a style="color:#00baba;" href="#" data-toggle="collapse">venenatis</a> adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur<sup><a class="font-weight-bold" href="#" style="color:#00baba;font-size:90%;margin-left:3px;">[1]</a></sup> adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra <a style="color:#00baba;" href="#" data-toggle="collapse">tempor</a> sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.<sup><a class="font-weight-bold" href="#" style="color:#00baba;font-size:90%;margin-left:3px;">[2]</a></sup></p>
<!--TABLE OF CONTENTS-->
<div class="card bg-transparent" style="border-color:#4c5067; max-width:300px;">
<!--HEADER-->
<div class="d-flex flex-row align-items-center justify-content-between" style="padding:12px;">
<span>
<i class="fas fa-list mr-2"></i>Contents </span>
<span class="ml-2"> [<a class="mx-1" style="font-size:smaller; color:#00baba;" data-toggle="collapse" href="#overview-contents">hide</a>] </span>
</div> <!--header end-->
<!--COLLAPSE CONTENT-->
<div class="collapse show" id="overview-contents">
<hr class="m-0" style="border-color:#4c5067;">
<div class="p-1">
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">1.</span> Personality</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">2.</span> Appearance</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">3.</span> Story</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-3" style="position:relative;">
<p><span style="color:#909193;">3.1.</span> Background</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#ascensions-and-stats"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-3" style="position:relative;">
<p><span style="color:#909193;">3.2.</span> Event Name Here</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#ascensions-and-stats"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">4.</span> Character Stats</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-3" style="position:relative;">
<p><span style="color:#909193;">4.1.</span> Items</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#ascensions-and-stats"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-5" style="position:relative;">
<p><span style="color:#909193;">4.1.1.</span> Backpack</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#talent-upgrade"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">5.</span> Achievements</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">6.</span> Censorship</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-3" style="position:relative;">
<p><span style="color:#909193;">6.1.</span> Episode Name</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#ascensions-and-stats"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">7.</span> Voice Acting</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">8.</span> Notes</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">9.</span> Trivia</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">10.</span> Appearances</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1 ml-3" style="position:relative;">
<p><span style="color:#909193;">10.1.</span> Non-Canon Appearances</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#ascensions-and-stats"></a>
</div> <!--link container end-->
<!--LINK CONTAINER-->
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">11.</span> References</p>
<!--link-->
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(50%); opacity:.75;" href="#gameplay-info"></a>
</div> <!--link container end-->
</div>
</div>
</div> <!--table of contents end-->
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Personality</h1>
<p>Venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </p>
<!--HEADER-->
 
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Appearance</h1>
<div class="float-sm-right px-3">
<div class="card bg-transparent px-2 pt-2 pb-1" style="width:130px; border:1px solid #4c5067;">
<div class="w-100" style="background:url(https://i.imgur.com/gxfmNfD.png) no-repeat center;background-size:cover;padding-top:100%;"></div>
<div class="faded">
<p style="font-size:85%">Description</p>
</div>
</div>
</div>
<p>Sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. <br> <br> Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. </p>
<!--HEADER-->
 
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Story</h1>
<h3 class="font-weight-bold mb-3">Background</h3>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla. Praesent ut dolor gravida, rhoncus eros at, ultricies lectus. Vivamus egestas varius sagittis. Nulla porta ligula ipsum, non sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<div class="mr-4">
<div class="card bg-transparent px-2 pt-2 pb-1" style="width:130px; width:170px; border:1px solid #4c5067;">
<img style="max-height:px;" src="https://i.imgur.com/gxfmNfD.png">
<div class="faded">
<p class="pt-2" style="font-size:85%">Description</p>
</div>
</div>
</div>
<div class="card bg-transparent px-2 pt-2 pb-1" style="width:130px; width:170px; border:1px solid #4c5067;">
<img style="max-height:px;" src="https://i.imgur.com/gxfmNfD.png">
<div class="faded">
<p class="pt-2" style="font-size:85%">Description</p>
</div>
</div>
</div>
<h3 class="font-weight-bold mb-3 mt-4">Event Name Here</h3>
<div class="float-sm-right px-3">
<div class="card bg-transparent px-2 pt-2 pb-1" style="width:130px; border:1px solid #4c5067;">
<div class="w-100" style="background:url(https://i.imgur.com/gxfmNfD.png) no-repeat center;background-size:cover;padding-top:100%;"></div>
<div class="faded">
<p style="font-size:85%">Description</p>
</div>
</div>
</div>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla. Praesent ut dolor gravida, rhoncus eros at, ultricies lectus. Vivamus egestas varius sagittis. Nulla porta ligula ipsum, non sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. </p>
<!--HEADER-->
 
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-2 mt-4" style="border-bottom:1px solid #4c5067;">Character Stats</h1>
<h3 class="font-weight-bold mb-3 mt-4">Abilities</h3>
<ul class="m-0 ml-n4 text-justify">
<li class="my-2"><b>POWER</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. </li>
<li class="mt-3"><b>POWER</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
<h3 class="font-weight-bold mb-3 mt-4">Skillset</h3>
<ul class="m-0 ml-n3">
<li class="my-1 text-justify"><b>SKILL</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </li>
</ul>
<h3 class="font-weight-bold mb-3 mt-4">Tools and Weapons</h3>
<ul class="m-0 ml-n3 text-justify">
<li class="my-1"><b>WEAPON</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. <ul class="my-2" style="list-style-type:circle;">
<li>
<p style="margin-bottom:10px;"><i><b class="faded">Varient 1</b></i> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
</li>
<li>
<p style="margin-bottom:10px;"><i><b class="faded">Upgrade</b></i> - Consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</li>
</ul>
</li>
<li class="mt-3"><b>TOOL</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </li>
</ul>
<p class="mb-2 mt-3" style="font-size:larger;"><b>Backpack</b></p>
<!--MATERIALS LIST-->
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Weapon</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Spell</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Junk</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Tool</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Weapon</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Weapon</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Spell</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Tool</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Weapon</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Tool</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Spell</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Junk</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Weapon</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
<!--MATERIAL-->
<div class="d-inline-block m-1 text-center" style="width:85px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366; margin-bottom:-.13rem; " title="Name of Item ">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:85px; border-radius:.3rem .3rem 0 0; background-size:cover; background-position:center;  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
<span class="font-weight-bold" style="color:#fff; font-size:smaller; padding:2px; margin-top:-2px">Tool</span>
</div>
<a style="color:#00baba; font-size:12px;" href="#" data-toggle="collapse">Item Name</a>
</div> <!--material end-->
</div> <!--materials list end-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">relationships</h1>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla.</p>
<h3 class="mb-3 mt-4" style="font-weight: 600;"><a href="#" style="color:#00baba;">Character Name</a> - <span class="faded"> Relationship</span></h3>
<div class="p-2 mt-n2 text-white" style="font-size:1rem;display:flex;">
<div class="text-justify"> <i class="fas fa-quote-left pull- pr-2" style="color:#00baba;"></i>
<i>Quote that character has said.</i> <i class="fas fa-quote-right pull-right pl-3" style="color:#00baba;"></i>
<p class="text-right faded"><sup>Place or event where this quote was said.</sup></p>
</div>
</div>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla. Praesent ut dolor gravida, rhoncus eros at, ultricies lectus. Vivamus egestas varius sagittis. Nulla porta ligula ipsum, non sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. </p>
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Achievements</h1>
<!--Achievements TABLE-->
<table class="table-bordered w-100" style="table-layout:fixed; overflow-x:auto; word-break:break-word;">
<tr class="font-weight-bold text-center" style="background-color:#404356;">
<td style="border-color:#4c5067; width:80px;">Icon</td>
<td style="border-color:#4c5067;">Name</td>
<td style="border-color:#4c5067;">Prize</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td class="text-center" style="border-color:#4c5067;">Name</td>
<td class="text-center" style="border-color:#4c5067;">Unlockable</td>
</tr>
<tr>
<td colspan="3" style="border-color:#4c5067;">Description of what you need to do to acquire it.</td>
</tr>
</table> <!--Achievements table end-->
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Censorship</h1>
<h3 class="font-weight-bold mb-3">Episode Name</h3>
<p class="mb-2">Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. </p>
<!--CHARACTER VOICE OVERS TABLE-->
<div style="overflow-x:auto;">
<table class="table-bordered border-0 w-100" style="line-height:1.25;">
<tr class="font-weight-bold text-center" style="background-color:#404356;">
<td class="p-1" style="width:80px;; border-color:#4c5067;">Character</td>
<td style="min-width:25%; border-color:#4c5067;">Dates</td>
<td style="min-width:55%; border-color:#4c5067;">Dialog</td>
<td style="min-width:06%; border-color:#4c5067;">Sample</td>
</tr>
<tr>
<td rowspan="2" style="border-color:#4c5067;"><img src="https://i.imgur.com/gxfmNfD.png"></td>
<td style="border-color:#4c5067;">Date of the episode's airing</td>
<td style="border-color:#4c5067;">Original dialog's transcript</td>
<td class="text-center" style="border-color:#4c5067; font-size:150%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="opacity:0; margin-top:-25px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="25" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td style="border-color:#4c5067;">Date of the revision</td>
<td style="border-color:#4c5067;">Censored dialog's transcript</td>
<td class="text-center" style="border-color:#4c5067; font-size:150%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="opacity:0; margin-top:-25px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="25" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</table>
</div> <!--character voice overs table end-->
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Voice Acting</h1>
<!--STORY VOICE-OVERS TABLE-->
<table class="table-bordered border-0 w-100" style="word-break:break-word; line-height:1.25;">
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td style="width:30%; border-color:#4c5067;">Dubbing</td>
<td style="width:60%; border-color:#4c5067;">Voice Actor</td>
<td style="width:10%; border-color:#4c5067;">Sample</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/5mmhQtn.png" style="margin-right:2px; width:25px"> English (US)
</td>
<td style="border-color:#4c5067;">
<a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a>
</td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/HS6POE4.png" style="margin-right:2px; width:25px"> Portuguese (PT-BR)
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td rowspan="2" class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/fwXNufx.png" style="margin-right:2px; width:25px"> German
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a> <small>(1st Voice)</small></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a> <small>(2nd Voice)</small></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/PxC12gl.png" style="margin-right:2px; width:25px"> Spanish
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/OdfTrg5.png" style="margin-right:2px; width:25px"> Ukrainian
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/hPbye75.png" style="margin-right:2px; width:25px"> Filipino
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td rowspan="2" class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/78T6svN.png" style="margin-right:2px; width:25px"> Korean
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a> <small>(Animated Show)</small></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a> <small>(Movie and Video Game)</small></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/orL7uc4.png" style="margin-right:2px; width:25px"> Japanese
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
<tr>
<td class="font-weight-bold" style="background-color:#404356; border-color:#4c5067;">
<img src="https://i.imgur.com/AyIAsxw.png" style="margin-right:2px; width:25px"> Chinese (Simplified)
</td>
<td style="border-color:#4c5067;"><a style="color:#00baba;" href="#" data-toggle="collapse">Name Here</a></td>
<td class="text-center" style="border-color:#4c5067; font-size:130%;">
<p style="margin-top:-4px;"> ▶️ <span class="fr-video fr-fvc fr-dvi fr-draggable" style="opacity:1; margin-top:-22px; display: flex; align-items: center;  justify-content: center;" contenteditable="false"><video class="fr-fvc fr-dvi fr-draggable" video controlslist="nofullscreen" controls="" width="20" style="cursor: pointer; opacity:0">
<source src="https://cdn.discordapp.com/attachments/794917362629214219/794917416323907644/SHE_like_the_banana_made_with_ditty.it.mp4" type="video/mp4">
</video></span>
</p>
</td>
</tr>
</table> <!--story voice-overs table end-->
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Notes</h1>
<ul class="mb-0 pl-4" style="list-style-type:disc;">
<li>Text</li>
<li>Text</li>
<ul class="mb-0 pl-4" style="list-style-type:disc;">
<li>Subnote</li>
</ul>
<li>Text</li>
</ul>
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Trivia</h1>
<ul class="mb-0 pl-4" style="list-style-type:disc;">
<li>Text</li>
<li>Text</li>
<ul class="mb-0 pl-4" style="list-style-type:disc;">
<li>Subnote</li>
</ul>
<li>Text</li>
</ul>
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Appearances</h1>
<div class="py-2 mt-4 text-white" style="margin-top:2.0%;height:200px;font-size:90%;width:auto;border:1px solid #4c5067;overflow:auto;">
<ul class="m-0 text-justify">
<li> <a href="#" style="color: #00c6ca; font-weight:600"><i>Webcomic Name Here </i></a></li>
<li class="mt-1"> <a href="#" style="color: #00c6ca; font-weight:600"><i>Lorem ipsum dolor sit amet </i></a></li>
<li class="mt-1"><a href="#" style="color: #00c6ca; font-weight:600"><i>TV Show</i></a> — <a href="#" style="color: #00c6ca; font-weight:600"><i>Season 1 </i></a></li>
<li class="mt-1 ml-3" style="list-style-type: circle;"> <a href="#" style="color: #00c6ca; font-weight:600">
<img src="https://i.imgur.com/gxfmNfD.png" style="width:25px; margin-right:2px; margin-top:-2px"> <i>Chapter 1 (Part 1)</i></a> — "<a href="#" style="color: #00c6ca; font-weight:600">Episode Name</a>" </li>
<li class="mt-1 ml-3" style="list-style-type: circle;"> <a href="#" style="color: #00c6ca; font-weight:600">
<img src="https://i.imgur.com/gxfmNfD.png" style="width:25px; margin-right:2px; margin-top:-2px"> <i>Chapter 1 (Part 2)</i></a> — "<a href="#" style="color: #00c6ca; font-weight:600">Episode Name</a>" </li>
<li class="mt-1 ml-3" style="list-style-type: circle;"> <a href="#" style="color: #00c6ca; font-weight:600">
<img src="https://i.imgur.com/gxfmNfD.png" style="width:25px; margin-right:2px; margin-top:-2px"> <i>Chapter 2</i></a> — "<a href="#" style="color: #00c6ca; font-weight:600">Episode Name</a>" <small style="letter-spacing:0.5px">(Mentioned only)</small> </li>
<li class="mt-1 ml-3" style="list-style-type: circle;"> <a href="#" style="color: #00c6ca; font-weight:600">
<img src="https://i.imgur.com/gxfmNfD.png" style="width:25px; margin-right:2px; margin-top:-2px"> <i>Chapter 3</i></a> — "<a href="#" style="color: #00c6ca; font-weight:600">Episode Name</a>" <small style="letter-spacing:0.5px">(In flashback(s))</small> </li>
<li class="mt-1 ml-3" style="list-style-type: circle;"> <a href="#" style="color: #00c6ca; font-weight:600">
<img src="https://i.imgur.com/gxfmNfD.png" style="width:25px; margin-right:2px; margin-top:-2px"> <i>Chapter 4</i></a> — "<a href="#" style="color: #00c6ca; font-weight:600">Episode Name</a>" </li>
</ul>
</div>
<h3 class="font-weight-bold mb-3 mt-4">Non-Canon Appearances</h3>
<ul class="m-0 text-justify">
<li><a href="#" style="color: #00c6ca; font-weight:600"><i>Video-Game Name</i></a> <small style="letter-spacing:0.5px">(DLC)</small> </li>
<li><a href="#" style="color: #00c6ca; font-weight:600"><i>Duis porta eros et velit</i></a> <small style="letter-spacing:0.5px">(Costume only)</small> </li>
<li><a href="#" style="color: #00c6ca; font-weight:600"><i>Lorem ipsum dolor sit amet</i></a> </li>
</ul>
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">References</h1>
<div class=" mx-sm-auto text-white p-1 rounded" style="border: 1px solid rgba(255,255,255,0.2)">
<div style="background-color:rgba(255,255,255,0.060);" class=" p-3"> 1. <a href="#canned" style="color: #9e9e9e; margin-left:2px"><b>↑</b></a>
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Reference one</a><br> 2. <a href="#dev" style="color: #9e9e9e; margin-left:2px"><b>↑</b></a>
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Reference two </a> <br> 3. <a href="#dev" style="color: #9e9e9e; margin-left:2px"><b>↑</b></a>
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Reference three </a><br> 4. <a href="#none" style="color: #9e9e9e; margin-left:2px"><b>↑</b></a>
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Reference four </a> <br> 5. <a href="#none" style="color: #9e9e9e; margin-left:2px"><b>↑</b></a>
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Reference five </a>
</div>
</div>
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Site Navigation</h1>
<div style="overflow-x:auto;">
<table class="table-bordered border-0 w-100" style="line-height:1.25; background-color:#1a1d23;">
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="border-color:#4c5067;"><span style="margin-right:-73px"><a href="#" style="color:#00baba">Characters</a> in Name of Property</span>
<span class="float-right ml-1" style="font-size:90%; margin-top:1px">]</span>
<a style="color:#00baba" data-toggle="collapse" href="#" data-target=".tables-close0" aria-expanded="true">
<p class="float-right" style="font-size:90%; margin-top:1px">Collapse</p>
</a>
<span class="float-right mr-1" style="font-size:90%; margin-top:1px">[</span>
</td>
</tr>
</table>
<div class="tables-close0 collapse" style="transition: all 0.3s">
<table class="table-bordered border-0 w-100" style="line-height:1.25;background-color:#1a1d23;">
<tr>
<td class="text-center font-weight-bold border-top-0" style="border-color:#4c5067; background-color:#43475a; width:15%;">Protagonists:</td>
<td class="border-top-0" style="border-color:#4c5067;">
<!--Character LIST-->
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center;
                  background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center;background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
</div> <!--CHARACTER LIST end-->
</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Companions:</td>
<td style="border-color:#4c5067;">
<!--Character LIST-->
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center;background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center;background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
</div> <!--CHARACTER LIST end-->
</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Antagonists:</td>
<td style="border-color:#4c5067;">
<!--Character LIST-->
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
<!--Character start-->
<div class="d-inline-block m-1 text-center" style="width:70px;">
<div class="card text-center tooltipster" style="border-radius:0.36rem; border-width: 1px; Border-color:#495366; border-radius:px; background-color:#495366;" title="Chacter Name" data-placement="top">
<!--image-->
<div class="d-flex flex-row align-items-center justify-content-center p-2" style="height:70px; border-radius:.3rem .3rem .3rem .3rem; background-size:cover; background-position:center; background-color:#0e191a;">
<!--image of item-->
<img style="max-height:80px;" src="https://i.imgur.com/gxfmNfD.png">
<a class="btn btn-outline-secondary border-0" style="position:absolute; top:0; left:0; right:0; bottom:0; mix-blend-mode:screen; filter:brightness(120%) opacity:.85;" data-toggle="collapse" href="#" data-target=".expand-content"></a>
</div> <!--image end-->
</div>
<p class="mt-1" style="margin-bottom:-3px"><a style="color:#00baba; font-size:12px;" href="#">Name Here</a></p>
</div> <!--character end-->
</div> <!--CHARACTER LIST end-->
</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Other:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Supporting Cast</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Ditto.</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Background Characters:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Related Articles</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Non-Canon Characters:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Other:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
</table>
</div>
</div>
<div style="overflow-x:auto;">
<table class="table-bordered border-0 w-100" style="line-height:1.25; background-color:#1a1d23;">
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="border-color:#4c5067;"><span style="margin-right:-73px">Animated Series</span>
<span class="float-right ml-1" style="font-size:90%; margin-top:1px">]</span>
<a style="color:#00baba" data-toggle="collapse" href="#" data-target=".tables-close" aria-expanded="true">
<p class="float-right" style="font-size:90%; margin-top:1px">Collapse</p>
</a>
<span class="float-right mr-1" style="font-size:90%; margin-top:1px">[</span>
</td>
</tr>
</table>
<div class="tables-close collapse" style="transition: all 0.3s">
<table class="table-bordered border-0 w-100" style="line-height:1.25;background-color:#1a1d23;">
<tr>
<td class="text-center font-weight-bold border-top-0" style="border-color:#4c5067; background-color:#43475a; width:15%;">Season 1:</td>
<td class="border-top-0" style="border-color:#4c5067;"><a href="#" style="color:#00baba">Episode Name</a> • <a href="#" style="color:#00baba">Episode Name</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Season 2:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Episode Name</a> • <a href="#" style="color:#00baba">Episode Name</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Season 3:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Episode Name</a> • <a href="#" style="color:#00baba">Episode Name</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Holiday Episodes</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Christmas Specials:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Episode Name</a> • <a href="#" style="color:#00baba">Episode Name</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Halloween Episodes:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Episode Name</a> • <a href="#" style="color:#00baba">Episode Name</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Related Articles</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Associated Pages:</td>
<td style="border-color:#4c5067;">
<a href="#" style="color:#00baba">Characters (Animated Show)</a> • <a href="#" style="color:#00baba">Behind the Scenes</a> • <a href="#" style="color:#00baba">Voice Actors</a>
</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Other:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Theme Song</a> • <a href="#" style="color:#00baba">Soundtrack</a> • <a href="#" style="color:#00baba">Merch</a>
</td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Movies</td>
</tr>
<tr>
<td class="text-center" colspan="4" style="border-color:#4c5067;">
<a href="#" style="color:#00baba">Movie Name</a> • <a href="#" style="color:#00baba">Documentary</a> • <a href="#" style="color:#00baba">10 Years Special</a>
</td>
</tr>
</table>
</div>
</div>
<div style="overflow-x:auto;">
<table class="table-bordered border-0 w-100" style="line-height:1.25; background-color:#1a1d23;">
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="border-color:#4c5067;"><span style="margin-right:-73px">Name of Property</span>
<span class="float-right ml-1" style="font-size:90%; margin-top:1px">]</span>
<a style="color:#00baba" data-toggle="collapse" href="#" data-target=".tables-close2" aria-expanded="true">
<p class="float-right" style="font-size:90%; margin-top:1px">Collapse</p>
</a>
<span class="float-right mr-1" style="font-size:90%; margin-top:1px">[</span>
</td>
</tr>
</table>
<div class="tables-close2 collapse" style="transition: all 0.3s">
<table class="table-bordered border-0 w-100" style="line-height:1.25;background-color:#1a1d23;">
<tr>
<td class="text-center font-weight-bold border-top-0" style="border-color:#4c5067; background-color:#43475a; width:15%">Webcomic:</td>
<td class="border-top-0" style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">VideoGames:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Animated Series:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Related Articles</td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Associated Pages:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Marketing Material</a> • <a href="#" style="color:#00baba">Merch</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Events:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr>
<td class="text-center font-weight-bold" style="border-color:#4c5067; background-color:#43475a; width:15%">Other:</td>
<td style="border-color:#4c5067;"><a href="#" style="color:#00baba">Something Here</a> • <a href="#" style="color:#00baba">Something Here</a></td>
</tr>
<tr class="font-weight-bold text-center" style="background-color:#363949;">
<td colspan="4" class="p-2" style="width:40px;; border-color:#4c5067;">Crew</td>
</tr>
<tr>
<td class="text-center" colspan="4" style="border-color:#4c5067;">
<a href="#" style="color:#00baba">Name of Person</a> • <a href="#" style="color:#00baba">Name Here</a> • <a href="#" style="color:#00baba">Name Here</a>
</td>
</tr>
</table>
</div>
</div>
</div> <!--overview section end-->
<!--HEADER-->
<h1 class="card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">
<p>Categories <a style="color:#00baba" data-toggle="collapse" href="#" data-target=".categories" aria-expanded="true">
<i class="float-right fa-solid fa-chevron-down mr-2" style="color:#878c8d"></i></a></p>
</h1>
<div class="collapse categories">
<p><a href="#" style="color: #00c6ca; font-weight:600">Categories</a> : <a href="#" style="color: #00c6ca; font-weight:600">Characters</a> <b class="faded">|</b>
<a href="#" style="color: #00c6ca; font-weight:600">A tag here</a> <b class="faded">|</b>
<a href="#" style="color: #00c6ca; font-weight:600">Another One</a> <b class="faded">|</b>
<a href="#" style="color: #00c6ca; font-weight:600">Another One</a> <b class="faded">|</b>
<a href="#" style="color: #00c6ca; font-weight:600">One More</a>
</p>
</div>
<p class="mt-4 mb-2">Community content is available under <a href="#" style="color: #00c6ca; font-weight:600">CC-BY-SA</a> unless otherwise noted. </p>
<!--Custom Comment Stars-->
<div class="collapse fade show usercomment" style="transition: height 0s ease,opacity 0.5s ease;">
<!--PASSWORD BOX-->
<div class="card bg-transparent" style="height:45px; border: 3px solid  rgba(86,89,102,0.6); border-radius:4px 4px 4px 4px;">
<!--ENTER PASSWORD BOX-->
<div class="collapse fade BS-TYPE-PW show" style="transition-duration:0s; transition-delay:.05s; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; cursor:text;">
<div class="bg-faded rounded h-100 d-flex align-items-center" style="background-color:#0e191a">
<p class="mx-3 justify-self-center" style="opacity:.7;">Add a comment about PageNameHere</p>
<!--toggle button to start typing animation-->
<a class="btn btn-outline-secondary border-0" style="opacity:.20; position:absolute; top:0; left:0; right:0; bottom:0;" data-toggle="collapse" data-target=".BS-TYPE-PW"></a> <!--toggle button end-->
</div>
</div> <!--enter password box end-->
<!--TYPING ANIMATION-->
<div class="card px-2 border-0 d-flex flex-row align-items-center" style="height:45px; overflow-x:hidden; cursor:text; background-color:#0e191a">
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.05s;">C</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.10s;">o</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.12s;">m</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.20s;">m</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.25s;">e</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.30s;">n</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.33s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.42s;">t</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.45s;">h</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.50s;">a</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.53s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.62s;">y</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.65s;">o</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.76s;">u</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.75s;">j</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.80s;">u</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.85s;">s</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.94s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:.97s;">w</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.00s;">r</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.05s;">o</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.10s;">t</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.15s;">e</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.25s;">!</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.45s;">^</div>
<div class="collapse fade BS-TYPE-PW" style="transition-duration:0s; transition-delay:1.65s;">^</div>
</div> <!--typing animation end-->
<!--If adding more "letters" to the password, make sure you change TRANSITION-DELAY to a HIGHER NUMBER than the PREVIOUS one, keeping the intervals consistent (ex. be default, each transition-delay has .25 added to the previous one)-->
</div> <!--password box end-->
<div class="collapse fade mt-n2 mr-1 BS-TYPE-PW" style="transition-duration:0.35s; transition-delay:.1s;">
<!--LOG IN BUTTON-->
<div class="card bg-transparent border-0 d-inline-block mt-4">
<!--WHEN PASSWORD HAS NOT BEEN ENTERED-->
<div class="d-inline-block tooltipster" title="Please enter your password">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> POST </a>
</div> <!--when password has not been entered end-->
<!--WHEN PASSWORD HAS BEEN ENTERED-->
<!--NOTE: Make sure TRANSITION-DELAY is a HIGHER NUMBER than the last TRANSITION-DELAY in the "TYPING ANIMATION" section-->
<div class="collapse fade BS-TYPE-PW" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:.1s; transition-delay:1.25s;">
<ul class="nav nav-pills">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-success" href="" data-toggle="collapse" data-target=".usercomment"> POST </a>
</ul>
</div> <!--when password has been entered end-->
</div> <!--log in button end-->
</div>
</div>
<div class="collapse fade usercomment" style="transition: height 0.4s ease,opacity 1s ease; transition-delay:0.25s;">
<!--PASSWORD BOX-->
<div class="card bg-faded pb-4" style="height:auto; background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6); overflow:hidden">
<!--ENTER PASSWORD BOX-->
<div class="bg-transparent rounded h-100">
<div class="bg-transparent float-right p-2" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-bottom:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="far fa-triangle-exclamation"></i> Report</a>
<a class="dropdown-item" href="#"><i class="fas fa-link"></i> Copy Link</a>
</div>
</div>
<p class="mx-3 pt-2 mb-n1 justify-self-center" style="opacity:1; font-size:110%; font-weight:600"><i class="fa-solid fa-user" style="font-size:12px; color:#00baba;"></i>
<a style="color:#00baba;" href="#" data-toggle="collapse">User_name_Here</a> • a few seconds ago</p>
<div class="card bg-transparent border-top-0 border-right-0 border-bottom-0 rounded-0 ml-3 mt-3 pl-3" style="border-left:.15rem solid #50596a;">
<p class="mb-0 ml-n1 justify-self-center" style="opacity:.8;"> Comment that you just wrote! ^^ </p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-n1">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-heart" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade NEGATIVEREPLY" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#00baba">1 <i class="fas fa-heart"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".NEGATIVEREPLY"></a>
</div> <!--show spoiler box end-->
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-3">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-thumbs-down fa-flip-horizontal" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade COMMENTREPLY" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#ba0013">1 <i class="fas fa-thumbs-down fa-flip-horizontal"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".COMMENTREPLY"></a>
</div> <!--show spoiler box end-->
</div>
</div>
<div class="card p-2 m-3 mt-3" style="background-color:#0e191a; border: 1px solid  rgba(86,89,102,0.6); cursor:text">
<p class="faded">Write a reply</p>
</div>
<!--toggle button to start typing animation-->
</div>
</div> <!--enter password box end-->
<!--LOG IN BUTTON-->
<div class="card border-0 d-inline-block mt-3">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> POSTED </a>
</div> <!--when password has not been entered end-->
</div>
<h3 class="font-weight-bold mb-3 mt-4 pt-1">2 comments</h3>
<!--PASSWORD BOX-->
<div class="card bg-faded pb-4" style="height:auto; background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6); overflow:hidden">
<!--ENTER PASSWORD BOX-->
<div class="bg-transparent rounded h-100">
<div class="bg-transparent float-right p-2" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-bottom:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="far fa-triangle-exclamation"></i> Report</a>
<a class="dropdown-item" href="#"><i class="fas fa-link"></i> Copy Link</a>
</div>
</div>
<p class="mx-3 pt-3 justify-self-center" style="opacity:1; font-size:110%; font-weight:600"><i class="fa-solid fa-user" style="font-size:12px; color:#00baba;"></i>
<a style="color:#00baba;" href="#" data-toggle="collapse">User_name_Here</a> • 2h ago</p>
<div class="card bg-transparent border-top-0 border-right-0 border-bottom-0 rounded-0 ml-3 mt-3 pl-3" style="border-left:.15rem solid #50596a;">
<p class="mb-0 ml-n1 mr-2 mb-2 justify-self-center" style="opacity:.8;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-n1">
<!--CHECK BOX-->
<p style="color:white">17 <i class="far fa-heart" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade NEGATIVE2" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#00baba">18 <i class="fas fa-heart"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".NEGATIVE2"></a>
</div> <!--show spoiler box end-->
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-3">
<!--CHECK BOX-->
<p style="color:white">2 <i class="far fa-thumbs-down fa-flip-horizontal" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade COMMENT2" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#ba0013">3 <i class="fas fa-thumbs-down fa-flip-horizontal"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".COMMENT2"></a>
</div> <!--show spoiler box end-->
</div>
<div class="collapse fade show usercomment2 " style="transition: height 1s ease,opacity 0.5s ease;">
<!--PASSWORD BOX-->
<div class="card bg-faded  p-2 mx-3 mt-3" style="height:40px; border: 1px solid  rgba(86,89,102,0.6); border-radius:4px 4px 4px 4px; background-color:#0e191a">
<!--ENTER PASSWORD BOX-->
<div class="collapse fade BS-TYPE-PW2 show" style="transition-duration:0s; transition-delay:.05s; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; cursor:text;">
<div class="bg-faded rounded h-100 d-flex align-items-center" style="background-color:#0e191a">
<p class="mx-2 justify-self-center" style="opacity:.5;">Write a reply</p>
<!--toggle button to start typing animation-->
<a class="btn btn-outline-secondary border-0" style="opacity:.20; position:absolute; top:0; left:0; right:0; bottom:0;" data-toggle="collapse" data-target=".BS-TYPE-PW2"></a> <!--toggle button end-->
</div>
</div> <!--enter password box end-->
<!--TYPING ANIMATION-->
<div class="card px-2 border-0 d-flex flex-row align-items-center" style="height:45px; overflow-x:hidden; cursor:text; background-color:#0e191a">
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.05s;">C</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.10s;">o</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.12s;">m</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.20s;">m</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.25s;">e</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.30s;">n</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.33s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.42s;">t</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.45s;">h</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.50s;">a</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.53s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.62s;">y</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.65s;">o</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.76s;">u</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.75s;">j</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.80s;">u</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.85s;">s</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.94s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:.97s;">w</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.00s;">r</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.05s;">o</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.10s;">t</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.15s;">e</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.25s;">!</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.45s;">^</div>
<div class="collapse fade BS-TYPE-PW2" style="transition-duration:0s; transition-delay:1.65s;">^</div>
</div> <!--typing animation end-->
<!--If adding more "letters" to the password, make sure you change TRANSITION-DELAY to a HIGHER NUMBER than the PREVIOUS one, keeping the intervals consistent (ex. be default, each transition-delay has .25 added to the previous one)-->
</div> <!--password box end-->
<div class="collapse fade ml-3 mb-n2 BS-TYPE-PW2" style="transition-duration:0.35s; transition-delay:.1s; margin-top:-12px">
<!--LOG IN BUTTON-->
<div class="card bg-transparent border-0 d-inline-block mt-4">
<!--WHEN PASSWORD HAS NOT BEEN ENTERED-->
<div class="d-inline-block tooltipster">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> POST </a>
</div> <!--when password has not been entered end-->
<!--WHEN PASSWORD HAS BEEN ENTERED-->
<!--NOTE: Make sure TRANSITION-DELAY is a HIGHER NUMBER than the last TRANSITION-DELAY in the "TYPING ANIMATION" section-->
<div class="collapse fade BS-TYPE-PW2" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:.1s; transition-delay:1.25s;">
<ul class="nav nav-pills">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-success" href="" data-toggle="collapse" data-target=".usercomment2"> POST </a>
</ul>
</div> <!--when password has been entered end-->
</div> <!--log in button end-->
</div>
</div>
<div class="collapse fade usercomment2 ml-0" style="transition: height 0.4s ease,opacity 1s ease; transition-delay:0.25s;">
<div class="bg-transparent float-right p-2" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-bottom:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="far fa-triangle-exclamation"></i> Report</a>
<a class="dropdown-item" href="#"><i class="fas fa-link"></i> Copy Link</a>
</div>
</div>
<p class="mx-3 pt-3 mb-n1 justify-self-center" style="opacity:1; font-size:110%; font-weight:600"><i class="fa-solid fa-user" style="font-size:12px; color:#00baba;"></i>
<a style="color:#00baba;" href="#" data-toggle="collapse">User_name_Here</a> • <span class="faded">replied a few seconds ago</span></p>
<div class="card bg-transparent border-top-0 border-right-0 border-bottom-0 rounded-0 ml-3 mt-3 pl-3" style="border-left:.15rem solid #50596a;">
<p class="mb-0 ml-n2 mb-2 justify-self-center" style="opacity:.8;"> Comment that you just wrote! ^^ </p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-n1">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-heart" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade NEGATIVEREPLY2" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#00baba">1 <i class="fas fa-heart"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".NEGATIVEREPLY2"></a>
</div> <!--show spoiler box end-->
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-3">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-thumbs-down fa-flip-horizontal" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade COMMENTREPLY2" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#ba0013">1 <i class="fas fa-thumbs-down fa-flip-horizontal"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".COMMENTREPLY2"></a>
</div> <!--show spoiler box end-->
</div>
</div>
<div class="card p-2 mx-3 mt-3" style="background-color:#0e191a; border: 1px solid  rgba(86,89,102,0.6); cursor:text">
<p class="faded">Write a reply</p>
</div>
</div> <!--enter password box end-->
</div>
</div>
<br>
</div> <!--comment with reply  box end-->
<br>
<!--PASSWORD BOX-->
<div class="card bg-faded pb-4" style="height:auto; background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6); overflow:hidden">
<!--ENTER PASSWORD BOX-->
<div class="bg-transparent rounded h-100">
<div class="bg-transparent float-right p-2" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-bottom:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="far fa-triangle-exclamation"></i> Report</a>
<a class="dropdown-item" href="#"><i class="fas fa-link"></i> Copy Link</a>
</div>
</div>
<p class="mx-3 pt-3 justify-self-center" style="opacity:1; font-size:110%; font-weight:600"><i class="fa-solid fa-user" style="font-size:12px; color:#00baba;"></i>
<a style="color:#00baba;" href="#" data-toggle="collapse">User_name_Here</a> • 5 days ago</p>
<div class="card bg-transparent border-top-0 border-right-0 border-bottom-0 rounded-0 ml-3 mt-3 pl-3" style="border-left:.15rem solid #50596a;">
<p class="mb-0 ml-n1 mr-2 mb-2 justify-self-center" style="opacity:.8;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-n1">
<!--CHECK BOX-->
<p style="color:white">2 <i class="far fa-heart" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade NEGATIVE3" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#00baba">3 <i class="fas fa-heart"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".NEGATIVE3"></a>
</div> <!--show spoiler box end-->
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-3">
<!--CHECK BOX-->
<p style="color:white">13 <i class="far fa-thumbs-down fa-flip-horizontal" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade COMMENT3" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#ba0013">14 <i class="fas fa-thumbs-down fa-flip-horizontal"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".COMMENT3"></a>
</div> <!--show spoiler box end-->
</div>
<div class="collapse fade show usercomment3 " style="transition: height 1s ease,opacity 0.5s ease;">
<!--PASSWORD BOX-->
<div class="card bg-faded  p-2 mx-3 mt-3" style="height:40px; border: 1px solid  rgba(86,89,102,0.6); border-radius:4px 4px 4px 4px; background-color:#0e191a">
<!--ENTER PASSWORD BOX-->
<div class="collapse fade BS-TYPE-PW3 show" style="transition-duration:0s; transition-delay:.05s; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; cursor:text;">
<div class="bg-faded rounded h-100 d-flex align-items-center" style="background-color:#0e191a">
<p class="mx-2 justify-self-center" style="opacity:.5;">Write a reply</p>
<!--toggle button to start typing animation-->
<a class="btn btn-outline-secondary border-0" style="opacity:.20; position:absolute; top:0; left:0; right:0; bottom:0;" data-toggle="collapse" data-target=".BS-TYPE-PW3"></a> <!--toggle button end-->
</div>
</div> <!--enter password box end-->
<!--TYPING ANIMATION-->
<div class="card px-2 border-0 d-flex flex-row align-items-center" style="height:45px; overflow-x:hidden; cursor:text; background-color:#0e191a">
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.05s;">C</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.10s;">o</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.12s;">m</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.20s;">m</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.25s;">e</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.30s;">n</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.33s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.42s;">t</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.45s;">h</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.50s;">a</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.53s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.62s;">y</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.65s;">o</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.76s;">u</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.75s;">j</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.80s;">u</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.85s;">s</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.94s;">t</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:.97s;">w</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.00s;">r</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.05s;">o</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.10s;">t</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.15s;">e</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.25s;">!</div>
<p class="mr-1"></p>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.45s;">^</div>
<div class="collapse fade BS-TYPE-PW3" style="transition-duration:0s; transition-delay:1.65s;">^</div>
</div> <!--typing animation end-->
<!--If adding more "letters" to the password, make sure you change TRANSITION-DELAY to a HIGHER NUMBER than the PREVIOUS one, keeping the intervals consistent (ex. be default, each transition-delay has .25 added to the previous one)-->
</div> <!--password box end-->
<div class="collapse fade ml-3 mb-n2 BS-TYPE-PW3" style="transition-duration:0.35s; transition-delay:.1s; margin-top:-12px">
<!--LOG IN BUTTON-->
<div class="card bg-transparent border-0 d-inline-block mt-4">
<!--WHEN PASSWORD HAS NOT BEEN ENTERED-->
<div class="d-inline-block tooltipster">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> POST </a>
</div> <!--when password has not been entered end-->
<!--WHEN PASSWORD HAS BEEN ENTERED-->
<!--NOTE: Make sure TRANSITION-DELAY is a HIGHER NUMBER than the last TRANSITION-DELAY in the "TYPING ANIMATION" section-->
<div class="collapse fade BS-TYPE-PW3" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:.1s; transition-delay:1.25s;">
<ul class="nav nav-pills">
<a class="btn btn-default disabled" style="background-color:#20242c; border: 1px solid  rgba(86,89,102,0.6);"> Cancel </a>
<a class="btn btn-success" href="" data-toggle="collapse" data-target=".usercomment3"> POST </a>
</ul>
</div> <!--when password has been entered end-->
</div> <!--log in button end-->
</div>
</div>
<div class="collapse fade usercomment3 ml-0" style="transition: height 0.4s ease,opacity 1s ease; transition-delay:0.25s;">
<div class="bg-transparent float-right p-2" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-bottom:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="far fa-triangle-exclamation"></i> Report</a>
<a class="dropdown-item" href="#"><i class="fas fa-link"></i> Copy Link</a>
</div>
</div>
<p class="mx-3 pt-3 mb-n1 justify-self-center" style="opacity:1; font-size:110%; font-weight:600"><i class="fa-solid fa-user" style="font-size:12px; color:#00baba;"></i>
<a style="color:#00baba;" href="#" data-toggle="collapse">User_name_Here</a> • <span class="faded">replied a few seconds ago</span></p>
<div class="card bg-transparent border-top-0 border-right-0 border-bottom-0 rounded-0 ml-3 mt-3 pl-3" style="border-left:.15rem solid #50596a;">
<p class="mb-0 ml-n2 mb-2 justify-self-center" style="opacity:.8;"> Comment that you just wrote! ^^ </p>
<div class="d-flex flex-row align-items-top flex-wrap" style="line-height:1.25;">
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-n1">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-heart" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade NEGATIVEREPLY3" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#00baba">1 <i class="fas fa-heart"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".NEGATIVEREPLY3"></a>
</div> <!--show spoiler box end-->
<!-- Change far to fas or fad to make the post liked -->
<div class="card border-0 d-inline-flex flex-row align-items-center bg-transparent rounded-0 ml-3">
<!--CHECK BOX-->
<p style="color:white">0 <i class="far fa-thumbs-down fa-flip-horizontal" style="color:white"></i></p> <!--icon-->
<!--ICON WHEN CHECKED-->
<div class="collapse fade COMMENTREPLY3" style="position:absolute; top:0; left:0; right:0; bottom:0; transition-duration:0s; transition-delay:.350s;">
<div class="card border-0 rounded-0 h-100 justify-content-center align-item" style="background-color:#20242c">
<p style="color:#ba0013">1 <i class="fas fa-thumbs-down fa-flip-horizontal"></i></p> <!--icon-->
</div>
</div> <!--icon when checked end-->
<!--check box end-->
<!--TOGGLE-->
<a style="position:absolute; top:0; left:0; right:0; bottom:0; max-width:55px" data-toggle="collapse" href="#" data-target=".COMMENTREPLY3"></a>
</div> <!--show spoiler box end-->
</div>
</div>
<div class="card p-2 mx-3 mt-3" style="background-color:#0e191a; border: 1px solid  rgba(86,89,102,0.6); cursor:text">
<p class="faded">Write a reply</p>
</div>
</div> <!--enter password box end-->
</div>
</div>
<br>
</div> <!--comment with reply  box end-->
<br>
</div>
</div>
<div class="collapse fade SPECIAL_ARTICLES" style="transition: height 0s ease,opacity 1s ease;">
<div class="p-3 pt-4">
<div style="margin-top:-3.0rem; margin-left:-0.3rem;">
<div class="col-lg-auto hidden-sm-down d-flex justify-content-center float-right mr-n2">
<div class="border bg-transparent border-right-0" style="font-size:18px;">
<a style="text-decoration:none;color:#00baba;" href="#">
<span class="fa-stack tooltipster" data-placement="bottom" title="" style="vertical-align:top;" data-original-title="Discussion">
<i class="fa-solid fa-circle fa-stack-1x" style="font-size:90%;margin-top:-9px;"></i>
<i class="fa-solid fa-9 fa-stack-1x" style="font-size:50%;margin-top:-9px;color:#FFFFFF;"></i>
<i class="fa-regular fa-comment fa-fw" style="font-size:110%;"></i>
</span>
</a>
</div>
<div class="mx-2 ml-n1" style="border-left:4px solid;height:16px;border-width:2px;margin:auto;margin-top:9px;color:#444c4d;"></div>
<div class="bg-transparent border-0 ml-n2" style="font-size:18px;">
<a style="text-decoration:none;color:#00baba;" href="#"><i class="fa-regular fa-pen fa-fw mr-n1" style="margin:7px;"></i>
<span class="font-weight-bold" style="letter-spacing:1px;font-family:calibri;font-size:90%;display:inline-block;vertical-align:middle;line-height:normal;margin-top:-4px;margin-left:5px;">EDIT</span>
</a>
</div>
<div class="mx-2" style="border-left:4px solid;height:16px;border-width:2px;margin:auto;margin-top:9px;color:#444c4d;"></div>
<div class="bg-transparent" style="font-size:18px;"><a class="btn btn-secondary text-white btn-sm border-0 text-uppercase bg-transparent h-100" style="margin-top:-2px;margin-left:-5px;background:#0f1111;max-width:35px;" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa-regular fa-solid fa-ellipsis-vertical fa-fw" style="margin-top:5px;margin-left:-3px;color:#00baba;font-size:130%;"></i></a>
<div class="dropdown-menu"> <a class="dropdown-item" href="" data-toggle="collapse" data-target=".SPECIAL_ARTICLES"> Special Articles</a> <a class="dropdown-item" href="#"> Gallery</a>
</div>
</div>
</div>
<div class="text-white" style="color:black;"> in: <a style="color:#00baba;" href="#" data-toggle="collapse">Page or tag goes here</a>, <a style="color:#00baba;" href="#" data-toggle="collapse">Another One</a>, <a style="color:#00baba;" href="#" data-toggle="collapse">One more</a>, and <a style="color:#00baba;" href="#" data-toggle="collapse">7 more</a>
</div>
<p class="font-weight-bold mb-3 mt-3" style="font-size:180%">Special Articles</p>
<div class="card bg-transparent" style="border-color:#4c5067;max-width:300px;">
<div class="d-flex flex-row align-items-center justify-content-between" style="padding:12px;">
<span>
<i class="fas fa-list mr-2"></i>Contents </span>
<span class="ml-2"> [<a class="mx-1" style="font-size:smaller;color:#00baba;" data-toggle="collapse" href="#voice-overs-contents">hide</a>] </span>
</div>
<div class="collapse show" id="voice-overs-contents">
<hr class="m-0" style="border-color:#4c5067;">
<div class="p-1">
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">1.</span> Behind the Scenes</p>
<a class="btn btn-outline-secondary border-0" style="position:absolute;top:0;left:0;right:0;bottom:0;mix-blend-mode:screen;filter:brightness(50%);opacity:.75;" href="#story"></a>
</div>
<div class="d-block px-2 py-1" style="position:relative;">
<p><span style="color:#909193;">2.</span> Non-Canon relationships</p>
<a class="btn btn-outline-secondary border-0" style="position:absolute;top:0;left:0;right:0;bottom:0;mix-blend-mode:screen;filter:brightness(50%);opacity:.75;" href="#combat"></a>
</div>
</div>
</div>
</div>
<!--HEADER-->
<h1 class="w-100 card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Behind the Scenes </h1>
<p class="text-justify my-3 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="mt-4 pb-4 ">
<h1 class="w-100 card bg-transparent border-left-0 border-right-0 border-top-0 rounded-0 font-weight-bold pb-1 mb-3 mt-4" style="border-bottom:1px solid #4c5067;">Non-Canon relationships </h1>
<p class="text-justify my-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="pl-3">
<h3 class="mb-3 mt-4" style="font-weight: 600;"><a href="#" style="color:#00baba;">Character Name</a> - <span class="faded"> Relationship</span></h3>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla. Praesent ut dolor gravida, rhoncus eros at, ultricies lectus. Vivamus egestas varius sagittis. Nulla porta ligula ipsum, non sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. </p>
<hr class="d-flex" style="clear: none;border-color:#4c5067; margin-top:5px" />
<h3 class="mb-3 mt-4" style="font-weight: 600;"><a href="#" style="color:#00baba;">Character Name</a> - <span class="faded"> Relationship</span></h3>
<p>Morbi id elementum libero. Quisque nec sem et nisl consequat aliquet eget sit amet metus. Donec aliquet mi sem, a ultricies ligula iaculis id. Aenean mauris est, ultricies eu diam et, eleifend placerat sapien. In pharetra sapien nec varius fringilla. Praesent ut dolor gravida, rhoncus eros at, ultricies lectus. Vivamus egestas varius sagittis. Nulla porta ligula ipsum, non sollicitudin ante mattis ac. Nunc sodales diam id eros volutpat, vel condimentum tellus aliquam. Quisque tincidunt lectus sit amet erat tincidunt sollicitudin. Fusce commodo ante eget volutpat cursus. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--container end-->
</div>
</div>
<!-- < Page Footer  >
-------------------------------------------------------------------------------->
<div class="d-block text-center p-5" style="background-color: #162627;">
<div class="row px-3">
<div class="col text-left">
<img src="https://i.imgur.com/XOWL8AH.png" width="200">
<p class="font-weight-bold mt-3 ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%">Explore Properties</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Fandom</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Muthead</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Fanatical</a>
</p>
<p class="font-weight-bold ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%">FOLLOW US</p>
<div class="col-lg-auto hidden-sm-down d-flex justify-content-center float-left" style="margin-top:10px; margin-left:-15px">
<div class="mr-3">
<a style="text-decoration: none; color:rgba(255,255,255,0.5)" href="#">
<i class="fa-brands fa-facebook-f fa-fw" style="font-size:130%;"></i></a>
</div>
<div class="mr-3">
<a style="text-decoration: none; color:rgba(255,255,255,0.5)" href="#">
<i class="fa-brands fa-twitter fa-fw" style="font-size:130%;"></i></a>
</div>
<div class="mr-3">
<a style="text-decoration: none; color:rgba(255,255,255,0.5)" href="#">
<i class="fa-brands fa-youtube fa-fw" style="font-size:130%;"></i></a>
</div>
<div class="mr-3">
<a style="text-decoration: none; color:rgba(255,255,255,0.5)" href="#">
<i class="fa-brands fa-instagram fa-fw" style="font-size:130%;"></i></a>
</div>
<div class="mr-3">
<a style="text-decoration: none; color:rgba(255,255,255,0.5)" href="#">
<i class="fa-brands fa-tiktok fa-fw" style="font-size:130%;"></i></a>
</div>
</div>
</div>
<div class="col text-left">
<p class="font-weight-bold ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%">OVERVIEW</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> What is Fandom?</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> About</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Careers</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Press</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Contact</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Terms of Use</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Privacy Policy</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Global Sitemap</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Local Sitemap</a>
</p>
</div>
<div class="col text-left">
<p class="font-weight-bold ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%">COMMUNITY</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Community Central</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Support</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Help</a>
</p>
<p class=" mt-5 font-weight-bold ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%;">ADVERTISE</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Media Kit</a>
</p>
<p class="font-weight-bold ml-1" style="color:black; font-family: calibri; font-size:105%; margin-top:-12px">
<a href="#" id="" rel="noopener noreferrer" target="_blank" style="color: #00baba"> Contact</a>
</p>
</div>
<div class="col text-left">
<p class="font-weight-bold ml-1 text-uppercase" style="color:white; font-family: calibri; letter-spacing:0.5px; font-size:105%;">FANDOM APPS</p>
<p class="ml-1 mb-n1" style=" font-weight:400 ;color:white; font-family: ; letter-spacing:0.5px; font-size:90%;">Take your favorite fandoms with<br>you and never miss a beat.</p>
<img src="https://i.imgur.com/0epteeQ.png" class="rounded mt-4 pt-2 mr-3 float-left" width="80">
<p><img src="https://i.imgur.com/0WT6VLv.png" class="rounded mt-4 pt-2" width="120"></p>
<p><img src="https://i.imgur.com/EuAQdb1.png" class="rounded mt-n2 pt-" width="120"></p>
</div>
</div>
</div>
<!-- < Copyright  >
-------------------------------------------------------------------------------->
<p class="d-block text-center text-uppercase p-3 mt-n3" style="letter-spacing: 1px;color: inherit;font-size: 10px;background-color:#0e191a ; ">
<a class=" text-white" href="#" id="" rel="noopener noreferrer" target="_blank">Copyright NAME OF PROPERTY </a>
<span class="font-weight-bold text-white">·</span>
<a class=" text-white" href="#" id="" rel="noopener noreferrer" target="_blank"> PROPERTY© 2023</a>
</p>
<!-- < Minimize Button >
-------------------------------------------------------------------------------->
<div class="fixed-bottom p-2 rounded-top" style="bottom:0;left:.8rem;right:inherit; background-color:#0c2226">
<a class="tooltipster" data-toggle="collapse" data-target=".full-width" href="#" style="color:#00baba; text-decoration: none" title="Minimize Window" data-placement="top"><i class="far fa-window-restore fa-fw"></i></a>
</div>
<!-- < Minimize Button >
-------------------------------------------------------------------------------->
</div> <!--content end-->
<div class="col-auto hidden-sm-down" style="min-width: calc(100vw - 50px - 100%)"></div>
</div> <!--content end-->
</div>
<!-- < Minimize Button >
-------------------------------------------------------------------------------->
<div class="fixed-bottom p-2 rounded-top bg-faded shadow" style="bottom:0;left:.8rem;right:inherit; z-index: 1">
<a class="tooltipster" data-toggle="collapse" data-target=".full-width" href="#" style="text-decoration: none" title="Maximize Window" data-placement="top"><i class="far fa-window-restore fa-fw"></i></a>
</div>
<div class="fixed-bottom p-2 rounded-top bg-faded shadow" style="bottom:0;left:3.5rem;right:inherit; z-index: 1">
<a class="tooltipster" href="https://toyhou.se/ApertureScience" id="" rel="noopener noreferrer" target="_blank" title="Code by ApertureScience" data-placement="top" style="text-decoration: none"><i class="fas fa-code fa-fw"></i></a>
</div>
<!-- < Minimize Button >
-------------------------------------------------------------------------------->
<div style="margin-top:-400vh"></div>

Aktuelle Version vom 25. März 2025, 14:35 Uhr

Testseite

Charakter-Infobox

Charakter Name
Bildunterschrift


Persönlichkeit

Der Charakter ist mutig, intelligent und hat eine komplexe Vergangenheit... Test esfessefsefsefes

Aussehen

Er/sie/es hat blaue Haare und trägt meistens eine schwarze Jacke...

Geschichte

Hintergrund

Geboren in einer kleinen Stadt, wuchs er/sie/es unter schwierigen Bedingungen auf...

Wichtige Ereignisse

Teilnahme am Turnier von 2025

Rettung der Welt von der großen Bedrohung

Trivia

Lieblingsessen: Sushi

Hat Angst vor Spinnen

Quellen

Abgerufen von „http://sandpoint-haven.de/wiki/index.php?title=Test&oldid=99“