Gabriel_Lehmann/challenge-landing-page-gabriel-lehmann
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: made 4k responsive

Browse Source
This commit is contained in:
Gabriel Ferreira Lehmann 2022-10-13 15:37:58 -03:00
parent ba7cc1d753
commit 9f556b3b68
1 changed files with 116 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
style.css
View File

@ -92,6 +92,9 @@ header{
.top-cards-box p{ .top-cards-box p{
text-align: center; text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
} }
.middle-banner{ .middle-banner{
@ -154,6 +157,11 @@ header{
align-items: center; align-items: center;
} }
.bottom-banner-text{
max-width: 35%;
text-align: center;
}
.bottom-banner h2{ .bottom-banner h2{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
@ -164,8 +172,7 @@ header{
.bottom-banner p{ .bottom-banner p{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; /* text-align: center; */
max-width: 550px;
padding-bottom: 87px; padding-bottom: 87px;
} }
@ -204,6 +211,112 @@ footer p{
color: #BDBDBD; color: #BDBDBD;
} }
@media screen and (min-width: 4000px){
/* info section 4k */
.info-section h2{
font-size: 64px;
line-height: 78px;
}
.info-section h1{
font-size: 96px;
line-height: 116px;
}
.info-section p{
font-size: 32px;
line-height: 48px;
}
/* top cards 4k */
.top-cards-box p{
font-size: 32px;
line-height: 48px;
}
/* bottom cards 4k */
.bottom-cards-box p{
font-size: 32px;
line-height: 48px;
}
/* bottom banner 4k */
.bottom-banner h2{
font-size: 64px;
line-height: 78px;
}
.bottom-banner p{
font-size: 32px;
line-height: 48px;
}
/* footer 4k */
footer p{
font-size: 20px;
line-height: 24px;
}
}
@media screen and (min-width: 2000px){
/* info section 2k */
.info-section h2{
font-size: 48px;
line-height: 58.5px;
}
.info-section h1{
font-size: 72px;
line-height: 87px;
}
.info-section p{
font-size: 24px;
line-height: 36px;
}
/* top cards 2k */
.top-cards-box p{
font-size: 24px;
line-height: 36px;
}
/* bottom cards 2k */
.bottom-cards-box p{
font-size: 24px;
line-height: 36px;
}
/* bottom banner 2k */
.bottom-banner h2{
font-size: 48px;
line-height: 58.5px;
}
.bottom-banner p{
font-size: 24px;
line-height: 36px;
}
/* footer 2k */
footer p{
font-size: 15px;
line-height: 18px;
}
}
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
/* top card mobile */ /* top card mobile */
@ -299,6 +412,7 @@ footer p{
.bottom-banner-text{ .bottom-banner-text{
padding: 0 32px; padding: 0 32px;
max-width: unset;
} }
.bottom-banner-desktop{ .bottom-banner-desktop{
@ -316,5 +430,4 @@ footer p{
footer p{ footer p{
max-width: 63.04%; max-width: 63.04%;
} }
} }