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

corrige erros de responsividade

Browse Source
This commit is contained in:
Vinicius 2022-10-13 17:59:56 -03:00
parent 51f3dd03ae
commit ca8224f906
2 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/css/style.css
View File

@ -31,7 +31,6 @@ body {
display: grid;
column-gap: 65px;
margin-top: 73px;
width: 100%;
}
.top-infocard-text {
@ -73,7 +72,7 @@ body {
grid-template-columns: repeat(3, max-content);
gap: 21px;
margin-bottom: 80px;
width: 100%;
height: auto;
justify-content: center;
}
@ -88,7 +87,7 @@ body {
}
.top-card-image {
width: 35%;
width: 30%;
margin-bottom: 27px;
}
@ -105,23 +104,25 @@ body {
display: grid;
grid-template-columns: repeat(3, max-content);
justify-content: center;
width: 100%;
gap: 39px;
}
.middle-banner {
width: 60%;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
position: relative;
bottom: -64px;
margin-left: auto;
margin-right: auto;
height: auto;
}
.middle-banner-wrapper {
position: relative;
display: flex;
display: grid;
bottom: -130px;
justify-content: center;
align-items: center;
@ -168,12 +169,11 @@ body {
justify-content: center;
display: grid;
gap: 30px;
width: 100%;
}
.bottom-infocard-image-desktop {
margin-bottom: 116px;
width: 95%;
width: 70%;
height: auto;
position: relative;
margin-left: auto;
@ -266,16 +266,17 @@ body {
@media (max-width: 1024px) {
.banner-desktop,
.middle-banner,
.middle-banner-desktop,
.bottom-infocard-image-desktop {
display: none;
}
.top-infocard {
gap: 80px;
gap: 90px;
}
.top-infocard-text {
max-width: 250px;
width: 90%;
}
.top-infocard-subtitle {
@ -288,34 +289,53 @@ body {
}
.top-infocard-description {
max-width: 330px;
width: 90%;
}
.top-infocard-image {
max-width: 240px;
width: 100%;
margin-top: 66px;
width: 65%;
margin-top: 65px;
}
.top-cards {
grid-template-columns: 1fr;
}
.middle-banner-wrapper {
grid-template-columns: auto auto auto auto;
grid-gap: 14px;
}
.image-1 {
grid-area: 1 / 1 / span 1 / span 1;
}
.image-2 {
grid-area: 2 / 1 / span 1 / span 1;
}
.image-3 {
grid-area: 1/ 2 / span 1 / span 2;
display: block;
}
.bottom-cards {
grid-template-columns: 300px;
margin-right: 0;
grid-template-columns: 1fr;
margin-bottom: 98px;
}
.bottom-infocard {
gap: 80px;
}
.bottom-infocard {
gap: 104px;
gap: 50px;
margin-bottom: 87px;
}
.bottom-infocard-text {
max-width: 250px;
width: 90%;
order: 2;
}
.bottom-infocard-image-desktop {
order: 1;
}
.bottom-infocard-title {
@ -323,7 +343,7 @@ body {
}
.bottom-infocard-description {
max-width: 250px;
width: 90%;
}
.page-footer {
@ -331,7 +351,7 @@ body {
}
.footer-text {
max-width: 280px;
width: 70%;
text-align: center;
}
}

37
index.html
View File

@ -121,27 +121,24 @@
src="./assets/images/middle-banner-desktop-3.png"
alt="Banner do Meio Desktop 3"
/>
<div class="middle-banner-wrapper">
<div class="middle-banner-first-row">
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-1.png"
alt="Banner do Meio Mobile 1"
/>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-2.png"
alt="Banner do Meio Mobile 2"
/>
</div>
<div>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-3.png"
alt="Banner do Meio Mobile 3"
/>
</div>
<div class="middle-banner-wrapper">
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-1.png"
alt="Banner do Meio Mobile 1"
/>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-2.png"
alt="Banner do Meio Mobile 2"
/>
<img
class="middle-banner-mobile"
src="./assets/images/middle-banner-mobile-3.png"
alt="Banner do Meio Mobile 3"
/>
</div>
</section>