Added base layout and linking

src/app/app.component.html

@@ -1,5 +1,65 @@
 <app-header></app-header>
 <div class="hero-container">
-  <img class="hero" src="assets/hero1.jpg" alt="hero-image">
-  <div class="overlay"></div>
+<img class="hero" src="assets/hero1.jpg" alt="hero-image">
+<div class="overlay"></div>
+</div>
+<div class="alternate">
+<div class="wrapper">
+  <h2>U kan bij ons terecht</h2>
+  <p>
+    Onze klanten zijn zowel kleine als middelgrote ondernemingen. De ondernemingen zijn zowel éénmanszaken, vrije beroepers of vennootschappen, actief in tal van sectoren zoals productie, handel, diensten, vrije beroepen, de medische sector ...
+  </p>
+  <p>
+    In ons kantoor is ook een starter als bijberoep welkom. Iedere zelfstandige is ooit klein begonnen.
+  </p>
+</div>
+</div>
+<div>
+<div class="wrapper" id="diensten">
+  <h2>Diensten</h2>
+</div>
+</div>
+<div class="alternate" id="advies">
+<div class="wrapper">
+  <h2>Advies</h2>
+</div>
+</div>
+<div>
+<div class="wrapper" id="klantworden">
+  <h2>Klant worden?</h2>
+  <h2>Hoe gaan we te werk?</h2>
+</div>
+</div>
+<div class="hero-container2">
+<img class="hero" src="assets/hero2.jpg" alt="hero-image">
+<div class="overlay"></div>
+</div>
+<div class="alternate" id="wiezijnwe">
+<div class="wrapper">
+  <h2>Wie zijn we?</h2>
+</div>
+</div>
+<div>
+<div class="wrapper" id="vacatures">
+  <h2>Vacatures</h2>
+</div>
+</div>
+<div class="alternate" id="contact">
+<div class="wrapper wrapper-contact">
+  <div class="text">
+    <h2>Contact</h2>
+    <p>Antwerpsesteenweg 271, 9040 Gent (Sint-Amandsberg)</p>
+    <p>Tel: 09/ 228.43.22</p>
+    <p>Gsm : 0475/ 70.78.87 (Robert Sinia)</p>
+    <p>E-mail: robert@sinia.be frank@sinia.be</p>
+    <p>Linkedin</p>
+    <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>
+  </div>
+</div>
+</div>
+<div class="footer">
+<span>Copyright Sinia {{copyrightYear}}</span>
 </div>

src/app/app.component.scss

@@ -1,3 +1,4 @@
+@import '../styles.scss';
 
 app-header {
   box-shadow: 0px 15px 10px rgba(0,0,0,0.21)
@@ -24,3 +25,60 @@ app-header {
   }
 }
 
+.hero-container2 {
+  width: 100%;
+  height: 350px;
+  overflow: hidden;
+
+  .hero {
+    transform: scale(0.4);
+    transform-origin: top left;
+    margin-top: -730px;
+  }
+
+  .overlay {
+    background-color: rgba(255, 255, 255, 0.35);
+    height: 600px;
+    width: 100%;
+    top: -3100px;
+    display: inline-block;
+    position: relative;
+  }
+}
+
+h2 {
+  color: $primary-color;
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
+.alternate {
+  background-color: $light;
+}
+
+
+.wrapper-contact {
+  display: flex;
+  padding: 20px 0;
+
+  div {
+    width: 50%;
+  }
+}
+
+.footer {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 70px;
+  text-align: center;
+
+  span {
+    font-size: 20px;
+  }
+}

src/app/app.component.ts

@@ -7,4 +7,9 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Sinia';
+  public copyrightYear: number;
+
+  constructor() {
+    this.copyrightYear = (new Date()).getFullYear();
+  }
 }

src/app/header/header.component.html

@@ -1,5 +1,5 @@
 <div class="logo">
-  <a href ="/" class="logo"><img src="assets/logo.jpg"></a>
+  <a href ="/" class="logo" ><img src="assets/logo.jpg" alt="logo"></a>
   <div class="subtext">
     <h1>Sinia</h1>
     <p>Accountants en Belastingconsultenten BV</p>
@@ -7,10 +7,10 @@
 </div>
 
 <div class="menu">
-  <a href="#">Diensten</a>
-  <a href="#">Advies</a>
-  <a href="#">Klant worden</a>
-  <a href="#">Over ons</a>
-  <a href="#">Vacatures</a>
-  <a href="#">Contact</a>
+  <a href="#diensten">Diensten</a>
+  <a href="#advies">Advies</a>
+  <a href="#klantworden">Klant worden</a>
+  <a href="#wiezijnwe">Over ons</a>
+  <a href="#vacatures">Vacatures</a>
+  <a href="#contact">Contact</a>
 </div>

src/app/header/header.component.scss

@@ -42,5 +42,13 @@
     color: $primary-color;
     text-decoration: none;
     margin: auto;
+    padding: 15px 30px;
+    font-weight: normal;
+    transition: all .2s;
+  }
+
+  a:hover {
+    font-weight: 800;
+    transition: all .2s;
   }
 }