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> <main>
<picture> <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"> <img class="main-poster" src="images/mainposter.jpg" alt="Banner Laptop">
</picture> </picture>
<section> <section>

54
styles.css
View File

@ -48,6 +48,7 @@ header {
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
width: 220px; width: 220px;
max-width: 100%;
height: 39px; height: 39px;
} }
@ -56,6 +57,7 @@ header {
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
width: 403px; width: 403px;
max-width: 100%;
height: 58px; height: 58px;
margin-bottom: 28px; margin-bottom: 28px;
} }
@ -65,12 +67,14 @@ header {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
width: 766px; width: 766px;
max-width: 100%;
height: 56px; height: 56px;
margin-bottom: 73px; margin-bottom: 73px;
} }
.computadores { .computadores {
width: 315.5; width: 315.5;
max-width: 100%;
height: 315; height: 315;
margin-bottom: 178.5px; margin-bottom: 178.5px;
} }
@ -126,6 +130,7 @@ header {
.laptop-img { .laptop-img {
width: 566px; width: 566px;
max-width: 100%;
height: 530px; height: 530px;
margin-bottom: 129px; margin-bottom: 129px;
} }
@ -142,6 +147,7 @@ header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 432px; width: 432px;
max-width: 100%;
height: 332px; height: 332px;
gap: 21px; gap: 21px;
background: #FFFFFF; background: #FFFFFF;
@ -149,9 +155,16 @@ header {
margin-bottom: 108px; 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; display: block;
width: 104px; width: 104px;
max-width: 100%;
height: 104px;
}
.card-logo-2-4{
display: block;
width: 85px;
max-width: 100%;
height: 104px; height: 104px;
} }
@ -159,6 +172,7 @@ header {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
width: 367px; width: 367px;
max-width: 100%;
height: 95px; height: 95px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -180,6 +194,7 @@ header {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
width: 550px; width: 550px;
max-width: 100%;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
} }
@ -197,6 +212,7 @@ header {
.end-image { .end-image {
margin-top: 50px; margin-top: 50px;
width: 70.83%; width: 70.83%;
max-width: 100%;
height: 276px; height: 276px;
margin-bottom: 116px; margin-bottom: 116px;
} }
@ -246,7 +262,7 @@ footer {
.computadores {width: 239px; height: 239.38px; margin-bottom: 90.62px;} .computadores {width: 239px; height: 239.38px; margin-bottom: 90.62px;}
.cards-1 {flex-direction: column; gap: 24px;} .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;} .card-1-text {line-height: 24px;}
.laptops-img-div {flex-wrap: wrap; margin-left: 0; margin-right: 0; gap: 14px;} .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;} .info-2 {flex-direction: column-reverse;}
.end-image {margin-top: 98px; width: 100%; height: auto; margin-bottom: 50px;} .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 {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; height: 192px; font-size: 16px; line-height: 24px;} .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-div {display: flex; flex-direction: column; height: 64px;}
.footer-imgs {margin-bottom: 16px;} .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) { @media screen and (min-width: 3840px) {
header { header {
padding-top: 56px; padding-top: 56px;