From 91a6d4ccd3efc7fef94d07c9c7dbcf4a915ed11e Mon Sep 17 00:00:00 2001 From: Gabriel Lehmann Date: Mon, 9 Jan 2023 16:03:11 -0300 Subject: [PATCH] feat: made footer top --- src/App.css | 41 ++--------- src/assets/svg/Facebooklogo.svg | 11 +++ src/assets/svg/Instagramlogo.svg | 13 ++++ src/assets/svg/Linkedinlogo.svg | 13 ++++ src/assets/svg/Twitterlogo.svg | 4 ++ src/assets/svg/Youtubelogo.svg | 4 ++ src/components/Footer/index.tsx | 88 +++++++++++++++++------ src/components/Footer/styles.module.scss | 90 +++++++++++++++++++----- 8 files changed, 186 insertions(+), 78 deletions(-) create mode 100644 src/assets/svg/Facebooklogo.svg create mode 100644 src/assets/svg/Instagramlogo.svg create mode 100644 src/assets/svg/Linkedinlogo.svg create mode 100644 src/assets/svg/Twitterlogo.svg create mode 100644 src/assets/svg/Youtubelogo.svg diff --git a/src/App.css b/src/App.css index 74b5e05..cca57b3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,5 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +* { + margin: 0; + padding: 0; + box-sizing: border-box; } diff --git a/src/assets/svg/Facebooklogo.svg b/src/assets/svg/Facebooklogo.svg new file mode 100644 index 0000000..3dab247 --- /dev/null +++ b/src/assets/svg/Facebooklogo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svg/Instagramlogo.svg b/src/assets/svg/Instagramlogo.svg new file mode 100644 index 0000000..7b084d4 --- /dev/null +++ b/src/assets/svg/Instagramlogo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/svg/Linkedinlogo.svg b/src/assets/svg/Linkedinlogo.svg new file mode 100644 index 0000000..5a82c79 --- /dev/null +++ b/src/assets/svg/Linkedinlogo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/svg/Twitterlogo.svg b/src/assets/svg/Twitterlogo.svg new file mode 100644 index 0000000..bf71aac --- /dev/null +++ b/src/assets/svg/Twitterlogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/Youtubelogo.svg b/src/assets/svg/Youtubelogo.svg new file mode 100644 index 0000000..d94b497 --- /dev/null +++ b/src/assets/svg/Youtubelogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index efc2a8c..7d57862 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -9,34 +9,78 @@ import boletoImg from "../../assets/img/boletoM3Academy.png"; import vtexPCI from "../../assets/img/vtexPCIM3Academy.png"; import vtexSvg from "../../assets/svg/Vtexwhitelogo.svg"; import M3Svg from "../../assets/svg/M3whitelogo.svg"; +import facebookSvg from "../../assets/svg/Facebooklogo.svg"; +import instagramSvg from "../../assets/svg/Instagramlogo.svg"; +import twitterSvg from "../../assets/svg/Twitterlogo.svg"; +import youtubeSvg from "../../assets/svg/Youtubelogo.svg"; +import linkedinSvg from "../../assets/svg/Linkedinlogo.svg"; export default function Footer() { return ( -