diff --git a/Styles/index.css b/Styles/index.css
index 56e17a4..a3c8dc9 100644
--- a/Styles/index.css
+++ b/Styles/index.css
@@ -4,6 +4,10 @@
     box-sizing: border-box;
 }
 
+body{
+    font-family: 'Inter', sans-serif
+}
+
 .page-header{
     display: flex;
     justify-content: center;
@@ -19,6 +23,36 @@
     display: none;
 }
 
+.text-infocard{
+    display: flex;
+    flex-direction: column;
+    padding: 73px 0;
+    align-items: center;
+    text-align: center;
+}
+
+.text-subtitle{
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;
+}
+
+.text-title{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.text-description{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    width: 38%;
+}
+
 @media screen and (max-width: 414px){
     .banner-principal-desktop{
         display: none;
@@ -28,3 +62,16 @@
     }
 }
 
+@media screen and (max-width: 768px){
+    .text-subtitle{
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .text-title{
+        font-size: 28px;
+        line-height: 34px;
+    }
+    .text-description{
+        width: 100%;
+    }
+}
diff --git a/index.html b/index.html
index b49694d..fd9b492 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <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">
-    <link rel="stylesheet" href="/Styles/index.css">
+    <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"/>
+
+    <link rel="stylesheet" href="/Styles/index.css"/>
+
+    <link href="https: //fonts.googleapis.com/css2? family= Inter:wght@400;500 & display=swap" rel="stylesheet"/>
 
     <title>Desafio M3 Academy</title>
 
@@ -13,7 +19,7 @@
     <header class="page-header">
 
         <a href="/">
-            <img src="./Assets/SVG/Logo-M3Academy.svg" alt="Logo M3Academy">
+            <img src="./Assets/SVG/Logo-M3Academy.svg" alt="Logo M3Academy"/>
         </a>
 
     </header>
@@ -21,10 +27,21 @@
     <main>
 
         <div>
-            <img class="banner-principal banner-principal-desktop"  src="./Assets/Images/Banner-principal-desktop.png" alt="banner principal desktop">
-            <img class="banner-principal banner-principal-mobile" src="./Assets/Images/Banner-principal-mobile.png" alt="Banner principal mobile">
+            <img class="banner-principal banner-principal-desktop"  src="./Assets/Images/Banner-principal-desktop.png" alt="banner principal desktop"/>
+            <img class="banner-principal banner-principal-mobile" src="./Assets/Images/Banner-principal-mobile.png" alt="Banner principal mobile"/>
         </div>
-        
+
+        <section>
+            <div class="text-infocard">
+                <h2 class="text-subtitle"> Lorem ipsum </h2>
+                <h1 class="text-title"> dolor sit amet </h1>
+                
+                <p class="text-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>
+        </section>
     </main>
 </body>
 </html>
\ No newline at end of file
