Gloomhaven character sheet

If anyone with html/css skills, I could really use a jumpstart on creating a character sheet for Gloomhaven. A description and image of the sheet can be found here[1]. There are a lot of editable PDF format sheets out there but I have not been able to find an html/css one to use as a starting point. Right now I don't need any hooks back into the gaming system; this is mostly a simple sheet to keep track of a characters progress. None of it is used during actual game play. It consists of checkboxes and text areas. Even a rough starting point of html/css would be welcome. Thanks in advance! [1]&nbsp;<a href="http://www.ultraboardgames.com/gloomhaven/campaign-overview.php" rel="nofollow">http://www.ultraboardgames.com/gloomhaven/campaign-overview.php</a>

&lt;div class="container"&gt; &lt;div class="background"&gt; &lt;div class="section"&gt; Name: &lt;input type="text" name="attr_character_name" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; .charsheet { font-family: "Pirata One"; } .sheet-section { line-height: 1; border: 20px solid black; border-image-source: url(<a href="https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494</a>); border-image-slice: 40; } I made an image to use as the background for each section. It gets clipped on the right but that's fixable, I assume. Not sure if other fonts are allowed or if I just specified it incorrectly.

You might want to use the background not border style: .sheet-background { background: url(<a href="https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494</a>); background-repeat: no-repeat; background-size : &nbsp;100% 100% ; } Replace the size with the height and width you want it to be.&nbsp; First value is width, you can set it in pixels. This is handy because you can resize the same image in different sections just by overwriting the background-size style. You might also want to look into the grid css element for laying out your sheet, That character sheet pic you showed is perfect for it. Here's a mockup of the basic layout of the sheet using grid. The html: &lt;div class="grid-wrapper"&gt; &nbsp; &nbsp; &lt;div class="grid-left"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="logo background"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;logo placeholder&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="name background"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Name&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_character_name" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="xpnotes background"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;notes placeholder&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="items background"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;items placeholder&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;div class="grid-right"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="perks"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;perks placeholder&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="notes"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;notes placeholder&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;/div&gt; The CSS:&nbsp; /* change the label style so you can use it on the same line as inputs etc. */ label { &nbsp; &nbsp; width: auto; &nbsp; &nbsp; display:inline-block; } /* setup the basic grids */ .sheet-grid-wrapper { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 50% 50%; &nbsp; &nbsp; grid-template-rows: auto; &nbsp; &nbsp; grid-gap: 10px; } .sheet-grid-left { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 1; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: auto; &nbsp; &nbsp; grid-template-rows: auto auto auto auto; &nbsp; &nbsp; grid-gap: 10px; } .sheet-grid-right { &nbsp; &nbsp; grid-column: 2; &nbsp; &nbsp; grid-row: 1; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: auto; &nbsp; &nbsp; grid-template-rows: auto auto; &nbsp; &nbsp; grid-gap: 10px; } /* left column */ .sheet-background { &nbsp; &nbsp; background: url(<a href="https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494</a>); &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; background-size: 100% 100%; &nbsp; &nbsp; padding: 5px; } .sheet-logo { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 1; &nbsp; &nbsp;&nbsp; } .sheet-name { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 2; &nbsp; &nbsp;&nbsp; } .sheet-xpnotes { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 3; &nbsp; &nbsp;&nbsp; } .sheet-items { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 4; &nbsp; &nbsp;&nbsp; } /* right column */ .sheet-perks { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 1; &nbsp; &nbsp;&nbsp; } .sheet-notes { &nbsp; &nbsp; grid-column: 1; &nbsp; &nbsp; grid-row: 2; &nbsp; &nbsp;&nbsp; } Here's some information: <a href="https://www.w3schools.com/css/css_grid.asp" rel="nofollow">https://www.w3schools.com/css/css_grid.asp</a> I used three grids; one to set up containers of the left and right columns, and then the left column is another grid container, and the right column is another grid container. This was to simplify the layout of the sizing of rows, since left and right row sizes dont match perfectly in your screenshot. Hope this helps!

Many thanks! This kickstarted my effort. I'll post completed when it is.