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

16
src/index.html
View File

@ -61,14 +61,10 @@
<section class="blocks2">
<div class="blocks-wrapper">
<div class="img-square">
<img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop">
</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">
<img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
<div class="block-desktop">
<div class="img-square"><img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop"></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"><img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop"></div>
</div>
<div class="img-square-mobile">
@ -76,7 +72,7 @@
<img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
</div>
<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>
</section>
@ -128,7 +124,7 @@
</section>
</article>
</main>
<footer>
<picture>
<img src="assets/insta.png" alt="Icone do instagram">

87
src/styles/style.css
View File

@ -102,6 +102,7 @@ article {
.blocks2 {
margin-bottom: 190px;
padding: 0px 72px 0px 72px;
background: #E0E0E0;
}
@ -110,6 +111,14 @@ article {
top: 62px;
}
.block-desktop {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 40px;
}
.block-img2 {
width: 100%;
}
@ -142,8 +151,7 @@ article {
.bottom-text p {
line-height: 24px;
height: 120px;
padding-bottom: 50px;
padding-bottom: 10%;
}
.bottom-img2 {
@ -168,8 +176,7 @@ picture img {
.bottom-text p {
padding: 9px 32px 0px 32px;
line-height: 20px;
padding: 0 0 0 0;
height: 192px;
height: auto;
}
}
@ -217,7 +224,7 @@ picture img {
@media screen and (min-width: 356px) and (max-width: 1024px) {
.bottom-text p {
line-height: 24px;
padding: 9px 32px 130px 32px;
padding: 9px 32px 20% 32px;
}
}
@ -228,6 +235,32 @@ picture img {
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 {
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) {
.img-square-mobile, .img-square-mobile2 {
display: none;
@ -265,7 +310,7 @@ picture img {
}
.bottom-text h2 {
font-size: 1.5em;
font-weight: 600;
}
}
@ -295,4 +340,34 @@ picture img {
grid-template-columns: repeat(2, max-content);
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;
}
}