finish footer

src/app/footer/footer.html

@@ -1 +1,47 @@
-<p>footer works!</p>
+<div class="w-screen bg-ejc-dark-blue px-5 py-10">
+  <div class="container mx-auto flex flex-col gap-6">
+    <div class="flex justify-center">
+      <img src="/images/logo.png" class="max-w-43.75" alt="Logo" />
+    </div>
+    <div class="flex flex-col gap-3">
+      <div class="text-white font-bold text-[16px]">Location</div>
+      <div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
+        <div>Tatabányai Multifunkcionális Csarnok</div>
+        <div class="flex gap-2.5">
+          <app-marker></app-marker>
+          <div class="text-white text-[16px]">2800 Tatabánya, Olimpikon u.</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3">
+      <div class="text-white font-bold text-[16px]">Contact</div>
+      <div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
+        <div>Hungarian Badminton Association</div>
+        <div class="flex gap-2.5 items-center">
+          <app-mail></app-mail>
+          <div class="text-white text-[16px]">iroda@badminton.hu</div>
+        </div>
+        <div class="flex gap-2.5 items-center">
+          <app-phone></app-phone>
+          <div class="text-white text-[16px]">+36 30 329 5154</div>
+        </div>
+        <div>Badminton Europe</div>
+        <div class="flex gap-2.5 items-center">
+          <app-mail></app-mail>
+          <div class="text-white text-[16px]">events@badmintoneurope.com</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3">
+        <div class="text-white font-bold text-[16px]">Follow us!</div>
+        <div class="flex gap-2.5">
+            <img src="/images/facebook.png" alt="Facebook" class="w-7.5">
+            <img src="/images/instagram.png" alt="Instagram" class="w-7.5">
+            <img src="/images/youtube.png" alt="Youtube" class="w-7.5">
+        </div>
+    </div>
+    <div class="flex justify-center text-white text-[12px]">
+        © Magyar Tollaslabda Szövetség
+    </div>
+  </div>
+</div>

src/app/footer/footer.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { Marker } from '../marker/marker';
+import { Mail } from '../mail/mail';
+import { Phone } from '../phone/phone';
 
 @Component({
   selector: 'app-footer',
-  imports: [],
+  imports: [Marker, Mail, Phone],
   templateUrl: './footer.html',
   styleUrl: './footer.css',
 })

src/app/mail/mail.html

@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="15"
+  viewBox="0 0 20 15"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1.875 0C0.839844 0 0 0.839844 0 1.875C0 2.46484 0.277344 3.01953 0.75 3.375L9.25 9.75C9.69531 10.082 10.3047 10.082 10.75 9.75L19.25 3.375C19.7227 3.01953 20 2.46484 20 1.875C20 0.839844 19.1602 0 18.125 0H1.875ZM0 4.375V12.5C0 13.8789 1.12109 15 2.5 15H17.5C18.8789 15 20 13.8789 20 12.5V4.375L11.5 10.75C10.6094 11.418 9.39062 11.418 8.5 10.75L0 4.375Z"
+    fill="#FCF1EE" />
+</svg>

src/app/mail/mail.spec.ts

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

src/app/mail/mail.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-mail',
+  imports: [],
+  templateUrl: './mail.html',
+  styleUrl: './mail.css',
+})
+export class Mail {}

src/app/marker/marker.html

@@ -1,6 +1,7 @@
 <svg
   width="16"
   height="21"
+  class="overflow-visible"
   viewBox="0 0 16 21"
   fill="none"
   xmlns="http://www.w3.org/2000/svg">

src/app/phone/phone.html

@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.44141 0.960842C6.14062 0.234279 5.34766 -0.15244 4.58984 0.0545917L1.15234 0.992092C0.472656 1.17959 0 1.79678 0 2.4999C0 12.164 7.83594 19.9999 17.5 19.9999C18.2031 19.9999 18.8203 19.5272 19.0078 18.8476L19.9453 15.4101C20.1523 14.6522 19.7656 13.8593 19.0391 13.5585L15.2891 11.996C14.6523 11.7304 13.9141 11.914 13.4805 12.4491L11.9023 14.3749C9.15234 13.0741 6.92578 10.8476 5.625 8.09756L7.55078 6.52334C8.08594 6.08584 8.26953 5.35147 8.00391 4.71475L6.44141 0.964748V0.960842Z"
+    fill="#FCF1EE" />
+</svg>

src/app/phone/phone.spec.ts

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

src/app/phone/phone.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-phone',
+  imports: [],
+  templateUrl: './phone.html',
+  styleUrl: './phone.css',
+})
+export class Phone {}