Merge pull request 'Feat/Top-infocard' (#4) from Feat/Top-infocard into develop

Reviewed-on: #4

assets/styles/main.css

@@ -19,4 +19,42 @@ body{
 .top-banner{
     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

@@ -22,7 +22,20 @@
           <figure>
                <img class="top-banner top-banner-desktop" src="./assets/images/top-banner-desktop.png" alt="Imagem de um notebook" />
           </figure>
-         </div> 
+         </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>