From 5ddbe62af1f05ec8790b74ad12ef50bc8468a3df Mon Sep 17 00:00:00 2001
From: Yan Garriga <yan.pg7@gmail.com>
Date: Fri, 7 Oct 2022 17:30:38 -0300
Subject: [PATCH] Adiciona o top infocard desktop e mobile

---
 assets/images/top-infocard-image.png | Bin 0 -> 5033 bytes
 assets/styles/main.css               |  67 +++++++++++++++++++++++++++
 inde.html                            |  26 +++++++++--
 3 files changed, 89 insertions(+), 4 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..a99c0e2728902f8ceb8d131f43347bc5e353a61e
GIT binary patch
literal 5033
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
PYXCDNs9}-*z2N@<(%zCp

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index f8b41b5..da6db2f 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -4,6 +4,11 @@
     box-sizing: border-box;
 }
 
+body {
+    font-family: 'Inter', sans-serif;
+    color: #000000;
+} 
+
 .page-header {
     display: flex;
     justify-content: center;
@@ -19,12 +24,74 @@
     width: 100%;
 }
 
+.top-infocard {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 0 96px;
+}
+
+.top-infocard-text {
+    max-width: 776px;
+    margin-right: 124px;
+}
+
+.top-infocard-subtitle {
+    text-transform: uppercase;
+    font-size: 32px;
+    font-weight: 400;
+}
+
+.top-infocard-title {
+    margin-bottom: 24px;
+    text-transform: uppercase;
+    font-size: 48px;
+    font-weight: 500;
+}
+
+.top-infocard-description {
+    font-size: 16px;
+    line-height: 24px;
+}    
+
 @media screen and (max-width: 414px) {
     .main-banner-desktop {
         display: none;
     }
 }
 
+@media screen and (max-width: 992px){
+        .top-infocard {
+            flex-direction: column;
+            padding: 84px 26px 158px;
+        }
+
+        .top-infocard-text {
+            margin: 0 0 66px;
+        }
+
+        .top-infocard-subtitle {
+            font-size: 20px;
+        }
+
+        .top-infocard-title {
+            font-size: 28px;
+            margin-bottom: 20px;
+        }
+        
+        .top-infocard-image {
+            max-width: 240px;
+            width: 100%;
+        }
+}
+
+@media screen and (min-width: 993px) and (max-width: 1280px) {
+    .top-infocard-text {
+        max-width: 520px;
+        margin-right: 70px;
+    }
+}
+
 @media screen and (min-width: 415px) {
     .main-banner-mobile {
         display: none;
diff --git a/inde.html b/inde.html
index cb523a9..13e352a 100644
--- a/inde.html
+++ b/inde.html
@@ -2,11 +2,16 @@
 
 <html lang="pt-BR">
     <head>
+       <link rel="preconnect" href="https://fonts.googleapis.com">
+       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+       
        <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>
@@ -19,10 +24,23 @@
         </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>
+                <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-infocard-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="Baner do infocard do Topo" />
+            </section>
         </main>
     </body>
 </html>