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

bugfix(css/html): media query sizes #2

Merged
caiothurler merged 1 commits from develop into main 2022-10-13 19:22:41 +00:00
Conversation 0 Commits 1 Files Changed 2 +50 -6
2 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 21c21d4f08 - Show all commits

2
index.html
View File

@ -14,7 +14,7 @@
<main>
<picture>
<source media="(max-width:414px)" srcset="images/mainpostersmall.png">
<source media="(max-width:425px)" srcset="images/mainpostersmall.png">
<img class="main-poster" src="images/mainposter.jpg" alt="Banner Laptop">
</picture>
<section>

54
styles.css
View File

@ -48,6 +48,7 @@ header {
font-weight: 400;
font-size: 32px;
width: 220px;
max-width: 100%;
height: 39px;
}
@ -56,6 +57,7 @@ header {
font-weight: 500;
font-size: 48px;
width: 403px;
max-width: 100%;
height: 58px;
margin-bottom: 28px;
}
@ -65,12 +67,14 @@ header {
font-size: 16px;
line-height: 24px;
width: 766px;
max-width: 100%;
height: 56px;
margin-bottom: 73px;
}
.computadores {
width: 315.5;
max-width: 100%;
height: 315;
margin-bottom: 178.5px;
}
@ -126,6 +130,7 @@ header {
.laptop-img {
width: 566px;
max-width: 100%;
height: 530px;
margin-bottom: 129px;
}
@ -142,6 +147,7 @@ header {
display: flex;
flex-direction: column;
width: 432px;
max-width: 100%;
height: 332px;
gap: 21px;
background: #FFFFFF;
@ -149,9 +155,16 @@ header {
margin-bottom: 108px;
}
.card-logo-2-1, .card-logo-2-2, .card-logo-2-3, .card-logo-2-4{
.card-logo-2-1, .card-logo-2-2, .card-logo-2-3{
display: block;
width: 104px;
max-width: 100%;
height: 104px;
}
.card-logo-2-4{
display: block;
width: 85px;
max-width: 100%;
height: 104px;
}
@ -159,6 +172,7 @@ header {
font-size: 16px;
font-weight: 400;
width: 367px;
max-width: 100%;
height: 95px;
line-height: 24px;
text-align: center;
@ -180,6 +194,7 @@ header {
font-weight: 400;
font-size: 16px;
width: 550px;
max-width: 100%;
text-align: center;
margin-bottom: 50px;
}
@ -197,6 +212,7 @@ header {
.end-image {
margin-top: 50px;
width: 70.83%;
max-width: 100%;
height: 276px;
margin-bottom: 116px;
}
@ -246,7 +262,7 @@ footer {
.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-1, .card-1-2, .card-1-3 {width: 350px; height: 287px; max-width: 100%;}
.card-1-text {line-height: 24px;}
.laptops-img-div {flex-wrap: wrap; margin-left: 0; margin-right: 0; gap: 14px;}
@ -262,14 +278,42 @@ footer {
.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;}
.titulo-2 {margin-bottom: 9px; width: 315px; max-width: 100%; height: 29px; font-size: 24px; line-height: 29.05px;}
.titulo-2-texto {margin-bottom: 87px; width: 350px; max-width: 100%; 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;}
.footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
}
@media screen and (max-width: 425px) {
.titulo-2 {margin-bottom: 9px; width: 265px; max-width: 100%; height: 29px; font-size: 20px; line-height: 25.05px;}
.titulo-2-texto {margin-bottom: 47px; width: 260px; max-width: 100%; height: 232px; font-size: 12px; line-height: 16px;}
.footer-div {display: flex; flex-direction: column; height: 64px;}
.footer-imgs {margin-bottom: 16px;}
.footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
}
@media screen and (min-width: 992px) {
.titulo-2 {margin-bottom: 9px; width: fit-content; max-width: 100%; height: 29px; line-height: 25.05px; font-size: 40px;}
.titulo-2-texto {margin-bottom: 47px; width: 660px; max-width: 100%; height: 232px; line-height: 16px;}
}
.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;}
.cards-1 {flex-wrap: wrap;}
.card-1-1, .card-1-2, .card-1-3 {width: 350px; height: 287px; max-width: 100%;}
.cards-2 {flex-wrap: wrap;}
.footer-div {display: flex; flex-direction: column; height: 64px;}
.footer-imgs {margin-bottom: 16px;}
.footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
@media screen and (min-width: 3840px) {
header {
padding-top: 56px;