From 07550a66186616500f4a3548e2ab07e4ed2c65e2 Mon Sep 17 00:00:00 2001
From: Yan Garriga <yan.pg7@gmail.com>
Date: Mon, 10 Oct 2022 15:09:40 -0300
Subject: [PATCH] Adiciona definitvamente os middle banners desktop

---
 ...nner-mobile01.png => middle-banner-01.png} | Bin
 ...nner-mobile02.png => middle-banner-02.png} | Bin
 ...nner-mobile03.png => middle-banner-03.png} | Bin
 assets/styles.css/main.css                    |  39 ++++++++++++++----
 index.html                                    |   9 ++++
 5 files changed, 40 insertions(+), 8 deletions(-)
 rename assets/images/{middle-banner-mobile01.png => middle-banner-01.png} (100%)
 rename assets/images/{middle-banner-mobile02.png => middle-banner-02.png} (100%)
 rename assets/images/{middle-banner-mobile03.png => middle-banner-03.png} (100%)

diff --git a/assets/images/middle-banner-mobile01.png b/assets/images/middle-banner-01.png
similarity index 100%
rename from assets/images/middle-banner-mobile01.png
rename to assets/images/middle-banner-01.png
diff --git a/assets/images/middle-banner-mobile02.png b/assets/images/middle-banner-02.png
similarity index 100%
rename from assets/images/middle-banner-mobile02.png
rename to assets/images/middle-banner-02.png
diff --git a/assets/images/middle-banner-mobile03.png b/assets/images/middle-banner-03.png
similarity index 100%
rename from assets/images/middle-banner-mobile03.png
rename to assets/images/middle-banner-03.png
diff --git a/assets/styles.css/main.css b/assets/styles.css/main.css
index 67dad33..89523ee 100644
--- a/assets/styles.css/main.css
+++ b/assets/styles.css/main.css
@@ -70,7 +70,7 @@ body {
 .top-cards {
     background: #FFFFFF;
     grid-template-columns: repeat(3, max-content);
-    padding: 90px 0 0;
+    padding: 90px 0 80px;
     display: grid;
     gap: 20px;
     justify-content: center;
@@ -92,6 +92,19 @@ body {
     text-align: center;
 }
 
+.middle-banner {
+    background-color: #E0E0E0;
+    width: 1920px;
+    max-height: 530px;
+    margin: auto;
+}
+
+.middle-banner-image {  
+    width: 100%;
+    max-width: 566px;
+    margin: 62px 18px 0;
+}
+
 @media screen and (max-width: 414px) {
     .main-banner-desktop {
         display: none;
@@ -128,6 +141,22 @@ body {
         grid-template-columns: 1fr;
         padding: 36px 26px;
     }
+
+    .middle-banner {
+        display: grid;
+        grid-template-columns: repeat(2, max-content);
+    }
+
+    .middle-banner-image {
+        max-width: 177px;
+        height: 178px;
+    }
+
+    .middle-banner-image-ex {
+        max-width: 368px;
+        height: 372px;
+        display: grid;
+    }
 }
 
 @media screen and (min-width: 415px) {
@@ -139,12 +168,6 @@ body {
 @media screen and (min-width: 768px) and (max-width: 1023px) {
     .top-cards {
         grid-template-columns: 1fr;
-        padding: 36px 26px;
-    }
-}
-
-@media screen and (min-width: 415px) and (max-width: 767px) {
-    .main-banner-desktop {
-        display: none;
+        padding: 30px 28px;
     }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 60350f4..77985a5 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,15 @@
                   </p>
                </div>
             </section>
+
+            <section class="middle-banner">
+                <div class="middle banners">
+                    <img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" />
+                    <img class="middle-banner-image middle-banner" src="./assets/images/middle-banner-02.png" alt="Segundo banner do meio" />
+                    <img class="middle-banner-image middle-banner-image-ex" src="./assets/images/middle-banner-03.png" alt="Terceiro banner do meio" />
+                </div>
+            </section>
+
         </main>
     </body>
 </html>
\ No newline at end of file