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

Yan_Garriga #1

Merged
Yan_Garriga merged 20 commits from Yan_Garriga into main 2022-10-13 19:29:38 +00:00
Conversation 0 Commits 20 Files Changed 10 +45 -22
2 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6ab1381c7c - Show all commits

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>