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

feat(css): port para 4k

Browse Source
This commit is contained in:
Caio Thurler 2022-10-13 15:34:34 -03:00
parent b0983f6945
commit ad3d21db15
1 changed files with 168 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
styles.css
View File

@ -29,6 +29,10 @@ header {
padding-bottom: 28px;
}
.header-logo {
width: 226.16px; height: 43px;
}
.main-poster {
width: 100%;
margin-bottom: 73px;
@ -265,3 +269,167 @@ footer {
.footer-imgs {margin-bottom: 16px;}
.footer-text {width: 261px; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
}
@media screen and (min-width: 3840px) {
header {
padding-top: 56px;
padding-bottom: 56px;
}
.header-logo {
width: 452.32px; height: 86px;
}
.main-poster {
margin-bottom: 146px;
}
/*-------------------------------------*/
.info-1-subtitulo {
font-size: 64px;
width: 440px;
height: 78px;
}
.info-1-titulo {
font-size: 96px;
width: 806px;
height: 116px;
margin-bottom: 56px;
}
.info-1-texto {
font-size: 32px;
line-height: 48px;
width: 1488px;
height: 108px;
margin-bottom: 120px;
}
.computadores {
width: 631px;
height: 630px;
margin-bottom: 357px;
}
/* -------------------------- */
.cards-1 {
display: flex;
gap: 21px;
}
.card-1-1, .card-1-2, .card-1-3 {
display: flex;
flex-direction: column;
width: 18.23%;
max-width: 700px;
height: 574px;
gap: 42px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
margin-bottom: 160px;
}
.card-logo-1-1, .card-logo-1-2, .card-logo-1-3 {
display: block;
width: 206px;
height: 206px;
}
.card-1-text {
font-size: 32px;
font-weight: 400;
max-width: 598px;
height: 190px;
text-align: center;
}
/* -------------------------- */
.laptops-background {
height: 1060px;
margin-bottom: -936px;
}
.laptops-img-div {
margin-left: 144px;
margin-right: 144px;
gap: 78px;
}
.laptop-img {
width: 1132px;
height: 1060px;
margin-bottom: 258px;
}
/* -------------------------- */
.cards-2 {
gap: 32px;
}
.card-2-1, .card-2-2, .card-2-3, .card-2-4 {
width: 864px;
height: 664px;
gap: 42px;
margin-bottom: 216px;
}
.card-logo-2-1, .card-logo-2-2, .card-logo-2-3, .card-logo-2-4{
width: 208px;
height: 208px;
}
.card-2-text {
font-size: 32px;
width: 734px;
height: 190px;
line-height: 48px;
}
/* -------------------------- */
.titulo-2 {
font-size: 64px;
}
.titulo-2-texto {
font-size: 32px;
width: 1100px;
margin-bottom: 100px;
}
.end-image {
margin-top: 100px;
width: 70.83%;
height: 552px;
margin-bottom: 232px;
}
footer {
height: 256px;
width: 100%;
}
.footer-imgs {
width: 208px;
height: 48px;
gap: 32px;
margin-bottom: 34px;
}
.facebook-logo, .youtube-logo, .instagram-logo {
width: 50px;
height: 50px;
gap: 32px;
}
.footer-text {
height: 22px;
size: 20px;
line-height: 24.2px;
}
}