diff --git a/src/components/Container/Container.vue b/src/components/Container/Container.vue index 980c1ecb..b7dd27df 100644 --- a/src/components/Container/Container.vue +++ b/src/components/Container/Container.vue @@ -1,16 +1,18 @@ diff --git a/src/icons/DiscordIcon.vue b/src/icons/DiscordIcon.vue new file mode 100644 index 00000000..f0a2273c --- /dev/null +++ b/src/icons/DiscordIcon.vue @@ -0,0 +1,7 @@ + diff --git a/src/icons/GithubIcon.vue b/src/icons/GithubIcon.vue new file mode 100644 index 00000000..81fcd687 --- /dev/null +++ b/src/icons/GithubIcon.vue @@ -0,0 +1,5 @@ + diff --git a/src/icons/XIcon.vue b/src/icons/XIcon.vue new file mode 100644 index 00000000..236496ba --- /dev/null +++ b/src/icons/XIcon.vue @@ -0,0 +1,5 @@ + diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 00000000..86e8e6b9 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,44 @@ +footer { + color: $white_100; + margin: 20px; + display: flex; + justify-content: space-between; + align-items: center; + .title { + font-size: 18px; + font-weight: bold; + } + .copy { + font-size: 12px; + color: #888888; + } + + font-size: 14px; + .navigation { + display: flex; + gap: 20px; + a { + color: $white_100; + &:hover { + color: $white_400; + } + } + } + .social { + display: flex; + align-items: center; + gap: 20px; + svg { + height: 20px; + width: 25px; + } + } + + @include tablet() { + display: block; + .navigation { + flex-wrap: wrap; + margin: 20px 0; + } + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 7a3d70db..07f1b716 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -5,4 +5,5 @@ @import 'controls'; @import 'home'; @import 'page'; -@import 'datatable'; \ No newline at end of file +@import 'datatable'; +@import 'footer'; \ No newline at end of file