feat(home):adicao dos cards com imagem versao desktop

This commit is contained in:
Edna Barboza de Lima 2022-10-11 22:22:23 -03:00
parent fca4ee2b31
commit c5132fde26
5 changed files with 44 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

View File

@ -102,6 +102,34 @@ body{
text-align: center;
}
.cards-image{
display: grid;
grid-template-columns: repeat(3, max-content);
justify-content: center;
background: #E0E0E0;
gap: 39px;
}
.card-image{
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 34px;
background: #FFFFFF;
padding: 0px;
margin-top: 62px;
}
.card-img{
display: block;
margin-bottom: 26px;
}
/*MEDIAS*/

View File

@ -66,6 +66,20 @@
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</section>
<section class="cards-image">
<figure class="card-image">
<img class="card-img" src="./assets/images/card-image1.png" alt="Imagem de um computador fechando visto de frente"/>
</figure>
<figure class="card-image">
<img class="card-img" src="./assets/images/card-image2.png" alt="Imagem de um computador ligado visto de frente com a tela fechada na metade"/>
</figure>
<figure class="card-image">
<img class="card-img" src="./assets/images/card-image3.png" alt="Imagem de um computador ligado visto de lado"/>
</figure>
</section>
</main>