roll20-character-sheets/FAITH/faith.html

<div class="sheet-wrapper">
<div class="sheet-box">
    <!-- The Faith logo -->
    <div class="sheet-thirtythreepercent">
        <img src="https://i.imgur.com/XGoTOWT.png" style="max-height: 85px;"/>
    </div>
    <!-- Top line: name, profession, god, affinity -->
        <div class="sheet-sixtysixpercent">
            <div class="sheet-doublerow sheet-topline">
                <input type="text" name="attr_name"/><label>Name</label>
            </div>
            <div class="sheet-fiftypercent">
                <div class="sheet-doublerow sheet-topline">
                    <input type="text" name="attr_race"/><label>Race</label>
                </div>
            </div>
            <div class="sheet-fiftypercent">
                <div class="sheet-doublerow sheet-topline">
                    <input type="text" name="attr_profname"/><label>Profession</label>
                </div>
            </div>    
            <div class="sheet-fiftypercent">
                <div class="sheet-doublerow sheet-topline">
                <select name="attr_god">                
                  <option>please select</option>
                  <option value="Kaliva">Kaliva</option>
                  <option value="Vexal">Vexal</option>
                  <option value="Hexia">Hexia</option>
                  <option value="Ergon">Ergon</option>
                  <option value="Ledger">Ledger</option>
                </select>
                  <label>God</label>
                </div>
            </div>
            <div class="sheet-fiftypercent">
                <div class="sheet-doublerow sheet-topline">
                <select name="attr_affinity">                
                  <option>please select</option>
                  <option value="O/S">O/S</option>
                  <option value="Space">Space</option>
                  <option value="Urban">Urban</option>
                  <option value="Wilderness">Wilderness</option>
                </select>
                    <label>Affinity</label>
                </div>
            </div>
            <div class="sheet-row sheet-item"></div>
        </div>
    </div>

    <!-- Attributes (left column) -->
    <div class="sheet-box sheet-thirtythreepercent">
        <div class="sheet-item sheet-center">
            <h3>Attributes</h3>
        </div>
        <div class="sheet-header">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"></div>
            <div class="sheet-item sheet-little"><label>Rating</label></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Agility:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_agility" value="1"/></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Constitution:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_constitution" value="1"/></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Dexterity:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_dexterity" value="1"/></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Faith:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_faith" value="1"/></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Link:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_link" value="1"/></div>
        </div>
        <div class="sheet-row">
            <div class="sheet-item sheet-micro"></div>
            <div class="sheet-item sheet-big"><label>Mind:</label></div>
            <div class="sheet-item sheet-little"><input type="number" name="attr_mind" value="1"/></div>
        </div>
    </div>
    <div class="sheet-box sheet-thirtythreepercent">
        <div class="sheet-box">       
            <div class="sheet-wrapper">
                <div class="sheet-item sheet-center">
                    <h3>Health</h3>
                </div>
                    <!-- Health -->
                <div class="sheet-header">
                <div class="sheet-item sheet-little"></div>
                </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-small"><label>Physical</label></div>
                        <div class="sheet-item sheet-tiny"></div>
                        <div class="sheet-item sheet-small"><label>Damage</label></div>
                    </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-small"><input type="number" name="attr_physhealth" value="1"/></div>
                        <div class="sheet-item sheet-tiny"></div>
                        <div class="sheet-item sheet-small"><input type="number" name="attr_physdam"/></div>
                    </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-small"><label>Neural</label></div>
                        <div class="sheet-item sheet-tiny"></div>
                        <div class="sheet-item sheet-small"><label>Damage</label></div>
                    </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-small"><input type="number" name="attr_neuralhealth" value="1"/></div>
                        <div class="sheet-item sheet-tiny"></div>
                        <div class="sheet-item sheet-small"><input type="number" name="attr_neuraldam"/></div>
                    </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-tiny"></div>
                    </div>
                    <div class="sheet-row">
                        <div class="sheet-item sheet-tiny"></div>
                    </div>
            </div>
        </div>  
    </div>
        <div class="sheet-thirtythreepercent">
        <div class="sheet-wrapper">
            <div>
            <div class="sheet-item sheet-center">
                <h3>Experience</h3>
                </div>
                <div class="sheet-header">
                <div class="sheet-item sheet-little"></div>
                </div>
                 <div class="sheet-row">
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep1" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep2" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep3" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep4" value="1"/></div>
                </div>
                 <div class="sheet-row">
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep5" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep6" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep7" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep8" value="1"/></div>
                </div>
                 <div class="sheet-row">
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep9" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep10" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep11" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep12" value="1"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep13" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep14" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep15" value="1"/></div>
                    <div class="sheet-item sheet-little"><input type="checkbox" name="attr_ep16" value="1"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-tiny"></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-tiny"></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="sheet-item sheet-center">
            <h3>Skills</h3>
        </div>
    </div>
        <div>
            <div class="sheet-thirtythreepercent">
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Ballistic:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_balistic"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>CQC:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_CQC"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Hacking:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_hacking"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Initiative:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_initiative"/></div>
                </div>
            </div>
            <div class="sheet-thirtythreepercent">
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Athletics:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_athletic"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>EVA:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_EVA"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Piloting:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_piloting"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Survival:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_survival"/></div>
                </div>
            </div>
            <div class="sheet-thirtythreepercent">
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Cunning:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_cunning"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Medical:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_medical"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Technical:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_technical"/></div>
                </div>
                <div class="sheet-row">
                    <div class="sheet-item sheet-big"><label>Profession:</label></div>
                    <div class="sheet-item sheet-little"><input type="number" name="attr_profession"/></div>
                </div>
            </div>
        </div>    
        
        
    <!-- One row of padding to push the next block down a bit -->
    <div class="sheet-row"></div>
