[f2u] catfight (code)

Zylphide

Info


Created
3 years, 3 months ago
Creator
Zylphide
Favorites
3

Profile



<!-------------------------------------------
    |            CATFIGHT              | 
    |           by Zylphide            | 
---------------------------------------------

hex codes for custom colors:
    text = #3e3326;
    main container background = rgba(245,242,235,1)
    brown border / stat text = rgba(128,110,89,1) and #806E59
    paw 1: rgba(255,255,255,1)
    paw 2: #A65E29, #D69E4B
    paw 3: rgba(20,20,20,1)
    paw 4: #D8C2A3, #64553A
    paw 5: rgba(145,146,155,1)

------->

<!---- box outer ------>
<div class="row justify-content-center">
<div class="col-lg-7" style="color: #3e3326;
        background: rgba(245,242,235,1); 
        border-top-right-radius:30px;
        border-top-left-radius:30px;
        border-bottom-right-radius:30px;
        border-bottom-left-radius:30px;">
        
    <!----- box inner ------>
    <div class="row py-3">
            
        <!----- left section ---->
        <div class="col-lg-4 my-auto">
            <div class="container-fluid justify-content-center px-0 py-3 mb-2" style="font-family: courier new; font-size: 1.3rem; transform: rotate(-5deg);">
                choose your fighter!  
            </div>
            <!----- clickable tabs ------>
            <ul class="nav nav-tabs row card-header-tabs pl-0 pr-2">
                
                <!---paw 1, change rgba numbers to change fur color ---->
                <li class="col-12 text-right p-2 my-2" style="background: rgba(255,255,255,1); 
                    border-top-right-radius:30px; 
                    border-top-left-radius:0px; 
                    border-bottom-right-radius:30px; 
                    border-bottom-left-radius:0px;">
                    
                    <a href="#cat1" data-toggle="tab">
                        
                        <!---- change color hex code to change toe bean color ----->
                        <span style="color: #E18A9D"><i class="fas fa-paw fa-rotate-90" style="font-size: 2rem"></i></span>
                        
                    </a>
                </li>
                <!---- paw 1 END ---->
                
                <!---paw 2, change #hexcode numbers to change fur color ---->
                <li class="col-12 text-right p-2 my-2" style=" max-width: 80%;
                    background: repeating-linear-gradient(to right, #A65E29, #A65E29 25px, #D69E4B 25px, #D69E4B 120px); 
                    border-top-right-radius:30px; 
                    border-top-left-radius:0px; 
                    border-bottom-right-radius:30px; 
                    border-bottom-left-radius:0px;">
                    
                    <a href="#cat2" data-toggle="tab">    
                    
                        <!---- change color hex code to change toe bean color ----->
                        <span style="text-align: right; color: #9E5A4B"><i class="fas fa-paw fa-rotate-90" style="font-size: 2rem"></i></span>  
                        
                    </a>
                </li>
                <!---- paw 2 END ---->
                
                <!---paw 3, change rgba numbers to change fur color ---->
                <li class="col-12 text-right p-2 my-2" style="background: rgba(20,20,20,1); 
                    border-top-right-radius:30px; 
                    border-top-left-radius:0px; 
                    border-bottom-right-radius:30px; 
                    border-bottom-left-radius:0px;">
                    
                    <a data-toggle="tab" href="#cat3">   
                    
                        <!---- change color hex code to change toe bean color ----->
                        <span style="text-align: right; color: #9E5A4B"><i class="fas fa-paw fa-rotate-90" style="font-size: 2rem"></i></span>  
                    </a>
                </li>
                <!---- paw 3 END ---->
                
                <!---paw 4, change #hexcode numbers to change fur color ---->
                <li class="col-12 text-right p-2 my-2" style="max-width: 80%;
                    background: repeating-linear-gradient(to right, #D8C2A3, #D8C2A3 170px, #64553A 190px, #64553A 400px); 
                    border-top-right-radius:30px; 
                    border-top-left-radius:0px; 
                    border-bottom-right-radius:30px; 
                    border-bottom-left-radius:0px;">
                    
                    <a data-toggle="tab" href="#cat4">            
                    
                        <!---- change color hex code to change toe bean color ----->
                        <span style="text-align: right; color: #9E5A4B"><i class="fas fa-paw fa-rotate-90" style="font-size: 2rem"></i></span>  
                    </a>
                </li>
                <!---- paw 4 END ---->
                
                <!---paw 5, change rgba numbers to change fur color ---->
                <li class="col-12  text-right p-2 my-2" style="background: rgba(145,146,155,1); 
                    border-top-right-radius:30px; 
                    border-top-left-radius:0px; 
                    border-bottom-right-radius:30px; 
                    border-bottom-left-radius:0px;">
                        
                    <a data-toggle="tab" href="#cat5">   
                    
                        <!---- change color hex code to change toe bean color ----->
                        <span style="text-align: right; color: #313131"><i class="fas fa-paw fa-rotate-90" style="font-size: 2rem"></i></span>  
                    </a>
                </li>
                <!---- paw 5 END ---->
                <!---- insert more paws above here ---->
                
                <!---- home button ---->
                <li class="col-12 active justify-content-center">
                    <a href="#catnip" data-toggle="tab" style="font-family: courier new; color: #3e3326;">
                        <span style="font-size: 3rem;"><i class="fas fa-home"></i></span>
                    </a></li>
                <li class="col-12 active justify-content-center pb-3 mb-2;" style="margin-top: -20px;">
                    <a href="#catnip" data-toggle="tab" style="font-family: courier new; color: #3e3326;">
                        go home
                    </a></li>
                <!---- home button END ---->
                
            </ul>
            <!----- clickable tabs END ------>
        </div>
        <!---- left section END ---->
        
        <!---- profiles section ------>
        <div class="col-lg-8 p-">
            <!----- brown board ----->    
            <div class="col p-3" style="height: 535px; background: rgba(128,110,89,1); 
                    border-top-right-radius:20px;
                    border-top-left-radius:20px;
                    border-bottom-right-radius:20px;
                    border-bottom-left-radius:20px;">
            <div class="tab-content p-0" style="min-height:100%; background: rgba(251,249,246,1);
                border-top-right-radius:10px;
                border-top-left-radius:10px;
                border-bottom-right-radius:10px;
                border-bottom-left-radius:10px;">    
                <!--- profile tabs content ---->
                
                <!----- catnip pic/home screen ------>
                <div id="catnip" class="tab-pane fade show active">
                    <div class="card border-0" style="background: url(https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=714&q=80); height: 504px; background-size: cover; background-position: 40%"></div>
                </div>
                <!---- catnip pic/home screen END ----->
                        
                <!---- cat 1 info ----->
                <div id="cat1" class="tab-pane fade">
                            
                    <div class="container p-2" style="height: 490px ; overflow: auto">
                        <!---- cat 1 picture ----->
                        <div class="card card-outline-secondary pull-right m-2" style="width: 200px; height: 300px; 
                        background: url(https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=518&q=80); background-size: cover; background-position: 45% 30%;">
                        </div>
                        <!---- cat 1 picture END----->
                        
                        <!---- cat 1 name ---->
                        <div class="col-12 p-3">
                            <span class="display-4"><i class="fal fa-cat"></i> Nugget <i class="fal fa-sparkles"></i></span>
                        </div> 
                        <!---- cat 1 name END ---->
                        
                        <!---- cat 1 stat 1 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Hit Points</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 1 stat 1 END ----->
                        
                        <!---- cat 1 stat 2 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Attack</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 1 stat 2 END ----->
                        
                        <!---- cat 1 stat 3 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Defense</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 1 stat 3 END ----->
                        
                        <!---- cat 1 stat 4 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Speed</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 1 stat 4 END ----->
                        
                        <!---- cat 1 stat 5 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Luck</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 1 stat 5 END ----->
                        <!---- add more stats above here ----->
                        
                        <!----cat 1 description, write as much as you want, it scrolls ----->
                        <div class="container px-3">
                            I show my fluffy belly but it's a trap! if you pet it i will tear up your hand cat not kitten around or immediately regret falling into bathtub.  i hate cucumber pls dont throw it at me let me in let me out let me in let me out let me in let me out who broke this door anyway , and play riveting piece on synthesizer keyboard. Hunt anything that moves wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again so ptracy, but love to play with owner's hair tie, or meow make muffins. Slap owner's face at 5am until human fills food dish have secret plans yet disappear for four days and return home with an expensive injury; bite the vet, 
                        </div>
                        <!----cat 1 description ENDs ----->
                    </div>
                </div>
                <!---- cat 1 info END ----->
                        
                <!---- cat 2 info ----->
                <div id="cat2" class="tab-pane fade">
                    
                    <div class="container p-2" style="height: 490px ; overflow: auto">
                        <!---- cat 2 picture ----->
                        <div class="card card-outline-secondary pull-right m-2" style="width: 200px; height: 300px; 
                        background: url(https://images.unsplash.com/photo-1595229497514-621633a591be?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTh8fG9yYW5nZSUyMGNhdHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); background-size: cover; background-position: 45% 30%;">
                        </div>
                        <!---- cat 2 picture END----->
                        
                        <!---- cat 2 name ---->
                        <div class="col-12 p-3">
                            <span class="display-4"><i class="fad fa-cat"></i> Creamsicle <i class="fad fa-sparkles"></i></span>
                        </div> 
                        <!---- cat 2 name END ---->
                        
                        <!---- cat 2 stat 1 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Hit Points</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 2 stat 1 END ----->
                        
                        <!---- cat 2 stat 2 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Attack</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 2 stat 2 END ----->
                        
                        <!---- cat 2 stat 3 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Defense</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 2 stat 3 END ----->
                        
                        <!---- cat 2 stat 4 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Speed</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 2 stat 4 END ----->
                        
                        <!---- cat 2 stat 5 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Luck</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 2 stat 5 END ----->
                        <!---- add more stats above here ----->
                        
                        <!----cat 2 description, write as much as you want, it scrolls ----->
                        <div class="container px-3">
                            I show my fluffy belly but it's a trap! if you pet it i will tear up your hand cat not kitten around or immediately regret falling into bathtub.  i hate cucumber pls dont throw it at me let me in let me out let me in let me out let me in let me out who broke this door anyway , and play riveting piece on synthesizer keyboard. Hunt anything that moves wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again so ptracy, but love to play with owner's hair tie, or meow make muffins. Slap owner's face at 5am until human fills food dish have secret plans yet disappear for four days and return home with an expensive injury; bite the vet, 
                        </div>
                        <!----cat 2 description ENDs ----->
                    </div>
    
                </div>
                <!---- cat 2 info END ----->
                
                <!---- cat 3 info ----->
                <div id="cat3" class="tab-pane fade">
                    
                    <div class="container p-2" style="height: 490px ; overflow: auto">
                        <!---- cat 3 picture ----->
                        <div class="card card-outline-secondary pull-right m-2" style="width: 200px; height: 300px; 
                        background: url(https://images.unsplash.com/photo-1518206245806-5c1f4d0c5a2a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80); background-size: cover; background-position: 30% 30%;">
                        </div>
                        <!---- cat 3 picture END----->
                        
                        <!---- cat 3 name ---->
                        <div class="col-12 p-3">
                            <span class="display-4"><i class="fas fa-cat"></i> Coffeecake <i class="fas fa-sparkles"></i></span>
                        </div> 
                        <!---- cat 3 name END ---->
                        
                        <!---- cat 3 stat 1 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Hit Points</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 3 stat 1 END ----->
                        
                        <!---- cat 3 stat 2 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Attack</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 3 stat 2 END ----->
                        
                        <!---- cat 3 stat 3 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Defense</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 3 stat 3 END ----->
                        
                        <!---- cat 3 stat 4 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Speed</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 3 stat 4 END ----->
                        
                        <!---- cat 3 stat 5 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Luck</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 3 stat 5 END ----->
                        <!---- add more stats above here ----->
                        
                        <!----cat 3 description, write as much as you want, it scrolls ----->
                        <div class="container px-3">
                            I show my fluffy belly but it's a trap! if you pet it i will tear up your hand cat not kitten around or immediately regret falling into bathtub.  i hate cucumber pls dont throw it at me let me in let me out let me in let me out let me in let me out who broke this door anyway , and play riveting piece on synthesizer keyboard. Hunt anything that moves wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again so ptracy, but love to play with owner's hair tie, or meow make muffins. Slap owner's face at 5am until human fills food dish have secret plans yet disappear for four days and return home with an expensive injury; bite the vet, 
                        </div>
                        <!----cat 3 description ENDs ----->
                    </div>
    
                </div>
                <!---- cat 3 info END ----->
                
                <!---- cat 4 info ----->
                <div id="cat4" class="tab-pane fade">
                    
                    <div class="container p-2" style="height: 490px ; overflow: auto">
                        <!---- cat 4 picture ----->
                        <div class="card card-outline-secondary pull-right m-2" style="width: 200px; height: 300px; 
                        background: url(https://images.unsplash.com/photo-1592652426689-4e4f12c4aef5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover; background-position: 43% 30%;">
                        </div>
                        <!---- cat 4 picture END----->
                        
                        <!---- cat 4 name ---->
                        <div class="col-12 p-3">
                            <span class="display-4"><i class="fal fa-cat"></i> Gravy <i class="fal fa-sparkles"></i></span>
                        </div> 
                        <!---- cat 4 name END ---->
                        
                        <!---- cat 4 stat 1 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Hit Points</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 4 stat 1 END ----->
                        
                        <!---- cat 4 stat 2 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Attack</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 4 stat 2 END ----->
                        
                        <!---- cat 4 stat 3 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Defense</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 4 stat 3 END ----->
                        
                        <!---- cat 4 stat 4 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Speed</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 4 stat 4 END ----->
                        
                        <!---- cat 4 stat 5 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Luck</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 4 stat 5 END ----->
                        <!---- add more stats above here ----->
                        
                        <!----cat 4 description, write as much as you want, it scrolls ----->
                        <div class="container px-3">
                            I show my fluffy belly but it's a trap! if you pet it i will tear up your hand cat not kitten around or immediately regret falling into bathtub.  i hate cucumber pls dont throw it at me let me in let me out let me in let me out let me in let me out who broke this door anyway , and play riveting piece on synthesizer keyboard. Hunt anything that moves wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again so ptracy, but love to play with owner's hair tie, or meow make muffins. Slap owner's face at 5am until human fills food dish have secret plans yet disappear for four days and return home with an expensive injury; bite the vet, 
                        </div>
                        <!----cat 4 description ENDs ----->
                    </div>
    
                </div>
                <!---- cat 4 info END ----->
                
                <!---- cat 5 info ----->
                <div id="cat5" class="tab-pane fade">
                    
                    <div class="container p-2" style="height: 490px ; overflow: auto">
                        <!---- cat 5 picture ----->
                        <div class="card card-outline-secondary pull-right m-2" style="width: 200px; height: 300px; 
                        background: url(https://images.unsplash.com/photo-1567443092315-e07d48d11afc); background-size: cover; background-position: 40% 30%;">
                        </div>
                        <!---- cat 5 picture END----->
                        
                        <!---- cat 5 name ---->
                        <div class="col-12 p-3">
                            <span class="display-4"><i class="fas fa-cat"></i> Anchovy <i class="fas fa-sparkles"></i></span>
                        </div> 
                        <!---- cat 5 name END ---->
                        
                        <!---- cat 5 stat 1 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Hit Points</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 5 stat 1 END ----->
                        
                        <!---- cat 5 stat 2 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Attack</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 5 stat 2 END ----->
                        
                        <!---- cat 5 stat 3 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Defense</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 5 stat 3 END ----->
                        
                        <!---- cat 5 stat 4 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Speed</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 5 stat 4 END ----->
                        
                        <!---- cat 5 stat 5 ----->
                        <div class="col-lg-6 mb-2">
                            <span class="text-uppercase" style="color: #806E59"><b>Luck</b></span>
                            <span class="pull-right">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star faded"></i>
                                <i class="fas fa-star faded"></i>
                            </span>
                        </div>
                        <!---- cat 5 stat 5 END ----->
                        <!---- add more stats above here ----->
                        
                        <!----cat 5 description, write as much as you want, it scrolls ----->
                        <div class="container px-3">
                            I show my fluffy belly but it's a trap! if you pet it i will tear up your hand cat not kitten around or immediately regret falling into bathtub.  i hate cucumber pls dont throw it at me let me in let me out let me in let me out let me in let me out who broke this door anyway , and play riveting piece on synthesizer keyboard. Hunt anything that moves wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again so ptracy, but love to play with owner's hair tie, or meow make muffins. Slap owner's face at 5am until human fills food dish have secret plans yet disappear for four days and return home with an expensive injury; bite the vet, 
                        </div>
                        <!----cat 5 description ENDs ----->
                    </div>
    
                </div>
                <!---- cat 5 info END ----->
                    
                <!--- profile tabs content END ---->
                    
            </div>
            <!----- brown board END ----->
        </div>
        <!---- profiles section END ------>
        
    </div>
    <!----- box section END ------>    
        
    </div>
</div>
<!---- credits, do not remove! ------>
</div>
<!---- credits, do not remove! ------>
 <a class="d-block text-center pt-2" style="font-size:12px" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>