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

feat: Adiciona os middle-banners em porcentagem desktop

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-10 20:07:03 -03:00
parent 07550a6618
commit 6ab1381c7c
2 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/styles.css/main.css
View File

@ -17,6 +17,10 @@ body {
padding: 29px 0; padding: 29px 0;
} }
.main-banner-row {
max-width: 100%;
}
.top-infocard { .top-infocard {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -93,16 +97,30 @@ body {
} }
.middle-banner { .middle-banner {
background-color: #E0E0E0; width: 100%;
width: 1920px;
max-height: 530px;
margin: auto; margin: auto;
background-color: #E0E0E0;
position: relative;
height: 27.6vw;
}
.middle-banner-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 62px 72px 0;
margin-bottom: 62px;
position: absolute;
bottom: -62px;
gap: 2.03125vw;
}
.middle-banner-item {
width: 100%;
/* max-width: 566px */
} }
.middle-banner-image { .middle-banner-image {
width: 100%; max-width: 100%;
max-width: 566px;
margin: 62px 18px 0;
} }
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
@ -143,19 +161,14 @@ body {
} }
.middle-banner { .middle-banner {
display: grid; padding: 32px 0 0;
grid-template-columns: repeat(2, max-content); width: 100%;
} }
.middle-banner-image { .middle-banner-item {
max-width: 177px; width: 38%;
height: 178px; margin: auto;
} padding-bottom: 23px;
.middle-banner-image-ex {
max-width: 368px;
height: 372px;
display: grid;
} }
} }

18
index.html
View File

@ -24,7 +24,7 @@
</header> </header>
<main> <main>
<section> <section class="main-banner-row">
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" alt="Banner principal desktop"> <img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" alt="Banner principal desktop">
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile"> <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile">
</section> </section>
@ -69,10 +69,20 @@
</section> </section>
<section class="middle-banner"> <section class="middle-banner">
<div class="middle banners"> <div class="middle-banner-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" /> <img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" />
<img class="middle-banner-image middle-banner" src="./assets/images/middle-banner-02.png" alt="Segundo banner do meio" /> </div>
<img class="middle-banner-image middle-banner-image-ex" src="./assets/images/middle-banner-03.png" alt="Terceiro banner do meio" />
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-02.png"
alt="Segundo banner do meio" />
</div>
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png"
alt="Terceiro banner do meio" />
</div>
</div> </div>
</section> </section>