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

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

View File

@ -194,6 +194,33 @@ a {
.top-card{ .top-card{
width: 84%; 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 */ /* TELAS GRANDES */

View File

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