Added customer and changed to rem

src/app/app.component.html

@@ -26,8 +26,28 @@
 </div>
 <div>
 <div class="wrapper" id="klantworden">
-  <h2>Klant worden?</h2>
-  <h2>Hoe gaan we te werk?</h2>
+  <div class="content">
+    <h2>Klant worden?</h2>
+    <p>
+      <span class="bold">Iedereen welkom</span>
+      Onze klanten zijn zowel kleine als middelgrote ondernemingen. In ons kantoor is ook een starter als bijberoep welkom. Iedere zelfstandige is ooit wel eens klein begonnen. Contacteer ons gerust voor vrijblijvende informatie.
+    </p>
+    <p>
+      <span class="bold">Ik heb al een boekhouder?</span>
+      Wij zullen u bij de overstap begeleiden, zodat de overgang vlot kan verlopen.
+      Wij contacteren uw vorige raadgever om ons uw dossier te bezorgen.
+    </p>
+    <h2>Hoe gaan we te werk?</h2>
+    <div class="timeline">
+      <div><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
+      <div><p>We leggen je de werking uit van ons kantoor en kijken samen wat de beste ondernemingsvorm is voor jouw bedrijf.</p></div>
+      <div><p>We overlopen de voor- en nadelen van een éénmanszaak ten opzichte van een vennootschap, en wat de fiscale en boekhoudkundige gevolgen zijn van deze keuze.</p></div>
+      <div><p>Ons kantoor en onze werkmethodes worden voorgesteld en uw vragen over de verdere samenwerking zullen worden beantwoord.</p></div>
+      <div><p>Kleine dossiers met een beperkt aantal te boeken documenten krijgen de mogelijkheid om zelf de aan- en verkopen te registreren via eenvoudige Excel bestanden.</p></div>
+      <div><p>Interesse? Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens./p></div>
+    </div>
+  </div>
+  <img src="assets/b-images/customer.png" alt="klant">
 </div>
 </div>
 <div class="hero-container2">
@@ -98,7 +118,7 @@
     <p>Homepage</p>
   </div>
   <div class="google-maps">
-    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26011.531706816328!2d3.7327019887977553!3d51.06778304400319!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c376cf113b3e6f%3A0x3f11537833278a46!2sSinia%20Accountants%20En%20Belastingconsulenten!5e0!3m2!1sen!2sbe!4v1690233562850!5m2!1sen!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d26011.531706816328!2d3.7327019887977553!3d51.06778304400319!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c376cf113b3e6f%3A0x3f11537833278a46!2sSinia%20Accountants%20En%20Belastingconsulenten!5e0!3m2!1sen!2sbe!4v1690233562850!5m2!1sen!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="google maps"></iframe>
   </div>
 </div>
 </div>

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;
   }
 }

src/app/header/header.component.scss

@@ -2,13 +2,13 @@
 
 :host {
   display: flex;
-  padding: 20px;
+  padding: 2rem;
 }
 
 .logo {
   text-decoration: none;
   display: flex;
-  gap: 10px;
+  gap: 1rem;
 
   .subtext {
     display: flex;
@@ -17,7 +17,7 @@
   }
 
   h1 {
-    font-size: 13px;
+    font-size: 1.3rem;
     color: $primary-color;
     font-weight: 800;
     margin: 0;
@@ -25,8 +25,8 @@
 
   p {
     color: $primary-color;
-    font-size: 13px;
-    width: 175px;
+    font-size: 1.3rem;
+    width: 17.5rem;
     margin: 0;
   }
 }
@@ -42,7 +42,7 @@
     color: $primary-color;
     text-decoration: none;
     margin: auto;
-    padding: 15px 30px;
+    padding: 1.5rem 3rem;
     font-weight: normal;
     transition: all .2s;
   }

src/index.html

@@ -11,13 +11,18 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
 
   <style>
-    * {
+    html {
+      font-size: 10px;
+    }
+
+    body *{
       font-family: 'Inter';
+      font-size: 1.6rem;
     }
 
     body {
       margin: 0 auto;
-      max-width: 1920px;
+      max-width: 192rem;
       margin: 0 auto;
     }
   </style>