Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                // 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;
		}
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console