From 9c9db58df99da9d09382731583e1c189c9ff77f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naian=20F=C3=A9lix?= <naianfelix123@gmail.com>
Date: Mon, 10 Oct 2022 18:13:01 -0300
Subject: [PATCH] feat: adiciona top infocard desktop e mobile

---
 assets/styles/main.css | 69 ++++++++++++++++++++++++++++++++++++++----
 index.html             | 11 ++++++-
 2 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 31dff8e..61dfd2e 100644
--- a/assets/styles/main.css
+++ b/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');
-    }      
-}
\ No newline at end of file
+        
+    }   
+    .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;
+    } 
+}
+    
+
diff --git a/index.html b/index.html
index ebbd8b7..8aceb0e 100644
--- a/index.html
+++ b/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>