<header>
	<div class="container">
		<h1 class="site-title">Title Text</h1>
		<nav>
			<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#!">Link</a></li>
				<li><a class="active" href="#!">Link</a></li>
			</ul>
		</nav>
	</div>
</header>
<main role="content">
	<div class="hero-image">
		<img src="https://footage.framepool.com/shotimg/qf/998484943-guinness-beer-flat-cap-dublin-stonewall.jpg">
	</div>
<article>
	<div class="top-left"></div>
<p>Brace yourselves, gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing? How could you?! We live in a society of laws! Why do you think I took you to all those Police Academy movies? For fun? Well, I didn't hear anybody laughing, did you? Except at that guy who made sound effects. Makes sound effects and laughs. Where was I? Oh yeah! Stay out of my booze. Yes! I am a citizen! Now which way to the welfare office? I'm kidding, I'm kidding. I work, I work.  Your questions have become more redundant and annoying than the last three &ldquo;Highlander&rdquo; movies. When I held that gun in my hand, I felt a surge of power…like God must feel when he's holding a gun. Books are useless! I only ever read one book, &ldquo;To Kill A Mockingbird,&rdquo; and it gave me absolutely no insight on how to kill mockingbirds! Sure it taught me not to judge a man by the color of his skin… but what good does <em>that</em> do me?</>

	<p>Save me, Jeebus. <q>Thank the Lord</q>? That sounded like a prayer. A prayer in a public school. God has no place within these walls, just like facts don't have a place within an organized religion. Haven't you learned anything from that guy who gives those sermons at church? Captain Whatshisname? No children have ever meddled with the Republican Party and lived to tell about it.</p>
	<div class="top-right">Bob</div>
	<p>I don't like being outdoors, Smithers. For one thing, there's too many fat children. I'm a Spalding Gray in a Rick Dees world. The Internet King? I wonder if he could provide faster nudity… Oh, so they have Internet on computers now! I hope I didn't brain my damage. Oh, a <em>sarcasm</em> detector. Oh, that's a <em>really</em> useful invention! Dear Mr. President, There are too many states nowadays. Please, eliminate three. P.S. I am not a crackpot.</p>
	<blockquote><span>Cras egestas porta riges at culsemod.</span></blockquote>
<p>Dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non-numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
<p>Weaseling out of things is important to learn. It's what separates us from the animals…except the weasel. Fire can be our friend; whether it's toasting marshmallows or raining down on Charlie. Homer no function beer well without.</p>

<p>You don't like your job, you don't strike. You go in every day and do it really half-assed. That's the American way. You don't win friends with salad. Can't you people take the law into your own hands? I mean, we can't be policing the entire city! Oh, everything looks bad if you remember it. Old people don't need companionship. They need to be isolated and studied so it can be determined what nutrients they have that might be extracted for our personal use.</p>

The Internet King? I wonder if he could provide faster nudity… Your guilty consciences may make you vote Democratic, but secretly you all yearn for a Republican president to lower taxes, brutalize criminals, and rule you like a king!

Hi. I'm Troy McClure. You may remember me from such self-help tapes as "Smoke Yourself Thin" and "Get Some Confidence, Stupid!"

Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get. I stand by my racial slur. How is education supposed to make me feel smarter? Besides, every time I learn something new, it pushes some old stuff out of my brain. Remember when I took that home winemaking course, and I forgot how to drive?
	</article>
</main>

body {
	font-family: Georgia, serif;
}
.container {
	width: 82%;
	margin: 0 auto;
}
header {
	padding: 2em 0;
	text-transform: uppercase;
}
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 3px solid #ccc;
}
.site-title {
	font-size: 100%;
	font-weight: normal;
	margin: 0.25em 0;
}
nav ul {
	list-style: none;
	margin: 0;
}
nav li {
	display: inline-block;
	padding-left: 0.5em;
}
nav a:link {
	color: #1a1a1a;
	text-decoration: none;
	transition: 0.3s all ease;
}
nav a:link:hover {
	color: #d1ae49;
}
nav li::before {
	content: '/';
	padding-right: 0.5em;
}
nav li:first-child::before {
	content: none;
}
nav a.active,
nav a:link:active {
	font-weight: bold;
}
.hero-image {
	width: 100%;
	position: relative;
	float: left;
	display: inline-block;
	clip-path: polygon(0% 0%, 100% 0%, 100% 77.6%, 72.9% 100%, 40.8% 77.6%, 8.8% 95.5%, 0% 85.3%);
	shape-outside: polygon(0% 0%, 100% 0%, 100% 77.6%, 72.9% 100%, 40.8% 77.6%, 8.8% 95.5%, 0% 85.3%);
	overflow: hidden;
}
.hero-image img {
	display: block;
	width: 100%;
	transform: scaleX(-1);
}
.hero-image::after {
	content: "&";
	display: block;
	position: absolute;
	top: -15%;
	right: -14vw;
	font-size: 65vw;
	line-height: 1;
	font-family: abril-fatface, Baskerville, Palatino, "Book Antiqua", serif;
	color: white;
	font-weight: bold;
	transform: rotateX(-25deg) rotateY(15deg) rotateZ(22deg);
	transition: 1s ease-in-out all;
}
article {
	position: relative;
	top: -105px;
	width: 82%;
	margin: 0 auto;
	line-height: 1.618;
	column-count: 3;
	column-gap: 4.5em;
	column-rule: 5px solid #ccc;
	text-align: justify;
}
article .top-left {
	width: 100%;
	height: 115px;
	shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
	float: left;
}
article .top-right {
	width: 100%;
	height: 115px;
	shape-outside: polygon(37% 0%, 100% 0%, 100% 78.5%, 57% 25%);
	clip-path: polygon(37% 0%, 100% 0%, 100% 78.5%, 57% 25%);
	float: right;
}
p:not(:first-of-type)::first-letter {
	float: left;
	font-size: 60px;
	line-height: 60px;
	padding-top: 4px;
	padding-right: 2px;
	padding-left: 3px;
}
blockquote {
	position: relative;
	padding: 1em 7em 1em 0;
	margin: 0;
	text-align: center;
	font-size: 1.5em;
	font-style: italic;
	color: #d1ae49;
	quotes: "“ " " ”" "‘" "’";
	border-bottom: 1px solid #1a1a1a;
}
blockquote::before {
	content: '';
	display: block;
	height: 0;
	width: 0;
	position: absolute;
	right: 0;
	border: 60px solid transparent;
	border-right-width: 0;
	border-left-color: #1a1a1a;
}
blockquote::after {
	content: '';
	display: block;
	height: 8px;
	width: 8px;
	position: absolute;
	right: 0;
	bottom: -2%;
	background-color: #1a1a1a;
	border-radius: 50%;
}
blockquote span::before {
	content: open-quote;
}
blockquote span::after {
	content: close-quote;
}