feat: cria area de texto e imagem

index.html

@@ -24,6 +24,21 @@
                     class="banner-principal banner-principal-mobile" />
             </figure>
         </div>
+        <div class="container-infocard">
+            <div class="infocard-text">
+                <h1>Lorem ipsum</h1>
+                <h2>dolor sit amet</h2>
+                <p>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="infocard-img">
+                <figure>
+                    <img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
+                </figure>
+            </div>
+
+        </div>
     </main>
 </body>
 

style/style.css

@@ -20,6 +20,19 @@ header {
     width: 100%;
 }
 
+.container-infocard {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 80px 0;
+}
+
+.banner-infocard {
+    width: 315px;
+    height: 315px;
+    display: block;
+}
+
 @media (max-width:414px) {
     .banner-principal-desktop {
         display: none;