Merge pull request 'feat(index): Adicionado os 3 banners do meio desktop e mobile' (#5) from feature/mid-banners into development

Reviewed-on: #5

css/style.css

@@ -96,6 +96,29 @@ body{
     margin: 28px 26px;
 }
 
+/*** MID BANNER ***/
+
+.mid-banners{
+    background: #E0E0E0;
+    margin-top: 80px;
+    padding: 0 72px;
+}
+
+.mid-banner-wrapper{
+    display: grid;
+    grid-template-columns: repeat(3, 30%);
+    gap: 40px;
+    justify-content: center;
+    position: relative;
+    bottom: -62px;
+
+}
+
+.mid-banner-image{
+    display: block; 
+    width: 100%;
+}
+
 @media screen and (max-width: 1024px){
     /*** MAIN BANNER ***/
     .main-banner-desktop{
@@ -142,6 +165,23 @@ body{
         line-height: 24px;
     }
     
+    /*** MID BANNER ***/
+    .mid-banners{
+        padding: 0 24px 0;
+    }
+    .mid-banner-wrapper{
+        width: 100%;
+        grid-template-columns: repeat(2, 45%);
+        gap: 0;
+        column-gap: 14px;
+        row-gap: 24px;
+        bottom: -32px;
+    }
+
+    .mid-banner-3{
+        grid-area: 2 / 1 /span 2/ span 2;
+    }
+
 }
 
 @media screen and (min-width: 1025px){
@@ -151,3 +191,7 @@ body{
     }
 }
 
+/*** 2500 px ***/
+@media (min-width: 2500px){
+
+}

index.html

@@ -88,6 +88,28 @@
         </div>
     </div>
 
+    <!-- MID BANNERS -->
+    <div class="mid-banners">
+        
+        <!-- WRAPPER -->
+        <div class="mid-banner-wrapper">
+            <!-- MID BANNER 01 -->
+            <figure class="mid-banner-image">
+                <img src="./assets/mid-banner-01.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
+            </figure>
+    
+            <!-- MID BANNER 02 -->
+            <figure class="mid-banner-image">
+                <img src="./assets/mid-banner-02.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
+            </figure>
+    
+            <!-- MID BANNER 03 -->
+            <figure class="mid-banner-image mid-banner-3">
+                <img src="./assets/mid-banner-03.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
+            </figure>
+        </div>
+    </div>
+    
     
 </body>
 </html>