Day to Night

<style>
.dnOuter h1, .dnOuter h2, .dnOuter h3, .dnOuter h4, .dnOuter h5 {
	font-family: 'Fredericka the Great', cursive;
	margin: 0 auto;
text-align: center;
}
.dnOuter {
	max-width: 95%;
	padding: 8px;
	background: #d4c8ff;
	font-family: 'Josefin Slab', serif;
	font-size: 14px;
	color: #21152f;
	margin: 0 auto;
}
.dnOuter img {
	max-width: 100%;
}
.dnOuter a {
	color: #252346;
}
.dnOuter ul {
	margin: 0;
	padding: 0;
	lidn-dnyle: none;
}
.dnCharName {
	background: #22152f;
	font-size: 1.5em;
	line-height: 1.5em;
	color: #b5f0ff;
	padding: 10px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
}

.dnContent {
	background: #b5f0ff;
	padding: 8px;
	margin: 0;
	max-width: 100%;
}
.dnSidebar, .dnMainInfo {
	display: table-cell;
	height: 100%;
	vertical-align: top;
	box-sizing: border-box;
}
.dnSidebar {
	max-width: 250px;
	min-width: 250px;
}
.dnSidebar_inner {
	padding: 8px;
	position: relative;
	padding-top: 60px;
}
.dnSidebar_inner strong {
	font-family: 'Fredericka the Great', cursive;
}
.dnSidebar_inner li {
	margin-bottom: 5px;
}
.dnMainInfo {
	min-width: 100%;
	padding: 10px;
}
.dnMainInfo h4 {
	font-size: 1.5em;
}

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


</style>

<div class='dnOuter'>
	<div class='dnContent'>
		<div class='dnSidebar'>
			<img src='https://via.placeholder.com/250x400' />
			<div class='dnSidebar_inner'>
			<span class='dnCharName'>Character Name</span>
				<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='dnMainInfo'>
			<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 dictumdn. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molednie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molednie 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, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>

				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn 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 vednibulum, ipsum eu fermentum molednie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tridnique senectus et netus et malesuada fames ac turpis egednas. 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 edn sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vednibulum 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, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>

				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn 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">