anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #2

Merged
anacarolinaduartecavalcante merged 81 commits from develop into main 2023-01-14 14:05:45 +00:00
Conversation 0 Commits 81 Files Changed 59 +143 -14
2 changed files with 143 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 365364fd16 - Show all commits

137
src/components/Footer/Footer.module.scss
View File

@ -20,6 +20,21 @@ footer {
justify-content: space-between;
align-items: center;
position: relative;
@media (min-width: 2500px) {
width: 92.002%;
height: 96px;
}
@media (max-width: 1025px) {
width: 96.875%;
height: 116px;
flex-direction: column;
align-items: flex-start;
margin: 15px auto;
row-gap: 15px;
}
@media (max-width: 376px) {
width: 91.484%;
}
& ul {
margin-top: 0;
margin-bottom: 0;
@ -37,6 +52,14 @@ footer {
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
max-width: 467px;
}
@media (max-width: 1025px) {
order: 2;
}
}
& .Metodos__de__Pagamento {
display: flex;
@ -45,16 +68,96 @@ footer {
max-width: 398.61px;
padding-left: 0;
column-gap: 12px;
@media (min-width: 2500px) {
max-width: 692px;
}
@media (max-width: 1025px) {
order: 1;
}
@media (max-width: 376px) {
column-gap: 11.33px;
}
& .Line {
width: 0px;
width: 1px;
height: 24px;
border: 1px solid $primary-600;
transform: rotate(359deg);
background: $primary-600;
flex: none;
flex-grow: 0;
@media (max-width: 1025px) {
width: 1px;
height: 20.36px;
}
}
& li {
width: auto;
& img {
width: 100%;
height: 100%;
}
}
& .MasterCard,
.Boleto {
width: 10.457%;
height: 20.2px;
@media (min-width: 2500px) {
width: 12.92%;
height: 39.27px;
}
@media (max-width: 1025px) {
width: 9.26%;
height: 16.97px;
}
}
& .Visa,
.Diners,
.HiperCard {
width: 10.55%;
height: 20.13px;
@media (min-width: 2500px) {
width: 12.92%;
height: 40.25px;
}
@media (max-width: 1025px) {
width: 8.79%;
height: 16.97px;
}
}
& .Elo {
width: 11.284%;
height: 20.26px;
@media (min-width: 2500px) {
width: 12.92%;
height: 38.33px;
}
@media (max-width: 1025px) {
width: 8.866%;
height: 16.97px;
}
}
& .Pagseguro {
width: 10.485%;
height: 19.07px;
@media (min-width: 2500px) {
width: 12.92%;
height: 39.27px;
}
@media (max-width: 1025px) {
width: 8.58%;
height: 16.97px;
}
}
& .VtexPci {
width: 17.173%;
height: 34px;
@media (min-width: 2500px) {
width: 15.347%;
height: 66px;
}
@media (max-width: 1025px) {
width: 12.735%;
height: 28px;
}
}
}
& .Autores {
@ -62,6 +165,10 @@ footer {
display: flex;
align-items: center;
column-gap: 13px;
@media (max-width: 1025px) {
order: 3;
column-gap: 12.73px;
}
& li {
column-gap: 13px;
display: flex;
@ -73,6 +180,28 @@ footer {
line-height: 12px;
text-transform: capitalize;
color: $white;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
}
@media (max-width: 1025px) {
column-gap: 12.97px;
}
& .Vtex {
width: 44.92px;
height: 16px;
@media (min-width: 2500px) {
width: 84.22px;
height: 30px;
}
}
& .M3 {
width: 28.66px;
height: auto;
@media (min-width: 2500px) {
width: 54.95px;
}
}
}
}
}

20
src/components/Footer/FooterBottom.tsx
View File

@ -18,19 +18,19 @@ const FooterBottom = () => {
tempor
</span>
<ul className={styles["Metodos__de__Pagamento"]}>
<li><img src={MasterCard} alt="ícone do cartão master card"/></li>
<li><img src={Visa} alt="ícone do cartão visa"/></li>
<li><img src={Diners} alt="ícone do cartão diners"/></li>
<li><img src={Elo} alt="ícone do cartão elo"/></li>
<li><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
<li><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
<li><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
<li className={styles["MasterCard"]}><img src={MasterCard} alt="ícone do cartão master card"/></li>
<li className={styles["Visa"]}><img src={Visa} alt="ícone do cartão visa"/></li>
<li className={styles["Diners"]}><img src={Diners} alt="ícone do cartão diners"/></li>
<li className={styles["Elo"]}><img src={Elo} alt="ícone do cartão elo"/></li>
<li className={styles["HiperCard"]}><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
<li className={styles["Pagseguro"]}><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
<li className={styles["Boleto"]}><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
<span className={styles["Line"]}></span>
<li><img src={VtexPci} alt="ícone do vtex pci"/></li>
<li className={styles["VtexPci"]}><img src={VtexPci} alt="ícone do vtex pci"/></li>
</ul>
<ul className={styles["Autores"]}>
<li>Powered by <img src={M3} alt="ícone do M3"/></li>
<li>Developed by <img src={Vtex} alt="ícone da Vtex"/></li>
<li>Developed by <img src={Vtex} className={styles["Vtex"]} alt="ícone da Vtex"/></li>
<li>Powered by <img src={M3} className={styles["M3"]} alt="ícone do M3"/></li>
</ul>
</>
);