Add new navbar, jumbotron, cards, and footer components.

src/styles/_breakpoints.sass

@@ -0,0 +1,8 @@
+// Bootstrap Breakpoints
+// sm 576.98px
+// md 576px - 757.98px
+// lg 992px to 1199.98px
+// xl 1200px and up
+@import ../../node_modules/bootstrap/sass/functions
+@import ../../node_modules/bootstrap/sass/variables
+@import ../../node_modules/bootstrap/sass/mixins/breakpoints

src/styles/_cards.sass

@@ -0,0 +1,23 @@
+.container.card-container
+	max-width: 1200px
+  // pending media query decision
+	// .col-md-4
+	// 	+media-breakpoint-up(lg)
+	// 		padding: 0 20px
+	.col-md-4
+		padding: 0 20px
+		&:focus
+			outline: none;
+	.card
+		border: none
+		margin-bottom: 64px
+	.card-title
+		margin: 11px 0 5px
+		font-size: 27px
+		a
+			color: #111
+			text-decoration: none
+	.card-text
+		font-size: 18px
+	.card-body
+		padding: 0

src/styles/_colors.sass

@@ -0,0 +1,9 @@
+$primary: #0A68FF
+$grey: #EBEBEB
+$gray: #EBEBEB
+$dark: rgba(17,17,17,1)
+$muted: rgba(17,17,17,0.75)
+$lightgray: #F5F5F5
+// $theme-colors:
+//   primary: red
+//

src/styles/_custom-font.sass

@@ -0,0 +1,4 @@
+body
+	font-family: 'Source Sans Pro', sans-serif
+	-webkit-font-smoothing: antialiased
+	-moz-osx-font-smoothing: grayscale

src/styles/_footer.sass

@@ -0,0 +1,44 @@
+footer.container-fluid
+	background: #F8F8FB
+	border-top: 1px solid #E3E3E6
+	margin-top: 136px
+	.container
+		margin-top: 11px
+		max-width: 1200px
+	.row
+		max-width: 1200px
+	.col-4
+		// background: blue
+		// flex: 0 0 100%
+    // max-width: 100%
+		max-width: 100%
+    flex-basis: 100%
+    margin-bottom: 60px
+		padding-left: 20px
+		padding-right: 20px
+		+media-breakpoint-up(md)
+			// background: lightcoral
+			flex: 0 0 33%
+			max-width: 33%
+			margin-bottom: 0px
+	.col
+		padding-left: 20px
+		padding-right: 20px
+	h5
+		font-weight: 600
+		font-size: 15px
+		color: $dark
+		letter-spacing: 0.6px
+		text-transform: uppercase
+		margin-bottom: 12px
+	p
+		color: #6d6d6e
+		line-height: 30px
+	.list-unstyled
+		a
+			color: #6d6d6e
+		li
+			line-height: 30px
+	.social-icons
+		.list-inline-item:not(:last-child) 
+    	margin-right: 22px

src/styles/_jumbotron.sass

@@ -0,0 +1,26 @@
+.jumbotron
+	width: 100%
+	height: 600px
+	background-color: #fff
+	background-repeat: no-repeat
+	background-position: left top
+	background-size: cover
+	margin-bottom: 0px
+	.container
+		max-width: 1160px
+		display: flex
+		height: 100%
+		flex-direction: column
+		justify-content: center
+	h1.display-4
+		color: white
+		font-weight: 400
+		font-size: 48px
+		margin-bottom: 0
+		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30)
+	.lead
+		max-width: 722px
+		letter-spacing: 0.4px
+		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.80)
+	p
+		color: white

src/styles/_navbar.sass

@@ -0,0 +1,44 @@
+.navbar
+  background: #fff
+  height: auto
+  min-height: 48px
+  // height: 48px
+  +media-breakpoint-up(md)
+    height: 56px
+  .logo
+    display: flex
+    justify-content: center
+  .navbar-toggler
+    padding: 0
+  .navbar-nav
+    margin-bottom: 15px;
+    margin-top: 15px;
+    +media-breakpoint-up(md)
+      margin: 0
+  .nav-item .nav-link
+    font-size: 18px
+    color: $dark
+    // padding: 16px 8px 16px 34px
+    padding: 3vh 8px 3vh 34px
+    +media-breakpoint-up(lg)
+      padding: 6px 18px
+    &:hover
+      color: $muted
+  .dropdown-toggle::after
+    display:none
+  .navbar-toggler
+    border: 0
+    outline: none
+    span
+      width: 20px
+      height: 2px
+      background: $dark
+      display: block
+      margin-bottom: 4px
+      &:last-of-type
+        margin-bottom: 0
+  .collapsing
+    transition: none
+    display: none
+  .show
+    padding-bottom: 75vh

src/styles/projects-index-collection.sass

@@ -0,0 +1,11 @@
+@import ../styles/breakpoints
+@import ../styles/colors
+@import ../styles/custom-font
+@import ../styles/navbar
+@import ../styles/jumbotron
+@import ../styles/cards
+@import ../styles/footer
+
+.jumbotron
+	background-image: url('/../../static/assets/img/backgrounds/banner-open-projects.jpg')
+	margin-bottom: 56px