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

fix: Melhora media top-card #5

Merged
ThiagoDutraSampaioLeite merged 1 commits from hotfix/landingPage into develop/landingPage 2022-10-11 15:11:11 +00:00
Conversation 0 Commits 1 Files Changed 1 +25 -14
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
style/main.css
View File

@ -41,30 +41,30 @@
}
.main .top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 21px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 80px;
width: 100%;
gap: 21px;
}
.main .top-card {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 18%;
gap: 30px;
padding: 36px 25px 26px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 26px 26px 34px;
background-color: var(--white);
}
.main .card-img {
display: block;
margin-bottom: 26px;
width: 34%;
}
.main .card-description {
max-width: 300px;
text-align: center;
line-height: 24px;
font-size: 16px;
@ -135,15 +135,20 @@
/* Top-cards */
@media (max-width: 1150px) {
@media (max-width: 1024px) {
.main .top-cards {
grid-template-columns: repeat(2, 1fr);
padding: 0 26px;
display: flex;
flex-direction: column;
padding: 0 23px;
}
.main .top-cards,
.main .top-card,
.main .card-description {
width: 100%;
}
.main .card-3 {
grid-column-start: 1;
grid-column-end: 3;
.main .card-img {
width: 17%;
}
}
@ -156,6 +161,12 @@
/* Middle card*/
@media (max-width: 1024px) {
.main .container-middle-cards {
padding: 0 23px;
}
}
@media (max-width: 768px) {
.main .middle-cards {
margin-top: 44px;