From ce47a0be00978c92963a3769733a2cca5b39b8ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorena=20Camila=20Coelho=20M=C3=A1ximo?=
 <lcoelho.x3@gmail.com>
Date: Wed, 12 Oct 2022 16:50:59 -0400
Subject: [PATCH] Adiciona o top infocard desktop e mobile

---
 assets/images/top-infocard-image.png | Bin 0 -> 4729 bytes
 assets/styles/main.css               | 100 ++++++++++++++++++++++-----
 index.html                           |  65 +++++++++++------
 3 files changed, 128 insertions(+), 37 deletions(-)
 create mode 100644 assets/images/top-infocard-image.png

diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f60ac9c7ba2b936249c9bc482e560a548d76898
GIT binary patch
literal 4729
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
E2HL!@k^lez

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 76e3e3c..d610887 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -1,32 +1,98 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  color: #000000;
 }
 
 .page-header {
-    display: flex;
-    justify-content:center ;
-    padding: 28px 0;
-    background: #000000;
-}  
-
-.header-logo{
-display:block;
+  display: flex;
+  justify-content: center;
+  padding: 28px 0;
+  background: #000000;
 }
 
-.main-banner{
-width: 100%;
+.header-logo {
+  display: block;
+}
+
+.main-banner {
+  width: 100%;
+}
+
+.top-infocard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0 96px;
+}
+
+.top-infocard-text {
+  max-width: 766px;
+  margin-right: 124px;
+}
+
+.top-inforcard-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  text-transform: uppercase;
+}
+
+.top-infocard-title {
+  margin-bottom: 24px;
+  font-weight: 500;
+  font-size: 48px;
+  text-transform: uppercase;
+}
+
+.top-infocard-description {
+  font-size: 16px;
+  line-height: 24px;
 }
 
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
     display: none;
-  } 
+  }
 }
 
 @media screen and (min-width: 415px) {
-    .main-banner-mobile {
-      display: none;
-    } 
+  .main-banner-mobile {
+    display: none;
   }
+}
+
+@media screen and (max-width: 992px) {
+  .top-infocard {
+    flex-direction: column;
+    padding: 84px 26px 158px;
+  }
+
+  .top-infocard-text {
+    margin: 0 0 68px;
+
+  }
+
+  .top-inforcard-subtitle {
+    font-size: 20px;
+  }
+
+  .top-inforcard-title {
+    margin-bottom: 20px;
+    font-size: 28px;
+}
+
+.top-infocard-image {
+  width: 100%;
+  max-width: 240px;
+}
+
+@media screen and (min-width: 993px) and (max-width: 1280px)  {
+    .top-infocard-text {
+     max-width: 520px;
+     margin-right: 70px; 
+}
diff --git a/index.html b/index.html
index 6054bb6..7ad9f7a 100644
--- a/index.html
+++ b/index.html
@@ -1,27 +1,52 @@
 <!DOCTYPE html>
 
 <html lang="pt-br">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <title>M3 Landing Page</title>   
-         <link rel="stylesheet" href="./assets/styles/main.css" />
-    </head>
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-    <body>
-        <header class="page-header">
-            <a href="/">
-                <img class="header-logo" src="./assets/images/logoM3.png" alt="Logo M3" />  
-            </a>
-        </header>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>M3 Landing Page</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./assets/styles/main.css" />
+</head>
+
+<body>
+    <header class="page-header">
+        <a href="/">
+            <img class="header-logo" src="./assets/images/logoM3.png" alt="Logo M3" />
+        </a>
+    </header>
+
+    <main>
+        <section>
+            <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png"
+                alt="Banner Principal Desktop" />
+            <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
+                alt="Banner Principal Mobile" />
+        </section>
+
+        <section class="top-infocard">
+            <div class="top-infocard-text">
+                <h2 class="top-inforcard-subtitle">Lorem ipsum</h2>
+                <h1 class="top-infocard-title">Dolor sit amet</h1>
+
+                <p class="top-infocard-description">
+                    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.
+                </p>
+            </div>
+
+            <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Banner de Infocard do Topo" />
+        </section>
+    </main>
+</body>
 
-        <main>
-            <section>
-                <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner Principal Desktop" />
-                <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
-            </section>
-        </main>
-    </body>
 </html>
\ No newline at end of file