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

20
index.html
View File

@ -24,7 +24,7 @@
</header>
<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-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile">
</section>
@ -69,10 +69,20 @@
</section>
<section class="middle-banner">
<div class="middle banners">
<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" />
<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-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" />
</div>
<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>
</section>