<div class="col-sm-1"></div>
<div class="col-sm-10">
    <div style="text-align: center;">
    <img src="/Fate-core-cover.png" class="rounded"> 
    </div>
    <form>
        <div class="form-row">
            <div class="form-group col-md-10">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" name="name">
                </div>
                <div class="form-group">
                    <label>Descrption</label>
                    <textarea class="form-control" name="Descrption"></textarea>
                </div>
            </div>
            <div class="form-group col-md-2">
                <label>Refresh</label>
                <input type="number" class="form-control" style="height: 100%;" name="refresh">
                <label>Fate Points</label>
                <input type="number" class="form-control" style="height: 100%;" name="refresh">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Aspects</label>
                <input type="text" class="form-control"  placeholder="High Concept">
                <input type="text" class="form-control"  placeholder="Trouble">
                <input type="text" class="form-control"  placeholder="">
                <input type="text" class="form-control"  placeholder="">
                <input type="text" class="form-control"  placeholder="">
            </div>
            <div class="form-group col-md-6">
                <label>Skills</label>
                <div>
                    <div class="form-group col-md-2"><b>Superb</b></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="superb_1"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="superb_2"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="superb_3"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="superb_4"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="superb_5"></div>
                </div>
                <div>
                    <div class="form-group col-md-2"><b>Great</b></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="great_1"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="great_2"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="great_3"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="great_4"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="great_5"></div>
                </div>
                <div>
                    <div class="form-group col-md-2"><b>Good</b></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="good_1"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="good_2"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="good_3"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="good_4"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="good_5"></div>
                </div>
                <div>
                    <div class="form-group col-md-2"><b>Fair</b></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="fair_1"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="fair_2"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="fair_3"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="fair_4"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control" name="fair_5"></div>
                </div>
                <div>
                    <div class="form-group col-md-2"><b>Average</b></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="average_1"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="average_2"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="average_3"></div>
                    <div class="form-group col-md-2"><input style="outline: 2px solid black;"type="text" class="form-control" name="average_4"></div>
                    <div class="form-group col-md-2"><input type="text" class="form-control " name="average_5"></div>
                </div>
            </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">Extras</label>
            <textarea class="form-control" name="extras"></textarea>
          </div>
          <div class="form-group col-md-6">
            <label for="inputCity">Stunts</label>
            <textarea class="form-control" name="stunts"></textarea>
          </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <div>
                    <label>Pyschical Stress</label>
                    <input type="checkbox" name="physical1">
                    <input type="checkbox" name="physical2">
                    <input type="checkbox" name="physical3">
                    <input type="checkbox" name="physical4">
                </div>
                <div>
                    <label>Mental Stress</label>
                    <input type="checkbox" name="physical1">
                    <input type="checkbox" name="physical2">
                    <input type="checkbox" name="physical3">
                    <input type="checkbox" name="physical4">
                </div>
            </div>
            <div class="form-group col-md-4">
                <label>Consequences</label>
                <input type="text" class="form-control"  placeholder="Mild">
                <input type="text" class="form-control"  placeholder="Moderate">
                <input type="text" class="form-control"  placeholder="Severe">
            </div>
            <div class="form-group col-md-4">
                <label></label>
                <input type="text" class="form-control"  placeholder="Mild">
            </div>
        </div>
        <div class="form-row col-md-12">
        <button type="submit" class="btn btn-primary" style="width: 100%;">Create</button>
        </div>
      </form>
</div>