feat: Cria regiao da pagina com paragrafo e imagem de tres computadores

index.html

@@ -29,6 +29,20 @@
                 <img class="banner-img banner-img-mobile" src="assets/banner/banner-header-mobile.png" alt="Notebook aberto com codigos HTML e CSS.">
             </figure>
         </div>
+        <!-- CONTAINER ABAIX DO BANNER -->
+        <div class="container-midle">
+            <section class="container-midle-flex">
+                <h2 class="container-midle-subtitle">Lorem ipsum</h2>
+                <h1 class="container-midle-title">Dolor sit amet</h1>
+                <p class="container-midle-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
+                <img src="assets/img/midle-computer.png" alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas." class="container-midle-img" />
+                <!-- <figure class="container-midle-banner">
+                </figure> -->
+                <!-- <div class="container-midle-card">
+
+                </div> -->
+            </section>
+        </div>
     </main>
 </body>
 

style/style.css

@@ -48,6 +48,58 @@ main {
     display: none;
 }
 
+
+/* AREA ABAIXO DO BANNER */
+
+.container-midle {
+    width: 100%;
+}
+
+.container-midle-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 74px;
+    border: 2px solid red;
+}
+
+.container-midle-title {
+    width: 22%;
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    text-transform: uppercase;
+}
+
+.container-midle-subtitle {
+    width: 11.75%;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;
+}
+
+.container-midle-paragraph {
+    width: 40%;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 30px 0 74px;
+}
+
+
+/* .container-midle-banner {
+    max-width: 315px;
+} */
+
+.container-midle-img {
+    border: 1px solid;
+    width: 16%;
+    height: 16%;
+    display: block;
+}
+
 @media (max-width:1024px) {
     /* BANNER MOBILE */
     .banner-img-desktop {