From fb24e15aea86798b8b2c9410a5ea7a0ce899067a Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 16 Jan 2023 00:40:04 -0300 Subject: [PATCH] feat(footer):Redes sociais desktop responsivas --- .../src/components/assets/icons/Facebook.svg | 16 ++++++++ .../src/components/assets/icons/Instagram.svg | 18 +++++++++ .../src/components/assets/icons/Linkedin.svg | 18 +++++++++ desafio-5/src/components/assets/icons/Svg.svg | 18 +++++++++ .../src/components/assets/icons/Twiter.svg | 11 ++++++ .../src/components/assets/icons/Youtube.svg | 11 ++++++ .../src/components/modules/footer.module.scss | 37 +++++++++++++++++- .../components/scripts/celulas/FooterTop.tsx | 10 +++-- .../scripts/celulas/SocialMedia.tsx | 7 +++- desafio-5/src/components/scripts/footer.tsx | 6 ++- .../scripts/moleculas/SocialImages.tsx | 38 +++++++++++++++++++ desafio-5/src/components/utils/Variables.scss | 1 + 12 files changed, 184 insertions(+), 7 deletions(-) create mode 100644 desafio-5/src/components/assets/icons/Facebook.svg create mode 100644 desafio-5/src/components/assets/icons/Instagram.svg create mode 100644 desafio-5/src/components/assets/icons/Linkedin.svg create mode 100644 desafio-5/src/components/assets/icons/Svg.svg create mode 100644 desafio-5/src/components/assets/icons/Twiter.svg create mode 100644 desafio-5/src/components/assets/icons/Youtube.svg create mode 100644 desafio-5/src/components/scripts/moleculas/SocialImages.tsx diff --git a/desafio-5/src/components/assets/icons/Facebook.svg b/desafio-5/src/components/assets/icons/Facebook.svg new file mode 100644 index 0000000..ed10642 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/desafio-5/src/components/assets/icons/Instagram.svg b/desafio-5/src/components/assets/icons/Instagram.svg new file mode 100644 index 0000000..e95de2b --- /dev/null +++ b/desafio-5/src/components/assets/icons/Instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio-5/src/components/assets/icons/Linkedin.svg b/desafio-5/src/components/assets/icons/Linkedin.svg new file mode 100644 index 0000000..d289af5 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio-5/src/components/assets/icons/Svg.svg b/desafio-5/src/components/assets/icons/Svg.svg new file mode 100644 index 0000000..d289af5 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Svg.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio-5/src/components/assets/icons/Twiter.svg b/desafio-5/src/components/assets/icons/Twiter.svg new file mode 100644 index 0000000..682da7b --- /dev/null +++ b/desafio-5/src/components/assets/icons/Twiter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-5/src/components/assets/icons/Youtube.svg b/desafio-5/src/components/assets/icons/Youtube.svg new file mode 100644 index 0000000..6ce61e0 --- /dev/null +++ b/desafio-5/src/components/assets/icons/Youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-5/src/components/modules/footer.module.scss b/desafio-5/src/components/modules/footer.module.scss index f5c46d3..3ad1bae 100644 --- a/desafio-5/src/components/modules/footer.module.scss +++ b/desafio-5/src/components/modules/footer.module.scss @@ -76,7 +76,42 @@ justify-content: space-between; padding: 50px 100px; align-items: flex-start; - background: pink; + &_menu{ + display: flex; + width: 65.556%; + height: 140px; + } + &_media{ + display: flex; + flex-direction: column; + width: 20%; + gap: 12px; + a{ + color: $-black-3030; + font-family: 'Roboto',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + &_MediaWraaper{ + width: 100%; + max-height: 6.484vh; + fieldset{ + display: flex; + gap: 10px; + border: 0; + height: 100%; + max-height: 6.484vh; + a{ + width:16.21%; + img{ + width: 100%; + } + } + } + } + } } &_bottom{ background: $-black; diff --git a/desafio-5/src/components/scripts/celulas/FooterTop.tsx b/desafio-5/src/components/scripts/celulas/FooterTop.tsx index a039706..b2fc642 100644 --- a/desafio-5/src/components/scripts/celulas/FooterTop.tsx +++ b/desafio-5/src/components/scripts/celulas/FooterTop.tsx @@ -4,17 +4,21 @@ import { SocialMedia } from "./SocialMedia"; interface Calsses { DadClass?: string; + wrapperClass?: string; + MediaCLass?: string; + MenuClass?: string; } export const TopFooter: React.FC = ( - {DadClass} + {DadClass, MediaCLass,wrapperClass,MenuClass} ) => { return(
- - + +
) }; diff --git a/desafio-5/src/components/scripts/celulas/SocialMedia.tsx b/desafio-5/src/components/scripts/celulas/SocialMedia.tsx index cf436d9..aab45bf 100644 --- a/desafio-5/src/components/scripts/celulas/SocialMedia.tsx +++ b/desafio-5/src/components/scripts/celulas/SocialMedia.tsx @@ -1,18 +1,21 @@ import React from "react" +import {SocialImages} from "../moleculas/SocialImages" interface Calsses { wrapperClass?: string; + MediaCLass?: string; } export const SocialMedia: React.FC = ( - {wrapperClass} + {wrapperClass,MediaCLass} ) => { return(
- Social media + + www.loremipsum.com
) }; \ No newline at end of file diff --git a/desafio-5/src/components/scripts/footer.tsx b/desafio-5/src/components/scripts/footer.tsx index 500dc65..4f58002 100644 --- a/desafio-5/src/components/scripts/footer.tsx +++ b/desafio-5/src/components/scripts/footer.tsx @@ -14,7 +14,11 @@ const Footer = () =>{ FormClass={FooterStyles.footer_wrapper_Form__Newsletter} Errorclass={FooterStyles.hiden} /> - + = ( + {MediaCLass} +) => { + return( + + ) +}; \ No newline at end of file diff --git a/desafio-5/src/components/utils/Variables.scss b/desafio-5/src/components/utils/Variables.scss index f97646c..72910bf 100644 --- a/desafio-5/src/components/utils/Variables.scss +++ b/desafio-5/src/components/utils/Variables.scss @@ -1,6 +1,7 @@ // colors $-black : #000000; $-black-100E : #100D0E; +$-black-3030 :#303030; $-white:#ffffff; $-gray: #D6D6D6; $-gray-light:#e5e5e5;