diff --git a/assets/top-infocard-image.png b/assets/top-infocard-image.png
new file mode 100644
index 0000000..2af63bd
Binary files /dev/null and b/assets/top-infocard-image.png differ
diff --git a/css/style.css b/css/style.css
index 306cf0f..b1642ae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,5 @@
 * {
     margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
@@ -9,6 +8,8 @@ body{
     color: #000000;
 }
 
+/*** HEADER ***/
+
 .page-header{
     display: flex;
     justify-content: center;
@@ -21,6 +22,8 @@ body{
     display: block;
 }
 
+/*** MAIN BANNER ***/
+
 .main-banner-desktop{
     display: block;
     width: 100%;
@@ -30,13 +33,77 @@ body{
     width: 100%;
 }
 
+/*** TOP INFOCARD ***/
+
+.top-infocard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 74px;
+}
+
+.top-infocard-subtitle{
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;   
+}
+
+.top-infocard-title{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    text-transform: uppercase;
+}
+
+.top-infocard-description{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 28px;
+    max-width: 40%;
+}
+
+.top-infocard-image{
+    margin-top: 74px;
+}
+
 @media screen and (max-width: 1024px){
+    /*** MAIN BANNER ***/
     .main-banner-desktop{
         display: none;
     }
+    
+    /*** TOP INFOCARD ***/
+    .top-infocard{
+        padding: 0 28px 0;
+    }
+
+    .top-infocard-subtitle{  
+        font-size: 20px;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    .top-infocard-title{
+        text-align: center;
+        font-size: 28px;
+        line-height: 34px;
+    }
+
+    .top-infocard-description{
+        max-width: 100%;
+        text-align: center;
+    }
+
+    .top-infocard-image{
+        margin-top: 65px;
+    }
 }
 
 @media screen and (min-width: 1025px){
+    /*** MAIN BANNER ***/
     .main-banner-mobile{
         display: none;
     }
diff --git a/index.html b/index.html
index a85328e..a36ee64 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
+    <!-- FONT FAMILY -->
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
     <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,18 +13,48 @@
     <link rel="stylesheet" href="./css/style.css" />
 </head>
 <body>
+    <!-- HEADER -->
     <header class="page-header">
         <img src="./assets/logoM3.svg" alt="" />
     </header>
 
-    <div>
-        <img src="./assets/main-banner-desktop.png" alt="" class="main-banner-desktop">
-    </div>
-
-    <div>
+    <!-- MAIN BANNER -->
+    <!-- MAIN BANNER DESKTOP-->
+    <figure>
+        <img src="./assets/main-banner-desktop.png" alt="Banner principal, imagem de um notebook" class="main-banner-desktop">
+    </figure>
+    
+    <!-- MAIN BANNER MOBILE-->
+    <figure>
         <img src="./assets/main-banner-mobile.png" alt="" class="main-banner-mobile">
-    </div>
+    </figure>
+    
+    <!-- TOP INFOCARD -->
+    <section class="top-infocard">
+        <!-- SUBTITLE -->
+        <p class="top-infocard-subtitle">
+            Lorem ipsum
+        </p>
+        
+        <!-- TITLE -->
+        <p class="top-infocard-title">
+            dolor sit amet
+        </p>
+        
+        <!-- DESCRITION -->
+        <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>
+        
+        <!-- IMAGE -->
+        <figure>
+            <img src="./assets/top-infocard-image.png" alt="Conexão entre computadores" class="top-infocard-image">
+        </figure>
 
+    </section>
+    
     
 </body>
 </html>
\ No newline at end of file
