feat: criado responsivo a partir de 2500px.

This commit is contained in:
Luiz Felipe Silva 2023-01-15 16:31:24 -03:00
parent dc4c0cfc71
commit a9e4bf340b
5 changed files with 130 additions and 21 deletions

View File

@ -6,6 +6,10 @@
align-items: center;
justify-content: space-between;
@media (min-width: 2500px) {
padding: 24.5px 100px;
}
@media (max-width: 1024px) {
display: grid;
padding: 20px 16px;
@ -22,6 +26,11 @@
font-weight: 400;
line-height: 12px;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
}
@media (max-width: 1024px) {
margin: 20px 0 15px 0;
}
@ -37,9 +46,16 @@
@media (max-width: 375px) {
margin-right: 11px;
img {
}
img {
@media (max-width: 375px) {
width: 30px;
}
@media (min-width: 2500px) {
width: 70px;
}
}
@media (max-width: 374px) {
@ -48,6 +64,10 @@
&:last-child {
img {
@media (min-width: 2500px) {
width: 106px;
}
@media (max-width: 375px) {
margin-left: 11px;
width: 45px;
@ -56,7 +76,7 @@
@media (max-width: 374px) {
margin-left: 4px;
}
margin-left: 12px;
}
}
@ -67,7 +87,7 @@
}
span {
border-left: 2px solid #c4c4c4;
border-left: 1px solid #c4c4c4;
height: 25px;
margin-bottom: 5px;
}
@ -82,17 +102,34 @@
font-weight: 400;
line-height: 12px;
margin-right: 12px;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
}
}
.footerBottom-credits-powered {
display: flex;
align-items: center;
margin-right: 13px;
img {
@media (min-width: 2500px) {
width: 84px;
}
}
}
.footerBottom-credits-developed {
display: flex;
align-items: center;
img {
@media (min-width: 2500px) {
width: 56px;
}
}
}
}
}

View File

@ -15,6 +15,11 @@
line-height: 16px;
text-transform: uppercase;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
text-transform: capitalize;
}
@ -30,6 +35,11 @@
line-height: 14px;
text-decoration: none;
color: #303030;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
&:last-child {
@ -38,24 +48,34 @@
}
.footerTop-fale-conosco {
p:nth-child(2),
p:nth-child(4) {
p {
font-size: 12px;
font-weight: 500;
line-height: 14px;
max-width: 20ch;
}
p:nth-child(3),
p:nth-child(5) {
font-weight: 400;
margin: 12px 0;
font-size: 12px;
font-weight: 400;
line-height: 14px;
&:last-child {
text-decoration: underline;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
&:nth-child(2),
&:nth-child(4) {
font-weight: 500;
line-height: 14px;
max-width: 20ch;
@media (min-width: 2500px) {
max-width: 100%;
}
}
&:nth-child(3),
&:nth-child(5) {
font-weight: 400;
margin: 12px 0;
&:last-child {
text-decoration: underline;
}
}
}
}
@ -70,9 +90,20 @@
}
}
}
img {
@media (min-width: 2500px) {
width: 70px;
}
}
p {
margin-top: 12px;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
}

View File

@ -25,6 +25,11 @@
text-transform: uppercase;
margin-bottom: 7px;
@media (min-width: 2500px) {
font-size: 36px;
line-height: 42px;
}
@media (max-width: 1024px) {
font-size: 14px;
line-height: 16px;
@ -33,14 +38,22 @@
.newsletter-form {
input {
height: 42px;
width: 340px;
height: 42px;
border-radius: 4px;
padding: 13px 16px 13px 16px;
outline: none;
border: 1px solid #e5e5e5;
margin-right: 8px;
@media (min-width: 2500px) {
width: 668px;
height: 59px;
font-size: 28px;
font-weight: 400;
line-height: 33px;
}
@media (max-width: 1024px) {
margin: 0 0 16px 0;
border-radius: 0;
@ -67,6 +80,13 @@
outline: none;
border: none;
@media (min-width: 2500px) {
width: 246px;
height: 59px;
font-size: 24px;
line-height: 28px;
}
@media (max-width: 1024px) {
width: 100%;
height: 50px;

View File

@ -1,10 +1,19 @@
.buttons {
.buttonsGlobal {
display: flex;
flex-direction: column;
position: fixed;
right: 16px;
bottom: 16px;
a {
img {
@media (min-width: 2500px) {
width: 66px;
height: 66px;
}
}
}
div {
display: flex;
justify-content: center;
@ -14,5 +23,17 @@
border-radius: 50%;
background-color: #c4c4c4;
cursor: pointer;
@media (min-width: 2500px) {
width: 66px;
height: 66px;
}
img {
@media (min-width: 2500px) {
width: 25px;
height: 60px;
}
}
}
}

View File

@ -14,7 +14,7 @@ const ButtonsGlobal = () => {
}
return (
<div className={styleButtons["buttons"]}>
<div className={styleButtons["buttonsGlobal"]}>
<a
href="https://api.whatsapp.com/send?phone=5511952353969"
target="_blank"