FilipeQuintanilha/desafio-react-e-typescript-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(newsletter): Adiciona a newsletter nas telas mobile e ajusta nas telas desktop

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-29 17:22:21 -03:00
parent 9569a7913d
commit fbb6292e9d
1 changed files with 57 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/styles/partials/MainContent.module.scss
View File

@ -4,17 +4,21 @@
flex-direction: column;
align-items: center;
padding: 16px 0;
width: 37%;
margin: auto;
&-title {
font-weight: 500;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.05em;
align-self: flex-start;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin: 0 0 8px 0;
text-transform: uppercase;
}
form {
width: 37.4%;
width: 100%;
.campo-busca {
display: flex;
@ -50,6 +54,7 @@
width: 26.6%;
height: 42px;
border: none;
text-transform: uppercase;
img {
display: none;
@ -60,20 +65,61 @@
}
}
@media screen and (min-width: 2500px) {
@media screen and (max-width: 1024px) {
.main-wrapper {
&__newsletter {
padding: 16px;
width: auto;
&-title {
font-size: 36px;
line-height: 42px;
font-size: 14px;
line-height: 16px;
display: flex;
align-self: flex-start;
margin-bottom: 16px;
}
form {
width: 37.4%;
width: 100%;
.campo-busca {
flex-direction: column;
gap: 16px;
&__input {
width: calc(99.8% - 32px);
margin: 0;
height: 22px;
}
&__img {
height: 50px;
font-size: 14px;
line-height: 16px;
width: 100%;
}
}
}
}
}
}
@media screen and (min-width: 2500px) {
.main-wrapper {
&__newsletter {
width: 39.7%;
&-title {
font-size: 36px;
line-height: 42px;
letter-spacing: 0.05em;
font-variant: small-caps;
font-weight: 500;
}
form {
width: 100%;
.campo-busca {
&__input {
width: 67.9%;
width: 68.6%;
font-size: 28px;
line-height: 33px;
height: 31px;
@ -83,7 +129,7 @@
height: 59px;
font-size: 24px;
line-height: 28px;
width: 26.4%;
width: 26.6%;
}
}
}