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(mobile) adiciona ultima imagem e ajusta o texto, com isso finaliza resposponsivo mobile

Browse Source
This commit is contained in:
wellington carlos 2022-10-12 23:37:11 -03:00
parent f532310c25
commit d9f73fe6b5
4 changed files with 67 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
imagens/0001-00.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
imagens/imagem_oculos_mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

26
index.html
View File

@ -113,20 +113,33 @@
<article>
<div class="artigo">
<h4>Lorem ipsum dolor sit amet</h4>
<h4 style="font-size:22px;">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>
</article>
<figure style="text-align:center; margin-top: -160px;">
<img src="imagens/imagem_desfocada.png" alt="imagem borrada" srcset="" width="70%">
<figure style="text-align:center; margin-top: -160px;">
<img class="imagem_desfocada" src="imagens/imagem_desfocada.png" alt="imagem borrada" srcset="" width="70%">
<img class="imagem_oculos" src="imagens/imagem_oculos_mobile.png" alt="imagem ocules" srcset="">
</figure>
<div class="invertido">
<h4 style="font-size:22px;">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>
<footer class="footer">
<nav class="redes-sociais">
<div class="centralizar">
@ -142,8 +155,9 @@
</div>
<div>
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
<p style="display:none">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
<img src="imagens/0001-00.png" alt="copyright" width="90%">
</div>
</nav>

48
style.css
View File

@ -204,7 +204,9 @@ h3{
flex-direction: column;
margin: 73px auto;
height: auto;
width: 70%;
max-width: 357px;
width: 90%;
}
h3{
font-size: 140%;
@ -314,7 +316,51 @@ h3{
margin-top: -5px;
}
.cards figcaption p{
font-size: 80%;
}
.artigo{
max-width: 350px;
height: 192px;
width: 100%;
}
.imagem_desfocada{
display: none;
}
.imagem_oculos{
margin-top: 50px;
max-width: 414px;
width: 100%;
}
.artigo{
display: none;
}
.invertido{
margin: 50px auto;
max-width: 350px;
width: 90%;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
}