127 lines
5.1 KiB
HTML
127 lines
5.1 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>CSS Grid</title>
|
|
<link href="assets/base.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/app.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" href="grid.css" />
|
|
<link rel="stylesheet" href="skillellipsis.css" />
|
|
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand|Contrail+One|Shadows+Into+Light|Candal&subset=latin,latin-ext"
|
|
rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
<body class="ui-dialog">
|
|
<main class="charsheet sheet-brp">
|
|
<section class="fundamental-parent">
|
|
<div class="descriptive">
|
|
<p>Name, age, gender, description, etc.</p>
|
|
</div>
|
|
<div class="characteristics">
|
|
<p>STR, CON, SIZ, INT, POW, DEX, APP</p>
|
|
</div>
|
|
<div class="hp">
|
|
<p>HP Tally box</p>
|
|
</div>
|
|
</section>
|
|
<section class="gridparent">
|
|
<div class="col1">
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill1" type="checkbox" /> Technical Skill (varies)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill3" type="checkbox" /> Spot (25%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col2">
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill1" type="checkbox" /> Technical Skill (varies)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill3" type="checkbox" /> Spot (25%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col3">
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill1" type="checkbox" /> Technical Skill (varies)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
<div class="skill-item">
|
|
<label class="truncate">
|
|
<input id="skill3" type="checkbox" /> Spot (25%)
|
|
</label>
|
|
<div class="skill-controls">
|
|
<span>
|
|
<input type="number" value="188" />%</span>
|
|
<button type="roll"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |