feat: cria area do banner midle, desktop e mobile

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

index.html

@@ -21,6 +21,7 @@
         </a>
     </header>
     <main>
+        <!-- AREA DO BANNER PRINCIPAL -->
         <div>
             <figure>
                 <img src="assets/bannerPrincipal.png" alt="Computador aberto com codigos de programação"
@@ -29,6 +30,7 @@
                     class="banner-principal banner-principal-mobile" />
             </figure>
         </div>
+        <!-- AREA DO INFOCARD  -->
         <div class="container-infocard">
             <div class="infocard-text">
                 <h2>Lorem ipsum</h2>
@@ -39,6 +41,7 @@
             </div>
             <img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
         </div>
+        <!-- AREA DO CONTEINER DE 3 ICONES -->
         <div class="container-icones">
             <div class="container-cards">
                 <div class="container-card1">
@@ -67,7 +70,15 @@
                 </div>
             </div>
         </div>
-
+        <!-- AREA DO BANNER SEGUNDO BANNER -->
+        <div>
+            <figure>
+                <img src="assets/bannerCentro.png" alt="Computador semi aberto"
+                    class="banner-midle banner-midle-desktop" />
+                <img src="assets/banner-midle-mobilie.png" alt="Computador semi aberto"
+                    class="banner-midle banner-midle-mobile" />
+            </figure>
+        </div>
     </main>
 </body>
 

style/style.css

@@ -20,8 +20,10 @@ header {
     display: block;
 }
 
-.banner-principal {
+.banner-principal,
+.banner-midle {
     width: 100%;
+    display: block;
 }
 
 .container-infocard {
@@ -125,6 +127,7 @@ header {
     /* Banner Principal */
     .banner-principal-desktop {
         display: none;
+
     }
 
     /* Infocard */
@@ -193,12 +196,20 @@ header {
         grid-area: container-card3;
     }
 
+    /* Banner Midle */
+    .banner-midle-desktop {
+        display: none;
+    }
+
 }
 
 @media (min-width:1024px) {
-    .banner-principal-mobile {
+
+    .banner-principal-mobile,
+    .banner-midle-mobile {
         display: none;
     }
+
 }
 
 @media screen and (min-width:2500px) {