<header>
	<div class="container">
		<h1>An Amazing Blog Post</h1>
		<p>
			<small>By <em>Stephanie Eckles</em> | Posted on:
				<em>02/02/2020</em></small>
		</p>
	</div>
</header>
<main>
	<article class="container">
		<img src="http://placecorgi.com/200" alt="Good corgi doggo" class="img--align-left" />
		<h2>Topic Introduction</h2>
		<p>
			Liquorice candy macaroon soufflé jelly cake. Candy canes marzipan.
			Macaroon pie sesame snaps jelly-o.
		</p>
		<p>
			Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
			biscuit marzipan.
		</p>
		<h2>The Main Topic</h2>
		<p>
			Liquorice candy macaroon soufflé jelly cake. Macaroon pie sesame snaps
			jelly-o.
		</p>
		<p>
			Liquorice candy macaroon soufflé jelly cake. Candy canes ice. Macaroon
			pie sesame snaps jelly-o.
		</p>
		<h3>A subtopic to the main one</h3>
		<p>
			Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps
			jelly-o.
		</p>
		<p>
			Liquorice candy macaroon soufflé jelly cake. Macaroon pie sesame snaps
			jelly-o.
		</p>
		<blockquote>
			<p>"Here's a fabulous thing someone said."</p>
			<footer>- <cite>Someone Awesome</cite></footer>
		</blockquote>
	</article>
</main>
<footer>
	<div class="container">
		<p>&copy; 2020 ACME Company</p>
	</div>
</footer>
body {
  font-family: sans-serif;
  color: #222;
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0 0 0.35em;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 20px;
}

p {
  margin: 0 0 1.15em;
}

p + h2 {
  margin-top: 1.5em;
}

.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
}

header {
  background-color: rebeccapurple;
  color: #fff;
}

body > footer {
  border-top: 2px solid rebeccapurple;
}

blockquote {
  background: linear-gradient(45deg, #eddbff, transparent);
  color: rebeccapurple;
  margin-left: 0;
  margin-right: 0;
  padding: 1em;
  border-radius: 4px;
}

.img--align-left {
  float: left; /* replaces the style previously inherited by the browser */
  margin: 0 16px 16px -20px;
  border-radius: 50%;
}
View Compiled
/*
 * Read about this layout on DEV - this is for Episode 13 of my series on learning web development for beginners! 
 @link https://dev.to/5t3ph/style-a-blog-layout-with-css-3elh
 
 Or watch on YouTube:
 @link https://youtu.be/e6nBu5aFK8M
 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.