From e1add74688aa083c783e19a0f7d6e22f39051c04 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Wed, 12 Oct 2022 12:38:38 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20Otimiza=C3=A7=C3=A3o=20HTML=20e=20CSS=20?= =?UTF-8?q?para=20responsividade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/main.css | 245 ++++++++++++++++++++++++----------------- index.html | 22 ++-- 2 files changed, 153 insertions(+), 114 deletions(-) diff --git a/assets/styles/main.css b/assets/styles/main.css index 0e82510..fd28bb9 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -5,6 +5,7 @@ padding: 0; box-sizing: border-box; border: none; + } body{ @@ -21,7 +22,11 @@ body{ padding: 28px 0; } -.header-page, .main-banner, .footer-banner { +.header-logo { + width: 12%; +} + +.header-page, .main-banner, .footer-banner, .header-logo { width: 100%; display: block; } @@ -34,9 +39,10 @@ body{ align-items: center; flex-direction: column; - padding: 72px 0 180px; + padding: 4% 0 9%; } + .top-infocard-text { width: 40%; text-align: center; @@ -66,13 +72,21 @@ body{ padding-bottom: 72px; } +.wrapper-top-infocard { + width: 16%; +} + +.top-infocard-image { + width: 100%; +} + .top-cards { display: grid; - grid-template-columns: repeat(3, max-content); + grid-template-columns: repeat(3, 18%); gap: 20px; justify-content: center; - padding-bottom: 80px; + padding-bottom: 4%; } .top-card { @@ -82,12 +96,17 @@ body{ background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - padding: 26px 26px 34px; + padding: 7% 7% 10%; +} + +.wrapper-top-card-image { + display: block; + margin-bottom: 7%; + width: 30%; } .top-card-image { - display: block; - margin-bottom: 26px; + width: 100%; } .card-description { @@ -97,7 +116,7 @@ body{ } .top-card-description { - max-width: 300px; + max-width: 86%; } @@ -111,27 +130,32 @@ body{ justify-content: center; gap: 40px; - max-height: 530px; - padding: 0 72px; + padding: 0 14%; +} + +.banner-grid-1, .banner-grid-2, .banner-grid-3 { + display: block; + margin-top: 12%; + width: 100%; } .middle-banner-image { - width: 100%; - margin-top: 62px; + display: block; + width: max-content; } /* CARDS DO RODAPÉ */ .footer-cards { display: grid; - grid-template-columns: repeat(4, max-content); + grid-template-columns: repeat(4, 22%); gap: 16px; justify-content: center; - padding-bottom: 108px; - padding-top: 192px; + padding-bottom: 6%; + padding-top: 10%; } .footer-card { @@ -141,16 +165,21 @@ body{ background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); - padding: 36px 32px 64px; + padding: 8% 8% 15%; +} + +.wrapper-footer-card-image { + width: 24%; } .footer-card-image { display: block; + width: 100%; margin-bottom: 16px; } .footer-card-description { - max-width: 367px; + max-width: 85%; } /* SESSÃO DO RODAPÉ */ @@ -161,12 +190,14 @@ body{ align-items: center; flex-direction: column; - padding-bottom: 116px; + padding-bottom: 6%; } .section-footer-text{ width: 28%; text-align: center; + + padding-bottom: 3%; } .section-footer-title { @@ -179,8 +210,6 @@ body{ font-weight: 400; font-size: 16px; line-height: 24px; - - padding-bottom: 50px; } .section-footer-image-desktop { @@ -221,34 +250,99 @@ body{ /* RESPONSIVIDADE */ -@media screen and (max-width: 1919px) { +@media screen and (min-width: 2501px) { + .top-infocard-subtitle, .section-footer-title { + font-size: 64px; + line-height: 78px; + } + + .top-infocard-title { + font-size: 96px; + line-height: 116px; + } + + .top-infocard-description, .section-footer-description, .card-description{ + font-size: 32px; + line-height: 48px; + } + + .footer-text { + font-size: 20px; + line-height: 24px; + } +} + +@media screen and (min-width: 1025px) and (max-width: 2500px) { + .middle-banner { - max-height: 398px; - } - - .middle-banner-image { - width: 420px; - margin-top: 46px; - } - - .footer-cards { + background: #E0E0E0; + display: grid; - grid-template-columns: repeat(2, max-content); + grid-template-columns: repeat(3, 30%); + justify-content: center; + gap: 40px; + + max-height: 530px; + + padding: 0 4%; } -} - -@media screen and (max-width: 1530px) { - .middle-banner { - max-height: 318px; + + .banner-grid-1, .banner-grid-2, .banner-grid-3 { + display: block; + position: relative; + margin-top: 12%; + max-width: 100%; } - + .middle-banner-image { - width: 332px; - margin-top: 36px; + display: block; + max-width: 100%; } } -@media screen and (max-width: 1200px) { +@media screen and (min-width: 1025px) { + .main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile { + display: none; + } +} + +@media screen and (max-width: 1024px) { + .main-banner-desktop, .section-footer-image-desktop { + display: none; + } + + .top-infocard { + padding: 18% 7% 22%; + } + + .top-infocard-text { + width: 100%; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title { + font-size: 28px; + line-height: 34px; + padding-bottom: 16px; + } + + .wrapper-top-infocard { + width: 58%; + } + + .top-infocard-image { + width: 100%; + } + + .top-cards { + grid-template-columns: 1fr; + padding: 36px 32px 80px; + } + .middle-banner { grid-template-columns: 45% 45%; grid-template-areas: "banner-grid-1 banner-grid-2" @@ -279,35 +373,16 @@ body{ width: 100%; margin-top: 0; } -} -@media screen and (min-width: 769px) and (max-width: 1200px) { - .top-cards { - grid-template-columns: repeat(2, max-content); - padding: 36px 26px 80px; - } -} - -@media screen and (max-width: 1024px) { - .top-infocard-text { - width: 100%; - padding: 0 28px; + .footer-cards { + grid-template-columns: 1fr; + padding: 80px 24px 98px; + justify-content: center; } - .top-infocard-subtitle { - font-size: 20px; - line-height: 24px; - } - - .top-infocard-title { - font-size: 28px; - line-height: 34px; - padding-bottom: 16px; - } - - .top-infocard-image { - width: 100%; - max-width: 240px; + .footer-card-description { + max-width: 73%; + font-size: 14px; } .section-footer { @@ -336,45 +411,9 @@ body{ .section-footer-description { padding-bottom: 0; } -} - -@media screen and (max-width: 968px){ - .footer-cards { - grid-template-columns: 1fr; - padding: 80px 24px 98px; - justify-content: center; - } - - .footer-card-description { - max-width: 302px; - font-size: 14px; - } -} - -@media screen and (max-width: 768px){ - .top-infocard { - padding-bottom: 90px; - } - - .top-cards { - grid-template-columns: 1fr; - padding: 36px 32px 80px; - } -} - -@media screen and (max-width: 414px) { - .main-banner-desktop, .section-footer-image-desktop { - display: none; - } .footer-text { text-align: center; - width: 261px; - } -} - -@media screen and (min-width: 415px) { - .main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile { - display: none; + width: 85%; } } \ No newline at end of file diff --git a/index.html b/index.html index 688e56f..0f12e39 100644 --- a/index.html +++ b/index.html @@ -34,26 +34,26 @@

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

-
Banner do Infocard do Topo
+
Banner do Infocard do Topo
-
Imagem do Primeiro Card do Topo
+
Imagem do Primeiro Card do Topo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Imagem do Segundo Card do Topo
+
Imagem do Segundo Card do Topo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Imagem do Terceiro Card do Topo
+
Imagem do Terceiro Card do Topo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

@@ -61,35 +61,35 @@
- - - + + +
-
Imagem do Primeiro Card do Rodapé
+
Imagem do Primeiro Card do Rodapé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Imagem do Segundo Card do Rodapé
+
Imagem do Segundo Card do Rodapé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Imagem do Terceiro Card do Rodapé
+
Imagem do Terceiro Card do Rodapé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
Imagem do Quarto Card do Rodapé
+
Imagem do Quarto Card do Rodapé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.