diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ad5d405..cf395f0 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 {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {FooterComponent} from "@component/footer/footer.component";
@Component({
selector: 'app-root',
standalone: true,
- imports: [RouterOutlet],
- template: ``
+ imports: [RouterOutlet, FooterComponent],
+ template: `
+
+ `
})
-export class AppComponent {}
+export class AppComponent {
+}
diff --git a/src/components/footer/footer.component.css b/src/components/footer/footer.component.css
new file mode 100644
index 0000000..86c9b9d
--- /dev/null
+++ b/src/components/footer/footer.component.css
@@ -0,0 +1,81 @@
+.app-footer {
+ padding: 12px;
+ font-size: 12px;
+ color: white;
+}
+
+.app-footer-copyright {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+ flex-direction: column;
+ min-width: 225px;
+ margin-top: 16px;
+ color: #BCBEC0;
+ align-self: center;
+ text-align: center;
+}
+
+/*noinspection CssInvalidPropertyValue*/
+a {
+ text-decoration: none;
+ color: inherit;
+ text-wrap: balance;
+}
+
+a:hover,
+a:focus {
+ text-decoration: underline;
+}
+
+.app-footer-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: 1fr;
+ grid-column-gap: 15px;
+ align-items: center;
+ justify-items: center;
+}
+
+.app-footer-list div h1 {
+ margin: 0;
+}
+
+@media screen and (min-width: 600px) and (max-width: 960px) {
+ .app-footer-list {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: 1fr 3fr;
+ }
+
+ .app-footer-list > div:nth-child(1) {
+ grid-area: 1 / 1 / 2 / 4;
+ }
+
+ .app-footer-list > div:nth-child(2) {
+ grid-area: 2 / 1 / 3 / 2;
+ }
+
+ .app-footer-list > div:nth-child(3) {
+ grid-area: 2 / 2 / 3 / 3;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .app-footer-list {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr repeat(2, 3fr);
+ justify-items: start;
+ }
+
+ .app-footer-list > div:nth-child(1) {
+ grid-area: 1 / 1 / 2 / 4;
+ }
+
+ .app-footer-list > div:nth-child(2) {
+ grid-area: 2 / 1 / 3 / 2;
+ }
+
+ .app-footer-list > div:nth-child(3) {
+ grid-area: 3 / 1 / 4 / 2;
+ }
+}
diff --git a/src/components/footer/footer.component.html b/src/components/footer/footer.component.html
new file mode 100644
index 0000000..e33027c
--- /dev/null
+++ b/src/components/footer/footer.component.html
@@ -0,0 +1,30 @@
+
diff --git a/src/components/footer/footer.component.ts b/src/components/footer/footer.component.ts
new file mode 100644
index 0000000..90706e4
--- /dev/null
+++ b/src/components/footer/footer.component.ts
@@ -0,0 +1,23 @@
+import {Component} from "@angular/core";
+import {MatList, MatListItem} from "@angular/material/list";
+import {version} from "@/../package.json";
+
+@Component({
+ selector: 'app-footer',
+ standalone: true,
+ imports: [
+ MatList,
+ MatListItem
+ ],
+ templateUrl: './footer.component.html',
+ styleUrl: './footer.component.css'
+})
+export class FooterComponent {
+ currentYear: number;
+ version: string;
+
+ constructor() {
+ this.currentYear = new Date().getFullYear();
+ this.version = version;
+ }
+}