Izabela_Balizardo/challenge-landing-page-izabela-balizardo
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Adiciona mobile 414px

Browse Source
This commit is contained in:
Izabela Balizardo 2022-10-13 21:40:22 -03:00
parent 237ccd3e85
commit f96c759091
1 changed files with 97 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
assets/styles/main.css
View File

@ -136,7 +136,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
box-shadow: 0px 4px 20px rgb(0 0 0 / 23%); box-shadow: 0px 4px 20px rgb(0 0 0 / 23%);
} }
@ -167,10 +167,8 @@ body {
} }
.bottom-card-texto { .bottom-card-texto {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
.bottom-infocard-titulo { .bottom-infocard-titulo {
@ -188,7 +186,6 @@ body {
text-align: center; text-align: center;
color: #000000; color: #000000;
padding: 0 30px; padding: 0 30px;
} }
.page-footer { .page-footer {
@ -217,6 +214,99 @@ body {
color: #bdbdbd; color: #bdbdbd;
} }
@media screen and (max-width: 412px) {
.top-infocard-subtitulo {
font-size: 20px;
}
.top-infocard-titulo {
font-size: 28px;
}
.top-infocard-paragrafo {
font-size: 16px;
line-height: 24px;
text-align: center;
padding: 0 30px;
}
.middle-banners {
height: 484px;
}
}
@media screen and (max-width: 414px) {
.main-banner-desktop,
.bottom-infocard-img {
display: none;
}
.bottom-infocard-flex {
flex-direction: column;
}
.bottom-infocard-img-mobile {
margin-bottom: 50px;
}
}
@media screen and (min-width: 415px) {
.main-banner-mobile,
.bottom-infocard-img-mobile {
display: none;
}
}
@media screen and (max-width: 415px) {
.bottom-infocard{
flex-direction: column;
padding: 80px 0 136px;
}
.bottom-infocard-img{
margin:0 0 50px;
width: 100%;
max-width: 596px;
display: none;
}
.bottom-infocard-texto{
padding: 0 26px;
}
.bottom-infocard-titulo{
font-size: 24px;
}
}
@media screen and (max-width:768px) {
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
}
.bottom-cards {
flex-direction: column;
grid-template-columns: 1fr;
padding: 80px 23px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
flex-direction: column;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
/* Ate 1023 banner desktop nao aparece */ /* Ate 1023 banner desktop nao aparece */
.main-banner-desktop, .main-banner-desktop,