RamonDiasFerreira/desafio-react-e-typescript-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ajustes responsivos footer #8

Merged
RamonDiasFerreira merged 1 commits from feature/footer into develop 2023-01-20 21:45:16 +00:00
Conversation 0 Commits 1 Files Changed 3 +55 -5
3 changed files with 55 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/fechar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 B

7
src/components/header/Menu.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import Modal from 'react-modal'
import styles from '../../styles/Menu.module.scss'
import Fechar from '../../assets/img/fechar.png'
interface MenuProps {
isOpen: boolean;
@ -16,7 +17,13 @@ function Menu ({isOpen, onRequestClose}: MenuProps) {
overlayClassName={styles['menu-hamb']}
className={styles['menu']}
>
<div className={styles['menu__title']}>
<p>Entrar</p>
<img src={Fechar} alt="x"/>
</div>
<p>Cursos</p>
<p>Saiba Mais</p>
<p>Institucionais</p>
</Modal>
)
}

53
src/styles/Footer.module.scss
View File

@ -19,6 +19,8 @@ footer {
width: 37.03%;
padding: 16px 0px;
label{
font-family: 'Roboto', sans-serif;
font-size: 18px;
@ -120,8 +122,7 @@ footer {
padding: 0px 100px;
.footer__text-bottom{
width: 18.28%;
height: 24px;
width: 20%;
font-style: normal;
font-size: 10px;
line-height: 12px;
@ -130,7 +131,7 @@ footer {
.footer__container-bandeiras{
display: flex;
width: 31.14%;
width: 40%;
justify-content: space-between;
.footer__line{
@ -147,8 +148,6 @@ footer {
align-items: center;
justify-content: space-between;
width: 17.70%;
height: 16px;
p {
font-weight: 400;
font-size: 10px;
@ -166,3 +165,47 @@ footer {
}
@media (max-width: 1024px) {
footer {
.footer__newsletter{
.footer__newsletter-form{
width: 100%;
padding: 16px 16px;
.footer__newsletter-input{
flex-direction: column;
input{
width: 96.5%;
}
}
}
}
.footer__top{
flex-direction: column;
padding: 24px 16px;
.footer__infos{
flex-direction: column;
}
.footer__info{
display: none;
}
}
.footer__bottom{
padding: 0px 16px;
align-items: flex-start;
flex-direction: column;
.footer__text-bottom{
width: 30%;
}
.footer__certificate {
width: 30%;
}
}
}
}