caesar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Julius Caesar</title>
<style type="text/css">
body {
	background-color: rgba(33,3,4,1);
	background-image: url(images.jfif);
	background-repeat: repeat-x;
}
body,td,th {
	color: rgba(255,255,255,1);
}
	div {
		text-align:center;
	}
</style>
</head>

<body>
<h1 align="center">Julius Caesar</h1>
	<h3 align="center">( Press a button to Learn About Something ) </h3>
	<hr>
	<div><button style="border: 3px solid blue; background-color: white; border-radius: 10px; color: black; padding: 5px; font-size: 16px;" onClick="resize(); document.getElementById(&quot;iframe&quot;).src = &quot;../juliusCaesar/information.html&quot;;">Click Here to Learn About Julius Caesar</button>
	<button style="border: 3px solid blue; background-color: white; border-radius: 10px; color: black; padding: 5px; font-size: 16px;" onClick="resize(); document.getElementById(&quot;iframe&quot;).src = &quot;../juliusCaesar/information2.html&quot;;">Click Here to Learn About Yourself</button>
	<br>
	<iframe id="iframe" style="position: fixed; left: 75px; top: 175px;"></iframe>
	</div>
<script>
		function resize() {
			document.getElementById("iframe").width = (window.innerWidth - 175) + "px";
			document.getElementById("iframe").height = (window.innerHeight - 225) + "px";
		}
	</script>
</body>
</html>