From 57e060c3e3f22625c324e34a410cbf7bb11f1bd4 Mon Sep 17 00:00:00 2001
From: Gustavo_Rallenson <rallenson900@gmail.com>
Date: Thu, 13 Oct 2022 01:56:06 -0300
Subject: [PATCH] =?UTF-8?q?fix(=20resolu=C3=A7=C3=A3o=20):=20ajustando=20a?=
 =?UTF-8?q?=20resulu=C3=A7=C3=A3o=20dos=20bottom=20Cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ajustando a resolução dos bottom cards para tela 4k e 320px
---
 assets/Css/Styles.css | 65 ++++++++++++++++++++++++++++++-------------
 index.html            | 15 ++++++----
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/assets/Css/Styles.css b/assets/Css/Styles.css
index f15f67a..8ed1bd0 100644
--- a/assets/Css/Styles.css
+++ b/assets/Css/Styles.css
@@ -141,32 +141,32 @@ background: #000000;
     font-size: 16px;
     line-height: 24px;
 }
-.BottomDescription{
+.BottomInfoCard{
     display: flex;
-    align-items: center;
     justify-content: center;
-    padding: 108px 0 50px;
+    align-items: center;
+    padding: 0 0 87px;
 }
-.BlockText{
+.BoxText{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    height: 158px;
+    height: 182px;
+    max-width: 766px;
 }
 .BotdescriptionTitlte{
+    width: 55%;
     font-weight: 600;
     font-size: 32px;
-    line-height: 40px;
-    text-align: center;
+    line-height: 38px;
 }
 .Botdescription{
-    width: 550px;
-    height: 120px;
     font-weight: 400;
+    text-align: center;
+    padding: 0 52px;
     font-size: 16px;
     line-height: 24px;
-    text-align: center;
 }
 .downBannerBox{
     display: flex;
@@ -174,7 +174,7 @@ background: #000000;
     padding: 50px 0 106px;
 }
 .lastBanner{
-    width: 100%;
+    width: 70%;
 }
 .footer{
     padding: 38px 0;
@@ -226,20 +226,15 @@ background: #000000;
             max-width: 358px;
             max-height: 116px;
         }
-        .BotomDescription{
-            padding: 50px 32px 87px;
+        .Botdescription{
+            padding: 0 32px 0;
         }
        
         .BotdescriptionTitlte{
+            width: 90%;
             font-size: 24px;
             line-height: 30px;
-        }
-        .Botdescription{
-            font-size: 16px;
-            line-height: 24px;
-            padding: 0 28px;
-            max-width: 358px;
-            max-height: 116px;
+            text-align: center;
         }
         .Cards{
             grid-template-columns: 1fr;
@@ -269,6 +264,9 @@ background: #000000;
         .img3{
             grid-area:img3;
         }
+        .lastBanner{
+            width: 100%;
+        }
         .BottomDescription{
                 padding: 50px 0 87px;
         }
@@ -280,6 +278,12 @@ background: #000000;
             display: flex;
             flex-direction: column-reverse;
         }
+        .downBannerBox{
+            display: flex;
+            justify-content: center;
+            padding: 0 0 50px;
+        }
+        
 }
 @media screen and (min-width: 1024px) {
     .MainBannerMobile,.footermob{
@@ -321,4 +325,25 @@ background: #000000;
         font-size: 38px;
         line-height: 28px;
     }
+    .BoxText{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        height: 400px;
+        max-width: 800px;
+    }
+    .BotdescriptionTitlte{
+        width: 90%;
+        font-size: 50px;
+        line-height: 50px;
+        text-align: center;
+    }
+    .Botdescription{
+        font-size: 34px;
+        line-height: 50px;
+        padding: 0 28px;
+        max-width: 746px;
+        max-height: 242px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3b27e95..3a9a3e5 100644
--- a/index.html
+++ b/index.html
@@ -113,12 +113,15 @@
                     </figure>
                 </div>
                 <div class="bottomwarp">
-                    <section class="BottomDescription">
-                        <div class="BlockText">
-                            <h2 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h2>
-                            <p class="Botdescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
-                                Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
-                                Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                    <section class="BottomInfoCard">
+                        <div class="BoxText">
+                            <h1 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h1>
+                            <p class="Botdescription">
+                                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>