PatrickReisSantos/desafio-react-e-typescript-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona footer responsivo

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-01-05 22:40:08 -03:00
parent 379bc5c496
commit 55538c7348
2 changed files with 127 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/footer/footer.jsx
View File

@ -15,29 +15,31 @@ import line from "./assets/Line.png";
export function Footer() {
return (
<div className={style.footer}>
<div className={style.footerContainer}>
<div className={style.footerSpanContainer}>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
</span>
</div>
<div className={style.footerCardIconsContainer}>
<img src={master} alt="" />
<img src={visa} alt="" />
<img src={diners} alt="" />
<img src={elo} alt="" />
<img src={hiper} alt="" />
<img src={pagseguro} alt="" />
<img src={boleto} alt="" />
<img src={line} alt="" />
<img src={vtexPci} alt="" />
</div>
<div className={style.PdDbContainer}>
<span>Powered By</span>
<img src={vtex} alt="" />
<span>Developed By</span>
<img src={m3} alt="" />
<div className={style.footerMainContainer}>
<div className={style.footerContainer}>
<div className={style.footerSpanContainer}>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
</span>
</div>
<div className={style.footerCardIconsContainer}>
<img src={master} alt="" />
<img src={visa} alt="" />
<img src={diners} alt="" />
<img src={elo} alt="" />
<img src={hiper} alt="" />
<img src={pagseguro} alt="" />
<img src={boleto} alt="" />
<img src={line} alt="" />
<img src={vtexPci} className={style.Pci} alt="" />
</div>
<div className={style.PdDbContainer}>
<span>Powered By</span>
<img src={vtex} alt="" />
<span>Developed By</span>
<img src={m3} alt="" />
</div>
</div>
</div>
</div>

136
src/components/footer/footer.module.scss
View File

@ -5,42 +5,110 @@
width: 100%;
height: 64px;
background: #000000;
}
.footerContainer {
display: flex;
align-items: center;
justify-content: space-between;
width: 1077px;
height: 24px;
}
@media (max-width: 375px) {
height: 128px;
}
.footerSpanContainer {
display: flex;
width: 234px;
height: 24px;
align-items: center;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
color: #ffffff;
}
@media (min-width: 376px) and (max-width: 1150px) {
height: 134px;
}
.footerCardIconsContainer {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
}
@media (min-width: 2500px) {
height: 96px;
}
.footerMainContainer {
width: 100%;
max-width: 100%;
.PdDbContainer {
display: flex;
gap: 13px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
color: #ffffff;
align-items: center;
.footerContainer {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 100px 0 100px;
@media (min-width: 280px) and (max-width: 1150px) {
flex-direction: column;
margin: 0;
align-items: flex-start;
margin-left: 16px;
margin-right: 16px;
gap: 12px;
}
.footerSpanContainer {
display: flex;
width: 234px;
height: 24px;
align-items: center;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
color: #ffffff;
@media (min-width: 280px) and (max-width: 1150px) {
order: 1;
}
@media (min-width: 2500px) {
font-size: 20px;
width: 467px;
height: 47px;
}
}
.footerCardIconsContainer {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
.Pci {
@media (min-width: 280px) and (max-width: 1150px) {
height: 28px;
}
@media (min-width: 2500px) {
height: 66px;
}
}
& img {
@media (min-width: 280px) and (max-width: 1150px) {
height: 17px;
}
@media (min-width: 2500px) {
height: 40px;
}
}
}
.PdDbContainer {
display: flex;
gap: 13px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
color: #ffffff;
align-items: center;
@media (min-width: 280px) and (max-width: 1150px) {
order: 2;
}
& span {
@media (min-width: 2500px) {
font-size: 20px;
}
}
& img {
@media (min-width: 2500px) {
height: 30px;
}
}
}
}
}
}