MarcelloMartins/challenge-landing-page-marcello-martins
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixed responsivness

Browse Source
This commit is contained in:
Marcello Rodrigues Martins 2022-10-13 18:42:16 -03:00
parent ee13461699
commit 904624d76b
1 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
styles/styles.css
View File

@ -78,7 +78,7 @@ body {
.image-card { .image-card {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 18%; max-width: 19%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -87,14 +87,15 @@ body {
} }
.image-card-image { .image-card-image {
width: 20%;
display: block; display: block;
margin-top: 36px; margin-top: 10%;
} }
.image-card-paragraph { .image-card-paragraph {
padding-top: 27px; padding-top: 27px;
padding: 26px; padding: 28px;
max-width: 300px; max-width: 90%;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -123,21 +124,20 @@ body {
.midle-card-section img { .midle-card-section img {
flex-direction: row; flex-direction: row;
max-width: 28.5vw; max-width: 29.5vw;
min-width: 25vw;
} }
.section-cards-second { .section-cards-second {
padding: 0 72px; padding: 0 72px;
justify-content: center; justify-content: center;
align-items: center; align-items: stretch;
gap: 16px; gap: 16px;
display: flex; display: flex;
} }
.image-card-second { .image-card-second {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 432px;
min-height: 332px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -150,6 +150,7 @@ body {
} }
.image-card-image-second { .image-card-image-second {
width: 23.15%;
display: block; display: block;
margin-top: 36px; margin-top: 36px;
} }
@ -226,7 +227,7 @@ body {
} }
.footer-paragraph { .footer-paragraph {
width: 398px; max-width: 39%;
margin-top: 16px; margin-top: 16px;
margin-bottom: 38px; margin-bottom: 38px;
font-size: 10px; font-size: 10px;
@ -302,6 +303,7 @@ body {
} }
.section-cards-second { .section-cards-second {
align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 112px; margin-top: 112px;
@ -338,6 +340,7 @@ body {
} }
.footer-paragraph { .footer-paragraph {
width: 63.04%;
max-width: 62.8%; max-width: 62.8%;
text-align: center; text-align: center;
} }
@ -360,4 +363,51 @@ body {
margin-top: 50px; margin-top: 50px;
} }
}
@media screen and (min-width: 4000px) {
.first-section h2 {
font-size: 64px;
line-height: 78px;
}
.first-section h1 {
font-size: 96px;
line-height: 116px;
}
.first-section p {
font-size: 32px;
line-height: 48px;
}
.image-card-paragraph {
padding-top: 10%;
padding-bottom: 10%;
font-size: 32px;
line-height: 48px;
}
.image-card-paragraph-second {
font-size: 32px;
line-height: 48px;
}
.text-2-section h2 {
font-size: 32px;
line-height: 40px;
}
.text-2-section p {
font-size: 32px;
line-height: 48px;
}
.footer-paragraph {
font-size: 20px;
line-height: 24px;
}
}
@media screen and (min-width: 2000px) {
} }