<div class="wrap">
	<h1>Nautical SMCM Palette</h1>
	<p>Our branding could use an update. It is ${current_year} after all! I proposed that we focus on colors that reflect our gorgeous location on the river but does not stray too far from our current theming.</p>

	<div class="grid">
		<div class="primary">
			<div class="item">
				<h2 class="palette__hex">#00205C</h2>
				<h3 class="palatte__name">Navy</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#89C1BE</h2>
				<h3 class="palatte__name">Saltwater</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#CCB28C</h2>
				<h3 class="palatte__name">Sand</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#434738</h2>
				<h3 class="palatte__name">Brackish</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#C62A1B</h2>
				<h3 class="palatte__name">Buoy</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#D9D7E0</h2>
				<h3 class="palatte__name">Periwinkle</h3>
			</div>
		</div>
		<div class="grays">
			<div class="item">
				<h2 class="palette__hex">#49494F</h2>
				<h3 class="palatte__name">Squall</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#6B6B70</h2>
				<h3 class="palatte__name">Anchor</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#95959E</h2>
				<h3 class="palatte__name">Skate</h3>
			</div>
			<div class="item">
				<h2 class="palette__hex">#FFFFFF</h2>
				<h3 class="palatte__name">Cloud</h3>
			</div>
		</div>
	</div>

</div>
// 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;
// colors
$navy:#00205C;
$saltwater:#89C1BE;
$sand:#CCB28C;
$brackish:#434738;
$buoy:#C62A1B;
$periwinkle:#D9D7E0;
// grays
$squall:#49494F;
$anchor:#6B6B70;
$skate:#95959E;
$cloud:#fff;
body {
	margin-top: 7em;
	font-family: $sans-serif;
	text-align: center;
	line-height: 2em;
}

h1 {
	font-size: 3em;
	margin-bottom: .5em;
}

p {
	margin-bottom: 2em;
	font-size: 1.25;
}

.wrap {
	max-width: 1000px;
	margin: 0 auto;
}
.item {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-end;
	padding-bottom:1.5%;
	color: rgba(255, 255, 255, .85);
	h2 {
		font-weight: bold;
		font-size: 2em;
	}
	h3 {
		text-transform: uppercase;
	}
}
.grid {
	display: flex;
	flex-flow:row wrap;
	.primary {
		display:flex;
		flex-flow: row wrap;
		justify-content: space-around;
		width:75%;
		.item {
			line-height: 2em;
			width:30%;
			height:225px;
			border-radius: 3px;
			&:nth-of-type(1) {
				background: $navy;
			}
			&:nth-of-type(2) {
				background: $saltwater;
			}
			&:nth-of-type(3) {
				background: $sand;
			}
			&:nth-of-type(4) {
				background: $brackish;
			}
			&:nth-of-type(5) {
				background: $buoy;
			}
			&:nth-of-type(6) {
				background: $periwinkle;
			}
		}
	}
	.grays {
		display:flex;
		flex-flow: column wrap;
		justify-content: space-around;
		align-items:center;
		width:25%;
		.item {
			border-radius:5px;
			margin:0;
			width:45%;
			margin-bottom:1em;
			height:105px;
			line-height:1em;
				h2,
				h3 {
					transform:scale(.5);
				}
			&:nth-of-type(1) {
				background: $squall;
			}
			&:nth-of-type(2) {
				background: $anchor;
			}
			&:nth-of-type(3) {
				background: $skate;
			}
			&:nth-of-type(4) {
				background: $cloud;
				color: $skate;
				border: 2px solid $skate;
				width:43%;
			}
		}
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.