header.top-bar
	.grid-container.full
		.grid-x.align-middle
			.cell.small-11
				a.logo(href="#") 
					i.fas.fa-weight-hanging 
					span ACME Inc.
			.cell.small-1.nav-menu
				button.hamburger
					span
					span
					span
				nav.navigation
					ul
						li
							a(href="#") Home
						li
							a(href="#") About
						li
							a(href="#") Services
						li
							a(href="#") Contact
section
	.section-heading
		.grid-container
			.grid-x
				.cell
					h2 Section heading 1
	.grid-container
		.grid-x.grid-padding-x
			.cell
				p Peanut
section
	.section-heading
		.grid-container
			.grid-x
				.cell
					h2 Section heading 2
	.grid-container
		.grid-x.grid-padding-x
			.cell
				p Butter
section
	.section-heading
		.grid-container
			.grid-x
				.cell
					h2 Section heading 3
	.grid-container
		.grid-x.grid-padding-x
			.cell
				p Chocolate
section
	.section-heading
		.grid-container
			.grid-x
				.cell
					h2 Section heading 4
	.grid-container
		.grid-x.grid-padding-x
			.cell
				p Cupcake
section
	.section-heading
		.grid-container
			.grid-x
				.cell
					h2 Section heading 5
	.grid-container
		.grid-x.grid-padding-x
			.cell
				p Frosting
footer
	.grid-container
		.grid-x
			.cell
				div You're kidding right?
View Compiled
$base-duration: 250ms;

// Colors
$primary: hsla((1*20.4), 60%, 50%, 1);
$accent: #cc9b33;
$white: whitesmoke;

$max-width: 1200px;
// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;

$sans: 'Source Sans Pro', sans-serif;
$mono: 'Source Code Pro', monospace;



*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: $sans;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $mono;
}

h2 {
	margin: 5px 0;
	color: white;
}

p {
	margin: 200px 0;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	background-color: $white;
	box-shadow: 0 0 10px rgba(black,0.3);
	z-index: 9998;
}

.logo {
	position: relative;
	display: block;
	color: $primary;
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	i {
		margin-right: 10px;
		color: $primary;
	}
}
.nav-menu {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}
.navigation {
	position: fixed;
	top: 0;
	left: -100vw;
	width: 100vw;
	height: 100vh;
	// background-color: $primary;
	background-color: rgba($white,0.95);
	transition: 0.25s linear;
	z-index: 9998;
	&.is-open {
		left: 0;
	}
	ul {
		position: 0;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style-type: none;
		li {
			position: relative;
			height: 25vh;
			border-bottom: 1px solid rgba(#444, 0.1);
		}
	}
	a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		padding: 20px;
		color: $primary;
		font-family: $mono;
		font-size: 32px;
		text-decoration: none;
		&:before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 0%;
			height: 100%;
			background-color: $accent;
			transition: 0.25s;
			z-index: -1;
		}
		&:hover {
			color: $white;
			&:before {
				width: 100%;
			}
		}
	}
}
.hamburger {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	padding: 0;
	border: none;
	background-color: rgba(white,0.0);
	cursor: pointer;
	z-index: 9999;
	&.is-open {
		span {
			background-color: black;
			transition: 0.25s transform linear;
			&:first-child {
				transform: translateY(2px) rotate(45deg);
				animation: hamburger3 0.25s linear;
			}
			@keyframes hamburger3 {
				0%   { transform: translateY(0); }
				50%  { transform: translateY(0); }
				100% { transform: translateY(2px) rotate(45deg); }
			}
			&:nth-child(2) {
				width: 0;
			}
			&:last-child {
				transform: translateY(-2px) rotate(-45deg);
				animation: hamburger4 0.25s linear;
			}
			@keyframes hamburger4 {
				0%   { transform: translateY(0); }
				50%  { transform: translateY(0); }
				100% { transform: translateY(-2px) rotate(-45deg); }
			}
		}
	}
	span {
		position: relative;
		display: block;
		width: 30px;
		height: 2px;
		background-color: hsla((1*20.4), 60%, 50%, 1);
		border-radius: 10px;
		transform-origin: center center;
		transition: 0.25s transform linear;
		&:first-child {
			transform: translateY(-5px) rotate(0deg);
			animation: hamburger1 0.25s linear;
		}
		@keyframes hamburger1 {
			0%   { transform: translateY(0); }
			50%  { transform: translateY(0); }
			100% { transform: translateY(-5px) rotate(0deg); }
		}
		&:last-child {
			transform: translateY(5px) rotate(0deg);
			animation: hamburger2 0.25s linear;
		}
		@keyframes hamburger2 {
			0%   { transform: translateY(0); }
			50%  { transform: translateY(0); }
			100% { transform: translateY(5px) rotate(0deg); }
		}
	}
}

section {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	@for $i from 1 through 5 {
		&:nth-of-type(#{$i}) {
			//background-color: rgba(salmon,($i*0.9));
			background-color: hsla(($i*20.4), 60%, 50%, 1);
			animation: backgrounder 30s linear infinite;
		}
	}
	.section-heading {
		position: sticky;
		top: 60px;
		width: 100%;
		//margin-bottom: 30px;
		background-color: rgba($white,0.3);
		box-shadow: 0 3px 5px rgba(black,0.1);
		z-index: 9996;
	}
}



footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 200px 0;
	background-color: #333;
	color: white;
}

