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

feat: estilizando card e container de tres imagens

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-10-11 21:46:09 -03:00
parent c20bae9182
commit 0bca0f86c6
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
styles/style.css
View File

@ -7,6 +7,18 @@ body{
width: 100%; width: 100%;
} }
.card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
/* Cabecalho da pagina */ /* Cabecalho da pagina */
header nav{ header nav{
display: flex; display: flex;
@ -42,15 +54,12 @@ main section.container-description{
padding: 73px 0 178px; padding: 73px 0 178px;
} }
main section.container-description .description-text{
width: 40%;
}
main section.container-description .description-text h2.description-title{ main section.container-description .description-text h2.description-title{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
text-transform: uppercase; text-transform: uppercase;
@ -62,6 +71,8 @@ main section.container-description .description-text h2.description-title span.d
} }
main section.container-description .description-text p.description{ main section.container-description .description-text p.description{
width: 100%;
max-width: 766px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
padding: 28px 0 73px; padding: 28px 0 73px;
@ -70,26 +81,17 @@ main section.container-description .description-text p.description{
/* Primeiro container com cards */ /* Primeiro container com cards */
main section.container-cards{ main section.container-cards{
display: flex; display: flex;
flex-wrap: wrap;
gap: 21px; gap: 21px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-bottom: 80px; padding: 0 15px 80px 15px;
} }
main section.container-cards .card{ main section.container-cards .card{
display: flex; width: 350px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 18.3%;
height: 287px; height: 287px;
text-align: center;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
} }
main section.container-cards .card img.card-image{ main section.container-cards .card img.card-image{
@ -101,4 +103,35 @@ main section.container-cards .card figcaption.card-description{
padding: 30px 25px 27px 26px; padding: 30px 25px 27px 26px;
} }
/* Container com tres imagens */
main .container-three-images{
background-color: #E0E0E0;
margin-bottom: 192px;
}
main .container-three-images .three-images-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 39px;
position: relative;
top: 62px;
padding: 0 62px;
}
main .container-three-images .three-images-wrapper img{
width: 566px;
}
/* Segundo container com cards */
main section.container-cards.second .card{
width: 432px;
height: 332px
}
main section.container-cards.second .card figcaption.card-description{
line-height: 24px;
padding: 30px 32px 65px 33px;
}