diff --git a/desafio-5/src/components/modules/footer.module.scss b/desafio-5/src/components/modules/footer.module.scss index fd7e6b0..95f33e0 100644 --- a/desafio-5/src/components/modules/footer.module.scss +++ b/desafio-5/src/components/modules/footer.module.scss @@ -83,78 +83,77 @@ padding: 15px 100px; p{ color: $-white; + width: 234px; font-family: 'Roboto',sans-serif; font-style: normal; font-weight: 400; font-size: 10px; line-height: 12px; text-transform: capitalize; - width: 234px; } - - &__Payments{ + &_wraaper{ + width: 70%; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; - width: 36.852%; - min-height: 100%; - fieldset{ - - width: 100%; - min-width: 83.42%; + &__Payments{ display: flex; - align-items: center; - min-height: 20px; gap: 12px; - padding-right: 12px; - border: none; - border-right: 1px solid $-gray-300; + width:52.646%; + fieldset{ + display: flex; + align-items: center; + gap: 4%; + border:0; + padding: 7px 14px 7px 0; + width: 81.774%; + height: 100%; - &[datatype=Payments]{ - border: none; - width: 100%; - padding-right: 0; - min-width: 16%; - min-height: 34px; + border-right:1px solid $-gray-300 ; + &[datatype=Payments]{ + border: none; + padding: 0 0 0 0; + width: 13.722%; + min-height: 34px; + img{ + width: 100%; + min-height: 34px; + } + } + img{ + width: 10.66%; + height: 100% + } + } + } + } + &_Authors{ + display: flex; + width: 20.926%; + justify-content: space-between; + align-items: center; + height: 100%; + a{ + &[datatype=LinkVtex]{ + width: 19.47%; + } + &[datatype=LinkM3]{ + width: 12.39%; } img{ width: 100%; height: 100%; + min-height: 16px; } } - } - - &_Authors{ - display: flex; - align-items: center; - gap: 12px; - width: 20.926%; - height: 2.965vh; p{ width: auto; white-space: nowrap; } - a{ - width: 100%; - height: 100%; - width: 100%; - &[datatype=LinkVtex]{ - width: 19.47%; - } - - &[datatype=LinkM3]{ - width: 12.39%; - } - - img{ - width: 100%; - height: 100%; - } - } + } } } -} -@media screen and (min-width: 280px) and (max-width: 1024px){ + @media screen and (min-width: 280px) and (max-width: 1024px){ .footer{ &_wrapper{ &_Form{ @@ -179,6 +178,13 @@ } } } + &_Top{ + width: 100%; + } + &_bottom{ + flex-direction: column; + padding: 16px 15px; + } } } @@ -214,5 +220,17 @@ } } } + &_Top{ + width: 100%; + } + &_bottom{ + background: $-black; + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 100px; + } } } \ No newline at end of file diff --git a/desafio-5/src/components/scripts/células/FooterBottom.tsx b/desafio-5/src/components/scripts/células/FooterBottom.tsx index 2c1bca6..4420074 100644 --- a/desafio-5/src/components/scripts/células/FooterBottom.tsx +++ b/desafio-5/src/components/scripts/células/FooterBottom.tsx @@ -17,17 +17,19 @@ interface TopFooteratrr extends TopFooterProps { } export const BottomFooter: React.FC = ( - {Dadclass,wraaperclass,Authorclass,Paymentsclass} + {Dadclass,wraaperclass,Paymentsclass,Authorclass} ) => { return(
-

- Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor -

- +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor +

+ +
) diff --git a/desafio-5/src/components/scripts/footer.tsx b/desafio-5/src/components/scripts/footer.tsx index 926c7a2..f5cdc16 100644 --- a/desafio-5/src/components/scripts/footer.tsx +++ b/desafio-5/src/components/scripts/footer.tsx @@ -16,9 +16,9 @@ const Footer = () =>{ /> )