diff --git a/assets/styles/main.css b/assets/styles/main.css index b749dd3..b5e0b0a 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -125,6 +125,7 @@ body { justify-content: center; width: 88%; margin: 0 auto; + margin-bottom: 173px; } .gallery-area-images { @@ -135,6 +136,42 @@ body { width: 100% } +/* Cards de Baixo */ + +.bottom-cards { + display: flex; + background: #FFFFFF; + gap: 16px; + justify-content: center; + align-items: center; + margin: auto auto 80px; + width: 100%; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 51px 32px 65px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23); + min-height: 287px; + gap: 25px; + height: auto; +} + +.bottom-card-image { + display: block; + max-width: 102px; +} + +.bottom-card-description { + max-width: 367px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + /*Versão mobile*/ @media screen and (max-width: 320px) { @@ -202,9 +239,7 @@ body { width: 89%; gap: 23px 14px; transform: translateY(32px); - } - - .gallery-area-images { + margin-bottom: 80px; } .gallery-area-images-01 { @@ -217,10 +252,28 @@ body { .gallery-area-images-03 { grid-column: 1/2 span; - order: 2; + order: 2; + } + + .bottom-cards { + flex-direction: column; + margin-bottom: 131px; + + } + + .bottom-card { + width: 88%; + max-height: 332px; + } + + .bottom-card-image { + max-width: 102px; + } + + .bottom-card-description { + font-size: 14px; } } - /*Versão telas 4k*/ @media screen and (min-width: 2500px) { diff --git a/index.html b/index.html index b5237d9..4f7a930 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,8 @@ + +