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

feat: adiciona responsividade ao middle banner

Browse Source
This commit is contained in:
Gabriel Bernardini 2022-10-13 18:43:15 -03:00
parent dd2608b612
commit df7a92ff15
1 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/style/main.css
View File

@ -94,6 +94,28 @@ body {
padding: 26px; padding: 26px;
} }
.banner-middle {
background: #E0E0E0;
margin-top: 80px;
}
.banner-middle-align {
display: flex;
gap: 40px
}
.banner-middle-images {
display: flex;
justify-content: center;
padding: 0 72px;
position: relative;
top: 62px;
gap: 40px;
}
.banner-middle-image {
max-width: 566px;
width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1270px) { @media screen and (min-width: 769px) and (max-width: 1270px) {
.second-infocard { .second-infocard {
@ -126,6 +148,38 @@ body {
grid-template-columns: 350px; grid-template-columns: 350px;
} }
.banner-middle-image {
display: flex;
flex-direction: column;
margin: 0 auto;
position: relative;
top: 32px;
}
.banner-middle-images {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
row-gap: 24px;
}
.image2, .image1 {
max-width: 177px;
}
.image3 {
max-width: 368px;
}
.banner-middle-align {
display: flex;
flex-direction: row-reverse;
column-gap: 14px;
}
} }
@media screen and (max-width: 415px) { @media screen and (max-width: 415px) {