diff --git a/assets/images/bottom-infocard-image.png b/assets/images/bottom-infocard-image-desktop.png similarity index 100% rename from assets/images/bottom-infocard-image.png rename to assets/images/bottom-infocard-image-desktop.png diff --git a/assets/images/bottom-infocard-image-mobile.png b/assets/images/bottom-infocard-image-mobile.png new file mode 100644 index 0000000..7a674f6 Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index b5e0b0a..3a76f05 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -144,8 +144,8 @@ body { gap: 16px; justify-content: center; align-items: center; - margin: auto auto 80px; - width: 100%; + margin: auto auto 108px; + width: 88%; } .bottom-card { @@ -158,13 +158,16 @@ body { min-height: 287px; gap: 25px; height: auto; + width: 22%; } .bottom-card-image { display: block; - max-width: 102px; + /*max-width: 102px;*/ + width: 29%; } + .bottom-card-description { max-width: 367px; font-size: 16px; @@ -172,6 +175,49 @@ body { text-align: center; } +/*Infocard de baixo*/ + +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 0 178px; + width: 100%; + padding: 0 72px; +} + + +.bottom-infocard-text { + text-align: center; + margin-bottom: 50px; + width: 29%; +} + +.bottom-infocard-title { + font-size: 32px; + font-weight: 600; + line-height: 39px; +} + +.bottom-infocard-description { + font-size: 16px; + line-height: 24px; +} + +.bottom-infocard-image { + display: block; + width: 100%; +} + +.bottom-infocard-image-desktop { + width: 71%; +} + +.bottom-infocard-image-mobile { + display: none; +} + /*Versão mobile*/ @media screen and (max-width: 320px) { @@ -233,13 +279,17 @@ body { max-width: 102px; } + .gallery-area { + padding: 0; + } + .gallery-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); width: 89%; gap: 23px 14px; transform: translateY(32px); - margin-bottom: 80px; + margin-bottom: 98px; } .gallery-area-images-01 { @@ -258,12 +308,10 @@ body { .bottom-cards { flex-direction: column; margin-bottom: 131px; - } .bottom-card { width: 88%; - max-height: 332px; } .bottom-card-image { @@ -273,11 +321,45 @@ body { .bottom-card-description { font-size: 14px; } + + .bottom-infocard { + margin: 0; + padding: 0; + } + + + .bottom-infocard-text { + margin-bottom: 50px; + gap: 10px; + width: 84%; + align-items: center; + } + + .bottom-infocard-title { + font-size: 24px; + line-height: 29px; + } + + .bottom-infocard-description { + font-size: 16px; + line-height: 24px; + } + + .bottom-infocard-image-desktop { + display: none; + } + + .bottom-infocard-image-mobile { + display: flex; + width: 100%; + margin-bottom: 50px; + } } + /*Versão telas 4k*/ + /*rever as fontes, precisam estar no dobro do tamanho do desktop*/ @media screen and (min-width: 2500px) { - /*rever as fontes, precisam estar no dobro do tamanho do desktop*/ .top-infocard-text { width: 52%; margin: 95px 0 95px; @@ -296,10 +378,9 @@ body { font-size: 21px; line-height: 31px; padding: 0 0 36px; - } .top-infocard-image { width: 20%; - } + } } \ No newline at end of file diff --git a/index.html b/index.html index 4f7a930..77f3daa 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@ - +