<!doctype html>
<html>
<head>
	<style type="text/css">
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		font-size: xx-large;
		width: 100%;
		height: 500px;
		background: lightblue;
		top: 0px;
		bottom: 0px;
	}
	#time, #current-temp, #lows, #highs {
		background: red;
		position: absolute;
	}
	#time {
		left: 40px;
		top: 40px;
	}
	#current-temp {
		right: 40px;
		top: 40px;
		background: red;
	}
	#lows {
		bottom: 40px;
		left: 40px;
	}
	#highs {
		bottom: 40px;
		right: 40px;
	}

	#top-alert {
		background: blue;
	}
	</style>
</head>
<body>
	<div class="container">
		<div id="time">
			10:04 AM
		</div>
		<div id="current-temp">
			big 50F
		</div>
		<div id="lows">
			low of 20F
		</div>
		<div id="highs">
			high of 900F
		</div>
		<div id="top-alert">
			Happy spring!
		</div>
		<div id="second-alert">
			Today is a good day to start planting!
		</div>
		<div>
			There's a frost coming up, probably a long one. It might a good time to do final harvest!
		</div>
		<div>
			Monday is probably going to be the last frost. Get ready to plant!
		</div>
		<div>
			Very high chance of rain today. You won't need to water.
		</div>
		<div>
			Tonight it will go down to 20F. That's below freezing. 
		</div>
	</div>
</body>
</html>