YahToth/desafio-react-e-typescript-gabriel-gomes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilização do footer top desktop e 4k

Browse Source
This commit is contained in:
Gabriel Gomes Fernandes 2023-01-20 18:11:53 -03:00
parent daca532c2e
commit 6789e7c39c
1 changed files with 167 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
desafio-react-e-typescript/src/components/Footer/Footer.module.scss
View File

@ -0,0 +1,167 @@
.footer-container-top {
width: 100%;
height: 240px;
border-top: 1px solid black;
display: flex;
justify-content: center;
padding: 50px 16px 50px 16px;
@media screen and (min-width: 2500px) {
height: 297px;
}
@media screen and (max-width: 1024px) {
display: none;
}
.footer-container-institucional,
.footer-container-duvidas,
.footer-container-fale-conosco {
width: 100%;
max-width: 155px;
height: 125px;
margin-right: 122px;
a {
text-decoration: none;
}
@media screen and (min-width: 2500px) {
max-width: 315px;
height: 197px;
margin-right: 293px;
}
h4 {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: #303030;
margin: 12px 0px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
.footer-fale-conosco-atendimento,
.footer-fale-conosco-atendimento-on {
font-weight: 500;
}
}
h3 {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #303030;
margin: 0px 0px 12px 0px;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
.footer-institucional-revendedor,
.footer-duvidas-duvidasfreq,
.footer-fale-conosco-num1,
.footer-fale-conosco-num2 {
text-decoration: underline;
}
.footer-socials-container {
width: 100%;
max-width: 215px;
height: 63px;
margin-right: 50px;
@media screen and (min-width: 2500px) {
max-width: 390px;
height: 116px;
}
button {
width: 35px;
height: 35px;
background-color: transparent;
border: none;
padding: unset;
margin-right: 10px;
cursor: pointer;
@media screen and (min-width: 2500px) {
width: 70px;
height: 70px;
}
img {
@media screen and (min-width: 2500px) {
width: 70px;
height: 70px;
}
}
@media screen and (max-width: 1024px) {
border: none;
}
}
button:last-of-type {
margin: unset;
}
a {
text-decoration: none;
h4 {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #303030;
text-transform: lowercase;
margin-bottom: 0;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
}
.whatsapp-container {
display: flex;
flex-direction: column;
position: fixed;
height: 73px;
padding-top: 40px;
top: 85%;
right: 1%;
@media screen and (min-width: 2500px) {
height: 137px;
}
button {
background: transparent;
border: none;
}
img {
width: 100%;
max-width: 34px;
height: 34px;
@media screen and (min-width: 2500px) {
max-width: 66px;
height: 66px;
}
}
}
}