index.html

@@ -19,6 +19,18 @@
         <img class=" main-banner main-banner-desktop" src="./assest/main-banner-desktop.png" alt="Banner Principal Desktop">
         <img class ="main-banner main-banner-mobile" src="./assest/main-banner-mobile.png" alt="Banner Principal mobile">
       </section>
+
+      <section class="top-infocard">
+        <div class="top-infocard-text">
+          <h2 class="top-inforcard-subtitle">Lorem ipsum</h2>
+          <h1 class="top-inforcard-title">dolor sit amet</h1>
+          <p class="top-inforcard-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="./assest/top-inforcard-image.png" alt="Banner do infocard do Topo">
+      </section>
     </main>
   </body>
 </html>

main.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
 * { 
 
   margin: 0;
@@ -5,13 +7,15 @@
   box-sizing: 0;
 }
 
-.page-header {
+body {
+  font-family: 'Inter', sans-serif;
+}
 
+.page-header {
   display: flex;
   justify-content: center;
   padding: 28px 0 ;
   background-color:  #000000;
-
 }
 
 .header-logo {
@@ -22,14 +26,79 @@
   width: 100%;
 }
 
+.top-infocard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0 96px;
+}
+
+.top-infocard-text {
+  max-width: 766px;
+  margin-right: 124px;
+
+}
+
+.top-inforcard-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  text-transform: uppercase;
+}
+
+.top-inforcard-title {
+  margin-bottom: 24px;
+  font-weight: 500;
+  font-size: 48px;
+  text-transform: uppercase;
+}
+
+.top-inforcard-description {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+
+
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
       display: none;
   }
 }
 
+@media screen and (max-width:992px) {
+  .top-infocard {
+    flex-direction: column;
+    padding: 54px 26px 78px; 
+  }
+  .top-infocard-text {
+    margin: 0 0 68px;
+  }
+  .top-infocard-subtitle {
+    font-size: 20px;
+  }
+  .top-infocard-title {
+    margin-bottom: 20px;
+    font-size: 28px;
+  }
+
+  .top-infocard-image {
+    width: 100%;
+    max-width: 240px;
+
+  }
+}
+
+@media screen and (min-width: 993px) and (max-width: 1280px) {
+  .top-infocard-text {
+   max-width: 520px;
+   margin-right: 70px;
+  }
+}
+
 @media screen and (min-width:415px) {
   .main-banner-mobile {
     display: none;
   }
-}
+}
+