From be0a03f815499c6d52806b8f435b37e1b155c264 Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 10 Oct 2022 19:14:41 -0300 Subject: [PATCH] feat(home): Adiciona Infocard do Topo desktop e mobile --- assets/css/style.css | 65 ++++++++++++++++++++++++++ assets/imagens/top-infocard-image.png | Bin 0 -> 4684 bytes index.html | 39 +++++++++++++--- 3 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 assets/imagens/top-infocard-image.png diff --git a/assets/css/style.css b/assets/css/style.css index 4782ca5..14ef12d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -4,6 +4,11 @@ box-sizing: border-box; } +body { + font-family: "Inter", sans-serif; + color: #000000; +} + .page-header { display: flex; padding: 28px 0; @@ -20,10 +25,70 @@ display: block; } +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 74px 0 180px; + width: 100%; +} + +.top-inforcard-text { + max-width: 100%; + margin: 0 30% 0; +} + +.top-infocard-subtitle { + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-align: center; + text-transform: uppercase; +} + +.top-infocard-title { + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-align: center; + text-transform: uppercase; + margin-bottom: 28px; +} + +.top-infocard-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-bottom: 74px; + text-align: center; +} + @media screen and (max-width: 1023px) { .main-banner-desktop { display: none; } + .top-infocard { + padding-bottom: 90px; + } + .top-inforcard-text { + margin: 0 7% 0; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + } + .top-infocard-title { + font-size: 28px; + line-height: 34px; + margin-bottom: 66px; + } + .top-infocard-description { + line-height: 24px; + } } @media screen and (min-width: 1024px) { .main-banner-mobile { diff --git a/assets/imagens/top-infocard-image.png b/assets/imagens/top-infocard-image.png new file mode 100644 index 0000000000000000000000000000000000000000..ad45609bafd8b5168693f5ee6c2757ff687f0e84 GIT binary patch literal 4684 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 + + Desafio 1 - M3 Academy + @@ -16,12 +21,34 @@
-
- Banner principal desktop - Banner principal mobile -
+
+
+ Banner principal desktop + Banner principal mobile +
+
+
+
+

Lorem ipsum

+

dolor sit amet

+

+ 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 +
+
+ +