assets/styles/main.css

@@ -20,3 +20,41 @@ body{
     width: 100%;
     display: block;
 }
+
+.top-infocard{
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.top-infocard-text{
+    width: 40%;
+    padding: 72px 0;
+}
+
+.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{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.top-infocard-image{
+    width: 17%;
+    padding: 0 0 178px;
+}

index.html

@@ -24,6 +24,19 @@
           </figure>
          </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>
+
+            <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Tres icones de computadores interligados por setas" />
+
+         </section>
+
        </main>
 
     </body>