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

feat: fazendo parte dos minibanners desktop e mob

Browse Source
This commit is contained in:
Caroline Moran 2022-10-06 14:27:26 -04:00
parent b5ff105092
commit 4ec0ed4063
2 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/landingPage.html
View File

@ -76,22 +76,23 @@
</figure> </figure>
</div> </div>
<div class="mini-banners-container"> <div class="mini-banners-container">
<div class="mini-banners-wrapper">
<div class="mini-banners"> <div class="mini-banners">
<figure class="mini-banner"> <figure class="mini-banner mini-banner1">
<img <img
src="./assets/Card-1.png" src="./assets/Card-1.png"
alt="Computador" alt="Computador"
class="mini-banner-image" class="mini-banner-image"
/> />
</figure> </figure>
<figure class="mini-banner"> <figure class="mini-banner mini-banner2">
<img <img
src="./assets/Card-2.png" src="./assets/Card-2.png"
alt="Computador" alt="Computador"
class="mini-banner-image" class="mini-banner-image"
/> />
</figure> </figure>
<figure class="mini-banner"> <figure class="mini-banner mini-banner3">
<img <img
src="./assets/Card-3.png" src="./assets/Card-3.png"
alt="Computador" alt="Computador"
@ -99,6 +100,7 @@
/> />
</figure> </figure>
</div> </div>
</div>
<div class="fundo-branco"></div> <div class="fundo-branco"></div>
</div> </div>
</main> </main>

41
src/style/landingPage.css
View File

@ -101,13 +101,26 @@
} }
.fundo-branco { .fundo-branco {
width: 100%; width: 100%;
height: 150px; height: 62px;
}
.mini-banners-wrapper {
padding: 0 72px;
width: 100%;
background: #e0e0e0;
} }
.mini-banners { .mini-banners {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 39px; gap: 39px;
position: relative;
top: 62px;
}
.mini-banner {
width: 33%;
}
.mini-banner-image {
width: 100%;
} }
@media (min-width: 2500px) { @media (min-width: 2500px) {
.texto-container h1 { .texto-container h1 {
@ -171,4 +184,30 @@
.card { .card {
width: 100%; width: 100%;
} }
.mini-banners-wrapper {
padding: 0 23px;
}
.mini-banner1 {
width: 100%;
grid-area: mini-banner1;
}
.mini-banner2 {
width: 100%;
grid-area: mini-banner2;
}
.mini-banner3 {
width: 100%;
grid-area: mini-banner3;
}
.mini-banners {
display: grid;
grid-template-areas:
"mini-banner1 mini-banner2"
"mini-banner3 mini-banner3";
gap: 24px 14px;
top: 32px;
}
.fundo-branco {
height: 32px;
}
} }