<div class='sheet-2colrow'>
            <div class='sheet-col'>
                <div class="sheet-wrapper">
                    <div class="sheet-item sheet-center">
                        <h3>Race Abilities</h3>
                    </div>
            <!-- Dynamic upgrade list, widths have to match the header above -->
                    <fieldset class="repeating_raceupgrades">
                        <input type="checkbox" class="sheet-arrow">
                            <div class="sheet-item sheet-huge"><input type="text" name="attr_raceupName"/></div>
                            <div class="sheet-item sheet-pico"></div>
                            <div class="sheet-body"><textarea class="sheet-textarea" name="attr_raceupInfo"></textarea></div>
                    </fieldset>
                </div>
                <div class="sheet-wrapper">
                    <div class="sheet-item sheet-center">
                        <h3>General Upgrades</h3>
                    </div>
            <!-- Dynamic upgrade list, widths have to match the header above -->
                    <fieldset class="repeating_upgrades">
                        <input type="checkbox" class="sheet-arrow">
                            <div class="sheet-item sheet-big"><input type="text" name="attr_upgradeName"/></div>
                            <div class="sheet-item sheet-pico"></div>              
                            <div class="sheet-item sheet-little"><label>Level:</label></div>
                            <div class="sheet-item sheet-puny2"><input type="number" name="attr_upgradeLevel"/></div>
                            <div class="sheet-item sheet-pico"></div>              
                            <div class="sheet-item sheet-puny2"><label>XP:</label></div>
                            <div class="sheet-item sheet-puny2"><input type="number" name="attr_upxpcost"/></div>
                            <div class="sheet-body"><textarea class="sheet-textarea" name="attr_upgradeInfo"></textarea></div>
                    </fieldset>
                </div>
                <div class="sheet-wrapper">
                    <div class="sheet-item sheet-center">
                        <h3>God Upgrades</h3>
                    </div>
            <!-- Dynamic upgrade list, widths have to match the header above -->
                    <fieldset class="repeating_godupgrades">
                        <input type="checkbox" class="sheet-arrow">
                            <div class="sheet-item sheet-big"><input type="text" name="attr_godupName"/></div>
                            <div class="sheet-item sheet-pico"></div>              
                            <div class="sheet-item sheet-little"><label>Level:</label></div>
                            <div class="sheet-item sheet-puny2"><input type="number" name="attr_godupLevel"/></div>
                            <div class="sheet-item sheet-pico"></div>
                            <div class="sheet-item sheet-puny2"><label>God:</label></div>
                                <div class="sheet-item sheet-small">
                                <select name="attr_upgod">
                                  <option>select</option>
                                  <option value="Kaliva">Kaliva</option>
                                  <option value="Vexal">Vexal</option>
                                  <option value="Hexia">Hexia</option>
                                  <option value="Ergon">Ergon</option>
                                  <option value="Ledger">Ledger</option>
                                </select>
                                </div>
                            <div class="sheet-body">
                                <textarea name="attr_godupInfo"></textarea>
                                <div class="sheet-item sheet-puny2"><label>XP:</label></div>
                                <div class="sheet-item sheet-puny2"><input type="number" name="attr_godxpcost"/></div>                            
                            </div>
                    </fieldset>
                </div>
            </div>    
            <div class='sheet-col'>
                    <div class="sheet-wrapper">
                        <!-- Gear list (right column) -->
                        <div class="sheet-item sheet-center">
                            <h3>Gear</h3>
                        </div>
                        <fieldset class="repeating_gear">
                            <div class="sheet-row">
                                <div class="sheet-item"><input type="text" name="attr_gear"/></div>
                            </div>
                        </fieldset>
                    </div>
            </div>
</div>
</div>
</div>