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

Ajusta margens, preenchimentos e tamanhos dos cards inferiores mobile e desktop

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-10-07 16:14:32 -03:00
parent 38812b9e97
commit f97e8ad071
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/styles/main.css
View File

@ -111,20 +111,21 @@ body{
align-items: center; align-items: center;
max-width: 432px; max-width: 432px;
background: #FFF; background: #FFF;
padding: 34px 32px 66px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
} }
.bottom-card-image{ .bottom-card-image{
display: block; display: block;
margin: 34px 0 14px; margin-bottom: 14px;
} }
.bottom-card-description{ .bottom-card-description{
max-width: 368px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
margin: 0px 32px 64px;
} }
@media screen and (max-width: 414px){ @media screen and (max-width: 414px){
@ -144,6 +145,21 @@ body{
.top-infocard{ .top-infocard{
padding: 84px 26px 158px; padding: 84px 26px 158px;
} }
.bottom-cards{
padding: 0 26px;
margin-top: 134px;
}
.bottom-cards-wrapper{
grid-template-columns: 1fr;
gap: 16px;
}
.bottom-card-description{
font-size: 14px;
max-width: 302px;
}
} }
@media screen and (min-width: 769px) and (max-width:1200px){ @media screen and (min-width: 769px) and (max-width:1200px){
@ -154,6 +170,10 @@ body{
.top-infocard{ .top-infocard{
padding-bottom: 96px; padding-bottom: 96px;
} }
.bottom-card-description{
max-width: 280px;
}
} }
@media screen and (max-width: 992px){ @media screen and (max-width: 992px){
@ -180,7 +200,6 @@ body{
} }
.bottom-cards-wrapper{ .bottom-cards-wrapper{
grid-template-columns: 1fr;
justify-items: center; justify-items: center;
} }
} }