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

feat: melhorias em 4k

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-13 05:04:55 -03:00
parent fb02c586b6
commit 96bddd89d3
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/styles.css/main.css
View File

@ -63,8 +63,8 @@ body {
} }
.top-infocard-image { .top-infocard-image {
padding: 4% 0 5% 0; padding: 8% 0 8% 0;
width: 16.5vw; width: 16vw;
align-items: center; align-items: center;
} }
@ -76,7 +76,7 @@ body {
.top-cards { .top-cards {
background: #FFFFFF; background: #FFFFFF;
grid-template-columns: repeat(3, max-content); grid-template-columns: repeat(3, max-content);
padding: 7% 4% 6%; padding: 6% 4% 6%;
display: grid; display: grid;
gap: 48px; gap: 48px;
justify-content: center; justify-content: center;
@ -92,7 +92,7 @@ body {
} }
.top-card-description { .top-card-description {
max-width: 15.625vw; max-width: 15.5vw;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -110,7 +110,6 @@ body {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
padding: 0 72px; padding: 0 72px;
margin-bottom: 62px;
position: absolute; position: absolute;
top: 62px; top: 62px;
gap: 2.03125vw; gap: 2.03125vw;
@ -128,12 +127,13 @@ body {
background: #FFFFFF; background: #FFFFFF;
grid-template-columns: repeat(4, 4fr); grid-template-columns: repeat(4, 4fr);
display: grid; display: grid;
gap: 16px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
margin: 0 4%; margin: 0 4%;
max-width: 92.5%; width: 92.5vw;
padding-top: 7%; padding-top: 7%;
max-width: 100%;
gap: 16px;
} }
.bottom-card-group { .bottom-card-group {
@ -142,6 +142,8 @@ body {
display: flex; display: flex;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
width: 22v.5w;
gap: 16px;
} }
.bottom-card-image { .bottom-card-image {
@ -313,6 +315,7 @@ body {
.bottom-card-group { .bottom-card-group {
grid-template-columns: 1fr; grid-template-columns: 1fr;
width: 100%;
} }
.bottom-card { .bottom-card {
@ -361,6 +364,14 @@ body {
} }
} }
@media screen and (min-width: 768px) and (max-width: 1023px) { @media screen and (min-width: 2000px) {
.middle-banner-desktop {
width: 0%;
}
.middle-banner-group {
padding: 0 15%;
top: 35%;
margin: 0;
} }
}