diff --git a/styles/style.css b/styles/style.css index ec798f3..8645321 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,6 +7,18 @@ body{ 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 */ header nav{ display: flex; @@ -42,15 +54,12 @@ main section.container-description{ padding: 73px 0 178px; } -main section.container-description .description-text{ - width: 40%; -} - main section.container-description .description-text h2.description-title{ display: flex; flex-direction: column; align-items: center; + text-align: center; font-weight: 400; font-size: 32px; 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{ + width: 100%; + max-width: 766px; line-height: 24px; font-weight: 400; padding: 28px 0 73px; @@ -70,26 +81,17 @@ main section.container-description .description-text p.description{ /* Primeiro container com cards */ main section.container-cards{ display: flex; + flex-wrap: wrap; gap: 21px; justify-content: center; align-items: center; - padding-bottom: 80px; + padding: 0 15px 80px 15px; } main section.container-cards .card{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - width: 18.3%; + width: 350px; 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{ @@ -101,4 +103,35 @@ main section.container-cards .card figcaption.card-description{ 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; +}