Trying to Create a Custom Character sheet for a Completely Homebrew Game

Title says it all, I feel like I'm floundering.  The Homebrew game "StarScape" is my own invention, I will be running an alpha test with my group of players in a few days once I have a functional character sheet. I made a preview of the sheet as a .png so I had a reference but trying to actually code the thing is giving me more trouble than I could have anticipated. I need help to do this o.O The sheet has multiple parts to it, but this is the first part.  If I can figure out how to code a replica, or use it as a background stencil I think I'll be able to make the rest of the sheet myself.  I just got mentorship yesterday so I am completely brand new to this. I do have some experience with HTML but none in CSS whatsoever, so I feel very confused. Help would be appreciated, thank you.

So, what help are you needing at this point? CSS is pretty basic but it's easier to help if we have code to work with and an understanding of what you want to do. Based on what I'm seeing, it seems that most of your sheet is a 2-column setup.  Roll20 has a special class to help with that, and your basic structure could look something like this: <div class='sheet-2colrow'> <div class='sheet-col' style='margin: 0px; marigin-right: 2px;'><!--Left Column--> <div class='sheet-row'> <!--Code for the demographic stuff goes here--> </div> <div class='sheet-row'> <!--Code for the Attributes stuff goes here--> </div> <div class='sheet-row'> <!--Code for the Saving Throws stuff goes here--> </div> <div class='sheet-row'> <!--Code for the Combat Skills stuff goes here--> </div> <div class='sheet-row'> <!--Code for the Kinetic Skills stuff goes here--> </div> <div class='sheet-row'> <!--Code for the Languages stuff goes here--> </div> </div> <div class='sheet-col' style='margin: 0px; marigin-right: 2px;'><!--Right Column--> <div class='sheet-row'> <!--Code for the Logo goes here--> </div> <div class='sheet-row'> <!--Code for the other Attributes(?) like SH, AR, HP, etc goes here--> </div> <div class='sheet-row'> <!--Code for the Mundane Skills stuff goes here--> </div> </div> </div>

I recently made a character sheet for a homebrew of my own, and I found that another good way to go about it was to steal code from existing sheets and just modify it as necessary. I used the  Roll20 GitHub to find the code, copied it into my custom sheet, and then just played around until everything looked good. Saved a lot of time!

Finderski Excellent this is exactly what I needed.  I don't care about the sheet looking good, that stuff comes later, I just needed a way to figure out how to get the sheet to be layed out the way I had shown.  Thanks!  Now the only thing I need is the CSS code to make it function automatically.  Because it will be a lot easier for my players to play when the sheet automatically updates itself.

Ben Kugler said: I recently made a character sheet for a homebrew of my own, and I found that another good way to go about it was to steal code from existing sheets and just modify it as necessary. I used the  Roll20 GitHub to find the code, copied it into my custom sheet, and then just played around until everything looked good. Saved a lot of time! Yep, I'll definitely be doing that >.> <.< it's not stealing... it's borrowing... without permission.