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

finalizacao port para tela 414px

Browse Source
This commit is contained in:
Caio Thurler 2022-10-13 15:10:17 -03:00
parent 24b9e382a0
commit b0983f6945
4 changed files with 71 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/endimagesmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
images/mainpostersmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

18
index.html
View File

@ -13,7 +13,10 @@
</header>
<main>
<picture>
<source media="(max-width:414px)" srcset="images/mainpostersmall.png">
<img class="main-poster" src="images/mainposter.jpg" alt="Banner Laptop">
</picture>
<section>
<div class="info-1">
<h2 class="info-1-subtitulo">Lorem ipsum</h2>
@ -41,7 +44,8 @@
<div class="laptops-img-div">
<img class="laptop-img" src="./images/Rectangle 13.png" alt="">
<img class="laptop-img" src="./images/Rectangle 16.png" alt="">
<img class="laptop-img" src="./images/Rectangle 17.png" alt="">
<div class="flex-break"></div>
<img class="laptop-img laptop-img3" src="./images/Rectangle 17.png" alt="">
</div>
<div class="cards-2">
@ -60,25 +64,31 @@
</div>
<div class="info-2">
<div class="titulo-2-div">
<h1 class="titulo-2">Lorem ipsum dolor sit amet</h1>
<p class="titulo-2-texto">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>
<div class="end-image-div">
<img class="end-image" src="./images/end-image.png" alt="">
<picture class="end-image-div">
<source media="(max-width:414px)" srcset="images/endimagesmall.png">
<img class="end-image" src="images/end-image.png" alt="">
</picture>
</div>
</section>
</main>
<footer>
<div class="footer-div">
<div class="footer-imgs">
<a href="https://www.instagram.com/" target="_blank"><img class="instagram-logo" src="./images/instagram-logo.svg" alt="Logo Instagram"></a>
<a href="https://www.facebook.com/" target="_blank"><img class="facebook-logo" src="./images/facebook-logo.svg" alt="Logo Facebook"></a>
<a href="https://www.youtube.com/" target="_blank"><img class="youtube-logo" src="./images/youtube-logo.svg" alt="Logo Youtube"></a>
</div>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
</div>
</footer>
</body>
</html>

49
styles.css
View File

@ -74,7 +74,7 @@ header {
.cards-1 {
display: flex;
gap: 21px
gap: 21px;
}
.card-1-1, .card-1-2, .card-1-3 {
@ -98,7 +98,6 @@ header {
.card-1-text {
font-size: 16px;
font-weight: 400;
width: 15,57%;
max-width: 299px;
height: 95px;
text-align: center;
@ -132,7 +131,7 @@ header {
.cards-2 {
display: flex;
justify-content: center;
gap: 16px
gap: 16px;
}
.card-2-1, .card-2-2, .card-2-3, .card-2-4 {
@ -181,8 +180,14 @@ header {
margin-bottom: 50px;
}
.titulo-2-div {
display: flex;
flex-direction: column;
}
.end-image-div {
display: flex;
}
.end-image {
@ -200,8 +205,15 @@ footer {
flex-direction: column;
}
.footer-div {
display: flex;
flex-direction: column;
}
.footer-imgs {
display: flex;
justify-content: space-around;
align-self: center;
width: 104px;
height: 24px;
gap: 16px;
@ -222,3 +234,34 @@ footer {
size: 10px;
line-height: 12.1px;
}
@media only screen and (max-width: 414px){
.info-1-subtitulo {width: 138px; height: 24px; font-size: 20px; margin-bottom: 1px;}
.info-1-titulo {width: 235px; height: 49px; font-size: 28px; margin-bottom: 46px;}
.info-1-texto {width: 357px; height: 115px; font-size: 16px ; text-align: center; margin-bottom: 65px;}
.computadores {width: 239px; height: 239.38px; margin-bottom: 90.62px;}
.cards-1 {flex-direction: column; gap: 24px;}
.card-1-1, .card-1-2, .card-1-3 {width: 350px; height: 287px;}
.card-1-text {line-height: 24px;}
.laptops-img-div {flex-wrap: wrap; margin-left: 0; margin-right: 0; gap: 14px;}
.laptops-background {height: 574px; margin-bottom: -541px;}
.laptop-img {width: 177px; height: 178px; margin-bottom: 0px;}
.flex-break {flex-basis: 100%; height: 0;}
.laptop-img3 {width: 368px; height: 372px; margin-top: -5px; margin-bottom: 80px;}
/*margin-top aqui define a distância da gap vertical entre o quadro maior e os menores*/
.cards-2 {flex-direction: column; gap: 16px;}
.card-2-1, .card-2-2, .card-2-3, .card-2-4 {width: 368px; height: 332px; margin-bottom: 0px;}
.card-2-text {font-size: 14px; line-height: 24px; width: 302px; height: 113;}
.info-2 {flex-direction: column-reverse;}
.end-image {margin-top: 98px; width: 100%; height: auto; margin-bottom: 50px;}
.titulo-2 {margin-bottom: 9px; width: 315px; height: 29px; font-size: 24px; line-height: 29.05px;}
.titulo-2-texto {margin-bottom: 87px; width: 350px; height: 192px; font-size: 16px; line-height: 24px;}
.footer-div {display: flex; flex-direction: column; height: 64px;}
.footer-imgs {margin-bottom: 16px;}
.footer-text {width: 261px; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
}