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>
<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>
</footer>

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

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