<div class="quote-wrapper">
	<div class="blockquote">
		<h1>Intuitive design happens when <span>current knowledge</span> is the same as the <span>target knowledge.</span></h1>
		<h4>&mdash;Prosenjit Sikdar<br><em>Web Site Usability: A Designer's Guide</em></h4>
	</div>
</div>
body {
	background-color: #292a2b;
}
.quote-wrapper {
	display: flex;
	height: 100vh;
	padding: 0 20px;
}
.blockquote {
	position: relative;
	font-family: 'Barlow Condensed', sans-serif;
	max-width: 620px;
	margin: 80px auto;
	align-self: center;
}
.blockquote h1 {
	font-family: 'Abril Fatface', cursive;
	position: relative;
	color: #e74848;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1;
	margin: 0;
	border: 2px solid #fff;
	border: solid 2px;
	border-radius: 20px;
	padding: 25px;
}
.blockquote h1 span{
	color: #ffffff;
}
.blockquote h1:after {
	content: "";
	position: absolute;
	border: 2px solid #e74848;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -62px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3;
}
.blockquote h1:before {
	content: "";
	position: absolute;
	width: 80px;
	border: 6px solid #292a2b;
	bottom: -3px;
	left: 50px;
	z-index: 2;
}
@media all and (min-width: 600px) {
	.blockquote h1 {
		font-size: 3rem;
		line-height: 1.2;
	}
}
.blockquote h4 {
	position: relative;
	color: #ffffff;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding-top: 15px;
	z-index: 1;
	margin-left: 150px;
	padding-left: 12px;
}

.blockquote h4:first-letter {
	margin-left: -12px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.