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

feat: responsividade dos cards e dos banners para mobile

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-10-12 19:00:09 -03:00
parent 0a42d9227f
commit 445d1fb1ca
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/index.html
View File

@ -244,7 +244,7 @@
</div> </div>
<p class="footer-description"> <p class="footer-description">
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-01 Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
</p> </p>
</footer> </footer>

42
html/main.styles/style.css
View File

@ -49,6 +49,7 @@
.top-infocard-text { .top-infocard-text {
max-width: 766px; max-width: 766px;
margin-bottom: 73px;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -71,14 +72,14 @@
.top-infocard-description { .top-infocard-description {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin-bottom: 74px;
text-align: left; text-align: left;
} }
/*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/ /*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
.infocard-img-section { .infocard-img-section {
background: #e0e0e0;
padding-top: 62px; padding-top: 62px;
background: #e0e0e0;
} }
.infocards-center { .infocards-center {
@ -92,7 +93,6 @@
} }
.middle-banner { .middle-banner {
margin-bottom: -62px;
width: 100%; width: 100%;
} }
@ -135,7 +135,8 @@
/*/////////// Bottom Area com imagens e background//////////////*/ /*/////////// Bottom Area com imagens e background//////////////*/
.bottom-cards { .bottom-cards {
margin-top: 191px; margin-top: -62px;
padding-top: 191px;
background: #ffffff; background: #ffffff;
} }
@ -209,8 +210,6 @@
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
margin-bottom: 50px;
} }
/*///////////////// FOOTER /////////////////*/ /*///////////////// FOOTER /////////////////*/
@ -240,11 +239,7 @@
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.top-infocard { .top-infocard {
flex-direction: column; flex-direction: column;
padding: 84px 26px 158px; padding: 84px 26px 90px;
}
.top-infocard-text {
margin: 0 0 68px;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -270,8 +265,12 @@
/*///////////////// ABAIXO DE 768PX /////////////////*/ /*///////////////// ABAIXO DE 768PX /////////////////*/
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.container {
padding: 0 23px;
}
.main-banner, .main-banner,
.middle-banner { .bottom-infocard-img {
display: none; display: none;
} }
@ -282,17 +281,26 @@
.top-cards { .top-cards {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 36px 26px; padding: 0 32px 80px;
}
.top-infocard-text {
margin: 0 0 65px;
}
.infocard-img-section {
padding-top: 32px;
}
.infocard-center {
flex-direction: column;
} }
.bottom-cards { .bottom-cards {
padding: 0 16px; padding: 112px 0 98px;
margin-top: 114px;
} }
.bottom-card-wrapper { .bottom-card-wrapper {
grid-template-columns: 1fr; flex-direction: column;
gap: 16px;
} }
.bottom-card-description { .bottom-card-description {