<body class="campfire">
	<div class="bg-gradient">
		<div class="wrap">
			<div class="content">
				<div class="item logo">
					<a href="#"><img class="logo" src="http://www.smcm.edu/wp-content/themes/smcm-common/img/logo-white.png" /></a>
					<h1 class="tagline">Every Gift Counts.</h1>
				</div>
				<div class="item donation bg-white">
					
					<div class="donation__logo">
						<img src="http://www.smcm.edu/wp-content/uploads/2016/10/giving-tuesday-simple.png" />
					</div>
					<h1>Every Gift Counts.</h1>
					<div class="donation__increments">
						<a href="#" class="round-button">$50</a>
						<a href="#" class="round-button">$100</a>
						<a href="#" class="round-button">$250</a>
						<a href="#" class="round-button">$500</a>
					</div>
					<div class="donation__other">
						<input type="text" placeholder="Other"/>
						<input type="submit" value="Give" />
						<p class="disclaimer">Minimum gift is $20.</p>
					</div>
				</div>
			</div>
		</div>
		<!--
		<div class="footer">
			<div class="wrap">
				<div class="item">
					<p>Need Help?
						<a href="#">FAQs</a> |
						<a href="#">Privacy Policy</a>
					</p>
				</div>
				<div class="item">
					<p>St. Mary's College of Maryland has a 501 (c)(3), functionally integrated, Type 3 foundation.</p>
				</div>
				<div class="item">
					<address>
					Office of Advancement<br />
					47645 College Drive<br />
					St. Mary's City, MD, 20686
				</address>
				</div>
			</div>
		</div>
	</footer>
</body>
// Brand fonts, icons, and colors
@import 'https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville';
@import 'http://weloveiconfonts.com/api/?family=fontawesome';
// fonts
$serif:'Libre Baskerville',
serif;
$sans-serif:'Lato',
sans-serif;
// blues
$navy:#00205c;
$light-blue:#7D8DAC;
$pale-blue:#e4eef3;
// reds
$red:#B30000;
// golds
$gold:#FFCC00;
$orange-gold:#FFB81D;
$light-gold:#FBF0D2;
$mute-gold:#C29E57;
// grays
$medium-gray:#DFD9D5;
$warm-gray:#847870;
// greens
$dark-green:#15514F;
$green:#5DBF0D;
$teal:#248F8B;
$aqua:#0099A9;
$mute-green:#4A7877;
body {
	font-family: $sans-serif;
	background-size: cover;
	&.campfire {
		background: url(http://www.smcm.edu/wp-content/uploads/2016/10/gt1.jpg) no-repeat center center fixed;
	}
	&.students {
		background: url(http://www.smcm.edu/wp-content/uploads/2016/10/gt2.jpg) no-repeat center center fixed;
	}
	&.fall {
		background: url(http://www.smcm.edu/wp-content/uploads/2016/10/gt3.jpg) no-repeat center center fixed;
	}
}

.bg-gradient {
	width: 100%;
	height: 50vh;
	padding: 3em 0 0 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6f8dad+0,6f8dad+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
}

.wrap {
	max-width: 1140px;
	margin: 0 auto;
}

.content {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
}

.content .item {
	width: 35%;
	line-height: 2em;
	text-align: center;
	&.bg-white {
		padding: 2.5em 5%;
		border-radius: 3px;
		background: rgba(255, 255, 255, .9);
		background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23000000' fill-opacity='0.035' fill-rule='evenodd'/%3E%3C/svg%3E");
	}
	&.donation {
		.donation__logo img {
			max-width: 80%;
		}
		.donation__increments {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 2em;
		}
	}
	h1 {
		border-top: 4px double #999;
		font-size: 2.25em;
		line-height: 1em;
		font-weight: bold;
		margin: .25em 0 .75em 0;
		padding: .5em 0 0 0;
		&.tagline {
			color: #fff;
			font-weight: normal;
			text-shadow: 0 0 5px rgba(0, 0, 0, .25);
			line-height: 1em;
			text-align: center;
			margin-top: 3em;
			border: 3px solid rgba(255, 255, 255, .15);
			border-radius: 3px;
			padding: 1em;
			span {
				font-style: italic;
			}
		}
	}
}

.footer {
	padding: 2em 5em;
	margin-top: 3em;
	color: #fff;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	text-shadow: 0 0 5px rgba(0, 0, 0, .75);
	line-height: 1.5em;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+100 */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
	a {
		color: $gold;
		text-decoration: none;
	}
	address {
		font-style: italic;
	}
	.item {
		margin-bottom: .5em;
	}
}

// Buttons
.round-button {
	background: $teal;
	color: #fff;
	font-size:1.25em;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
	border-radius: 50%;
	width: 8vh;
	height: 8vh;
	line-height: 8vh;
	margin: .25em;
	transition: all .3s ease;
	text-decoration: none;
	&:nth-of-type(even) {
		background: $mute-green;
	}
	&:hover,
	&:focus,
	&:active {
		filter: brightness(1.15);
		transform: scale(1.25);
	}
}

.donation__other {
	font-size: 1.25em;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;
	.disclaimer {
		width:100%;
		font-size:.5em;
		font-style:italic;
		text-align:right;
	}
	input[type="text"] {
		width:80%;
		font-size: 1em;
		text-align: center;
		background: transparent;
		border: 0;
		border-bottom: 1px solid #666;
		&:active,
		&:focus {
			outline: none;
			height: auto;
		}
	}
	input[type="submit"] {
		border: 0;
		cursor: pointer;
		font-size: .75em;
		background: #999;
		color: #fff;
		padding: .25em .75em;
		border-radius: 3px;
		&:hover,
		&:active,
		&:focus {
			background: $mute-gold;
		}
	}
}

@media only screen and (max-width: 800px) {
	.content {
		flex-flow: column nowrap;
		align-items: center;
		.item {
			width: 80%;
			h1.tagline {
				margin: 0 0 .5em 0;
				border: 0;
				padding: 0;
			}
		}
	}
}

@media only screen and (max-width: 500px) {
	body {
		background: #eee;
		&.campfire,
		&.students,
		&.fall {
			background: #eee;
		}
	}
	.content .item h1.tagline {
		padding: 0;
		margin: 0 0 .5em 0;
		border: none;
		text-shadow: none;
	}
	.footer {
		padding: 2em;
		background: transparent;
	}
	.footer .item {
		color: #666;
		text-shadow: none;
		a {
			color: $teal;
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.