forked from M3-Academy/desafio-react-e-typescript
feat(home): ajustando footers mobile
home
This commit is contained in:
parent
414d79fbf8
commit
d659c072d3
@ -2,7 +2,6 @@
|
||||
|
||||
.footer__bottom {
|
||||
width: calc(100% - 200px);
|
||||
height: 34px;
|
||||
padding: 15px 100px;
|
||||
|
||||
display: flex;
|
||||
@ -11,15 +10,35 @@
|
||||
|
||||
background-color: $color-black;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: calc(100% - 32px);
|
||||
height: 116px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 15px 16px;
|
||||
}
|
||||
|
||||
&__paragrafo {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: capitalize;
|
||||
|
||||
color: $color-white;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
order: 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,6 +47,10 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&__cards{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
@ -37,9 +60,39 @@
|
||||
&__card {
|
||||
margin-right: 12px;
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet} {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
width: 30px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media (max-width: 300px) {
|
||||
margin-right: 2.5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 70px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet} {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 310px) {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__divider {
|
||||
@ -47,6 +100,34 @@
|
||||
height: 24px;
|
||||
background: $color-primary-400;
|
||||
margin-right: 12px;
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
&__security {
|
||||
list-style: none;
|
||||
img {
|
||||
width: 106px;
|
||||
height: 66px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: 54px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
width: 40px;
|
||||
}
|
||||
@media (max-width: 300px) {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,6 +136,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&__logo{
|
||||
margin-right: 13px;
|
||||
text-decoration: none;
|
||||
@ -64,17 +149,26 @@
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: capitalize;
|
||||
color: $color-white;
|
||||
margin-right: 13px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 16px;
|
||||
height: 30px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,11 @@
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
padding: 16px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
&__formik {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -24,15 +29,29 @@
|
||||
gap: 8px;
|
||||
width: 37%;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: $color-black-500;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-btn {
|
||||
@ -41,11 +60,15 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 71.72%;
|
||||
height: 16px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@ -54,22 +77,41 @@
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
color: $color-primary-400;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid $color-primary-600;
|
||||
border-radius: 4px;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: calc(100% - 32px);
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 17px 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-primary-400;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,18 +127,25 @@
|
||||
text-align: right;
|
||||
|
||||
color: #FF0000;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
left: initial;
|
||||
right: 0;
|
||||
bottom: initial;
|
||||
top: -18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 28%;
|
||||
height: 42px;
|
||||
height: 59px;
|
||||
// padding: 14px 20px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.05em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -107,6 +156,21 @@
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,11 +7,20 @@
|
||||
justify-content: space-between;
|
||||
padding: 50px 100px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: calc(100% - 32px);
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__block {
|
||||
@ -21,17 +30,27 @@
|
||||
align-items: center;
|
||||
margin-right: 121px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black-500;
|
||||
text-align: start;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__item-list {
|
||||
@ -42,6 +61,10 @@
|
||||
padding: 0px;
|
||||
gap: 12px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
&__item:last-child {
|
||||
text-decoration: underline;
|
||||
@ -52,11 +75,15 @@
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
color: $color-black-500;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -68,6 +95,10 @@
|
||||
align-items: flex-start;
|
||||
margin-left: 37px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&__social-medias {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -76,18 +107,42 @@
|
||||
list-style: none;
|
||||
|
||||
&__logo {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
a img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__site {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
color: $color-black-500;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ const FooterTop = () => {
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Entrega
|
||||
Trocas e Devoluções
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
@ -65,27 +65,27 @@ const FooterTop = () => {
|
||||
</div>
|
||||
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
|
||||
<h4 className={styles['footer__top__block__title']}> Fale Conosco </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Atendimento Ao <br/> Consumidor
|
||||
<strong>Atendimento Ao <br/> Consumidor</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Política de Privacidade
|
||||
(11) 4159 9504
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Segurança
|
||||
<strong>Atendimento Online</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Seja um Revendedor
|
||||
(11) 99433-8825
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -10,7 +10,7 @@ interface MenuMobileProps {
|
||||
const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => {
|
||||
return (
|
||||
<section className={`container-menu ${menuIsVisible && 'opened'} `} onClick={() => setMenuIsVisible(false)}>
|
||||
<div className={"container-menu__wrapper"} onClick={() => setMenuIsVisible(true)}>
|
||||
<div className={"container-menu__wrapper"} >
|
||||
<div className={"container-menu__top"}>
|
||||
<a href='/' className={'container-menu__top__log'}>
|
||||
ENTRAR
|
||||
|
||||
Loading…
Reference in New Issue
Block a user