From 65feb2806deb698853bb50ede96970b87a7e5c55 Mon Sep 17 00:00:00 2001
From: Rhayllon <rhayllom@hotmail.com>
Date: Mon, 10 Oct 2022 21:48:27 -0300
Subject: [PATCH] Feat(main): Cria Css top-infocard

---
 assets/styles/main.css | 38 ++++++++++++++++++++++++++++++++++++++
 index.html             |  6 +++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 343e7bb..7345d0d 100644
--- a/assets/styles/main.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 900a94e..bbbcbb9 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
           </figure>
          </div>
          
-         <Section>
+         <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>
@@ -33,9 +33,9 @@
                </p>
             </div>
 
-            <img src="./assets/images/top-infocard-image.png" alt="Tres icones de computadores interligados por setas" />
+            <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Tres icones de computadores interligados por setas" />
 
-         </Section>
+         </section>
 
        </main>