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

feat(style): added 3 laptop img

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/index.html
View File

@ -43,7 +43,6 @@
</p>
</div>
<div class="block">
<img class="block-img" src="assets/shopping-bag (1) 1.png" alt="Icone de uma sacola de compras.">
<p class="block-text">
@ -60,43 +59,52 @@
</section>
</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>
<h1>Lorem ipsum dolor sit amet</h1>
<p>

19
src/styles/style.css
View File

@ -79,6 +79,7 @@ article {
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
padding-bottom: 80px;
background-color: white;
}
@ -102,6 +103,24 @@ article {
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%;
}