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