Fix Izzy

created by:AnsuCodes
Line Count: 145
Difficulty:
Copy
<!-- 

Code by nimiczek
https://nimiczek.carrd.co

Fixed by Ansuperope
https://linktr.ee/ansuperope

LINK: https://stor8.vercel.app/248

- - -

Use "Ctrl" + "F" to find, replace
and edit text easier. You can use a
combo of custom and boostrap colors
but you might need to delete bootstrap
colors if custom colors don't work

CUSTOM COLORS:
    main bg:        #312F30
    sub bg:         #e9e7d7
    default text:   #866445
    head text:      #5e4126
    credit text:    #eae48096
    main border:    #aea07f
    sub border:     #a6825f
    glow:           #fbffb8
    scroll bar:     #a6825f
    
    
BOOTSTRAP COLOR:
https://getbootstrap.com/docs/4.0/utilities/colors/
    main bg:        bg-BS_M_BG
    sub bg:         bg-BS_S_BG
    head text:      text-BS_H_TXT
    sub text:       text-BS_S_TXT
    main border:    card-outline-BS_M_BOR
    sub border:     card-outline-BS_S_BOR
    

FILL OUT:
    general: LOREM
    image:   LOREM_IMG
    
-->

<!-- START CODE -->
<div style="font-family: Arial, sans-serif;">
    
    <!-- START CHARACTER CONTENT -->
    <div class="bg-BS_M_BG card card-outline-BS_M_BOR" style="color:#866445; background: #312F30; border-width:5px; border-style:double; border-color: #aea07f; box-shadow: 5px 4px .5rem #fbffb8; border-radius: 15px; padding: 20px;">
    <div class="row no-gutters">
        
        <!-- LEFT SIDE - IMG + INFO -->
        <div class="col-12 col-lg-4 h-100 justify-content-stretch">
            
            <!-- CHARACTER IMG -->
            <div class="justify-content-center">
                <img src="LOREM_IMG"
                    alt="Character Image"
                    class="card card-outline-BS_S_BOR"
                    style="max-width: 80%; border-radius: 10px; border-width: 3px; border-style: solid; border-color: #a6825f;">
            </div>
            <!-- END CHARACTER IMG -->
            
            
            
            <!-- CHARACTER INFO -->
            <div class="mt-3 justify-content-stretch card bg-BS_S_BG card-outline-BS_S_BOR" style="border-width: 3px; border-style: solid; border-color: #a6825f; background: #e9e7d7; border-radius: 10px; padding: 10px;">
                
                <!-- HEADER -->
                <h2 class="text-BS_H_TXT" style="color: #5e4126;">Name & Details <span class="floating-gif1"></span></h2>
                
                <p><strong class="text-BS_S_TXT">Name:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Pronouns:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Spirits:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Location:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Occupation:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Worth Tracker:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Obtained:</strong> LOREM</p>
                <p><strong class="text-BS_S_TXT">Designer:</strong> LOREM</p>
                
            </div>
            <!-- END CHARACTER INFO -->
            
        </div>
        <!-- END LEFT SIDE - IMG + INFO -->
        
        
        
        
        <!-- RIGHT SIDE - STORY + POWER -->
        <div class="col-12 col-lg ml-lg-4">
        
            <!-- STORY SECTION -->
            <div class="mt-3 mt-lg-0 card card-outline-BS_S_BOR bg-BS_S_BG" style="height: 350px; overflow-y: auto; padding: 10px; border-width: 3px; border-style: solid; border-radius: 10px; background: #e9e7d7; scrollbar-color: #a6825f transparent; border-color: #a6825f;">
                
                <!-- HEADER -->
                <h2 class="text-BS_H_TXT" style="color: #5e4126;">Story
                    <span style="width: 30px; height: 30px; display: inline-block;
                        background: url('https://i.imgur.com/KPqb1S5.gif') no-repeat center center;
                        background-size: contain;"></span>
                </h2>
                
                
                <p>LOREM</p>
            </div>
            <!-- END STORY SECTION -->
            
            
            
            <!-- POWER SECTION -->
            <div class="mt-3 card card-outline-BS_S_BOR bg-BS_S_BG" style="height: 305px; overflow-y: auto; padding: 10px; border-width: 3px; border-style: solid; border-color: #a6825f; border-radius: 10px; background: #e9e7d7; scrollbar-color: #a6825f transparent;">
                
                <!-- HEADER -->
                <h2 class="text-BS_H_TXT" style="color: #5e4126;">Power
                    <span style="width: 30px; height: 30px; display: inline-block;
                        background: url('https://i.imgur.com/KPqb1S5.gif') no-repeat center center;
                        background-size: contain;"></span>
                </h2>
                
                <p>LOREM</p>
                
            </div>
            <!-- END POWER SECTION -->
            
        </div>
        <!-- RIGHT SIDE - STORY + POWER-->
        
    </div>
    </div>
    <!-- END START CHARACTER CONTENT -->
    
    
    
    
    <!--- CREDIT DONT REMOVE!! (pretty please)-->
    <div class="mt-2 text-center" style="font-size: 12px;">
        <p class="text-BS_S_TXT" style="color:#eae48096;">Code by</p>
        <a href="https://nimiczek.carrd.co" class="text-BS_S_TXT" style="display: inline-break;font-size: 12px; color:#eae48096;">nimiczek</a>
    </div>
    <!--- END CREDIT DONT REMOVE!! (pretty please)-->
    
</div>
<!-- END CODE -->
Copy
<!-- 

Code by nimiczek
https://nimiczek.carrd.co

