ManuelaLuanaSchumackerTavares/desafio-react-e-typescript-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(footer-bottom): Torna footer bottom responsivo mobile

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2023-01-13 15:45:51 -03:00
parent b7521768d8
commit 9e6cab377c
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/footer-bottom.module.scss
View File

@ -5,6 +5,10 @@
height: 64px;
background: variables.$color-black;
@media screen and (max-width: 1024px) {
height: 134px;
}
.footer-wrapper {
width: 80.46875%;
padding: 20px 0;
@ -14,14 +18,28 @@
justify-content: space-between;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 15px 16px;
gap: 15px;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.footer-text {
width: 25%;
display: flex;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: variables.$color-white;
@media screen and (max-width: 1024px) {
order: 1;
}
}
.footer-creditcards {
@ -32,6 +50,10 @@
width: 45%;
@media screen and (max-width: 1024px) {
justify-content: flex-start;
}
.footer-line {
width: 24px;
border: 1px solid variables.$color-grey;
@ -46,6 +68,11 @@
justify-content: flex-end;
gap: 13px;
@media screen and (max-width: 1024px) {
justify-content: flex-start;
order: 2;
}
span {
font-weight: 400;
font-size: 10px;

4
src/globals.module.scss
View File

@ -31,3 +31,7 @@ ul {
li {
list-style-type: none;
}
img {
display: block;
}