diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..18f21b0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,32 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
+

TINEKE & MARC

+20 september 2024 +
+
-
+
+
+

RSVP

+ Voor 10 augustus +
- - - - - - - +
+

Laat ons weten of je komt!

+ Stuur een mail +
+
+

Dieetwensen

+ Laat het ons weten, dan kunnen we er rekening mee houden. +
+ +
+

Stukjes/inzendingen

+ Via de ceremoniemeester Lianne Fokkert +
+ +
+

Cadeautip

+ Envelop +
+
- diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..0e1ccf2 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,55 @@ +@use "../styles/variables"; + +h1, { + font-size: 34px; + font-weight: bold; + + .small { + font-family: "beautifully-delicious", serif; + font-size: 60px; + font-style: italic; + } +} + +h1, .subtitle { + font-family: variables.$tan-moncheri; + text-align: center; +} + +.heart { + text-align: center; +} + +.subtitle { + display: block; + font-size: 22px; +} + +h2, h3 { + font-weight: normal; +} + +p, h2, h3, .schedule { + font-family: variables.$playfair-display; +} + +.schedule { + margin-top: 16px; + text-align: center; + + + .item { + h3 { + margin-bottom: 0; + } + + a { + color: black; + } + + } +} + +p { + margin-bottom :0; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0f700c9..614d4cc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,20 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {HeartComponent} from "./heart/heart.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, HeartComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { title = 'marc-en-tineke-2024'; + + adresBeetsterzwaag= 'Hoofdstraat 84, 9244 CR Beetsterzwaag'; + + getMapsQuery(parameter: string) { + return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(parameter)}` + } } diff --git a/src/app/heart/heart.component.html b/src/app/heart/heart.component.html new file mode 100644 index 0000000..5a6a3b0 --- /dev/null +++ b/src/app/heart/heart.component.html @@ -0,0 +1,9 @@ + + + + + diff --git a/src/app/heart/heart.component.scss b/src/app/heart/heart.component.scss new file mode 100644 index 0000000..be4af67 --- /dev/null +++ b/src/app/heart/heart.component.scss @@ -0,0 +1,3 @@ + svg { + height: 10px; +} diff --git a/src/app/heart/heart.component.ts b/src/app/heart/heart.component.ts new file mode 100644 index 0000000..675665e --- /dev/null +++ b/src/app/heart/heart.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-heart', + standalone: true, + imports: [], + templateUrl: './heart.component.html', + styleUrl: './heart.component.scss' +}) +export class HeartComponent { + +} diff --git a/src/assets/fonts/BDScript-Regular.woff b/src/assets/fonts/BDScript-Regular.woff new file mode 100644 index 0000000..4719632 Binary files /dev/null and b/src/assets/fonts/BDScript-Regular.woff differ diff --git a/src/assets/fonts/BDScript-Regular.woff2 b/src/assets/fonts/BDScript-Regular.woff2 new file mode 100644 index 0000000..433dd6f Binary files /dev/null and b/src/assets/fonts/BDScript-Regular.woff2 differ diff --git a/src/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf new file mode 100644 index 0000000..eafb6ff Binary files /dev/null and b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.ttf differ diff --git a/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff new file mode 100644 index 0000000..53e3202 Binary files /dev/null and b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff differ diff --git a/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff2 b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff2 new file mode 100644 index 0000000..42f1309 Binary files /dev/null and b/src/assets/fonts/PlayfairDisplay-VariableFont_wght.woff2 differ diff --git a/src/assets/fonts/TAN-MONCHERI.ttf b/src/assets/fonts/TAN-MONCHERI.ttf new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/fonts/TAN-MONCHERI.woff b/src/assets/fonts/TAN-MONCHERI.woff new file mode 100644 index 0000000..5056154 Binary files /dev/null and b/src/assets/fonts/TAN-MONCHERI.woff differ diff --git a/src/assets/fonts/TAN-MONCHERI.woff2 b/src/assets/fonts/TAN-MONCHERI.woff2 new file mode 100644 index 0000000..8de2732 Binary files /dev/null and b/src/assets/fonts/TAN-MONCHERI.woff2 differ diff --git a/src/assets/images/heart.svg b/src/assets/images/heart.svg new file mode 100644 index 0000000..3ec035c --- /dev/null +++ b/src/assets/images/heart.svg @@ -0,0 +1 @@ + diff --git a/src/index.html b/src/index.html index 665dfbe..04205dd 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,11 @@ MarcEnTineke2024 - + - + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..f4cec9a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ /* You can add global styles to this file, and also import other style files */ + +@import "./styles/fonts"; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000..edcd5c4 --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,18 @@ +@font-face { + font-family: "playfair-display"; + src: url('../assets/fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2'), + url('../assets/fonts/PlayfairDisplay-VariableFont_wght.woff') format('woff'); +} + +@font-face { + font-family: "tan-moncheri"; + src: url('../assets/fonts/TAN-MONCHERI.woff2') format('woff2'), + url('../assets/fonts/TAN-MONCHERI.woff') format('woff'); +} + + +@font-face { + font-family: "beautifully-delicious"; + src: url('../assets/fonts/BDScript-Regular.woff2') format('woff2'), + url('../assets/fonts/BDScript-Regular.woff') format('woff'); +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..fd2a7c8 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,2 @@ +$playfair-display: "playfair-display", serif; +$tan-moncheri: "tan-moncheri", sans-serif;