rogue-loop-1/Static/hud.html

<style type="text/css">
	#screen-container {
		color: rgb(204, 204, 204);
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
  		/* grid-gap: 8px;
		grid-template-areas:
    'topleft topleft header header header header header header topright topright'
    'topleft topleft main main main main main main topright topright'
	'leftside leftside main main main main main main rightside rightside'
	'leftside leftside main main main main main main rightside rightside'
	'leftside leftside main main main main main main rightside rightside'
	'leftside leftside main main main main main main rightside rightside'
    'bottomleft bottomleft main main main main main main bottomright bottomright'
	'bottomleft bottomleft footer footer footer footer footer footer bottomright bottomright'; */

	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}

	.header-info {
		text-align: center;
		/* border: 1px solid crimson; */
	}

	.ui-section {
		text-align: left;
		/* margin: 8px; */
		display: flex;
		justify-content: space-evenly;
		/* border: 1px solid crimson; */
	}

	#header { flex-basis: 40%; min-height: 20%;}
	#top-left {flex-basis: 25%;}
	#main { flex-basis: 40%; min-height: 50%; }
	#top-right {flex-basis: 25%;}
	#bottom-left { flex-basis: 25%;}
	#bottom-right {flex-basis: 25%;}
	#footer {flex-basis: 40%; min-height: 20%;}
	#left-side { flex-basis: 25%; min-height: 50%; }
	#right-side { flex-basis: 25%; min-height: 50%; }
</style>
<div id="screen-container">
	<div id="top-left" class="ui-section"></div>
	<div id="header" class="ui-section"></div>
	<div id="top-right" class="ui-section"></div>
	<div id="left-side" class="ui-section"></div>
	<div id="main" class="ui-section"></div>  
	<div id="right-side" class="ui-section"></div>
	<div id="bottom-left" class="ui-section"></div>
	<div id="footer" class="ui-section"></div>
	<div id="bottom-right" class="ui-section"></div>	
</div>