From 76849e1e604a0484a385720b8199b16961939912 Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Tue, 11 Oct 2022 16:18:09 -0300
Subject: [PATCH] feat: adiciona banner do meio

---
 assets/styles/main.css | 39 +++++++++++++++++++++++++++++++++++++++
 index.html             | 24 +++++++++++++++++++++---
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index af7dab3..b998f09 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -93,6 +93,24 @@ body {
     text-align: center;
 }
 
+/*Adiciona banner do meio*/
+.middle-banner {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    padding: 60px 70px 130px;
+    margin-bottom: 130px;
+    gap: 40px;
+    width: 100%;
+    max-height: 27vw;
+    background: #E0E0E0;
+}
+
+.middle-banner-image img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
 /*Media Querie*/
 @media screen and (max-width: 414px) {
     .main-banner {
@@ -130,6 +148,27 @@ body {
         width: 100%;
         max-width: 240px;
     }
+
+    .middle-banner {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        padding: 30px 23px 0;
+        margin-bottom: 80px;
+        gap: 14px;
+    }
+    
+    .middle-banner-image:nth-child(1) {
+        order: 2;
+    }
+    
+    .middle-banner-image:nth-child(2) {
+        order: 1;
+    }
+    
+    .middle-banner-image:nth-child(3) {
+        grid-column: 1 / span 2;
+        order: 3;
+    }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1200px) {
diff --git a/index.html b/index.html
index 82ac053..6ddf9cc 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
             <!--Adiciona top cards-->
             <section class="top-cards">
                 <div class="top-card">
-                    <img src="assets/imagens/top-card-image1.png" alt="Imagem do Primeiro Card do topo" class="top-card-image" />
+                    <img class="top-card-image" src="assets/imagens/top-card-image1.png" alt="Imagem do Primeiro Card do topo" />
 
                     <p class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
@@ -50,7 +50,7 @@
                 </div>
 
                 <div class="top-card">
-                    <img src="assets/imagens/top-card-image2.png" alt="Imagem do Segundo Card do topo" class="top-card-image" />
+                    <img class="top-card-image" src="assets/imagens/top-card-image2.png" alt="Imagem do Segundo Card do topo" />
 
                     <p class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
@@ -58,13 +58,31 @@
                 </div>
 
                 <div class="top-card">
-                    <img src="assets/imagens/top-card-image3.png" alt="Imagem do Terceiro Card do topo" class="top-card-image" />
+                    <img class="top-card-image" src="assets/imagens/top-card-image3.png" alt="Imagem do Terceiro Card do topo" />
 
                     <p class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
                 </div>
             </section>
+
+            <!--Adiciona banner do meio-->
+            <div class="middle-banner">
+                <figure class="middle-banner-image">
+                    <img src="assets/imagens/middle-banner-image1.png" alt="Primeira Imagem do Banner do Meio" />
+
+                </figure>
+                    
+                <figure class="middle-banner-image">
+                    <img src="assets/imagens/middle-banner-image2.png" alt="Segunda Imagem do Banner do Meio" />
+                    
+                </figure>
+
+                <figure class="middle-banner-image">
+                    <img src="assets/imagens/middle-banner-image3.png" alt="Terceira Imagem do Banner do Meio" />
+
+                </figure>
+            </div>
         </main>
     </body>
 </html>
\ No newline at end of file