Sumertime Application

<style>
.stOuter h1, .stOuter h2, .stOuter h3, .stOuter h4, .stOuter h5 {
	font-family: 'Fredericka the Great', cursive;
	margin: 0 auto;
text-align: center;
}
.stOuter {
	max-width: 95%;
	padding: 8px;
	background: #ffe545;
	font-family: 'Josefin Slab', serif;
	font-size: 14px;
	color: #fbf1b2;
	margin: 0 auto;
}
.stOuter img {
	max-width: 100%;
}
.stOuter a {
	color: #68bdcc;
}
.stOuter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
  .stHeader {
    background: #fab728;
    width: 100%;
    height: 300px;
    background: url(https://images.rpginitiative.com/uploads/monthly_2019_06/h170.jpg.156eece38e2a86fc96d70e36ec912a23.jpg) no-repeat center top;
    background-size: cover;
    padding-bottom: 2em;
    position: relative;
  }
.stHeader_name {
	background: #fab728;
	font-size: 1.5em;
	line-height: 1.5em;
	color: #026474;
	padding: 10px;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.stContent {
	background: #026474;
	padding: 8px;
	margin: 0;
	max-width: 100%;
}
.stSidebar, .stMainInfo {
	display: table-cell;
	height: 100%;
	vertical-align: top;
	box-sizing: border-box;
}
.stSidebar {
	max-width: 250px;
	min-width: 250px;
}
.stSidebar_inner {
	padding: 8px;
}
.stSidebar_inner strong {
	font-family: 'Fredericka the Great', cursive;
}
.stSidebar_inner li {
	margin-bottom: 5px;
}
.stMainInfo {
	min-width: 100%;
	padding: 10px;
}
.stMainInfo h4 {
	font-size: 1.5em;
}

@media screen and (max-width: 767px) {
		.stSidebar, .stMainInfo {
			display: block;
			height: 100%;
			vertical-align: top;
			box-sizing: border-box;
		}
		.stSidebar {
			max-width: 100%;
			min-width: 100%;
			text-align: center;
		}
}
    


</style>

<div class='stOuter'>
	<div class='stHeader' style='background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_06/h170.jpg.156eece38e2a86fc96d70e36ec912a23.jpg);'>
		<div class='stHeader_name'>
			<h2>Character Name</h2>
		</div>
	</div>
	<div class='stContent'>
		<div class='stSidebar'>
			<img src='https://via.placeholder.com/250x400' />
			<div class='stSidebar_inner'>
				<ul>
					<li><strong>Character Aliases:</strong> Character Aliases</li>
					<li><strong>Character Race:</strong> Character Race</li>
					<li><strong>Another Attribute:</strong> Something else</li>
					<li><strong>Another Attribute:</strong> Something else</li>
					<li><strong>Another Attribute:</strong> Something else</li>
					<li><strong>Another Attribute:</strong> Something else</li>
					<li><strong>Another Attribute:</strong> Something else with more data on it.</li>
					<li><strong>Another Attribute:</strong> Something else</li>
				</ul>
			</div>
		</div>
		<div class='stMainInfo'>
			<h4>Appearance</h4>
				<p>Lorem ipsum <a href='#'>dolor sit amet, consectetur</a> adipiscing elit. Ut iaculis eros ut nulla ornare porta vitae id felis. In hac habitasse platea dictumst. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molestie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molestie neque.</p>

				<p>Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>

				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum justo tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus est consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit est. Maecenas ullamcorper erat non quam porttitor hendrerit. Vestibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a est mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.</p>

				<p>Nulla non elit quam. Quisque condimentum ante sapien, quis sodales lacus laoreet id. Pellentesque ut urna lorem. Phasellus mauris dolor, scelerisque id urna vel, gravida hendrerit tellus. Nunc vestibulum, ipsum eu fermentum molestie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nisl mauris, congue id volutpat sit amet, condimentum eu lacus. Ut aliquam ut arcu nec commodo. Donec dui sapien, ullamcorper a consequat sit amet, fringilla ac nibh. Fusce ac sapien eu arcu sollicitudin iaculis.</p>

				<p>Suspendisse ornare, risus quis pretium pharetra, velit felis fermentum ex, et viverra nisl diam eget turpis. Sed nec libero vel felis venenatis gravida. Duis id quam et leo mollis feugiat. Nullam ut turpis scelerisque, venenatis est sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vestibulum vel finibus ipsum.</p>
			<h4>History</h4>
				<p>Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>

				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum justo tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus est consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit est. Maecenas ullamcorper erat non quam porttitor hendrerit. Vestibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a est mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.</p>
		</div>
	</div>
</div>



<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Josefin+Slab:400,400i,700,700i&display=swap" rel="stylesheet">