From 555ffda00fe0b530ff7f6d27bdbc298fcd266ad9 Mon Sep 17 00:00:00 2001
From: RobsonTito <contato.rtito@gmail.com>
Date: Thu, 13 Oct 2022 08:37:43 -0300
Subject: [PATCH] feat: cria texto e logo topo

---
 assets/images/png/top-infocard-image.png | Bin 0 -> 4733 bytes
 assets/styles/main.css                   |  48 ++++++++++++++++++++++-
 index.html                               |  17 ++++++++
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 assets/images/png/top-infocard-image.png

diff --git a/assets/images/png/top-infocard-image.png b/assets/images/png/top-infocard-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..41cf659e8a8b5b209fa50ae4eed27dcb6e28687c
GIT binary patch
literal 4733
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
UuC9>nzs-!Pp}9d7)HUY60D<JmLI3~&

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 5038eae..75657eb 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -4,12 +4,16 @@
     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 {
@@ -20,11 +24,51 @@
     width: 100%;
 }
 
+.top-infocard {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    }
+
+.top-infocard-text {
+    
+    max-width: 766px;
+}
+
+.top-infocard-subtitle {
+    text-transform: uppercase;
+    line-height: 39px;
+    font-weight: 400;
+    font-size: 32px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.top-infocard-title {
+    text-transform: uppercase;
+    font-weight: 500;
+    line-height: 58px;
+    font-size: 48px;
+    margin-bottom: 10px;
+}
+
+.top-infocard-discription {
+    
+    font-weight: 400;
+    line-height: 24px;
+    font-size: 16px;
+}
+
+.top-infocard-image {
+    margin-top: 20px;
+}
+
 @media screen and (max-width:414px) {
     .main-banner-desktop {
         display: none;
     }
-
 }
 
 @media screen and (min-width:415px) {
diff --git a/index.html b/index.html
index 001f573..bbc15e0 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@
 
 <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" />
@@ -9,6 +12,8 @@
         <title>M3 Landing Page</title>
         
         <link rel="stylesheet" href="./assets/styles/main.css" />
+
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
     </head>
 
     <body>
@@ -22,6 +27,18 @@
                     <img class="main-banner main-banner-desktop" src="./assets/images/png/main-banner-desktop.png" alt="banner principal">
                     <img class="main-banner main-banner-mobile" src="./assets/images/png/main-banner-mobile.png" alt="banner principal">
                 </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/png/top-infocard-image.png" alt="Banner do infocard topo">
+                </section>
             </main>
     </body>
 </html>    
\ No newline at end of file