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

fix(css): responsive

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-10-13 16:10:57 -03:00
parent 37d50b8baa
commit eb27cd036a
2 changed files with 87 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/index.html
View File

@ -61,14 +61,10 @@
<section class="blocks2"> <section class="blocks2">
<div class="blocks-wrapper"> <div class="blocks-wrapper">
<div class="img-square"> <div class="block-desktop">
<img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop"> <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop"></div>
</div> <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop"></div>
<div class="img-square"> <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop"></div>
<img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
</div>
<div class="img-square">
<img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
</div> </div>
<div class="img-square-mobile"> <div class="img-square-mobile">
@ -76,7 +72,7 @@
<img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop"> <img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
</div> </div>
<div class="img-square-mobile2"> <div class="img-square-mobile2">
<img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop"> <img class="block-img3" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
</div> </div>
</div> </div>
</section> </section>

87
src/styles/style.css
View File

@ -102,6 +102,7 @@ article {
.blocks2 { .blocks2 {
margin-bottom: 190px; margin-bottom: 190px;
padding: 0px 72px 0px 72px;
background: #E0E0E0; background: #E0E0E0;
} }
@ -110,6 +111,14 @@ article {
top: 62px; top: 62px;
} }
.block-desktop {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 40px;
}
.block-img2 { .block-img2 {
width: 100%; width: 100%;
} }
@ -142,8 +151,7 @@ article {
.bottom-text p { .bottom-text p {
line-height: 24px; line-height: 24px;
height: 120px; padding-bottom: 10%;
padding-bottom: 50px;
} }
.bottom-img2 { .bottom-img2 {
@ -168,8 +176,7 @@ picture img {
.bottom-text p { .bottom-text p {
padding: 9px 32px 0px 32px; padding: 9px 32px 0px 32px;
line-height: 20px; line-height: 20px;
padding: 0 0 0 0; height: auto;
height: 192px;
} }
} }
@ -217,7 +224,7 @@ picture img {
@media screen and (min-width: 356px) and (max-width: 1024px) { @media screen and (min-width: 356px) and (max-width: 1024px) {
.bottom-text p { .bottom-text p {
line-height: 24px; line-height: 24px;
padding: 9px 32px 130px 32px; padding: 9px 32px 20% 32px;
} }
} }
@ -228,6 +235,32 @@ picture img {
width: auto; width: auto;
} }
.img-square-mobile {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
}
.img-square-mobile2 {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 23px;
}
.block-img2 {
width: 100%;
max-width: 177px;
}
.block-img3 {
width: 100%;
max-width: 368px;
}
.bottom-banner-desktop { .bottom-banner-desktop {
display: none; display: none;
} }
@ -255,6 +288,18 @@ picture img {
} }
} }
@media screen and (max-width: 500px) {
.block-img3 {
width: 160%;
}
}
@media screen and (max-width: 400px) {
.block-img2 {
width: 75%;
}
}
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.img-square-mobile, .img-square-mobile2 { .img-square-mobile, .img-square-mobile2 {
display: none; display: none;
@ -265,7 +310,7 @@ picture img {
} }
.bottom-text h2 { .bottom-text h2 {
font-size: 1.5em;
font-weight: 600; font-weight: 600;
} }
} }
@ -296,3 +341,33 @@ picture img {
padding: 36px 26px; padding: 36px 26px;
} }
} }
@media screen and (min-width: 2000px) {
.cicle-text h1 {
font-size: 3.8em;
}
.bottom-text h1 {
font-size: 2.5em;
}
.cicle-text h2 {
font-size: 2.5em;
}
.bottom-text h2 {
font-size: 2.5em;
}
p {
font-size: 1.5em;
}
.block-text, .block-text2 {
font-size: 1.4em;
}
footer > p {
font-size: 1.3em;
}
}