// grid shtuff
.grid-container {
	max-width: $max-width;
	margin: 0 auto;
	padding: 0 10px;
	@media (min-width: $med) {
		padding: 0 20px;
	}
	&.full {
		max-width: 100%;
		padding: 0 10px;
		@media (min-width: $med) {
			padding: 0 20px;
		}
	}
	.grid-x {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		@media (min-width: $sm) {
			
		}
		@media (min-width: $med) {
			flex-direction: row;
			flex-wrap: wrap;
		}
		&.align-left {
			justify-content: flex-start;
		}
		&.align-right {
			justify-content: flex-end;
		}
		&.align-justify {
			justify-content: space-between;
		}
		&.align-top {
			align-items: flex-start;
		}
		&.align-bottom {
			align-items: flex-end;
		}
		&.align-middle {
			align-items: center;
		}
		&.align-center {
			align-items: center;
			justify-content: center;
		}
		&.grid-margin-x {
			.cell {
				margin-left: 10px;
				margin-right: 10px;
			}
		}
		&.grid-padding-x {
			.cell {
				padding-left: 10px;
				padding-right: 10px;
			}
		}
		&.grid-margin-y {
			.cell {
				margin-top: 10px;
				margin-bottom: 10px;
			}
		}
		&.grid-padding-y {
			.cell {
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}
	}
}
.cell {
	display: block;
	width: 100%;
	&.small-1 { 
		@media (min-width: $sm) {
			width: 8.3333%; 
		}
	}
	&.small-2 { 
		@media (min-width: $sm) {
			width: 16.6666%; 
		}
	}
	&.small-3 { 
		@media (min-width: $sm) {
			width: 25%; 
		}
	}
	&.small-4 { 
		@media (min-width: $sm) {
			width: 33.3333%;
		}
	}
	&.small-5 { 
		@media (min-width: $sm) {
			width: 41.6666%; 
		}
	}
	&.small-6 { 
		@media (min-width: $sm) {
			width: 50%; 
		}
	}
	&.small-7 { 
		@media (min-width: $sm) {
			width: 58.3333%; 
		}
	}
	&.small-8 { 
		@media (min-width: $sm) {
			width: 66.6666%; 
		}
	}
	&.small-9 { 
		@media (min-width: $sm) {
			width: 75%; 
		}
	}
	&.small-10 { 
		@media (min-width: $sm) {
			width: 83.3333%; 
		}
	}
	&.small-11 { 
		@media (min-width: $sm) {
			width: 91.666612%; 
		}
	}
	&.medium-1 { 
		@media (min-width: $med) {
			width: 8.3333%; 
		}
	}
	&.medium-2 { 
		@media (min-width: $med) {
			width: 16.6666%;
		}
	}
	&.medium-3 { 
		@media (min-width: $med) {
			width: 25%; 
		}
	}
	&.medium-4 { 
		@media (min-width: $med) {
			width: 33.3333%; 
		}
	}
	&.medium-5 { 
		@media (min-width: $med) { 
			width: 41.6666%; 
		}
	}
	&.medium-6 { 
		@media (min-width: $med) {
			width: 50%; 
		}
	}
	&.medium-7 { 
		@media (min-width: $med) {
			width: 58.3333%; 
		}
	}
	&.medium-8 { 
		@media (min-width: $med) {
			width: 66.6666%; 
		}
	}
	&.medium-9 { 
		@media (min-width: $med) {
			width: 75%; 
		}
	}
	&.medium-10 { 
		@media (min-width: $med) {
			width: 83.3333%; 
		}
	}
	&.medium-11 { 
		@media (min-width: $med) {
			width: 91.666612%; 
		}
	}
	&.large-1 { 
		@media (min-width: $lg) {
			width: 8.3333%; 
		}
	}
	&.large-2 { 
		@media (min-width: $lg) {
			width: 16.6666%; 
		}
	}
	&.large-3 { 
		@media (min-width: $lg) {
			width: 25%; 
		}
	}
	&.large-4 { 
		@media (min-width: $lg) {
			width: 33.3333%; 
		}
	}
	&.large-5 { 
		@media (min-width: $lg) {
			width: 41.6666%; 
		}
	}
	&.large-6 { 
		@media (min-width: $lg) {
			width: 50%; 
		}
	}
	&.large-7 { 
		@media (min-width: $lg) {
			width: 58.3333%; 
		}
	}
	&.large-8 { 
		@media (min-width: $lg) {
			width: 66.6666%; 
		}
	}
	&.large-9 { 
		@media (min-width: $lg) {
			width: 75%; 
		}
	}
	&.large-10 { 
		@media (min-width: $lg) {
			width: 83.3333%; 
		}
	}
	&.large-11 { 
		@media (min-width: $lg) {
			width: 91.666612%; 
		}
	}

	&.align-self-right {
		display: flex;
		justify-content: flex-end;
	}
    &.align-self-left {
		display: flex;
		justify-content: flex-start;
	}
}
.top-bar {
	.grid-x {
		flex-wrap: nowrap;
	}
}
View Compiled
const hamburger = document.querySelector('.hamburger');
const navigation = document.querySelector('.navigation');

hamburger.addEventListener('click', () => {
	navigation.classList.toggle('is-open');
	hamburger.classList.toggle('is-open');
})

External CSS

  1. https://use.fontawesome.com/releases/v5.5.0/css/all.css
  2. https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
  3. https://fonts.googleapis.com/css?family=Source+Code+Pro:700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js