sondreb/game.html

## game.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Game Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

	<style>
	*, *:before, *:after
	{
		box-sizing: border-box;
	}

	html, body
	{
		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;
	}

	body
	{
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	header
	{
		background-color: black;
		color: white;
		text-align: right;
		font-size: 2em;
		padding: 10px;
		border-bottom: 1px solid black;
	}

	footer
	{
		background-color: gray;
		padding: 5px;
		border-top: 1px solid black;
	}

	.nav-content
	{
		flex: 1;
		display: flex;
		flex-direction: row;
	}

		.nav-content-left
		{
			background-color: green;
			width: 200px;
			display: flex;
			flex-direction: column;
			border-right: 1px solid black;
		}

		.nav-content-right
		{
			flex: 1;
			overflow: auto;
			display: flex;
			flex-direction: column;
		}

	.actions
	{
		background-color: gray;
		flex: 1;
		padding: 5px;
	}

	.map
	{
		height: 100px;
		background-color: : green;
		border-top: 1px solid black;
	}

	#board
	{
		background-color: silver;
		width: 100%;
		height: 100%;
	}
	</style>

</head>
<body>

	<!--

		This is a great foundation for a game, app or website, that uses flex styling to create a 100% width/height UI.
		No fuzz, no extra containers, bare-bone and works for all modern browsers, IE, Chrome and FireFox.

	-->

	<header>
		Game Title
	</header>

	<div class="nav-content">

		<div class="nav-content-left">
			<div class="actions">UserName: 100</div>
			<div class="map">The World Map</div>
		</div>
		<div class="nav-content-right"><canvas  id="board"></canvas></div>

	</div>

	<footer>
		Copyright and Status
	</footer>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Game Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

	<style>
	, :before, *:after
	{
	box-sizing: border-box;
	}

	html, body
	{
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
	}

	body
	{
	display: flex;
	flex-direction: column;
	flex: 1;
	}

	header
	{
	background-color: black;
	color: white;
	text-align: right;
	font-size: 2em;
	padding: 10px;
	border-bottom: 1px solid black;
	}

	footer
	{
	background-color: gray;
	padding: 5px;
	border-top: 1px solid black;
	}

	.nav-content
	{
	flex: 1;
	display: flex;
	flex-direction: row;
	}

	.nav-content-left
	{
	background-color: green;
	width: 200px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid black;
	}

	.nav-content-right
	{
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	}

	.actions
	{
	background-color: gray;
	flex: 1;
	padding: 5px;
	}

	.map
	{
	height: 100px;
	background-color: : green;
	border-top: 1px solid black;
	}

	#board
	{
	background-color: silver;
	width: 100%;
	height: 100%;
	}
	</style>

	</head>
	<body>

	<!--

	This is a great foundation for a game, app or website, that uses flex styling to create a 100% width/height UI.
	No fuzz, no extra containers, bare-bone and works for all modern browsers, IE, Chrome and FireFox.

	-->

	<header>
	Game Title
	</header>

	<div class="nav-content">

	<div class="nav-content-left">
	<div class="actions">UserName: 100</div>
	<div class="map">The World Map</div>
	</div>
	<div class="nav-content-right"><canvas id="board"></canvas></div>

	</div>

	<footer>
	Copyright and Status
	</footer>

	</body>
	</html>