Best Deals

by kthornbloom

HTML

<a href="/install/" 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 version="1.1" id="tag-icon" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 315.74 301.54" xml:space="preserve"><style>.st0{fill:none;stroke:#e64248;stroke-width:16;stroke-miterlimit:10}</style><path class="st0" d="M11.37 193.17l94.68 96.88s10.57 6.61 25.54-9.69 128.59-128.59 128.59-128.59 8.15-8.37 7.05-16.73c-.81-6.13-3.08-87.63-3.08-87.63s-1.76-11.45-11.45-11.45h-86.31s-12.11-1.76-19.82 6.17c-6.3 6.48-123.74 125.06-123.74 125.06s-16.74 16.73-11.46 25.98z"/><circle class="st0" cx="207.33" cy="93.21" r="20.15"/><path class="st0" d="M211.59 35.98c8.51-15.67 25.12-26.31 44.21-26.31 27.77 0 50.28 22.51 50.28 50.28s-22.51 50.28-50.28 50.28c-23.56 0-43.33-16.2-48.79-38.07"/></svg>
    <h1>
      The best deals.<br>We mean it.
    </h1>
    <hr>
    <b>
    Buy now with confidence.
    </b><br>
    Call your Sales Engineer at <span class="nowrap">1-800-222-4700</span>
	</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/#