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

Merge pull request 'develop/landingPage' (#6) from develop/landingPage into main

Browse Source 
Reviewed-on: #6
This commit is contained in:
ThiagoDutraSampaioLeite 2022-10-11 15:11:36 +00:00
commit 3fab6cf4c2
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 { .main .top-cards {
display: grid; display: flex;
grid-template-columns: repeat(3, max-content);
gap: 21px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 80px; width: 100%;
gap: 21px;
} }
.main .top-card { .main .top-card {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; 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); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 26px 26px 34px;
background-color: var(--white);
} }
.main .card-img { .main .card-img {
display: block; display: block;
margin-bottom: 26px; width: 34%;
} }
.main .card-description { .main .card-description {
max-width: 300px;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
@ -135,15 +135,20 @@
/* Top-cards */ /* Top-cards */
@media (max-width: 1150px) { @media (max-width: 1024px) {
.main .top-cards { .main .top-cards {
grid-template-columns: repeat(2, 1fr); display: flex;
padding: 0 26px; flex-direction: column;
padding: 0 23px;
}
.main .top-cards,
.main .top-card,
.main .card-description {
width: 100%;
} }
.main .card-3 { .main .card-img {
grid-column-start: 1; width: 17%;
grid-column-end: 3;
} }
} }
@ -156,6 +161,12 @@
/* Middle card*/ /* Middle card*/
@media (max-width: 1024px) {
.main .container-middle-cards {
padding: 0 23px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.main .middle-cards { .main .middle-cards {
margin-top: 44px; margin-top: 44px;