add parallax functionality to spacer

assets/scss/page_sections/_about.scss

@@ -1,4 +1,7 @@
 .container--about {
+  z-index: 5;
+  position: relative;
+  top: -200px;
   h1, h5 {
     color: $teal;
   }

assets/scss/page_sections/_hero.scss

@@ -1,11 +1,15 @@
 .container--hero {
   background: url("../imgs/header2.png");
+  background-repeat: no-repeat;
   background-size: cover;
-  height: 85vh;
+  height: 125vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 0;
+  position: relative;
+  top: -20px;
   .hero--text {
     width: 75%;
     color: white;

assets/scss/page_sections/_spacer.scss

@@ -1,9 +1,18 @@
-.container--spacer {
-  background: url("../imgs/middle2.png");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: right;
-  height: 60vh;
-  width: 100%;
-  margin: 3em 0;
+// .container--spacer {
+//   background: url("../imgs/header3.png");
+//   background-size: cover;
+//   background-repeat: no-repeat;
+//   background-position: right;
+//   height: 100vh;
+//   width: 100%;
+//   // margin: 3em 0;
+//   position: relative;
+//   top: -200px;
+//   z-index: 1;
+// }
+
+.parallax-container {
+  .parallax {
+    height: 400px;
+  }
 }

index.html

@@ -75,10 +75,16 @@ <h3>Community Values</h3>
       </div>
     </div>
 
-    <div class="container--spacer">
+    <!-- <div class="container--spacer">
 
+    </div> -->
+
+
+    <div class="parallax-container">
+      <div class="parallax"><img src="assets/imgs/header3.png"></div>
     </div>
 
+
     <div class="container container--coc">
       <h3>The Women Who Code</h3>
       <h1>CODE OF CONDUCT</h1>

js/scripts.js

@@ -2,3 +2,9 @@ document.addEventListener('DOMContentLoaded', function() {
     var elems = document.querySelectorAll('.collapsible');
     var instances = M.Collapsible.init(elems);
   });
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    var spacer = document.querySelectorAll('.parallax');
+    var instances = M.Parallax.init(spacer);
+  });