feat(home):adicao dos cards com imagem versao desktop
This commit is contained in:
parent
fca4ee2b31
commit
c5132fde26
BIN
assets/images/card-image1.png
Normal file
BIN
assets/images/card-image1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 234 KiB |
BIN
assets/images/card-image2.png
Normal file
BIN
assets/images/card-image2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 215 KiB |
BIN
assets/images/card-image3.png
Normal file
BIN
assets/images/card-image3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 318 KiB |
@ -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*/
|
||||
|
||||
|
14
index.html
14
index.html
@ -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>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user