Added customer and changed to rem

src/app/app.component.scss

@@ -1,28 +1,28 @@
 @import '../styles.scss';
 
 app-header {
-  box-shadow: 0px 15px 10px rgba(0,0,0,0.21);
+  box-shadow: 0 1.5rem 1rem rgba(0,0,0,0.21);
   position: relative;
   z-index: 5;
 }
 
 .hero-container {
   width: 100%;
-  height: 500px;
+  height: 50rem;
   overflow: hidden;
 
   .hero {
     transform: scale(0.9);
     transform-origin: top left;
     margin: 0 auto;
-    margin-top: -550px;
+    margin-top: -55rem;
   }
 
   .overlay {
     background-color: rgba(255, 255, 255, 0.35);
-    height: 600px;
+    height: 60rem;
     width: 100%;
-    top: -1050px;
+    top: -105rem;
     display: inline-block;
     position: relative;
   }
@@ -30,20 +30,20 @@ app-header {
 
 .hero-container2 {
   width: 100%;
-  height: 350px;
+  height: 35rem;
   overflow: hidden;
 
   .hero {
     transform: scale(0.4);
     transform-origin: top left;
-    margin-top: -730px;
+    margin-top: -73rem;
   }
 
   .overlay {
     background-color: rgba(255, 255, 255, 0.35);
-    height: 600px;
+    height: 60rem;
     width: 100%;
-    top: -3100px;
+    top: -310rem;
     display: inline-block;
     position: relative;
   }
@@ -51,18 +51,19 @@ app-header {
 
 .bold {
   font-weight: bold;
+  display: block;
 }
 
 h2 {
   color: $primary-color;
-  font-size: 30px;
+  font-size: 3rem;
   font-weight: bold;
 }
 
 .wrapper {
-  max-width: 1200px;
+  max-width: 120rem;
   margin: 0 auto;
-  padding: 20px 20px;
+  padding: 2rem 2rem;
 }
 
 .alternate {
@@ -78,17 +79,38 @@ h2 {
   }
 
   img {
-    width: 45%;
+    max-width: 45%;
     margin-right: -2%;
-    margin-bottom: -50px;
-  }
-
-  span {
-    display: block;
+    margin-bottom: -5rem;
   }
 }
 
-#vacatures {
+#klantworden {
+  margin-bottom: 4rem;
+  .timeline {
+    border-left: 0.2rem solid $primary-color;
+    padding: 1rem 3rem 2rem 3rem;
+    margin-left: 2rem;
+
+    div + div {
+      margin-top: 5rem;
+    }
+
+    div:before {
+      content: '';
+      display: inline-block;
+      width: 3rem;
+      height: 3rem;
+      border-radius: 2rem;
+      border: 0.5rem solid $white;
+      background-color: $secondary-color;
+      position: absolute;
+      margin-left: -5rem;
+    }
+  }
+}
+
+#vacatures, #klantworden {
   display: flex;
   justify-content: space-between;
 
@@ -97,19 +119,15 @@ h2 {
   }
 
   img {
-    width: 45%;
+    max-width: 45%;
     margin-left: -2%;
-    margin-bottom: -50px;
-  }
-
-  span {
-    display: block;
+    margin-bottom: -5rem;
   }
 }
 
 .wrapper-contact {
   display: flex;
-  padding: 20px 0;
+  padding: 2rem 0;
 
   div {
     width: 50%;
@@ -118,11 +136,11 @@ h2 {
 
 .footer {
   width: 100%;
-  padding-top: 50px;
-  padding-bottom: 70px;
+  padding-top: 5rem;
+  padding-bottom: 7rem;
   text-align: center;
 
   span {
-    font-size: 20px;
+    font-size: 2rem;
   }
 }