From b5813c42e4738c910965608810518b6a2f546abc Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Mon, 10 Oct 2022 21:33:44 -0300
Subject: [PATCH] Adiciona as imagens do middle-banner respansivo desktop

---
 assets/styles/main.css | 35 ++++++++++++++++++++++++++++++++++-
 index.html             | 27 ++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index e0be09c..2c523d8 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -32,6 +32,7 @@ body{
     flex-direction: column;
     max-width: 100%;
     padding-top: 4%;
+    margin-bottom: 9.4%;
 }
 
 .top-infocard-text{
@@ -67,10 +68,14 @@ body{
     display: flex;
     justify-content: center;
     align-self: center;
-    margin-top: 9.4%;
+    margin-bottom: 4.2%;
     gap: 2%;
 }
 
+.card-imgs{
+    width: 37.6%;
+}
+
 .top-card-images{
     display: flex;
     justify-content: center;
@@ -85,4 +90,32 @@ body{
 
 .top-card-description{
     text-align: center;
+}
+
+.middle-banners{
+    background-color: #E0E0E0;
+}
+
+.middle-banners-content{
+    display: flex;
+    justify-content: center;
+    position: relative;
+    top: 6.4vmin;
+}
+
+.banner-list{
+    display: flex;
+    list-style: none;
+}
+
+.banner-list-space{
+    margin-right: 4vmin
+}
+
+.middle-banners-imgs{
+    width: 100%;
+}
+
+.image-height{
+    width: 57.8vmin;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 58ed7dc..ab03224 100644
--- a/index.html
+++ b/index.html
@@ -37,24 +37,45 @@
         <section class="top-cards">
             <div class="top-card">
                 <figure class="top-card-images">
-                    <img src="/assets/images/shop.png" alt="shop">
+                    <img class="card-imgs" src="/assets/images/shop.png" alt="shop">
                 </figure>
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
             <div class="top-card">
                 <figure class="top-card-images">
-                    <img src="/assets/images/shopping-bag.png" alt="bag">
+                    <img class="card-imgs" src="/assets/images/shopping-bag.png" alt="bag">
                 </figure>
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
             <div class="top-card">
                 <figure class="top-card-images">
-                    <img src="/assets/images/coin.png" alt="coin">
+                    <img class="card-imgs" src="/assets/images/coin.png" alt="coin">
                 </figure>
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
         </section>
 
+        <section class="middle-banners">
+            <div class="middle-banners-content">
+                 <ul class="banner-list">
+                    <li class="banner-list-space">
+                        <figure class="image-height">
+                            <img class="middle-banners-imgs" src="./assets/images/notebook1.png" alt="Banner do meio1">
+                        </figure>
+                    </li>
+                    <li class="banner-list-space">
+                        <figure class="image-height">
+                            <img class="middle-banners-imgs" src="./assets/images/notebook2.png" alt="Banner do meio2">
+                        </figure>
+                    </li>
+                </ul>
+                <figure class="image-height">
+                    <img class="middle-banners-imgs" src="./assets/images/notebook3.png" alt="Banner do meio3">
+                </figure>
+            </div>
+        </section>
+
+
     </main>
 </body>
 </html>
\ No newline at end of file