Fixed by Ansuperope
https://linktr.ee/ansuperope

LINK: https://stor8.vercel.app/248

- - -

Use "Ctrl" + "F" to find, replace
and edit text easier. You can use a
combo of custom and boostrap colors
but you might need to delete bootstrap
colors if custom colors don't work

CUSTOM COLORS:
    main bg:        #CC_BG
    sub bg:         #CC_SUB
    default text:   #CC_TEXT
    head text:      #CC_TITLE
    credit text:    #CC_CREDIT
    main border:    #CC_M_BOR
    sub border:     #CC_S_BOR
    glow:           #CC_GLOW
    scroll bar:     #CC_SCROLL
    
    
BOOTSTRAP COLOR:
https://getbootstrap.com/docs/4.0/utilities/colors/
    main bg:        bg-dark
    sub bg:         bg-faded
    head text:      text-info
    sub text:       text-primary
    main border:    card-outline-info
    sub border:     card-outline-primary
    

FILL OUT:
    general: LOREM
    image:   LOREM_IMG
    
-->

<!-- START CODE -->
<div style="font-family: Arial, sans-serif;">
    
    <!-- START CHARACTER CONTENT -->
    <div class="bg-dark card card-outline-info" style="color:#CC_TEXT; background: #CC_BG; border-width:5px; border-style:double; border-color: #CC_M_BOR; box-shadow: 5px 4px .5rem #CC_GLOW; border-radius: 15px; padding: 20px;">
    <div class="row no-gutters">
        
        <!-- LEFT SIDE - IMG + INFO -->
        <div class="col-12 col-lg-4 h-100 justify-content-stretch">
            
            <!-- CHARACTER IMG -->
            <div class="justify-content-center">
                <img src="LOREM_IMG"
                    alt="Character Image"
                    class="card card-outline-primary"
                    style="max-width: 80%; border-radius: 10px; border-width: 3px; border-style: solid; border-color: #CC_S_BOR;">
            </div>
            <!-- END CHARACTER IMG -->
            
            
            
            <!-- CHARACTER INFO -->
            <div class="mt-3 justify-content-stretch card bg-faded card-outline-primary" style="border-width: 3px; border-style: solid; border-color: #CC_S_BOR; background: #CC_SUB; border-radius: 10px; padding: 10px;">
                
                <!-- HEADER -->
                <h2 class="text-info" style="color: #CC_TITLE;">Name & Details <span class="floating-gif1"></span></h2>
                
                <p><strong class="text-primary">Name:</strong> LOREM</p>
                <p><strong class="text-primary">Pronouns:</strong> LOREM</p>
                <p><strong class="text-primary">Spirits:</strong> LOREM</p>
                <p><strong class="text-primary">Location:</strong> LOREM</p>
                <p><strong class="text-primary">Occupation:</strong> LOREM</p>
                <p><strong class="text-primary">Worth Tracker:</strong> LOREM</p>
                <p><strong class="text-primary">Obtained:</strong> LOREM</p>
                <p><strong class="text-primary">Designer:</strong> LOREM</p>
                
            </div>
            <!-- END CHARACTER INFO -->
            
        </div>
        <!-- END LEFT SIDE - IMG + INFO -->
        
        
        
        
        <!-- RIGHT SIDE - STORY + POWER -->
        <div class="col-12 col-lg ml-lg-4">
        
            <!-- STORY SECTION -->
            <div class="mt-3 mt-lg-0 card card-outline-primary bg-faded" style="height: 350px; overflow-y: auto; padding: 10px; border-width: 3px; border-style: solid; border-radius: 10px; background: #CC_SUB; scrollbar-color: #CC_SCROLL transparent; border-color: #CC_S_BOR;">
                
                <!-- HEADER -->
                <h2 class="text-info" style="color: #CC_TITLE;">Story
                    <span style="width: 30px; height: 30px; display: inline-block;
                        background: url('https://i.imgur.com/KPqb1S5.gif') no-repeat center center;
                        background-size: contain;"></span>
                </h2>
                
                
                <p>LOREM</p>
            </div>
            <!-- END STORY SECTION -->
            
            
            
            <!-- POWER SECTION -->
            <div class="mt-3 card card-outline-primary bg-faded" style="height: 305px; overflow-y: auto; padding: 10px; border-width: 3px; border-style: solid; border-color: #CC_S_BOR; border-radius: 10px; background: #CC_SUB; scrollbar-color: #CC_SCROLL transparent;">
                
                <!-- HEADER -->
                <h2 class="text-info" style="color: #CC_TITLE;">Power
                    <span style="width: 30px; height: 30px; display: inline-block;
                        background: url('https://i.imgur.com/KPqb1S5.gif') no-repeat center center;
                        background-size: contain;"></span>
                </h2>
                
                <p>LOREM</p>
                
            </div>
            <!-- END POWER SECTION -->
            
        </div>
        <!-- RIGHT SIDE - STORY + POWER-->
        
    </div>
    </div>
    <!-- END START CHARACTER CONTENT -->
    
    
    
    
    <!--- CREDIT DONT REMOVE!! (pretty please)-->
    <div class="mt-2 text-center" style="font-size: 12px;">
        <p class="text-primary" style="color:#CC_CREDIT;">Code by</p>
        <a href="https://nimiczek.carrd.co" class="text-primary" style="display: inline-break;font-size: 12px; color:#CC_CREDIT;">nimiczek</a>
    </div>
    <!--- END CREDIT DONT REMOVE!! (pretty please)-->
    
</div>
<!-- END CODE -->

Password (optional)

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