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

feat(main): Adiciona CSS das 3 imagens do mini banner central mobile

Browse Source
This commit is contained in:
Sabrina Miranda 2022-10-12 23:23:41 -03:00
parent b8d49bb196
commit 80ea0ccb4b
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/styles/style.css
View File

@ -194,6 +194,33 @@ a {
.top-card{
width: 84%;
}
.mini-banner-wrapper {
display: grid;
grid-template-columns: auto auto;
justify-items: center;
row-gap: 23px;
column-gap: 14px;
bottom: -32px;
padding-left: 5%;
padding-right: 5%;
}
.mini-banner {
width: 100%;
}
.img-1 {
grid-area: 1 / 2 / 2 / 3;
}
.img-2 {
grid-area: 1 / 1 / 2 / 2;
}
.img-3 {
grid-area: 2 / 1 / 3 / 3;
}
}
/* TELAS GRANDES */

6
index.html
View File

@ -74,15 +74,15 @@
<div class="mini-banner-container">
<div class="mini-banner-wrapper">
<figure class="mini-banner">
<figure class="mini-banner img-1">
<img class="mini-banner-image" src="./assets/images/mini-banner-01.png" alt="Primeira Imagem Mini Banner"/>
</figure>
<figure class="mini-banner">
<figure class="mini-banner img-2">
<img class="mini-banner-image" src="./assets/images/mini-banner-02.png" alt="Segunda Imagem Mini Banner"/>
</figure>
<figure class="mini-banner">
<figure class="mini-banner img-3">
<img class="mini-banner-image" src="./assets/images/mini-banner-03.png" alt="Terceira Imagem Mini Banner"/>
</figure>
</div>