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

feat(adiciona os ultimos 4 cards e o footer finalizando com isso a home desktop)

Browse Source
This commit is contained in:
wellington carlos 2022-10-12 00:52:24 -03:00
parent 1ecd3dc0f0
commit 03f6c89901
9 changed files with 146 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
imagens/Group (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
imagens/celular (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
imagens/dinheiro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
imagens/facebook-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

0
imagens/Rectangle 15 (2).png → imagens/imagem_desfocada.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

BIN
imagens/laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
imagens/youtube 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 B

68
index.html
View File

@ -79,7 +79,73 @@
</div>
<section class="card-compra">
<div class="cards">
<img src="imagens/dinheiro.png" alt="imagem de dinheiro">
<figcaption>
<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>
</figcaption>
</div>
<div class="cards">
<img src="imagens/moeda.png" alt="imagem de uma mão pegando moeda">
<figcaption>
<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>
</figcaption>
</div>
<div class="cards">
<img src="imagens/laptop.png" alt="imagem de um laptop">
<figcaption>
<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>
</figcaption>
</div>
<div class="cards">
<img src="imagens/celular (1).png" alt="imagem de celular">
<figcaption>
<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>
</figcaption>
</div>
</section>
<article>
<div class="artigo">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</article>
<figure style="text-align:center; margin-top: -160px;">
<img src="imagens/imagem_desfocada.png" alt="imagem borrada" srcset="" width="70%">
</figure>
<footer class="footer">
<nav class="redes-sociais">
<div class="centralizar">
<a href="/">
<img src="imagens/Group (2).png" alt="logo instragan">
</a>
<a href="/">
<img src="imagens/facebook-logo.png" alt="logo facebook">
</a>
<a href="/">
<img src="imagens/youtube 2.png" alt="logo youtube">
</a>
</div>
<div>
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</div>
</nav>
</footer>
</main>

80
style.css
View File

@ -80,10 +80,25 @@ h3{
height:287.68px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.card figcaption p{
.cards{
padding-top: 36px;
margin-top: 129px;
width: 23%;
height:287.68px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
@ -100,4 +115,67 @@ h3{
justify-content: space-around;
margin-top: 250px;
}
.artigo{
margin: 200px auto;
width: 36%;
height: 158px;
}
h4{
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}
article p{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.footer{
margin-top: 116px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 128px;
background: #000000;
}
.redes-sociais{
display: flex;
justify-content: center;
gap: 21px;
height: 52px;
flex-direction: column;
}
footer p{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
footer .redes-sociais .centralizar{
margin: 0 auto;
}
.centralizar a{
padding:21px;
}