[CHARA] Simple Art Fight bio

created by:FlowerlyRat
HTMLMixed ColorsCharacter
Line Count: 143
Difficulty:
Copy
<!--

First color: #339ff5
Second color: #8cccff

FontAwesome icons: https://fontawesome.com/search

Ribbon masterlist: https://toyhou.se/20187371.

-->

<!--////// DECORATIVE BANNER //////-->
<div class="card border-0 bg-light p-2 text-center mb-2" style="border-radius: 20px">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/74755183_ZKVKFTLfv6QnXvu.png?1703356398">
</div>

<div class="card border-0 bg-light p-2 text-center mb-2" style="border-radius: 20px">
    <div class="row no-gutters">
        <div class="col-md-10"><div class="card p-2" style="border-radius: 15px">
<!--//// DECORATIVE ICON OR SOMETHING WITH CAPTION ////-->
            <img class="d-block mx-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="width: 50px">
            <p>12 wings</p>
            
<!--////// BASIC INFO //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Name</p>
            <p>
                pro/nouns <i class="fas fa-sharp fa-sparkle"></i>
                age <i class="fas fa-sharp fa-sparkle"></i> 
                <a style="font-weight:bold;color:#8cccff;" href="LINK_HERE">theme</a> <i class="fas fa-sharp fa-sparkle"></i> 
                <a style="font-weight:bold;color:#8cccff;" href="LINK_HERE">playlist</a>
            </p>
            
<!--//// RIBBON 1 ////--><!-- Duplciate the whole section to add a ribbon -->
            <a href="https://toyhou.se/29828425.character">
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="mx-1">
            </a>
<!--//// RIBBON 1 end ////-->
            
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
            
<!--////// GENERAL DESCRIPTION //////-->
            <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>
            
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
            
<!--////// ATTACK HISTORY //////-->
            <div>
                <p class="mb-0" style="font-size: 20px"><b>
                    <i class="fas fa-pen-paintbrush mr-2"></i>Attack history<i class="fas fa-pen-paintbrush ml-2"></i>
                </b></p>
                <p>
                    Total attacks: 0
                </p>
                <div class="mt-2 mb-3" style="border-width: 0 0 2px 0; border-style: dotted; color: #8cccff"></div>
                <div class="row">
                
<!--//// YEAR 1 ////--><!-- Duplciate the whole section to add a year -->
                    <div class="col">
                        <img src="https://artfight.net/css/emoticons/stamp_art.png" class="mb-1"><br>
                        0 Attack
                    </div>
<!--//// YEAR 1 end ////-->
                    
                </div>
            </div>
        </div>
<!--////// DECORATIVE BANNER //////-->
        <img class="my-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/74755183_ZKVKFTLfv6QnXvu.png?1703356398">
        
        <div class="card p-2" style="border-radius: 15px">
<!--////// PERSONALITY //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Personality</p>
            <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>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
<!--////// GOAL //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Goal</p>
            <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>
        </div>
        </div>
        
        
<!--////// CONNECTIONS //////-->
        <div class="col-md card p-2 ml-md-2 mt-md-0 mt-2" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Important connections</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
            <div class="row no-gutters mb-2">
                
<!--//// CHARA 1 ////--><!-- Duplciate the whole section to add a character -->
                <div class="col-auto mx-auto mb-2">
                    <p><a style="font-weight:bold;color:#8cccff" href="LINK_HERE">
                        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/31489973?1738787803" class="mb-1" style="height: 150px"><br>
                        Link type
                    </a></p>
                </div>
<!--//// CHARA 1 end ////-->
                
                
            </div>
<!--////// LINK TO MORE CONNECTIONS, EITHER ON THE ART FIGHT CONNECTION TAB OR TOYHOUSE LINKS TAB, OR SOMETHING ELSE IDK //////-->
            <a style="font-weight:bold;font-size: 20px;color:#8cccff;" href="LINK_HERE">More here</a>
        </div>
    </div>
    <div class="row no-gutters mt-2">
        <div class="col-md card p-2 mr-md-1 mb-md-0 mb-2" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Design notes</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
<!--////// DESIGN NOTES //////-->
            <ul class="list-unstyled text-left">
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
            </ul>
        </div>
        <div class="col-md card p-2 ml-md-1" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Miscellaneous information</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:#339ff5;"></div>
<!--////// TRIVIA //////-->
            <ul class="list-unstyled text-left">
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
                <li><span style="color: #8cccff"><i class="fas fa-sharp fa-sparkle mr-2"></i></span>content</li>
            </ul>
        </div>
    </div>
</div>
<!--////// CREDITS, DO NOT REMOVE //////-->
<p class="text-right mb-0">
    <a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: #8cccff">
    <span style="font-size: 11px"><i class="fas fa-sharp fa-less-than"></i></span><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><span style="font-size: 11px"><i class="fas fa-sharp fa-greater-than"></i></span></a>
</p>
Copy
<!--

First color: {{c!Color 2!}}
Second color: {{c!Color 1!}}

FontAwesome icons: https://fontawesome.com/search

Ribbon masterlist: https://toyhou.se/20187371.

-->

<!--////// DECORATIVE BANNER //////-->
<div class="card border-0 bg-light p-2 text-center mb-2" style="border-radius: 20px">
    <img src="{{u!Banner!}}">
</div>

