feat(style): added 3 laptop img

This commit is contained in:
Matheus Brollo Dauter 2022-10-12 15:07:02 -03:00
parent fe0728fee9
commit 71f45d7666
2 changed files with 63 additions and 36 deletions

View File

@ -43,7 +43,6 @@
</p> </p>
</div> </div>
<div class="block"> <div class="block">
<img class="block-img" src="assets/shopping-bag (1) 1.png" alt="Icone de uma sacola de compras."> <img class="block-img" src="assets/shopping-bag (1) 1.png" alt="Icone de uma sacola de compras.">
<p class="block-text"> <p class="block-text">
@ -60,43 +59,52 @@
</section> </section>
</article> </article>
<section class="blocks2">
<div class="blocks-wrapper">
<div class="img-square">
<img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop">
</div>
<div class="img-square">
<img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
</div>
<div class="img-square">
<img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
</div>
</div>
</section>
<section class="blocks">
<div class="block">
<img class="block-img" src="assets/money (1) 2.png" alt="Icone de dinheiro.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="block">
<img class="block-img" src="assets/coin 1.png" alt="Icone de dinheiro.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="block">
<img class="block-img" src="assets/laptop 1.png" alt="Icone de um laptop.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="block">
<img class="block-img" src="assets/Group.png" alt="Icone de um celular.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<!-- <!--
<div class="img-square">
<img src="assets/img/Rectangle 13.png" alt="Imagem de um laptop">
</div>
<div class="img-square">
<img src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
</div>
<div class="img-square">
<img src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
</div>
<section class="block">
<img src="assets/money (1) 2.png" alt="Icone de dinheiro.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section class="block">
<img src="assets/coin 1.png" alt="Icone de dinheiro.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section class="block">
<img src="assets/laptop 1.png" alt="Icone de um laptop.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section class="block">
<img src="assets/Group.png" alt="Icone de um celular.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<article> <article>
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
<p> <p>

View File

@ -79,6 +79,7 @@ article {
grid-template-columns: repeat(3, max-content); grid-template-columns: repeat(3, max-content);
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
padding-bottom: 80px;
background-color: white; background-color: white;
} }
@ -102,6 +103,24 @@ article {
line-height: 24px; line-height: 24px;
} }
.blocks2 {
margin-bottom: 190px;
background: #E0E0E0;
}
.blocks-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
justify-content: center;
padding: 0px 72px 0px 72px;
position: relative;
top: 62px;
}
.block-img2 {
width: 100%;
}