diff --git a/index.html b/index.html
index 45e621b..14ba794 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <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>Atividade 1 m3</title>
 
+    
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="./materiais/styles/main.css">
 
 </head>
@@ -24,6 +30,18 @@
             
             <img class="baner-principal principal-baner-mobile" src="materiais/imagens/banner-principal-mobile.png" alt="baner 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="materiais/imagens/top-infocard-image.png" alt="Banner do infocard do Topo">
+
+        </section>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/materiais/imagens/top-infocard-image.png b/materiais/imagens/top-infocard-image.png
new file mode 100644
index 0000000..b715118
Binary files /dev/null and b/materiais/imagens/top-infocard-image.png differ
diff --git a/materiais/styles/main.css b/materiais/styles/main.css
index 8571989..5cfdea4 100644
--- a/materiais/styles/main.css
+++ b/materiais/styles/main.css
@@ -1,6 +1,12 @@
 *{
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    font-family: 'Inter', sans-serif;
+    color: #000000;
 }
 
 
@@ -19,14 +25,86 @@
     width: 100%;
 }
 
+.top-infocard{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 0px 96px;
+}
+
+.top-infocard-text{
+    max-width: 766px;
+}
+
+.top-infocard-subtitle{
+    font-weight: normal;
+    font-size: 32px;
+    text-transform: uppercase;
+    color: #000000;
+}
+
+.top-infocard-title{
+    margin-bottom: 24px;
+    text-transform: uppercase;
+    font-size: 48px;
+    font-weight: 500;
+
+}
+
+.top-infocard-description{
+    line-height: 24px;
+    font-size: 16px;
+    margin-right: 124px;
+}
+
 @media screen and (max-width: 414px) {
     .principal-baner-desktop{
         display: none;
     }
 }
 
+
+@media screen and (max-width: 992px) {
+    .top-infocard{
+        flex-direction: column;
+        padding: 84px 26px 158px;
+    }
+    
+    .top-infocard-text{
+        margin-right: 0px 0px 68px;
+        
+    }
+    
+    .top-infocard-subtitle{
+        font-size: 20px;
+        
+    }
+    
+    .top-infocard-title{
+        font-size: 28px;
+        margin-bottom: 20px;
+        
+    }
+    
+    .top-infocard-image{
+        width: 100%;
+        max-width: 240px;
+        padding: 67px 0px 0px 0px;
+    }
+}
+
+
+
 @media screen and (min-width: 415px){
     .principal-baner-mobile{
         display: none;
+        
     }
 }
+
+@media screen and (min-width: 993px ) and ( max-width: 1280px) {
+    
+    .top-infocard-text{
+        max-width: 520px;
+        margin-right: 70px;
+    }
