Added all missing components

src/app/about/about.component.html

@@ -0,0 +1,2 @@
+<img src="assets/logo.svg" alt="sfeerfoto" />
+<span>Mijn naam is Lotte. Ik ben grafischvormgever in hart en nieren. Ondertussenkan ik met trots zeggen dat ik eendecennium ervaring heb als vormgever.Het begon als experimenteren met hetAdobe-pakket en is uitgegroeid tot eenpassie die ik nooit meer wil loslaten.</span>

src/app/about/about.component.scss

@@ -0,0 +1,14 @@
+:host {
+  padding: 2rem 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+img {
+  width: 30%;
+  max-height: 10rem;
+}
+
+span {
+  width: 50%;
+}

src/app/about/about.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  imports: [],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.scss'
+})
+export class AboutComponent {
+
+}

src/app/app.component.html

@@ -1,6 +1,8 @@
 <div class="wrapper">
   <app-header></app-header>
   <app-hero></app-hero>
-  <app-services></app-services>
-  <app-footer></app-footer>
+  <app-services id="services"></app-services>
+  <app-portfolio id="portfolio"></app-portfolio>
+  <app-about id="about"></app-about>
+  <app-footer id="contact">"</app-footer>
 </div>

src/app/app.component.scss

@@ -8,4 +8,8 @@
     display: flex;
     width: 100%;
   }
+
+  app-footer {
+    border-bottom: none;
+  }
 }

src/app/app.component.ts

@@ -4,11 +4,13 @@ import { HeroComponent } from "./hero/hero.component";
 import { HeaderComponent } from "./header/header.component";
 import { ServicesComponent } from "./services/services.component";
 import { FooterComponent } from "./footer/footer.component";
+import { PortfolioComponent } from "./portfolio/portfolio.component";
+import { AboutComponent } from "./about/about.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent],
+  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/footer/footer.component.html

@@ -1 +1,10 @@
-<p>footer works!</p>
+<div class="contact">
+  <span class="naam">Lotte De Vlam</span>
+  <a href="tel:+0493183740">04 93 18 37 40</a>
+  <a href="mailto:lotte@ontvlambaar.be">lotte&64;ontvlambaar.be</a>
+  <span class="btw">BTW BE0673 769 126</span>
+</div>
+
+<div class="barcode">
+
+</div>

src/app/footer/footer.component.scss

@@ -0,0 +1,31 @@
+:host {
+  display: flex;
+  padding: 2rem 0;
+}
+
+.contact {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+
+  .naam {
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    word-spacing: 0.7rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .btw {
+    margin-top: 1.5rem;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--text-color);
+  }
+}
+
+.barcode {
+  width: 70%;
+}

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <ul>
-  <li><a href="#">Aanbod</a></li>
-  <li><a href="#">Portfolio</a></li>
-  <li><a href="#">Over ons</a></li>
-  <li><a href="#">Contact</a></li>
+  <li><a href="#services">Aanbod</a></li>
+  <li><a href="#portfolio">Portfolio</a></li>
+  <li><a href="#about">Over ons</a></li>
+  <li><a href="#contact">Contact</a></li>
 </ul>

src/app/hero/hero.component.html

@@ -1,3 +1,3 @@
-<span>logo</span>
+<img src="assets/logo.svg" alt="logo"/>
 <h1>Ontvlambaar</h1>
 <span class="slogan">Jullie het vuur, wij de branding</span>

src/app/hero/hero.component.scss

@@ -1,11 +1,14 @@
 :host {
-  height: 30rem;
-  min-height: 30rem;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 3rem 0;
 }
 
 .slogan {
   font-size: 3.5rem;
 }
+
+img {
+  height: 8rem;
+}

src/app/portfolio/portfolio.component.html

@@ -0,0 +1,25 @@
+<div class="left">
+  <div>
+    <h2>Zetwerk van boeken</h2>
+    <p>Educatieve uitgaven, waar het allemaal begonnen is. Via VrijdagGrafis de nodige ervaring opgedaanom educatieve uitgaven vorm tegeven en het zetwerk te verzorgen.</p>
+  </div>
+  <img src="/assets/logo.svg" alt="Zetwerk voorbeeld">
+</div>
+<div class="right">
+  <div>
+    <h2>Logo’s, huisstijlen & verpakkingen</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,</p>
+  </div>
+  <img src="/assets/logo.svg" alt="Zetwerk voorbeeld">
+</div>
+<div class="left">
+  <div>
+    <h2>UX/UI</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,</p>
+  </div>
+  <img src="/assets/logo.svg" alt="Zetwerk voorbeeld">
+</div>
+
+
+
+

src/app/portfolio/portfolio.component.scss

@@ -0,0 +1,29 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 2rem 0;
+  gap: 5rem;
+}
+
+.left, .right {
+  width: 100%;
+  min-width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  div {
+    width: 55%;
+  }
+
+  img {
+    height: 10rem;
+  }
+}
+
+.right {
+  flex-direction: row-reverse;
+}
+
+h2 {
+  margin: 0;
+}

src/app/portfolio/portfolio.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PortfolioComponent } from './portfolio.component';
+
+describe('PortfolioComponent', () => {
+  let component: PortfolioComponent;
+  let fixture: ComponentFixture<PortfolioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PortfolioComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PortfolioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portfolio/portfolio.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-portfolio',
+  standalone: true,
+  imports: [],
+  templateUrl: './portfolio.component.html',
+  styleUrl: './portfolio.component.scss'
+})
+export class PortfolioComponent {
+
+}

src/app/services/services.component.html

@@ -1,12 +1,16 @@
 <div class="service">
+  <img src="assets/zetwerk.svg" alt="zetwerk" />
   <h2>Zetwerk van boeken</h2>
 </div>
 <div class="service">
+  <img src="assets/verpakkingen.svg" alt="Verpakkingen" />
   <h2>Verpakkingen</h2>
 </div>
 <div class="service">
+  <img src="assets/logos.svg" alt="Logos" />
   <h2>logo's en huisstijlen</h2>
 </div>
 <div class="service">
+  <img src="assets/ui-ux.svg" alt="UX/UI" />
   <h2>UX/UI</h2>
 </div>

src/app/services/services.component.scss

@@ -1,18 +1,22 @@
 :host {
   flex-wrap: wrap;
-  height: 15rem;
+  padding: 2rem 0;
+  gap: 2rem;
 }
 
 .service {
   display: flex;
-  width: 50%;
-  height: 3rem;
+  width: calc(50% - 1rem);
+  height: 4rem;
   flex-shrink: 0;
   align-self: center;
+  gap: 1rem;
 
   h2 {
     font-size: 1.5rem;
     font-weight: 300;
     margin: 0;
+    display: flex;
+    align-self: center;
   }
 }