From f7267c98112e79542ed7a8fc95a3597a3797ddf0 Mon Sep 17 00:00:00 2001 From: Affonsok Date: Thu, 13 Oct 2022 00:59:46 -0300 Subject: [PATCH 1/4] fix: Corrige Bottom banner CSS e renomeia Media Queries --- _assets/css/main.css | 140 +++++++++++++------------------------------ index.html | 1 + 2 files changed, 42 insertions(+), 99 deletions(-) diff --git a/_assets/css/main.css b/_assets/css/main.css index 42ee35e..29e500b 100644 --- a/_assets/css/main.css +++ b/_assets/css/main.css @@ -96,34 +96,25 @@ body { } .fig-container { - background-color: #E0E0E0; - + background-color: #E0E0E0; + max-height: 530px; + } .fig-wrapper { - height: 530px; -display: flex; -justify-content: center; -align-items: center; -gap: 39px; - - + max-height: 530px; + display: flex; + justify-content: center; + align-items: center; + gap: 39px; + padding: 0; } .fig-image { - - - width: 29%; - + max-width: 566px; + width: 29%; } - - - - - - - .cards-wrapper2 { gap: 16px; @@ -174,21 +165,15 @@ gap: 39px; } - - - - - - .bottom-banner { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + align-items: center; + justify-content: center; } -.bottom-banner-image-desktop, -.bottom-banner-image-mobile { - width: 100%; +.bottom-banner-desktop { + max-width: 1360px; + width: 71%; } .page-footer { @@ -222,12 +207,12 @@ gap: 39px; +/* Tablet e Mobile - 280px to 1024px */ +@media only screen + and (min-device-width: 280px) + and (max-device-width: 1024px) { - - -@media screen and (max-width: 414px) { - .top-banner-image-desktop, - .bottom-banner-desktop { + .top-banner-image-desktop { display: none; } @@ -297,7 +282,8 @@ gap: 39px; grid-row: span 2; width: 43%; } -} + +}; @@ -309,61 +295,17 @@ gap: 39px; +/* Desktop - 1025px to 2500px */ +@media only screen + and (min-device-width: 1025px) + and (max-device-width: 2500px) { -@media screen and (min-width: 415px) and (max-width: 1200px) { - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } + .top-banner-image-mobile, + .bottom-banner-mobile { + display: none; + } - .infocard { - margin: 73px 6%; - } - - .infocard-subtitle { - font-size: 20px; - line-height: 24px; - } - - .infocard-title { - font-size: 28px; - line-height: 34px; - } - .infocard-description { - padding-top: 19px; - font-size: 16px; - line-height: 24px; - text-align: center; - } - .pc-icon { - margin-top: 65px 0 91px; - } - - .pc-icon-image { - width: 58%; - } - - .cards-wrapper { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 91px; - padding-bottom: 80px; - } - - .card { - padding: 35px 26px 28px; - background: #ffffff; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - } - - .card-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - margin-top: 27px; - } -} +}; @@ -373,12 +315,12 @@ gap: 39px; +/* Desktop 4k - 2501px above */ +@media only screen + and (min-device-width: 2501px) { - - -@media screen and (min-width: 1024px) and (max-width: 2500px) { - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } -} + .top-banner-image-mobile, + .bottom-banner-mobile { + display: none; + } +}; \ No newline at end of file diff --git a/index.html b/index.html index 5ced229..191f42b 100644 --- a/index.html +++ b/index.html @@ -105,6 +105,7 @@
+
Imagem 1 Imagem 2 -- 2.34.1 From 85c9e2a8a053bb14841ecd82dbfe15e6e783833d Mon Sep 17 00:00:00 2001 From: Affonsok Date: Thu, 13 Oct 2022 17:42:14 -0300 Subject: [PATCH 2/4] Fix: Corrige responsividade Desktop --- _assets/css/main.css | 201 ++++++++++++------------------------------- index.html | 23 ++--- 2 files changed, 69 insertions(+), 155 deletions(-) diff --git a/_assets/css/main.css b/_assets/css/main.css index 29e500b..ba50ac2 100644 --- a/_assets/css/main.css +++ b/_assets/css/main.css @@ -1,3 +1,4 @@ +/* Reset */ * { margin: 0; padding: 0; @@ -20,15 +21,19 @@ body { display: block; } -.top-banner-image-desktop, +.top-banner-image-desktop { + width: 100%; +} .top-banner-image-mobile { width: 100%; + display: none; } .infocard { margin: 73px 25%; justify-content: center; } + .infocard-title { text-align: center; font-weight: 500; @@ -65,18 +70,15 @@ body { } .cards-wrapper { - display: grid; - grid-template-columns: repeat(3, max-content); - gap: 21px; + gap: 16px; justify-content: center; - padding-top: 179px; - padding-bottom: 74px; text-align: center; + margin: 129px 72px 74px 72px; + display: flex; } .card { max-width: 350px; - display: flex; flex-direction: column; align-items: center; padding: 0 26px 28px; @@ -88,6 +90,7 @@ body { margin-top: 35px; margin-bottom: 15px; } + .card-description { font-weight: 400; font-size: 16px; @@ -96,36 +99,57 @@ body { } .fig-container { + display: flex; background-color: #E0E0E0; - max-height: 530px; - } -.fig-wrapper { - max-height: 530px; - display: flex; - justify-content: center; - align-items: center; - gap: 39px; - padding: 0; +.figure-wrapper { + margin-left: 72px; + margin-right: 72px; } .fig-image { + width: 100%; max-width: 566px; - width: 29%; } -.cards-wrapper2 { +.flex-img { + max-width: 100%; + display: block; +} +.flex { +/* background-color: #E0E0E0; */ + display: flex; + flex-wrap: nowrap; + max-width: 80%; + margin: 0 auto; +} + +.flex > div { + flex: 1 1 566px; + margin: 0 20px; +} + + + + + + + + + +/* bloco 4 cards */ +.cards-wrapper2 { gap: 16px; justify-content: center; text-align: center; - margin: 179px 72px 74px 72px; + margin: 129px 72px 74px 72px; display: flex; } .card2 { - + max-width: 350px; flex-direction: column; align-items: center; padding: 0 26px 28px; @@ -145,8 +169,10 @@ body { margin-top: 27px; } + +/* bloco Article */ .article { - margin-top: 108px; + margin-top: 108px; } .article-title { @@ -162,9 +188,10 @@ body { font-size: 16px; line-height: 24px; margin: 0 auto 50px auto; - } + +/* bloco bottom banner */ .bottom-banner { display: flex; align-items: center; @@ -176,6 +203,13 @@ body { width: 71%; } +.bottom-banner-mobile { + width: 100%; + display: none; +} + + +/* bloco footer */ .page-footer { margin-top: 116px; display: flex; @@ -191,7 +225,6 @@ body { } .footer-text { - color: #ffffff; text-align: center; margin: 17px 0 38px; font-size: 10px; @@ -202,125 +235,3 @@ body { - - - - - -/* Tablet e Mobile - 280px to 1024px */ -@media only screen - and (min-device-width: 280px) - and (max-device-width: 1024px) { - - .top-banner-image-desktop { - display: none; - } - - .infocard { - margin: 73px 6%; - } - - .infocard-subtitle { - font-size: 20px; - line-height: 24px; - } - - .infocard-title { - font-size: 28px; - line-height: 34px; - } - .infocard-description { - padding-top: 19px; - font-size: 16px; - line-height: 24px; - text-align: center; - } - - .pc-icon { - margin-top: 65px 0 91px; - } - - .pc-icon-image { - width: 58%; - } - - .cards-wrapper { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 91px; - padding-bottom: 80px; - } - - .card { - padding: 35px 26px 28px; - background: #ffffff; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - } - - .card-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - margin-top: 27px; - } - - .imageblock-wrapper { - background-color: #e0e0e0; - display: flex; - flex-direction: column; - align-items: center; - } - - .imageblock-image { - align-items: center; - display: grid; - grid-template-columns: repeat(2, 1fr); - } - - .image2 .image1 { - grid-row: span 2; - width: 43%; - } - -}; - - - - - - - - - - - -/* Desktop - 1025px to 2500px */ -@media only screen - and (min-device-width: 1025px) - and (max-device-width: 2500px) { - - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } - -}; - - - - - - - - - -/* Desktop 4k - 2501px above */ -@media only screen - and (min-device-width: 2501px) { - - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } -}; \ No newline at end of file diff --git a/index.html b/index.html index 191f42b..61e7c78 100644 --- a/index.html +++ b/index.html @@ -104,20 +104,23 @@
-
- -
- Imagem 1 - Imagem 2 - Imagem 3 -
+
+
+
- - +
+ +
+
+ +
+
+ +
@@ -165,7 +168,7 @@
Card Image 4
-- 2.34.1 From 7d91dc25e42f2afdbed9c4e1920a8d982a7de692 Mon Sep 17 00:00:00 2001 From: Affonsok Date: Thu, 13 Oct 2022 19:50:08 -0300 Subject: [PATCH 3/4] Fix: Corrige @media 414 --- _assets/css/main.css | 114 +++++++++++++++++++++++++++++++++++++------ index.html | 8 +++ 2 files changed, 108 insertions(+), 14 deletions(-) diff --git a/_assets/css/main.css b/_assets/css/main.css index ba50ac2..a088ebd 100644 --- a/_assets/css/main.css +++ b/_assets/css/main.css @@ -21,13 +21,11 @@ body { display: block; } -.top-banner-image-desktop { +.top-banner-image-desktop, +.top-banner-image-mobile { width: 100%; } -.top-banner-image-mobile { - width: 100%; - display: none; -} + .infocard { margin: 73px 25%; @@ -66,7 +64,8 @@ body { } .pc-icon-image { - width: 315px; + width: 100%; + max-width: 315px; } .cards-wrapper { @@ -132,13 +131,6 @@ body { } - - - - - - - /* bloco 4 cards */ .cards-wrapper2 { gap: 16px; @@ -205,7 +197,7 @@ body { .bottom-banner-mobile { width: 100%; - display: none; + } @@ -235,3 +227,97 @@ body { + + + + +@media screen and (max-width: 414px) { + .top-banner-image-desktop, + .bottom-banner-desktop { + display: none; + } + + .column-reverse { + display: flex; + flex-direction: column-reverse; + } + + .infocard-subtitle { + font-size: 20px; + } + + .infocard-title { + font-size: 28px; + line-height: 12px; + } + + .infocard-description { + text-align: center; + justify-content: center; + padding-top: 19px; + } + + .infocard { + margin: 73px 27px 0; + } + + .cards-wrapper { + display: block; + margin: 90px 32px 80px 32px; + } + + .card { + width: 350px; + margin-top: 16px; + align-items: center; + } + + .pc-icon-image { + max-width: 239px; + } + + .cards-wrapper2 { + display: block; + margin: 80px 23px 98px 23px; + } + + .card2 { + width: 350px; + margin-top: 16px; + align-items: center; + } + + .article-description { + margin: 0 auto 0 auto; + } + + .page-footer { + margin-top: 87px; + } + + .article { + margin-top: 50px; +} + +.footer-text { + max-width: 261px; + text-align: center; + +} + + +} + + + + + + + +@media screen and (min-width: 415px) { + .top-banner-image-mobile, + .bottom-banner-mobile { + display: none; + } + +} diff --git a/index.html b/index.html index 61e7c78..91f9397 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@
+

Lorem ipsum

dolor sit amet

@@ -180,6 +181,9 @@
+ + +

Lorem ipsum dolor sit amet

@@ -205,6 +209,10 @@ /> +

+ + +