diff --git a/public/assets/Artboard 13.svg b/public/assets/Artboard 13.svg new file mode 100644 index 0000000..9af3211 --- /dev/null +++ b/public/assets/Artboard 13.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/Artboard 14.svg b/public/assets/Artboard 14.svg new file mode 100644 index 0000000..73e6eb3 --- /dev/null +++ b/public/assets/Artboard 14.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/Artboard 15.svg b/public/assets/Artboard 15.svg new file mode 100644 index 0000000..1f53f13 --- /dev/null +++ b/public/assets/Artboard 15.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/Artboard 16.svg b/public/assets/Artboard 16.svg new file mode 100644 index 0000000..7e27e44 --- /dev/null +++ b/public/assets/Artboard 16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/Artboard 19.svg b/public/assets/Artboard 19.svg new file mode 100644 index 0000000..9bc4ee3 --- /dev/null +++ b/public/assets/Artboard 19.svg @@ -0,0 +1 @@ +lotte ontvlambaar.be \ No newline at end of file diff --git a/public/assets/Artboard 20.svg b/public/assets/Artboard 20.svg new file mode 100644 index 0000000..ddce4a8 --- /dev/null +++ b/public/assets/Artboard 20.svg @@ -0,0 +1 @@ +lotte ontvlambaar.be \ No newline at end of file diff --git a/public/assets/logo.svg b/public/assets/logo.svg new file mode 100644 index 0000000..dcae153 --- /dev/null +++ b/public/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/logos.svg b/public/assets/logos.svg new file mode 100644 index 0000000..2ee7dbc --- /dev/null +++ b/public/assets/logos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/ui-ux.svg b/public/assets/ui-ux.svg new file mode 100644 index 0000000..a59a279 --- /dev/null +++ b/public/assets/ui-ux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/verpakkingen.svg b/public/assets/verpakkingen.svg new file mode 100644 index 0000000..8b7f378 --- /dev/null +++ b/public/assets/verpakkingen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/zetwerk.svg b/public/assets/zetwerk.svg new file mode 100644 index 0000000..d12bee5 --- /dev/null +++ b/public/assets/zetwerk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html new file mode 100644 index 0000000..c120557 --- /dev/null +++ b/src/app/about/about.component.html @@ -0,0 +1,2 @@ +sfeerfoto +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. diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss new file mode 100644 index 0000000..5c4355e --- /dev/null +++ b/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%; +} diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..74d6d9e --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AboutComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts new file mode 100644 index 0000000..6f52bf4 --- /dev/null +++ b/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 { + +} diff --git a/src/app/app.component.html b/src/app/app.component.html index bfe8131..a5ac254 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@
- - + + + + "
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 920efad..2abe897 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -8,4 +8,8 @@ display: flex; width: 100%; } + + app-footer { + border-bottom: none; + } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 41ea7d3..ac7e4ff 100644 --- a/src/app/app.component.ts +++ b/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' }) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index 28c0d7d..62a9f23 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -1 +1,10 @@ -

footer works!

+
+ Lotte De Vlam + 04 93 18 37 40 + lotte&64;ontvlambaar.be + BTW BE0673 769 126 +
+ +
+ +
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index e69de29..805b6cb 100644 --- a/src/app/footer/footer.component.scss +++ b/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%; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 1050dcf..494fe2a 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,6 +1,6 @@ diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html index 7b2759c..55e85c7 100644 --- a/src/app/hero/hero.component.html +++ b/src/app/hero/hero.component.html @@ -1,3 +1,3 @@ -logo +logo

Ontvlambaar

Jullie het vuur, wij de branding diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss index d6897c4..7b7b20a 100644 --- a/src/app/hero/hero.component.scss +++ b/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; +} diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html new file mode 100644 index 0000000..5cd2e74 --- /dev/null +++ b/src/app/portfolio/portfolio.component.html @@ -0,0 +1,25 @@ +
+
+

Zetwerk van boeken

+

Educatieve uitgaven, waar het allemaal begonnen is. Via VrijdagGrafis de nodige ervaring opgedaanom educatieve uitgaven vorm tegeven en het zetwerk te verzorgen.

+
+ Zetwerk voorbeeld +
+
+
+

Logo’s, huisstijlen & verpakkingen

+

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,

+
+ Zetwerk voorbeeld +
+
+
+

UX/UI

+

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,

+
+ Zetwerk voorbeeld +
+ + + + diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss new file mode 100644 index 0000000..a3c3a54 --- /dev/null +++ b/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; +} diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts new file mode 100644 index 0000000..073ce35 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PortfolioComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PortfolioComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts new file mode 100644 index 0000000..3e68e73 --- /dev/null +++ b/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 { + +} diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html index c69bbba..84164bd 100644 --- a/src/app/services/services.component.html +++ b/src/app/services/services.component.html @@ -1,12 +1,16 @@
+ zetwerk

Zetwerk van boeken

+ Verpakkingen

Verpakkingen

+ Logos

logo's en huisstijlen

+ UX/UI

UX/UI

diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss index 56eed5d..17c7a6d 100644 --- a/src/app/services/services.component.scss +++ b/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; } }