From 7b9fff513cdf08baa017d887c0fe343a3742078b Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Tue, 11 Oct 2022 19:00:09 -0300
Subject: [PATCH] feat: adiciona cards de baixo

---
 assets/styles/main.css | 85 ++++++++++++++++++++++++++++++++++++------
 index.html             | 58 +++++++++++++++++++++++-----
 2 files changed, 121 insertions(+), 22 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index b998f09..4d6ad8f 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -93,22 +93,62 @@ 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;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 162px;
+    padding: 0 72px;
+}
+
+.middle-banner-wrapper {
+    display: flex;
+    align-items: center;
     gap: 40px;
-    width: 100%;
-    max-height: 27vw;
-    background: #E0E0E0;
 }
 
 .middle-banner-image img {
+    width: 100%;
+}
+
+.middle-banner-background {
+    position: absolute;
+    background: #E0E0E0;
+    height: 85%;
+    width: 100%;
+    top: -32px;
+    left: 0;
+    z-index: -1;
+}
+
+/*Adiciona bottom card*/
+.bottom-cards {
+    display: grid;
+    grid-template-columns: repeat(4, max-content);
+    gap: 16px;
+    padding: 0 0 108px 0;
+    max-width: fit-content;
+    margin: 0 auto;
+}
+
+.bottom-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 36px 32px 65px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.bottom-card-image {
     display: block;
-    max-width: 100%;
-    height: auto;
+    margin-bottom: 18px;
+}
+
+.bottom-card-description {
+    max-width: 368px;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
 }
 
 /*Media Querie*/
@@ -118,10 +158,22 @@ body {
     }
 }
 
+@media screen and (max-width:1776px) {
+    .bottom-cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+}
+
 @media screen and (max-width: 768px) {
     .top-cards {
         grid-template-columns: 1fr;
-        padding: 0 26px 80px;
+        padding: 0 32px 80px;
+    }
+
+    .bottom-cards {
+        grid-template-columns: 1fr;
+        padding: 0 24px 98px;
     }
 }
 
@@ -150,11 +202,18 @@ body {
     }
 
     .middle-banner {
+        padding: 0;
+        margin-bottom: 80px;
+    }
+
+    .middle-banner-wrapper {
+        display: grid;
         grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: repeat(2, 1fr);
+        grid-template-rows: repeat(2, auto);
         padding: 30px 23px 0;
         margin-bottom: 80px;
         gap: 14px;
+        max-width: 900px;
     }
     
     .middle-banner-image:nth-child(1) {
@@ -168,7 +227,9 @@ body {
     .middle-banner-image:nth-child(3) {
         grid-column: 1 / span 2;
         order: 3;
+        width: 100%;
     }
+
 }
 
 @media screen and (min-width: 768px) and (max-width: 1200px) {
diff --git a/index.html b/index.html
index 6ddf9cc..fcb7970 100644
--- a/index.html
+++ b/index.html
@@ -68,21 +68,59 @@
 
             <!--Adiciona banner do meio-->
             <div class="middle-banner">
-                <figure class="middle-banner-image">
+                <div class="middle-banner-background"></div>
+                <div class="middle-banner-wrapper">
+                    <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>
+                        
+                    <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 class="middle-banner-image">
+                        <img src="assets/imagens/middle-banner-image3.png" alt="Terceira Imagem do Banner do Meio" />
 
-                </figure>
+                    </figure>
+                </div>
             </div>
+
+            <!--Adiciona bottom card-->
+            <section class="bottom-cards">
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="assets/imagens/bottom-card-image1.png" alt="Imagem do Primeiro Card de Baixo" />
+
+                    <p class="bottom-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="assets/imagens/bottom-card-image2.png" alt="Imagem do Segundo Card de Baixo" />
+
+                    <p class="bottom-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="assets/imagens/bottom-card-image3.png" alt="Imagem do Terceiro Card de Baixo" />
+
+                    <p class="bottom-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="assets/imagens/bottom-card-image4.png" alt="Imagem do Quarto Card de Baixo" />
+
+                    <p class="bottom-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+                    </p>
+                </div>
+            </section>
         </main>
     </body>
 </html>
\ No newline at end of file