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

feature/responsividade #3

Merged
MateusLopes merged 5 commits from feature/responsividade into main 2022-10-12 21:24:09 +00:00
Conversation 0 Commits 5 Files Changed 3 +18 -19
1 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c28bc503ce - Show all commits

35
styles/style.css
View File

@ -3,10 +3,20 @@
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }
body{ body{
width: 100%; width: 100%;
} }
figure{
display: flex;
justify-content: center;
}
img{
width: 100%;
}
.card{ .card{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -99,11 +109,11 @@ main section.container-cards .card{
} }
main section.container-cards .card img.card-image{ main section.container-cards .card img.card-image{
width: fit-content;
padding-top: 35px; padding-top: 35px;
} }
main section.container-cards .card figcaption.card-description{ main section.container-cards .card figcaption.card-description{
padding: 30px 25px 27px 26px; padding: 30px 25px 27px 26px;
} }
@ -125,18 +135,17 @@ main .container-three-images .three-images-wrapper{
padding: 0 62px; padding: 0 62px;
} }
main .container-three-images .three-images-wrapper img{ /* Segundo container com cards */
width: 566px; main section.container-cards.second{
padding-bottom: 0;
} }
/* Segundo container com cards */
main section.container-cards.second .card{ main section.container-cards.second .card{
width: 432px; width: 432px;
height: fit-content height: fit-content;
} }
main section.container-cards.second .card figcaption.card-description{ main section.container-cards.second .card figcaption.card-description{
padding: 30px 32px 65px 33px; padding: 30px 32px 65px 33px;
} }
@ -155,7 +164,6 @@ main article.container-article .article-text{
align-items: center; align-items: center;
text-align: center; text-align: center;
padding-bottom: 50px; padding-bottom: 50px;
} }
@ -166,24 +174,15 @@ main article.container-article .article-text h3.article-title{
} }
main article.container-article .article-text p.article-description{ main article.container-article .article-text p.article-description{
margin-top: 35px; padding-top: 35px;
width: 100%; width: 100%;
width: 40%; width: 40%;
} }
main article.container-article figure.article-image{ main article.container-article figure.article-image-mobile{
display: flex;
justify-content: center;
}
main article.container-article figure.article-image img.image-mobile{
display: none; display: none;
} }
main article.container-article figure.article-image img{
width: 100%;
}
/* Footer da pagina */ /* Footer da pagina */
footer{ footer{
display: flex; display: flex;