Geared Up

by kthornbloom

HTML

<a href="" target="_parent" class="candy candy--light">
  <div class="candy-border__top"></div>
  <div class="candy-border__bottom"></div>
  <div class="candy-border__right"></div>
  <div class="candy-border__left"></div>
	<section>
  <svg id="envelope-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.11 296.37"><path d="M260.48 4.12L17.1 92.41C7.13 96.02 1.95 107.1 5.57 117.08l58.89 162.34c2.55 7.02 8.8 11.58 15.75 12.45l.45.22.06-.14c2.77.28 5.63.02 8.41-.99l243.37-88.29c2.78-1.01 5.15-2.64 7.09-4.63l.13.07.2-.46c4.77-5.12 6.65-12.62 4.1-19.65L285.14 15.65C281.52 5.68 270.44.5 260.48 4.12zm3.03 12.55l-85.32 140.19-155.36-52.87 240.68-87.32zM75.72 272.81l-56.8-156.58 113.84 38.73-57.04 117.85zm11.82 5.06l57.45-118.74 33.93 11.55c1.43.48 2.93.43 4.27-.05a6.435 6.435 0 003.3-2.7l18.63-30.62 120.22 54.29-237.8 86.27zm243.62-97.73l-119.32-53.87 62.52-102.71 56.8 156.58z" fill="#e64349" stroke="#e64349" stroke-width="2" stroke-miterlimit="10"/></svg>
    <h1>
      Geared up for deals?
    </h1>
    <hr>
    Get Black Friday announcements in your inbox.<br><br>
    <button class="btn--red">Learn More</button>
	</section>
</a>

SCSS

/*** 
DEFAULT SCSS - SCROLL DOWN FOR CUSTOM SCSS
***/

/*
Advertisement CSS
Shared CSS for use across all advertisements
*/

html {
	/* 16px base font size */
	font: 400 11px/1 "Sweetwater Condensed", "Arial Narrow", sans-serif;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html *, html *:before, html *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
html, body {
	margin: 0;
	overflow: hidden;
	padding: 0;
}
body {
	background: no-repeat center center / cover;
}
html, body, .candy {
	display: block;
	height: 100%;
	width: 100%;
}

/* Link */
a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}
.candy a:not(.btn),
.link {
	border-bottom: 1px solid;
	color: inherit;
	cursor: pointer;
	display: inline-block;
}

/* candy wrapper */
.candy {
	-ms-flex-align: center;
	-webkit-align-content: center;
	align-content: center;
	background: no-repeat center center / cover #efefef;
	color: #262626;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 1.25rem;
	text-align: inherit;
	text-decoration: none;
}
.candy > section:first-child > :first-child {
	margin-top: 0;
}
.candy > section {
	width: 100%;
}

/* Typography */
small {
	font-size: 0.8em;
}
h1, h2, h3, h4, h5, h6 {
	font: inherit;
	margin: 0.7rem 0;
	padding: 0;
}
h1 {
	font-size: 2.25rem;
	font-weight: 600;
}
h1 small {
	display: block;
	font-size: 0.8em;
}
h2 {
	font-size: 1.25rem;
}
h2 small {
	font-size: 0.8em;
}
p {
	font-size: 1rem;
	line-height: 1.2;
	margin: 0.7rem 0;
}
strong {
	font-weight: 600;
}
.text--loud {
	text-transform: uppercase;
}
.text--normal {
	text-transform: none;
}
.color--blue {
	color: #036384;
}
.color--brown {
	color: #3f301f;
}
.color--dark {
	color: #262626;
}
.color--light {
	color:...

JavaScript

https://jsfiddle.net/kthornbloom/r9uh1azv/2/#