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

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 }} - - - - - } -
- -
-
-
- - - - - - - - - - - +
+ + + + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..920efad 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,11 @@ +.wrapper { + width: 80%; + max-width: 80rem; + margin: 0 auto; + + > * { + border-bottom: 0.25rem solid var(--accent-color); + display: flex; + width: 100%; + } +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index f6e1ea4..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'ontvlambaar' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('ontvlambaar'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ontvlambaar'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b449b00..41ea7d3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,14 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { HeroComponent } from "./hero/hero.component"; +import { HeaderComponent } from "./header/header.component"; +import { ServicesComponent } from "./services/services.component"; +import { FooterComponent } from "./footer/footer.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html new file mode 100644 index 0000000..28c0d7d --- /dev/null +++ b/src/app/footer/footer.component.html @@ -0,0 +1 @@ +

footer works!

diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts new file mode 100644 index 0000000..3f93915 --- /dev/null +++ b/src/app/footer/footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts new file mode 100644 index 0000000..515bda6 --- /dev/null +++ b/src/app/footer/footer.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-footer', + standalone: true, + imports: [], + templateUrl: './footer.component.html', + styleUrl: './footer.component.scss' +}) +export class FooterComponent { + +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..1050dcf --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,6 @@ + diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss new file mode 100644 index 0000000..38e84cd --- /dev/null +++ b/src/app/header/header.component.scss @@ -0,0 +1,19 @@ +ul { + list-style: none; + + display: flex; + justify-content: center; + gap: 3rem; + height: 6rem; + width: 100%; + + li { + align-content: center; + font-size: 1.5rem; + } +} + +a { + text-decoration: none; + color: var(--text-color); +} diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts new file mode 100644 index 0000000..204ed6e --- /dev/null +++ b/src/app/header/header.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeaderComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..c780cb4 --- /dev/null +++ b/src/app/header/header.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-header', + standalone: true, + imports: [], + templateUrl: './header.component.html', + styleUrl: './header.component.scss' +}) +export class HeaderComponent { + +} diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html new file mode 100644 index 0000000..7b2759c --- /dev/null +++ b/src/app/hero/hero.component.html @@ -0,0 +1,3 @@ +logo +

Ontvlambaar

+Jullie het vuur, wij de branding diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss new file mode 100644 index 0000000..d6897c4 --- /dev/null +++ b/src/app/hero/hero.component.scss @@ -0,0 +1,11 @@ +:host { + height: 30rem; + min-height: 30rem; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.slogan { + font-size: 3.5rem; +} diff --git a/src/app/hero/hero.component.spec.ts b/src/app/hero/hero.component.spec.ts new file mode 100644 index 0000000..e18cd18 --- /dev/null +++ b/src/app/hero/hero.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroComponent } from './hero.component'; + +describe('HeroComponent', () => { + let component: HeroComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeroComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts new file mode 100644 index 0000000..41c875c --- /dev/null +++ b/src/app/hero/hero.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-hero', + standalone: true, + imports: [], + templateUrl: './hero.component.html', + styleUrl: './hero.component.scss' +}) +export class HeroComponent { + +} diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html new file mode 100644 index 0000000..c69bbba --- /dev/null +++ b/src/app/services/services.component.html @@ -0,0 +1,12 @@ +
+

Zetwerk van boeken

+
+
+

Verpakkingen

+
+
+

logo's en huisstijlen

+
+
+

UX/UI

+
diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss new file mode 100644 index 0000000..56eed5d --- /dev/null +++ b/src/app/services/services.component.scss @@ -0,0 +1,18 @@ +:host { + flex-wrap: wrap; + height: 15rem; +} + +.service { + display: flex; + width: 50%; + height: 3rem; + flex-shrink: 0; + align-self: center; + + h2 { + font-size: 1.5rem; + font-weight: 300; + margin: 0; + } +} diff --git a/src/app/services/services.component.spec.ts b/src/app/services/services.component.spec.ts new file mode 100644 index 0000000..e0eb720 --- /dev/null +++ b/src/app/services/services.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesComponent } from './services.component'; + +describe('ServicesComponent', () => { + let component: ServicesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ServicesComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/services/services.component.ts b/src/app/services/services.component.ts new file mode 100644 index 0000000..b3dead3 --- /dev/null +++ b/src/app/services/services.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-services', + standalone: true, + imports: [], + templateUrl: './services.component.html', + styleUrl: './services.component.scss' +}) +export class ServicesComponent { + +} diff --git a/src/index.html b/src/index.html index b69fbbb..31f4921 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,9 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..ef23c63 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,22 @@ -/* You can add global styles to this file, and also import other style files */ +body { + // dark mode + @media (prefers-color-scheme: dark) { + --text-color: rgb(222, 112, 108); + --background-color: rgb(41, 23, 44); + --accent-color: rgb(222, 112, 108); + } + + + // light mode + --text-color: rgb(29, 29, 29); + --background-color: rgb(255, 255, 255); + --accent-color: rgb(211, 55, 38); + + font-family: Fredoka; + font-weight: 300; + + color: var(--text-color); + background-color: var(--background-color); + + +}