<form action="//css-tricks.us2.list-manage.com/subscribe/post?u=155f5a9ccc4e24c318130cace&amp;id=197f127a68" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
	<h2>Subscribe to our mailing list</h2>
	<div>
		<label for="mce-FNAME">First Name</label>
		<input type="text" name="FNAME" id="mce-FNAME">
	</div>
	<div>
		<label for="mce-EMAIL">Email Address</label>
		<input type="email" name="EMAIL" id="mce-EMAIL">
	</div>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f2d244c0df42a0431bd08ddea_aeaa9dd034" tabindex="-1" value=""></div>
    <div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 112.5%;
	margin-left: auto;
	margin-right: auto;
	max-width: 40em;
	width: 88%;
}

/**
 * Form Styles
 */
label {
	display: block;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.label-normal {
	font-weight: normal;
}

.pattern {
	color: #808080;
	font-size: 0.8em;
	font-weight: normal;
}

.supports-color .color,
.supports-date .date,
.supports-time .time,
.supports-month .mont {
	display: none;
}

input,
select {
	display: inline-block;
	font-size: 1em;
	margin-bottom: 1em;
	padding: 0.25em 0.5em;
	width: 100%;
}

[type="checkbox"],
[type="radio"] {
	margin-bottom: 0.5em;
	width: auto;
}

.button {
	background-color: #0088cc;
	border: 1px solid #0088cc;
	border-radius: 1px;
	color: #ffffff;
	display: inline-block;
	font-size: 0.9375em;
	font-weight: normal;
	line-height: 1.2;
	margin-right: 0.3125em;
	margin-bottom: 0.3125em;
	padding: 0.5em 0.6875em;
	width: auto;
}

.button:active,
.button:focus,
.button:hover {
	background-color: #005580;
	border-color: #005580;
	color: #ffffff;
	text-decoration: none;
}

.button:active {
	box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 1px 0.15625em rgba(0, 0, 0, 0.05);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.