Criacação do texto principal

index.html

@@ -22,6 +22,15 @@
         <img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile">
       </figure>
     </div>
+    <section class="top-information">
+      <div class="top-text">
+        <h2 class="top-information-subtitle">Lorem ipsum</h2>
+        <h1 class="top-information-title">dolor sit amet</h1>
+        <p class="top-information-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>
+    </section>
     
     
   </main>

main.css

@@ -1,10 +1,14 @@
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+
+body {
+  font-family: 'inter', sans-serif;
+}
 /* estilazação do fundo */
 .head-logo {
   display: flex;
@@ -21,7 +25,38 @@
 .main-banner {
   width: 100%;
   display: block;
+}
 
+.top-information {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */
+.top-text {
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  width: 766px; 
+  padding: 74px 0 580px;
+}
+
+
+.top-information-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 39px;
+  text-transform: uppercase;
+}
+
+.top-information-title {
+  font-weight: 500;
+  font-size: 48px;
+  line-height: 58px;
+  text-transform: uppercase;
+  margin-bottom: 28px;
 }
 
 @media screen and (max-width: 414px) {