diff --git a/assets/images/png/top-infocard-image.png b/assets/images/png/top-infocard-image.png
new file mode 100644
index 0000000..41cf659
Binary files /dev/null and b/assets/images/png/top-infocard-image.png differ
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
