From e23b24462d7ec8023f5d44b648690ee5286810b0 Mon Sep 17 00:00:00 2001
From: Yan Garriga <yan.pg7@gmail.com>
Date: Thu, 13 Oct 2022 00:56:43 -0300
Subject: [PATCH] =?UTF-8?q?Adiciona=20baners=20mobile=20e=20faz=20corre?=
 =?UTF-8?q?=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles.css/main.css | 125 +++++++++++++++++++++++++++++++++----
 index.html                 |  55 +++++++++++++---
 2 files changed, 158 insertions(+), 22 deletions(-)

diff --git a/assets/styles.css/main.css b/assets/styles.css/main.css
index 5ce57b2..1876228 100644
--- a/assets/styles.css/main.css
+++ b/assets/styles.css/main.css
@@ -14,7 +14,7 @@ body {
     display: flex;
     justify-content: center;
     background: #000000;
-    padding: 1.51vw 0;
+    padding: 29px 0;
 }
 
 .main-banner-row {
@@ -64,6 +64,8 @@ body {
 
 .top-infocard-image {
     padding: 3.80vw 0 4.63vw 0;
+    width: 16.4vw;
+    align-items: center;
 }
 
 .top-card-image {
@@ -116,7 +118,6 @@ body {
 
 .middle-banner-item {  
     width: 100%;
-    /* max-width: 566px */
 }
 
 .middle-banner-image {
@@ -125,7 +126,7 @@ body {
 
 .bottom-card {
     background: #FFFFFF;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 4fr);
     display: grid;
     gap: 0.83vw;
     justify-content: center;
@@ -141,7 +142,6 @@ body {
     display: flex;
     background: #FFFFFF;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
-    max-width: 22.5vw;
     justify-items: center;
 }
 
@@ -152,8 +152,8 @@ body {
 .bottom-card-text {
     font-size: 16px;
     line-height: 24px;
-    width: 15.572vw;
-    padding: 0 0 3.38vw;
+    width: 19vw;
+    padding: 0 0 65px;
 }
 
 .bottom-infocard {
@@ -164,14 +164,14 @@ body {
 }
 
 .bottom-infocard-group {
-    max-width: 28.645vw;
+    width: 29%;
 }
 
 .bottom-infocard-tittle {
     font-weight: 600;
     font-size: 32px;
     line-height: 39px;
-    margin-bottom: 1.979vw;
+    margin-bottom: 2%;
 }
 
 .bottom-infocard-paragraph {
@@ -211,11 +211,39 @@ body {
     text-align: center;
 }
 
-@media screen and (max-width: 414px) {
+.mobile {
+    display: none;
+}
+
+.bottom-banner-image-mobile {
+    display: none;
+}
+
+.bottom-infocard-mobile {
+    display: none;
+}
+
+@media screen and (max-width: 1025px) {
+    .desktop {
+        display: none;
+    }
+
+    .mobile {
+        display: flex;
+    }
+
     .main-banner-desktop {
         display: none;
     }
 
+    .bottom-infocard-paragraph {
+        display: none;
+    }
+
+    .bottom-infocard {
+        display: none;
+    }
+
     .top-infocard-text {
         max-width: 357px;
         margin: auto;
@@ -239,24 +267,95 @@ body {
     }
 
     .top-infocard-image {
-        max-width: 239px;
         padding: 64px 0 90px 0;
+        width: 239px;
     }
 
     .top-cards {
         grid-template-columns: 1fr;
         padding: 36px 26px;
+        gap: 5.79vw;
     }
 
-    .middle-banner {
+    .top-card-image {
+        padding-bottom: 6.52vw;
+    }
+
+    .top-card-description {
+        max-width: 299px;
+    }
+
+    .middle-banner-group {
+        grid-template-columns: repeat(2, 1fr);
+        align-items: center;
+        top: 32px;
+        gap: 3.38vw;
         padding: 32px 0 0;
+        position: static;
+        margin-bottom: 0;
+        max-width: 88%;
         width: 100%;
     }
 
+    .middle-banner {
+        /* height: 138.647vw; */
+        flex-direction: column;
+        align-items: center;
+        height: fit-content;
+        padding-bottom: 82.125vw;
+    }
+
+    .middle-banner-image {
+        width: 100%;
+    }
+    
     .middle-banner-item {
-        width: 38%;
+        width: 100%;
         margin: auto;
-        padding-bottom: 23px;
+    }
+    
+    .img-full {
+        max-width: 88%;
+        position: absolute;
+        bottom: -32px;
+    }
+
+    .middle-banner-item:last-child img {
+        width: 100%;
+    }
+
+    .bottom-infocard-tittle {
+        font-size: 24px;
+    }
+
+    .bottom-card-group {
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+
+    .bottom-card {
+        display: flex;
+        flex-direction: column;
+        margin-top: 19%;
+    }
+
+    .bottom-card-text {
+        width: 302px;
+        font-size: 14px;
+        padding: 0 0 16%;
+    }
+
+    .bottom-infocard-group {
+        width: 84%;
+    }
+
+    .bottom-banner-image-desktop {
+        display: none;
+    }
+
+    .bottom-banner-image-mobile {
+        padding: 0;
+        margin: 24% 0 12%;
     }
 }
 
diff --git a/index.html b/index.html
index da16fcf..8f19cdd 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,9 @@
         <main>
             <section class="main-banner-row">
                 <img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png"
-                    alt="Banner principal desktop">
+                    alt="Banner principal desktop" />
                 <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
-                    alt="Banner principal mobile">
+                    alt="Banner principal mobile" />
             </section>
 
             <section class="top-infocard">
@@ -79,7 +79,7 @@
                 </div>
             </section>
 
-            <section class="middle-banner">
+            <section class="middle-banner desktop">
                 <div class="middle-banner-group">
                     <div class="middle-banner-item">
                         <img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
@@ -98,6 +98,25 @@
                 </div>
             </section>
 
+            <section class="middle-banner mobile">
+                <div class="middle-banner-group">
+                    <div class="middle-banner-item">
+                        <img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
+                            alt="Primeiro banner do Meio" />
+                    </div>
+
+                    <div class="middle-banner-item">
+                        <img class="middle-banner-image" src="./assets/images/middle-banner-02.png"
+                            alt="Segundo banner do meio" />
+                    </div>
+                </div>
+
+                <div class="middle-banner-item img-full">
+                    <img class="middle-banner-image" src="./assets/images/middle-banner-03.png"
+                        alt="Terceiro banner do meio" />
+                </div>
+            </section>
+
             <section class="bottom-card">
                 <div class="bottom-card-group">
                     <img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
@@ -155,9 +174,27 @@
                 </div>
             </section>
             
-            <div class="bottom-banner">
-                <img class="bottom-banner-image" src="./assets/images/bottom-banner-desktop.png" alt="banner de baixo" />
-            </div>
+            <section class="bottom-banner-row">
+                <div class="bottom-banner">
+                    <img class="bottom-banner-image bottom-banner-image-desktop" src="./assets/images/bottom-banner-desktop.png" alt="banner de baixo" />
+                    <img class="bottom-banner-image bottom-banner-image-mobile" src="./assets/images/bottom-banner-mobile.png" alt="banner de baixo mobile"/>
+                </div>
+            </section>
+
+            <section class="bottom-infocard-mobile">
+                <div class="bottom-infocard-group">
+                    <h3 class="bottom-infocard-tittle ">Lorem ipsum dolor sit amet</h3>
+                    <p class="bottom-infocard-paragraph-bottom-mobile">
+                        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>
 
         </main>
 
@@ -165,19 +202,19 @@
             <ul class="footer-icons">
                 <li class="footer-icon">
                     <a href="/">
-                        <img src="./assets/images/logo1.png" alt="logo-footer1">
+                        <img src="./assets/images/logo1.png" alt="logo-footer1" />
                     </a>
                 </li>
 
                 <li class="footer-icon">
                     <a href="/">
-                        <img src="./assets/images/logo2.png" alt="logo-footer2">
+                        <img src="./assets/images/logo2.png" alt="logo-footer2" />
                     </a>
                 </li>
 
                 <li class="footer-icon">
                     <a href="/">
-                        <img src="./assets/images/logo3.png" alt="logo-footer3">
+                        <img src="./assets/images/logo3.png" alt="logo-footer3" />
                     </a>
                 </li>
             </ul>