feat: adiciona top infocard desktop e mobile

assets/styles/main.css

@@ -29,12 +29,69 @@ body {
     width: 100%;
 }
 
- @media screen and (max-width: 768px) {
-    .header-logo {
-        padding: 24px 0 33px;
-    }
+.top-infocard{
+    margin: 73px 0 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 28px;
+}
+
+.top-infocard-text {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.top-infocard-subtitle {
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;
+
+}
+
+.top-infocard-title {
+    font-weight: 500;
+    font-size: 48px;
+    text-transform: uppercase;
+}
+
+.top-infocard-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 766px;
+    padding: 28px 0 74px;
+}
+
+@media screen and (max-width: 414px) {
 
     .main-banner {
         content: url('../image/main-banner-mobile.png');
-    }      
-}
+        
+    }   
+    .header-logo {
+        padding: 24px 0 33px;
+    }
+   
+ }
+
+ @media screen and (max-width: 768px) {
+    .top-infocard-subtitle {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .top-infocard-title {
+        font-size: 28px;
+    } 
+
+    .top-infocard-description {
+        font-size: 16px;
+        text-align: center;
+    } 
+}
+    
+

index.html

@@ -27,7 +27,16 @@
                 <img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner Principal">
 
             </div>
-            
+
+            <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>
+            </section>    
         </main>