From 2579306f1a9e60ee898afe421ccd832f7340e18c Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 12 Oct 2022 14:32:03 -0300 Subject: [PATCH] (280px e 4k): modifiquei pra ajustar melhor nos tamanhos 280px e 4k --- assets/styles/main.css | 54 +++++++++++++++++++++++++++++++++--------- index.html | 18 +++++++------- 2 files changed, 52 insertions(+), 20 deletions(-) diff --git a/assets/styles/main.css b/assets/styles/main.css index 0705e6f..40ab153 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -10,12 +10,15 @@ body{ .page-header{ display: flex; justify-content: center; + text-align: center; padding: 29px 0; background-color: #000; } .header-logo{ - width: 12vw; - min-width: 226px; + width: 12%; +} +.header-logo-image{ + width: 100%; } /* main-banner */ .main-banner-desktop{ @@ -177,19 +180,25 @@ body{ .footer-icons{ display: flex; list-style: none; + justify-content: center; gap: 16px; } +.icons{ + width: 100%; +} +.icons-image{ + width: 5%; + min-width: 24px; +} .footer-text{ + text-align: center; font-weight: 400; font-size: 10px; line-height: 12px; text-transform: uppercase; color: #BDBDBD; } -.icons{ - width: 1vw; - min-width: 24px; -} + /* layout 4K */ @media screen and (min-width: 2500px) { .page-header{ @@ -227,9 +236,14 @@ body{ font-size: 20px; line-height: 24px; } + .icons-image{ + min-width: 48px;} } /* layaut mobile */ @media screen and (max-width: 1024px) { + .header-logo{ + width: 55%; + } .main-banner-desktop{ display: none; } @@ -240,9 +254,11 @@ body{ /* top infocard */ .top-inforcard-subtitle{ font-size: 20px; + line-height: 34px; } .top-infocard-title{ font-size: 28px; + line-height: 24px; } .top-infocard-text{ text-align: center; @@ -259,7 +275,7 @@ body{ padding: 90px 0; } .top-card{ - width: 84%; + width: 85%; gap: 37px; } .top-card-image{ @@ -272,7 +288,7 @@ body{ "b1 b2" "b3 b3"; justify-items: center; - padding: 0px 23px 0px; + padding: 0px 23px; gap: 14px; top: 32px; } @@ -298,7 +314,7 @@ body{ width: 29%; } .bottom-figures-card{ - width: 94%; + width: 89%; } /* bottom-banner */ .bottom-banner{ @@ -321,16 +337,32 @@ body{ .bottom-banner-subtitle{ font-size: 24px; line-height: 29px; + margin-bottom: 9px; } /* footer-text */ .page-footer{ padding: 32px 0; } .footer-text{ - text-align: center; width: 63%; } } @media screen and (max-width: 280px) { - + .top-card { + width: 95%; + padding: 36px 7px 26px; + } + .top-infocard-text { + max-width: 87%; + } + .banners-middle { + padding: 0px 10px; + } + .bottom-figures-card { + width: 95%; + padding: 35px 16px 65px; + } + .bottom-banner-text { + width: 90%; + } } \ No newline at end of file diff --git a/index.html b/index.html index 4cf6604..b2bfda7 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@
- - +
@@ -131,17 +131,17 @@