feat(index): adiciona o banner do meio

index.html

@@ -70,6 +70,18 @@
 
             </figure>
         </div>
+
+        <div>
+            <figure>
+                <!-- banner desktop -->
+                <img class="middle-banner middle-banner-desktop" src="/assets/images/middle-banner-desktop.png"
+                    alt="imagem de um computador" />
+                <!-- banner mobile -->
+                <img class="middle-banner middle-banner-mobile" src="/assets/images/middle-banner-mobile.png"
+                    alt="imagem de um computador" />
+            </figure>
+        </div>
+        
     </main>
 </body>
 

styles/main.css

@@ -21,16 +21,16 @@ body {
     display: block;
 }
 
-/*Banner*/
-.main-banner {
+/*Banners*/
+.main-banner, .middle-banner {
     width: 100%;
 }
 
-.main-banner-desktop {
+.main-banner-desktop, .middle-banner-desktop {
     display: block;
 }
 
-.main-banner-mobile {
+.main-banner-mobile, .middle-banner-mobile {
     display: none;
 }
 
@@ -158,12 +158,12 @@ body {
 
 @media screen and (max-width: 414px) {
 
-    /*banner*/
-    .main-banner-desktop {
+    /*banners*/
+    .main-banner-desktop, .middle-banner-desktop {
         display: none;
     }
 
-    .main-banner-mobile {
+    .main-banner-mobile, .middle-banner-mobile {
         display: block;
     }