Stor8

<!--ITTY BITTY - COLOR VERSION VER

I really wanted to make a micro code for a while now, but with text that's actually readable so here I go! I was initially going to go for a visual novel/RPG type UI style code, but decided to do that for a more extended version of this code, so instead I'm keeping this real short and simple. It doesn't really need an indext but here we go:

INDEX:

COLOR KEY: #d8f536 - PRIMARY ACCENT
           #ffbfbe - SECONDARY ACCENT
           #3b1a42 - ACCENT TEXT

CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like

QUICK INFO PT1 - This is the name, pronouns, n age for the character. It's outside the rest of the information box so it doesn't actually scroll and stays on top of the rest of the info

QUICK INFO PT2 - The rest of the quick info, all of this scrolls alongside the box and the rest of the info

TASTES (LIKES/DISLIKES) - The usual! It's really easy to delete the whole thing really if you don't want to have it

CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!

-->
<div class="container-fluid" style="max-width:500px; font-size:13pt;">
    <div class="row no-gutters align-items-center">
        <!--CHARACTER IMG / QUOTE-->
        <div class="col-4 p-2">
            <div class="card bg-transparent" style="border-radius: 7px; height:150px; border: #d8f536 1px solid;
            
            background: url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72659271_62k.jpg) center no-repeat;
            
            background-size:cover;" 
            
            title="Character Quote. Make it as long or as short. You can put anything here. In fact, you could probably put the bee movie script here." data-toggle="tooltip"></div>
        </div>
        <!--END OF CHARACTER IMG / QUOTE-->
        
        <!--CHARACTER BOX-->
        <div class="col-8">
            <!--QUICK INFO PT1 (DOESN'T SCROLL)-->
            <div class="card-deck align-items-center">
            <div class="card p-1 border-0 text-uppercase m-1" style="letter-spacing: 5px; font-weight: bold; font-size:15pt; background-color:#d8f536; color:#3b1a42;">
                Name
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:#ffbfbe; color:#3b1a42;">
                pro/nouns
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:#ffbfbe; color:#3b1a42;">
                age
            </div>
            </div>
            <!--QUICK INFO PT1-->
            
            <div class="card-text overflow-auto" style="max-height:110px;">
            <!--QUICK INFO PT2 (SCROLLS WITH BOX)-->
            <div class="card-deck align-items-center">
            <div class="card border-0 p-1 m-1" style="background-color:#ffbfbe; color:#3b1a42;">
                gender
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:#ffbfbe; color:#3b1a42;">
                orientation
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:#ffbfbe; color:#3b1a42;">
                <a href="#" style="color:#3b1a42; font-weight:bold;">theme</a>
            </div>
            </div>
            <!--QUICK INFO PT2-->
            
            <!--TASTES-->
            <div class="row no-gutters">
                <!--LIKES-->
                <div class="col-6">
                    <div class="card border-0 text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;  background-color:#d8f536; color:#3b1a42;">Likes</div>
                    <ul>
                        <li>content</li>
                        <li>content</li>
                        <li>content</li>
                    </ul>
                </div>
                <!--END OF LIKES-->
                
                <!--DISLIKES-->
                <div class="col-6">
                    <div class="card border-0 text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;  background-color:#d8f536; color:#3b1a42;">Dislikes</div>
                    <ul>
                        <li>content</li>
                        <li>content</li>
                        <li>content</li>
                    </ul>
                </div>
                <!--END OF DISLIKES-->
            </div>
            <!--END OF TASTES-->
            
            <!--CHARACTER INFO-->
            <p>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>
            <!--END OF CHARACTER INFO-->
            </div>
        </div>
        <!--CHARACTER BOX-->
    </div>

    <div class="card-text p-1 mx-2" style="background-color:#d8f536;">
        <a href="https://toyhou.se/BigGayFish" style="color:#d8f536;" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
    </div>
</div>

<!--ITTY BITTY - BOOTSTRAPS VER

I really wanted to make a micro code for a while now, but with text that's actually readable so here I go! I was initially going to go for a visual novel/RPG type UI style code, but decided to do that for a more extended version of this code, so instead I'm keeping this real short and simple. It doesn't really need an indext but here we go:

INDEX:

CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like

QUICK INFO PT1 - This is the name, pronouns, n age for the character. It's outside the rest of the information box so it doesn't actually scroll and stays on top of the rest of the info

QUICK INFO PT2 - The rest of the quick info, all of this scrolls alongside the box and the rest of the info

TASTES (LIKES/DISLIKES) - The usual! It's really easy to delete the whole thing really if you don't want to have it

CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!

-->
<div class="container-fluid" style="max-width:500px; font-size:13pt;">
    <div class="row no-gutters align-items-center">
        <!--CHARACTER IMG / QUOTE-->
        <div class="col-4 p-2">
            <div class="card bg-transparent card-outline-primary" style="border-radius: 7px; height:150px; 
            
            background: url({{u!Character IMG URL!}}) center no-repeat;
            
            background-size:cover;" 
            
            title="{{!Character Quote!}}" data-toggle="tooltip"></div>
        </div>
        <!--END OF CHARACTER IMG / QUOTE-->
        
        <!--CHARACTER BOX-->
        <div class="col-8">
            <!--QUICK INFO PT1 (DOESN'T SCROLL)-->
            <div class="card-deck align-items-center">
            <div class="card border-0  bg-primary p-1 text-uppercase m-1" style="letter-spacing: 5px; font-weight: bold; font-size:15pt;">
                {{!Name!}}
            </div>
            
            <div class="card bg-faded border-0 p-1 m-1">
                {{!Pronouns!}}
            </div>
            
            <div class="card bg-faded border-0  p-1 m-1">
                {{!Age!}}
            </div>
            </div>
            <!--END OF QUICK INFO PT1-->
            
            <div class="card-text overflow-auto" style="max-height:110px;">
            <!--QUICK INFO PT2 (SCROLLS WITH BOX)-->
            <div class="card-deck align-items-center">
            <div class="card bg-faded border-0 p-1 m-1">
                {{!Gender!}}
            </div>
            
            <div class="card bg-faded border-0 p-1 m-1">
                {{!Orientation!}}
            </div>
            
            <div class="card bg-faded border-0  p-1 m-1">
                <a href="{{u!Theme Song URL!}}">{{!Theme Name!}}</a>
            </div>
            </div>
            <!--QUICK INFO PT2-->
            
            <!--TASTES-->
            <div class="row no-gutters">
                <!--LIKES-->
                <div class="col-6">
                    <div class="card border-0  bg-primary text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;">Likes</div>
                    <ul>
                        {{%Likes%
                        <li>{{%Likes Content%}}</li>
                        %end%}}
                    </ul>
                </div>
                <!--END OF LIKES-->
                
                <!--DISLIKES-->
                <div class="col-6">
                    <div class="card border-0  bg-primary text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;">Dislikes</div>
                    <ul>
                        {{%Dislikes%
                        <li>{{%Dislikes Content%}}</li>
                        %end%}}
                    </ul>
                </div>
                <!--END OF DISLIKES-->
            </div>
            <!--END OF TASTES-->
            
            <!--CHARACTER INFO-->
            {{%Character Info%
            <p>{{l%Paragraph Content%}}</p>
            %end%}}
            <!--END OF CHARACTER INFO-->
            </div>
        </div>
        <!--CHARACTER BOX-->
    </div>

    <div class="card-text bg-primary p-1 mx-2">
        <a href="https://toyhou.se/BigGayFish" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
    </div>
</div>

<!--ITTY BITTY - COLOR VERSION VER

I really wanted to make a micro code for a while now, but with text that's actually readable so here I go! I was initially going to go for a visual novel/RPG type UI style code, but decided to do that for a more extended version of this code, so instead I'm keeping this real short and simple. It doesn't really need an indext but here we go:

INDEX:

COLOR KEY: {{c!Primary Accent!}} - PRIMARY ACCENT
           {{c!Secondary Accent!}} - SECONDARY ACCENT
           {{c!Accent Text!}} - ACCENT TEXT

CHARACTER IMG / QUOTE - The main image of the code, it should be a relatively square/icon image, it'll auto center itself out. There's also a quote section that you can edit as you like

QUICK INFO PT1 - This is the name, pronouns, n age for the character. It's outside the rest of the information box so it doesn't actually scroll and stays on top of the rest of the info

QUICK INFO PT2 - The rest of the quick info, all of this scrolls alongside the box and the rest of the info

TASTES (LIKES/DISLIKES) - The usual! It's really easy to delete the whole thing really if you don't want to have it

CHARACTER INFO - The actual place to put all your character info. You can keep it short or make it super long, up to you!

-->
<div class="container-fluid" style="max-width:500px; font-size:13pt;">
    <div class="row no-gutters align-items-center">
        <!--CHARACTER IMG / QUOTE-->
        <div class="col-4 p-2">
            <div class="card bg-transparent" style="border-radius: 7px; height:150px; border: {{c!Primary Accent!}} 1px solid;
            
            background: url({{u!Character IMG URL!}}) center no-repeat;
            
            background-size:cover;" 
            
            title="{{!Character Quote!}}" data-toggle="tooltip"></div>
        </div>
        <!--END OF CHARACTER IMG / QUOTE-->
        
        <!--CHARACTER BOX-->
        <div class="col-8">
            <!--QUICK INFO PT1 (DOESN'T SCROLL)-->
            <div class="card-deck align-items-center">
            <div class="card p-1 border-0 text-uppercase m-1" style="letter-spacing: 5px; font-weight: bold; font-size:15pt; background-color:{{c!Primary Accent!}}; color:{{c!Accent Text!}};">
                {{!Name!}}
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:{{c!Secondary Accent!}}; color:{{c!Accent Text!}};">
                {{!Pronouns!}}
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:{{c!Secondary Accent!}}; color:{{c!Accent Text!}};">
                {{!Age!}}
            </div>
            </div>
            <!--QUICK INFO PT1-->
            
            <div class="card-text overflow-auto" style="max-height:110px;">
            <!--QUICK INFO PT2 (SCROLLS WITH BOX)-->
            <div class="card-deck align-items-center">
            <div class="card border-0 p-1 m-1" style="background-color:{{c!Secondary Accent!}}; color:{{c!Accent Text!}};">
                {{!Gender!}}
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:{{c!Secondary Accent!}}; color:{{c!Accent Text!}};">
                {{!Orientation!}}
            </div>
            
            <div class="card border-0 p-1 m-1" style="background-color:{{c!Secondary Accent!}}; color:{{c!Accent Text!}};">
                <a href="{{u!Theme Song URL!}}" style="color:{{c!Accent Text!}}; font-weight:bold;">{{!Theme Name!}}</a>
            </div>
            </div>
            <!--QUICK INFO PT2-->
            
            <!--TASTES-->
            <div class="row no-gutters">
                <!--LIKES-->
                <div class="col-6">
                    <div class="card border-0 text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;  background-color:{{c!Primary Accent!}}; color:{{c!Accent Text!}};">Likes</div>
                    <ul>
                        {{%Likes%
                        <li>{{%Likes Content%}}</li>
                        %end%}}
                    </ul>
                </div>
                <!--END OF LIKES-->
                
                <!--DISLIKES-->
                <div class="col-6">
                    <div class="card border-0 text-center p-1 text-uppercase m-1" style="letter-spacing: 3px; font-weight: bold;  background-color:{{c!Primary Accent!}}; color:{{c!Accent Text!}};">Dislikes</div>
                    <ul>
                        {{%Dislikes%
                        <li>{{%Dislikes Content%}}</li>
                        %end%}}
                    </ul>
                </div>
                <!--END OF DISLIKES-->
            </div>
            <!--END OF TASTES-->
            
            <!--CHARACTER INFO-->
            {{%Character Info%
            <p>{{l%Paragraph Content%}}</p>
            %end%}}
            <!--END OF CHARACTER INFO-->
            </div>
        </div>
        <!--CHARACTER BOX-->
    </div>

    <div class="card-text p-1 mx-2" style="background-color:{{c!Primary Accent!}};">
        <a href="https://toyhou.se/BigGayFish" style="color:{{c!Primary Accent!}};" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
    </div>
</div>