Adiciona o infocard do topo desktop e mobile

index.html

@@ -4,6 +4,14 @@
     <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 />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
     <title>M3 Academy</title>
 
     <link rel="stylesheet" href="./styles/main.css" />
@@ -32,6 +40,26 @@
           alt="Imagem de um notebook  com um código de programação aberto"
         />
       </figure>
+      <!-- Topo Infocard -->
+      <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>
+        <div class="top-infocard-container-image">
+          <img
+            class="top-infocard-image"
+            src="./assets/image/topInfocardImg.png"
+            alt="Imagem com desenho de três computadores com setas apontando para eles"
+          />
+        </div>
+      </section>
     </main>
   </body>
 </html>

styles/main.css

@@ -6,6 +6,7 @@
 
 body {
   color: black;
+  font-family: "Inter", sans-serif;
 }
 
 /* Cabeçalho */
@@ -29,7 +30,53 @@ body {
   width: 100%;
 }
 
-@media screen and (min-width: 1025px) {
+/* Topo Infocard  */
+
+.top-infocard {
+  display: flex;
+  flex-direction: column;
+  gap: 73px;
+  align-items: center;
+  padding: 73px 0 179px;
+  width: 100%;
+}
+
+.top-infocard-text {
+  text-align: center;
+  max-width: 40%;
+}
+
+.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 {
+  text-align: left;
+  line-height: 24px;
+
+  margin-top: 28px;
+}
+
+.top-infocard-container-image {
+  width: 17%;
+}
+
+.top-infocard-image {
+  display: block;
+  width: 100%;
+}
+
+@media screen and (min-width: 415px) {
   /* Corpo da pagina */
 
   /* Banner principal */
@@ -44,10 +91,36 @@ body {
     max-width: 55%;
   }
 
-  /* Corpo da pagina */
+  .top-infocard {
+    padding: 73px 28px 90px;
+  }
 
-  /* Banner principal */
+  .top-infocard-text {
+    max-width: 86%;
+  }
+
+  .top-infocard-description {
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 414px) {
   .main-banner-desktop {
     display: none;
   }
+
+  .top-infocard-container-image {
+    width: 100%;
+    max-width: 58%;
+  }
+
+  .top-infocard-subtitle {
+    font-size: 23px;
+    line-height: 24px;
+  }
+
+  .top-infocard-title {
+    font-size: 28px;
+    line-height: 33px;
+  }
 }