From d7427f18f2eec55c60f0cdf4baadfdad8ce00d0a Mon Sep 17 00:00:00 2001
From: Gustavo_Rallenson <rallenson900@gmail.com>
Date: Wed, 12 Oct 2022 22:39:23 -0300
Subject: [PATCH] fix(mobile): revretendo a coluna do bottonwarp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

adicionei uma nova div e fiz um display flez + flex direction columns reverse para mudar a posição dos elementos Bottomdescription e downBannerBox no mobile
---
 assets/Css/Styles.css | 19 ++++++++-----------
 index.html            | 28 +++++++++++++++-------------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/assets/Css/Styles.css b/assets/Css/Styles.css
index 0529704..f15f67a 100644
--- a/assets/Css/Styles.css
+++ b/assets/Css/Styles.css
@@ -141,7 +141,7 @@ background: #000000;
     font-size: 16px;
     line-height: 24px;
 }
-.BotomDescription{
+.BottomDescription{
     display: flex;
     align-items: center;
     justify-content: center;
@@ -153,11 +153,8 @@ background: #000000;
     align-items: center;
     flex-direction: column;
     height: 158px;
-    width: 550px;
 }
 .BotdescriptionTitlte{
-    width: 420px;
-    height: 39px;
     font-weight: 600;
     font-size: 32px;
     line-height: 40px;
@@ -170,8 +167,6 @@ background: #000000;
     font-size: 16px;
     line-height: 24px;
     text-align: center;
-
-
 }
 .downBannerBox{
     display: flex;
@@ -179,7 +174,7 @@ background: #000000;
     padding: 50px 0 106px;
 }
 .lastBanner{
-    width: 70%;
+    width: 100%;
 }
 .footer{
     padding: 38px 0;
@@ -274,15 +269,17 @@ background: #000000;
         .img3{
             grid-area:img3;
         }
-        .BotomDescription{
-            justify-items: center;
-            justify-content: center;
-            align-items: center;
+        .BottomDescription{
+                padding: 50px 0 87px;
         }
         .footerText{
             max-width: 280px;
             text-align: center;
         }
+        .bottomwarp{
+            display: flex;
+            flex-direction: column-reverse;
+        }
 }
 @media screen and (min-width: 1024px) {
     .MainBannerMobile,.footermob{
diff --git a/index.html b/index.html
index f0e6a8c..3b27e95 100644
--- a/index.html
+++ b/index.html
@@ -112,19 +112,21 @@
                         </figcaption>
                     </figure>
                 </div>
-                <section class="BotomDescription">
-                    <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.
-                        </p>
-                    </div>
-                </section>
-                <figure class="downBannerBox">
-                    <img  class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
-                    <img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile">
-                </figure>
+                <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.
+                            </p>
+                        </div>
+                    </section>
+                    <figure class="downBannerBox">
+                        <img  class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
+                        <img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile">
+                    </figure>
+                </div>
         </main>
         <footer>
             <div class="footer">