Stor8

<!--PERMISSIONS CODE - CUSTOM COLORS
I originally made this code because I have an OC with VERY weird gender and thus I needed to clarify who can use what pronouns and terms for my OC. I decided to tweak it a bit and release it to the public!

COLOR KEY: #FAC8C5 - Main Text + Borders
           #3A294A - Main Background
           #2E3E93 - Header Background
           #D68BFF - Header Text + Header Borders + Credit

TEXT KEY: (Replace the text with what you need)
          Character_Name = Your OC's name
          pro/noun = Your OC's pronouns, if multiple, you'll need to manually add them in
          [gendered terms] = This is for if your character uses both gendered and non gendered terms, or if there's a specific gendered term that only a specific group of people can use both in character (IC) or out of character (OOC). So either replace it with the specific term, or replace it if you wanna generalize between gendered terms in general or non gendered terms!
          
-->
<div class="container-fluid" style="font-size:13pt; color: #FAC8C5;">
    
    <div class="card rounded-0 border-0 mb-2 p-3" style="background: #3A294A;">
    
    <!--HEADER-->
    <div class="card text-uppercase display-4 p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Character_Name - Extra Info (Gender Permissions)</div>
    <!--END OF HEADER-->
    
    <!--OVERVIEW-->
    <div class="row d-flex justify-content-center">
    <div class="col-md-3">
        <div class="card bg-transparent rounded-0 m-1" style="border: 2px solid; height:250px; background-size:cover; background-repeat:no-repeat; background-position: top; background-image:url('https://dummyimage.com/350/FFF/000000');"></div>
    </div>
    
    <div class="col-lg-9 card-text p-3 mb-3">
        <p>This is where you can explain about your character's gender and pronoun usage in detail.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>
        
        <p>Lobortis sapien elementum consequat sodales hac morbi enim, torquent platea. Hac aptent class tristique curae nunc faucibus cubilia. Fermentum lorem scelerisque et viverra neque sollicitudin feugiat maximus. Nullam magna elementum lacus maecenas est malesuada augue mauris netus. Molestie a suscipit donec gravida enim egestas suspendisse. Nisl himenaeos scelerisque malesuada platea porta porta magna elementum cras. Pellentesque nostra augue iaculis facilisi ullamcorper ligula; consectetur curae lacus. Inceptos efficitur varius bibendum netus vitae elementum elementum arcu sociosqu. Scelerisque dictumst a ex semper enim torquent praesent. Ultricies senectus sapien ante egestas libero nulla maximus.</p>
    </div>
    </div>
    <!--END OF OVERVIEW-->
    
    <!--GENDER PERMISSIONS-->
    <div class="row d-flex justify-content-center mb-3 p-1">
        
        <!--PERM 1-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Can use pro/noun & [gendered terms] (example, example, etc.) exclusively</div>
            
            <p>These are the characters and people who can refer to Character_Name exclusively using [gendered terms] and pron/oun.</p>
            
            <p>IC:</p>
            <ul>
                <li>Character</li>
                <li>Character but it has an asterik/footnote clause to it<sup>1</sup></li>
                <li>Character (but this is a clarification or a grouping of characters)</li>
            </ul>
            
            <p>OOC:</p>
            <ul>
                <li>Person</li>
                <li>Person</li>
                <li>Group of People (Person A, Person B, etc)</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
        </div>
        <!--END OF PERM 1-->
        
        <!--PERM 2-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Can use pro/noun & [gendered terms] by default</div>
            
            <p>These are the characters and people who can refer to Character_Name using [gendered terms] and pron/ouns. People/characters in this category <i>need</i> to alternate using [gendered terms] and pro/noun on occassion, but do not need to use those by default.</p>
            
            <p>IC:</p>
            <ul>
                <li>Character</li>
                <li>Character but it has an asterik/footnote clause to it<sup>1</sup></li>
                <li>Character with a second footnote<sup>2</sup></li>
            </ul>
            
            <p>OOC:</p>
            <ul>
                <li>Person</li>
                <li>Person</li>
                <li>Person</li>
            </ul>
            
            <sup>1: This is the first footnote.<br>
            2: This is the second footnote.
            </sup>
        </div>
        <!--END OF PERM 2-->
        
        <!--PERM 3-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Must use pro/noun & [gendered terms] by default</div>
            
            <p>These are the characters and people who must refer to Character_Name by [gendered terms] and pro/nouns by default. On occassion they can use [gendered terms].</p>
            
            <p>IC:</p>
            <ul>
                <li>Character</li>
                <li>Character</li>
                <li>Character</li>
            </ul>
            
            <p>OOC:</p>
            <ul>
                <li>Person</li>
                <li>Person</li>
                <li>Person</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
            
        </div>
        <!--END OF PERM 3-->
        
        <!--PERM 4-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Must use either pro/noun & [gendered terms] exclusively</div>
            
            <p>These are the characters and people who must refer to Character_Name by [gendered terms] and pro/nouns by exclusively.</p>
            
            <p>IC:</p>
            <ul>
                <li>Character</li>
                <li>Character</li>
                <li>Character</li>
            </ul>
            
            <p>OOC:</p>
            <ul>
                <li>Person</li>
                <li>Person</li>
                <li>Person</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
        </div>
        <!--END OF PERM 4-->
    </div>
    <!--END OF GENDER PERMISSIONS-->
    
    <!--HEADER-->
    <div class="card text-uppercase display-4 p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Character_Name - Extra Info (Character Permissions)</div>
    <!--END OF HEADER-->
    
    <!--OVERVIEW-->
    <div class="row d-flex justify-content-center">
    
    <!--IMG-->
    <div class="col-md-3">
        <div class="card bg-transparent rounded-0 m-1" style="border: 2px solid; min-height:350px; background-size:cover; background-repeat:no-repeat; background-position: top; background-image:url('https://dummyimage.com/350/FFF/000000');"></div>
    </div>
    <!--END OF IMG-->
    
    <!--KEY
    The actual lists do not use the fa-2x sizer on it, so when you copy and paste, remember to delete that for a cleaner look. Or don't if you want it big, I ain't the boss of you.-->
    <div class="col-md-4 p-3 mb-3">
        <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Key</div>
        <p class="align-items-center"><i class="fa-solid fa-square-check fa-2x" style="color:#0ecf3e;"></i> Allowed</p>
        <p class="align-items-center"><i class="fa-solid fa-square-question fa-2x" style="color:#4e90f2;"></i> Ask / Unsure</p>
        <p class="align-items-center"><i class="fa-solid fa-square-heart fa-2x" style="color:#eca81d;"></i> Friends/Mutuals Only</p>
        <p class="align-items-center"><i class="fa-solid fa-square-xmark fa-2x" style="color:#e95656;"></i> Not Allowed</p>
        <p class="align-items-center"><i class="fa-solid fa-square fa-2x" style="color:#9f9f9f;"></i> Undecided</p>
    </div>
    <!--END OF KEY-->
    
    <!--TEXT-->
    <div class="col-md-4 card-text p-3 mb-3">
        <p>Think of this as a character blurb or overview, especially useful if you're using a character for roleplaying or commissions. 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>
        
        <p>Lobortis sapien elementum consequat sodales hac morbi enim, torquent platea. Hac aptent class tristique curae nunc faucibus cubilia.</p>
    </div>
    <!--END OF TEXT-->
    </div>
    <!--END OF OVERVIEW-->
    
    <!--CHARACTER PERMISSIONS-->
    <div class="row d-flex justify-content-center p-1 mb-n2">
        
        <!--DESIGN-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Design</div>
            
            <p>Base Design:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Simplification</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Artistic Liberty</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Revealing Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Colors</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Hairstyles</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Extra Detail</li>
            </ul>
            
            <p>Human/Anthro/Feral Design:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Simplification</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Artistic Liberty</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Revealing Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Colors</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Hairstyles</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Extra Detail</li>
            </ul>
            
            <p>Human/Anthro/Feral Design:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Simplification</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Artistic Liberty</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Revealing Outfits</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Colors</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Alternate Hairstyles</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Extra Detail</li>
            </ul>
            
            <p>Other:</p>
            <ul class="fa-ul">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Draw as a Human Design</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Draw as an Anthro Design</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Draw as a Feral Design</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Gender Bending</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
        </div>
        <!--END OF DESIGN-->
        
        <!--VIOLENCE-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Violence Level</div>
            
            <p>Injury:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Bleeding:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Light</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Medium</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Heavy</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Damage/Wounds:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Light</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Medium</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Heavy</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Broken Bones:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Minimal</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Excessive</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Battle Wounds</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Self Harm:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Minimal</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Excessive</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Suicide</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Death</li>
            </ul>
            
            <p>Gore:</p>
            <ul class="fa-ul">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Cartoonish Gore</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Candy Gore</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Realistic Gore</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Medical Gore</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Limb Loss</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Excessive Limb Loss</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Gut Spill</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Torture (others)</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Torture (self)</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
        </div>
        <!--END OF VIOLENCE-->
        
        <!--INTERACTION-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Intimicy & Interaction Level</div>
            
            <p>Interactions:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Character</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With my Character</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Character</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Character</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Character</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Canon Characters:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Canon Character</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Canon Character</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Canon Character</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Crossovers</li>
            </ul>
            
            <p>Intimicy:</p>
            <ul class="fa-ul">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Hanging out / General interactions</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Comforting others</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With family:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Cuddling</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Angst</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Comforting</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> General Interactions</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With partner/SO:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Holding Hands</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Cuddling</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Angst</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Comforting</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> General Interactions</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Light Affection/PDA</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Heavy PDA</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> With Group_Name:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Angst</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Comforting</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Fighting Each Other</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> General Interactions</li>
                    </ul>
                </li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> R18:
                    <ul class="fa-ul">
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Joking Content</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Non-explicit NSFW</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Suggestive</li>
                        <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Explicit</li>
                    </ul>
                </li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
            
        </div>
        <!--END OF INTERACTION-->
        
        <!--ART-->
        <div class="col-sm p-3 m-2" style="border: 2px solid;">
            <div class="card text-uppercase p-2 text-center mb-3" style="border: 2px solid; background: #2E3E93; color: #D68BFF;">Artwork & Writing</div>
            
            <p>Seeking:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Gift Art</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Fan Art / Fanfics</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Trades</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Commissions</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> General Artwork / Fics</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Shipping Artwork / Fics</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Family Centered Artwork / Fics</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Icons</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Ref Sheets</li>
            </ul>
            
            <p>POV / Writing Styles:</p>
            <ul class="fa-ul mt-n3">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> 3rd Person</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> 1st Person</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> 2nd Person</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Drabbles (100 words/less)</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Any Fic length (the longer the better)</li>
            </ul>
            
            <p>Other:</p>
            <ul class="fa-ul">
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> AUs</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> Roleplays</li>
                <li><i class="fa-solid fa-square" style="color:#9f9f9f;"></i> All Art Levels Accepted</li>
            </ul>
            
            <sup>1: This is a footnote.</sup>
        </div>
        <!--END OF ART-->
        
    </div>
    <!--END OF CHARACTER PERMISSIONS-->
    
    </div>
    
    <div style="height: 5px; background: #D68BFF;">
        <a href="https://toyhou.se/BigGayFish" style="color: #D68BFF;" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
    </div>
</div>