forked from M3-Academy/challenge-landing-page
hotfix: Altera responsividade
This commit is contained in:
parent
7d91dc25e4
commit
ac6ec42ddc
@ -232,15 +232,136 @@ body {
|
||||
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.top-banner-image-desktop,
|
||||
.bottom-banner-desktop {
|
||||
.top-banner-image-desktop,
|
||||
.bottom-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.infocard-subtitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.infocard-description {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
.infocard {
|
||||
margin: 73px 27px 0;
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
display: block;
|
||||
margin: 90px 32px 80px 32px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 350px;
|
||||
margin-top: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pc-icon-image {
|
||||
max-width: 239px;
|
||||
}
|
||||
|
||||
.cards-wrapper2 {
|
||||
display: block;
|
||||
margin: 80px 0 98px 0;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
width: 350px;
|
||||
margin: 7% 0 0 6%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 0 auto;
|
||||
margin: 0 32px 0 32px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
margin-top: 87px;
|
||||
}
|
||||
|
||||
.article {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
max-width: 261px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* imagens pequenas e invertidas grid */
|
||||
.img-small1 {
|
||||
grid-area: foto1;
|
||||
}
|
||||
.img-small2 {
|
||||
grid-area: foto2;
|
||||
}
|
||||
.img-big3 {
|
||||
grid-area: foto3;
|
||||
width: 368px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto ;
|
||||
grid-template-rows: auto;
|
||||
direction: rtl;
|
||||
grid-template-areas:
|
||||
"foto2 foto1"
|
||||
"foto3 foto3"
|
||||
;}
|
||||
|
||||
.img-small1 {
|
||||
grid-area: foto1;
|
||||
}
|
||||
.img-small2 {
|
||||
grid-area: foto2;
|
||||
}
|
||||
.img-big3 {
|
||||
grid-area: foto3;
|
||||
width: 368px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
background-color: #E0E0E0;
|
||||
height: 574px;
|
||||
margin-bottom: 112px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tablet e Mobile - 415px to 1024px */
|
||||
@media only screen and (min-device-width: 415px) and (max-device-width: 1024px){
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-reverse {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
.infocard-subtitle {
|
||||
font-size: 20px;
|
||||
@ -262,7 +383,7 @@ body {
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
display: block;
|
||||
display: grid;
|
||||
margin: 90px 32px 80px 32px;
|
||||
}
|
||||
|
||||
@ -276,19 +397,24 @@ body {
|
||||
max-width: 239px;
|
||||
}
|
||||
|
||||
|
||||
.cards-wrapper2 {
|
||||
display: block;
|
||||
margin: 80px 23px 98px 23px;
|
||||
display: grid;
|
||||
margin: 80px 0 98px 0;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
width: 350px;
|
||||
margin-top: 16px;
|
||||
margin: 7% 0 0 6%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 0 auto;
|
||||
margin: 0 32px 0 32px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
@ -297,27 +423,116 @@ body {
|
||||
|
||||
.article {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
max-width: 261px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
max-width: 261px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* imagens pequenas e invertidas grid */
|
||||
.img-small1 {
|
||||
grid-area: foto1;
|
||||
}
|
||||
.img-small2 {
|
||||
grid-area: foto2;
|
||||
}
|
||||
.img-big3 {
|
||||
grid-area: foto3;
|
||||
width: 368px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto ;
|
||||
grid-template-rows: auto;
|
||||
direction: rtl;
|
||||
grid-template-areas:
|
||||
"foto2 foto1"
|
||||
"foto3 foto3"
|
||||
;}
|
||||
|
||||
.img-small1 {
|
||||
grid-area: foto1;
|
||||
}
|
||||
.img-small2 {
|
||||
grid-area: foto2;
|
||||
}
|
||||
.img-big3 {
|
||||
grid-area: foto3;
|
||||
width: 368px;
|
||||
}
|
||||
|
||||
.flex-img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
/* background-color: #E0E0E0; */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.flex > div {
|
||||
flex: 1 1 566px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
max-width: 550px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Desktop - 1025px to 2500px */
|
||||
@media only screen and (min-device-width: 1025px) and (max-device-width: 2500px) {
|
||||
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cards-wrapper2 {
|
||||
margin: 179px 72px 74px 72px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Desktop 4k - 2501px above */
|
||||
@media only screen and (min-device-width: 2501px) {
|
||||
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.infocard-description {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.cards-wrapper2 {
|
||||
margin: 179px 370px 74px 370px;
|
||||
}
|
||||
|
||||
.fig-wrapper {
|
||||
padding-top: 62px;
|
||||
}
|
||||
|
||||
.article-description {
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -106,15 +106,15 @@
|
||||
|
||||
|
||||
|
||||
<section class="flex">
|
||||
<section class="flex grid2">
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image1.png" alt="">
|
||||
<img class="flex-img img-small1" src="./_assets/images/image1.png" alt="Imagem 1">
|
||||
</div>
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image2.png" alt="">
|
||||
<img class="flex-img img-small2" src="./_assets/images/image2.png" alt="Imagem 2">
|
||||
</div>
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image3.png" alt="">
|
||||
<img class="flex-img img-big3" src="./_assets/images/image3.png" alt="Imagem 3">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user