diff --git a/assets/images/top-infocard-computers.png b/assets/images/top-infocard-computers.png
new file mode 100644
index 0000000..82530bd
Binary files /dev/null and b/assets/images/top-infocard-computers.png differ
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 3a5e023..00bb6b5 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -3,8 +3,11 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+    color: #000000;
 }
 /*Definindo escopos*/
+.top-infocard,
 .page-banner-principal-mobile,
 .page-logo,
 .page-banner-principal-desktop{
@@ -29,6 +32,45 @@
     display: none;
 }
 
+/*Estilo do top infocard*/
+
+.top-infocard{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 73px 0;
+}
+
+.top-infocard-text{
+    max-width: 766px;
+}
+
+.top-infocard-text > h2,h1{
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.top-infocard-text h2{
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+}
+
+.top-infocard-text h1{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+}
+
+.top-infocard-text p{
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.top-infocard-image{
+    padding: 65px 0 0 0;
+}
 
 @media screen and (max-width: 1024px){
     .page-banner-principal-mobile{
@@ -38,4 +80,34 @@
     .page-banner-principal-desktop{
         display: none;
     }
+
+    .top-infocard{
+        padding: 73px 28px;
+    }
+
+    .top-infocard-text{
+        max-width: 357px;
+        text-align: center;
+    }
+
+    .top-infocard-text h2{
+        font-size: 20px;
+        line-height: 24px;
+    }
+    
+    .top-infocard-text h1{
+        font-size: 28px;
+        line-height: 34px;
+    }
+
+    .top-infocard-image{
+        width: 60%;
+    }
+}
+
+@media screen and (min-width: 2500px){
+    .top-infocard-text p{
+        font-size: 24px;
+        line-height: 32px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9c9cf8c..c3ffed6 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,45 @@
 <!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">
+        <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 Academy</title>
 
-        <link rel="stylesheet" href="./assets/styles/styles.css">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
+        <link rel="stylesheet" href="./assets/styles/styles.css"/>
     </head>
 
     <body>
         <!--Inicio/menu de navegação-->
         <header class="page-logo">
             <nav>
-                <a href="/"><img class="logo-m3academy" src="./assets/svgs/logo-m3academy.svg" alt="Logo M3 Academy"></a>
+                <a href="/"><img class="logo-m3academy" src="./assets/svgs/logo-m3academy.svg" alt="Logo M3 Academy"/></a>
             </nav>
         </header>
         <!--Banner Principal desktop e mobile-->
         <div>
             <figure>
-                <img class="page-banner-principal-desktop" src="./assets/images/banner-principal-desktop.png" alt="Banner Principal Desktop">
-                <img class="page-banner-principal-mobile" src="./assets/images/banner-principal-mobile.png" alt="Banner Principal Mobile">
+                <img class="page-banner-principal-desktop" src="./assets/images/banner-principal-desktop.png" alt="Banner Principal Desktop"/>
+                <img class="page-banner-principal-mobile" src="./assets/images/banner-principal-mobile.png" alt="Banner Principal Mobile"/>
             </figure>
         </div>
-        
+        <!--Conteúdo principal-->
+        <main>
+            <article class="top-infocard">
+                <section class="top-infocard-text">
+                    <h2>Lorem ipsum</h2>
+                    <h1>dolor sit amet</h1>
+                    <p>
+                        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>
+                </section>
+                <img class="top-infocard-image" src="./assets/images/top-infocard-computers.png" alt="Computadores do card de cima"/>
+            </article>
+        </main>
     </body>
 </html>
\ No newline at end of file
