Adding mobile layout

src/app/app.component.html

@@ -15,6 +15,7 @@
 </div>
 </div>
 <div class="wrapper" id="diensten">
+  <img src="assets/b-images/invoice.png" alt="factuur">
   <div class="content">
     <h2>Diensten</h2>
     <app-collapse [icon]="'fa-book-open'" [title]="'Boekhouding/Accountancy'">
@@ -88,7 +89,6 @@
       </ul>
     </app-collapse>
   </div>
-  <img src="assets/b-images/invoice.png" alt="factuur">
 </div>
 <div class="alternate" id="advies">
 <div class="wrapper">
@@ -141,6 +141,7 @@
 </div>
 <div>
 <div class="wrapper" id="klantworden">
+  <img src="assets/b-images/customer.png" alt="klant">
   <div class="content">
     <h2>Klant worden?</h2>
     <p>
@@ -152,6 +153,7 @@
       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>
+    <img src="assets/b-images/customer.png" alt="klant">
     <h2>Hoe gaan we te werk?</h2>
     <div class="timeline">
       <div><span class="circle"></span><p>Tijdens een eerste vrijblijvende vergadering met één van de vennoten, bespreken we uw project.</p></div>
@@ -162,7 +164,6 @@
       <div><span class="circle"></span><p>Interesse? <span>Op onze <a href="#contact" alt="contact">contact pagina</a> vindt u onze contactgegevens</span></p></div>
     </div>
   </div>
-  <img src="assets/b-images/customer.png" alt="klant">
 </div>
 </div>
 <div class="hero-container2">
@@ -189,6 +190,7 @@
 </div>
 <div>
 <div class="wrapper" id="vacatures">
+  <img src="assets/b-images/vacancies.png" alt="vacatures">
   <div class="content">
     <h2>Vacatures</h2>
     <p>
@@ -218,7 +220,6 @@
       <li>of bezorg dan jouw CV en motivatiebrief aan robert@sinia.be</li>
     </ul>
   </div>
-  <img src="assets/b-images/vacancies.png" alt="vacatures">
 </div>
 </div>
 <div class="alternate" id="contact">

src/app/app.component.scss

@@ -112,6 +112,10 @@ h2 {
     margin-top: 10rem;
   }
 
+  .content img {
+    display: none;
+  }
+
   .timeline {
     border-left: 0.2rem solid $primary-color;
     padding: 1rem 3rem 2rem 3rem;
@@ -155,6 +159,7 @@ h2 {
 #vacatures, #klantworden, #diensten {
   display: flex;
   justify-content: space-between;
+  flex-direction: row-reverse;
 
   .content {
     width: 60%;
@@ -208,3 +213,174 @@ h2 {
     font-size: 2rem;
   }
 }
+
+@media only screen and (max-width: 1200px) {
+  .hero-container {
+    height: 20rem;
+
+    .hero {
+      transform: translateY(-50%) translateX(-50%) scale(0.35);
+      top: 25%;
+    }
+  }
+
+  .hero-container2 {
+    height: 20rem;
+
+    .hero2 {
+      transform: translateY(-50%) translateX(-50%) scale(0.28);
+      top: 0;
+    }
+  }
+
+  .wrapper {
+    padding: 2rem 3rem 6rem 3rem;
+  }
+
+  #diensten {
+    display: inline-block;
+
+    img {
+      position: relative;
+      width: 20.4rem;
+      height: 20rem;
+      top: -6rem;
+      left: calc(100vw - 30rem);
+      transform: scale(1.25);
+    }
+
+    .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -17rem;
+    }
+  }
+
+  #advies {
+    margin-top: 2rem;
+
+    .wrapper {
+      display: inline-block;
+
+      img {
+        position: relative;
+        width: 20.4rem;
+        height: 20rem;
+        top: -6rem;
+        left: calc(100vw - 30rem);
+        transform: scale(1.25);
+      }
+
+      .content {
+        z-index: 5;
+        position: relative;
+        width: 100%;
+        margin-top: -17rem;
+      }
+    }
+  }
+
+  #klantworden {
+    display: inline-block;
+    padding: 3rem;
+
+    img {
+      display: none;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      z-index: 5;
+      position: relative;
+      width: 100%;
+
+      h2 {
+        width: 100%;
+      }
+
+      img {
+        display: inline;
+        margin: 3rem;
+        width: 40rem;
+        height: 38rem;
+        max-width: 40rem;
+      }
+
+    }
+    .timeline {
+      div + div {
+        margin-top: 0rem;
+      }
+    }
+  }
+
+  #wiezijnwe {
+    display: inline-block;
+
+    .wrapper {
+      align-items: flex-end;
+      flex-direction: column;
+      margin-top:-6rem;
+
+      img {
+        width: 36rem;
+        max-width: 36rem;
+        height: 32rem;
+        position: relative;
+        top: -16rem;
+      }
+    }
+
+    .wrapper .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -19rem;
+    }
+  }
+
+  #vacatures {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 50rem;
+      max-width: 50rem;
+      height: 100%;
+      position: relative;
+      top: -12rem;
+    }
+
+    .content {
+      z-index: 5;
+      position: relative;
+      width: 100%;
+      margin-top: -15rem;
+    }
+  }
+
+  #contact {
+    .wrapper-contact {
+      display: inline;
+
+      .text {
+        padding: 3rem;
+        margin-bottom: 3rem;
+        width: 100%;
+      }
+
+      .google-maps {
+        padding: 3rem;
+        iframe{
+          margin: 0 auto;
+          width: calc(100vw - 6rem);
+        }
+    }
+    }
+  }
+}

src/app/header/header.component.scss

@@ -59,3 +59,12 @@
     transition: all .1s;
   }
 }
+
+@media only screen and (max-width: 1200px)  {
+  .logo .subtext {
+    display: none;
+  }
+  .menu {
+    display: none;
+  }
+}

src/index.html

@@ -13,10 +13,11 @@
   <meta name="description" content="Sinia Accountants en Belastingconsulenten BV is reeds vele jaren een betrouwbare partner voor tal van vennootschappen, zelfstandigen, vrije beroepers en andere organisaties. Wij zijn een team met een gezonde mix van jarenlange ervaring en jonge medewerkers en staan garant voor een kwaliteitsvolle dienstverlening in verschillende domeinen in alle onafhankelijkheid. De klant staat bij ons centraal bij ons streven om zo optimaal mogelijk tegemoet te komen aan zijn wensen en behoeften. De kwaliteit van onze dienstverlening wordt blijvend gewaarborgd door een permanente interne opleiding en externe bijscholing van onze medewerkers. Als ITAA accountants en belastingconsulenten gidsen wij u met veel enthousiasme zo veilig mogelijk door het fiscale landschap !" >
   <meta name="keywords" content="Sinia, Accountants, Accounting, Belasting, Belastingconsulenten, Partner, Sinia Accountants en Belastingconsulenten, Boekhouding, Boekhouder, Gent">
   <meta name="author" content="Robert Sinia">
-  
+
   <style>
     html {
       font-size: 10px;
+      overflow-x: hidden;
     }
 
     body *{