<div class="card border-0 bg-light p-2 text-center mb-2" style="border-radius: 20px">
    <div class="row no-gutters">
        <div class="col-md-10"><div class="card p-2" style="border-radius: 15px">
<!--//// DECORATIVE ICON OR SOMETHING WITH CAPTION ////-->
            <img class="d-block mx-auto" src="{{u!Icon link!}}" style="width: 50px">
            <p>{{!Caption!}}</p>
            
<!--////// BASIC INFO //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">{{!Name!}}</p>
            <p>
                {{!Pro/nouns!}} <i class="{{i!FA icon!}}"></i>
                {{!Age!}} <i class="{{i!FA icon!}}"></i> 
                <a style="font-weight:bold;color:{{c!Color 1!}};" href="{{u!Theme song link!}}">theme</a> <i class="{{i!FA icon!}}"></i> 
                <a style="font-weight:bold;color:{{c!Color 1!}};" href="{{u!Playlist link!}}">playlist</a>
            </p>
            
<!--//// RIBBON 1 ////--><!-- Duplciate the whole section to add a ribbon -->
{{%Ribbons%
            <a href="{{u%Ribbon source link%}}">
                <img src="{{u%Ribbon image link%}}" class="mx-1">
            </a>
%end%}}
<!--//// RIBBON 1 end ////-->
            
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
            
<!--////// GENERAL DESCRIPTION //////-->
            <p>
                {{l!General description!}}
            </p>
            
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
            
<!--////// ATTACK HISTORY //////-->
            <div>
                <p class="mb-0" style="font-size: 20px"><b>
                    <i class="{{i!FA icon [next to attack history]!}} mr-2"></i>Attack history<i class="{{i!FA icon [next to attack history]!}} ml-2"></i>
                </b></p>
                <p>
                    Total attacks: {{n!Total attack number!}}
                </p>
                <div class="mt-2 mb-3" style="border-width: 0 0 2px 0; border-style: dotted; color: {{c!Color 1!}}"></div>
                <div class="row">
                
<!--//// YEAR 1 ////--><!-- Duplciate the whole section to add a year -->
{{%Year participated%
                    <div class="col">
                        <img src="{{u%Year badge%}}" class="mb-1"><br>
                        {{n%Attack number this year%}} Attack(s)
                    </div>
%end%}}
<!--//// YEAR 1 end ////-->
                    
                </div>
            </div>
        </div>
<!--////// DECORATIVE BANNER //////-->
        <img class="my-2" src="{{u!Banner!}}">
        
        <div class="card p-2" style="border-radius: 15px">
<!--////// PERSONALITY //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Personality</p>
            <p>
                {{l!Personality!}}
            </p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
<!--////// GOAL //////-->
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Goal</p>
            <p>
                {{l!Goal!}}
            </p>
        </div>
        </div>
        
        
<!--////// CONNECTIONS //////-->
        <div class="col-md card p-2 ml-md-2 mt-md-0 mt-2" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Important connections</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
            <div class="row no-gutters mb-2">
                
<!--//// CHARA 1 ////--><!-- Duplciate the whole section to add a character -->
{{%Connections%
                <div class="col-auto mx-auto mb-2">
                    <p><a style="font-weight:bold;color:{{c!Color 1!}}" href="{{u%Character link%}}">
                        <img src="{{u%Character image%}}" class="mb-1" style="height: 150px"><br>
                        {{%Relationship type or name%}}
                    </a></p>
                </div>
%end%}}
<!--//// CHARA 1 end ////-->
                
                
            </div>
<!--////// LINK TO MORE CONNECTIONS, EITHER ON THE ART FIGHT CONNECTION TAB OR TOYHOUSE LINKS TAB, OR SOMETHING ELSE IDK //////-->
            <a style="font-weight:bold;font-size: 20px;color:{{c!Color 1!}};" href="{{u!Link to more connections!}}">More here</a>
        </div>
    </div>
    <div class="row no-gutters mt-2">
        <div class="col-md card p-2 mr-md-1 mb-md-0 mb-2" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Design notes</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
<!--////// DESIGN NOTES //////-->
            <ul class="list-unstyled text-left">
{{%Design notes%
                <li><span style="color: {{c!Color 1!}}"><i class="{{i!FA icon!}} mr-2"></i></span>{{%Design content%}}</li>
%end%}}
            </ul>
        </div>
        <div class="col-md card p-2 ml-md-1" style="border-radius: 15px">
            <p class="mb-0" style="font-weight: bold; font-size: 20px">Miscellaneous information</p>
            <div class="mt-2 mb-3" style="border-width:0 0 2px 0;border-style:dashed;color:{{c!Color 2!}};"></div>
<!--////// TRIVIA //////-->
            <ul class="list-unstyled text-left">
{{%Trivia%
                <li><span style="color: {{c!Color 1!}}"><i class="{{i!FA icon!}} mr-2"></i></span>{{%Trivia content%}}</li>
%end%}}
            </ul>
        </div>
    </div>
</div>
<!--////// CREDITS, DO NOT REMOVE //////-->
<p class="text-right mb-0">
    <a href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: {{c!Color 1!}}">
    <span style="font-size: 11px"><i class="fas fa-sharp fa-less-than"></i></span><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><span style="font-size: 11px"><i class="fas fa-sharp fa-greater-than"></i></span></a>
</p>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.