From 902ea407c4eaaa560aa384221c5575e1bf5a099f Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Tue, 11 Oct 2022 20:48:52 -0300
Subject: [PATCH] feat: Cria regiao da pagina com paragrafo e imagem de tres
 computadores

---
 .../{computadores.png => midle-computer.png}  | Bin
 index.html                                    |  14 +++++
 style/style.css                               |  52 ++++++++++++++++++
 3 files changed, 66 insertions(+)
 rename assets/img/{computadores.png => midle-computer.png} (100%)

diff --git a/assets/img/computadores.png b/assets/img/midle-computer.png
similarity index 100%
rename from assets/img/computadores.png
rename to assets/img/midle-computer.png
diff --git a/index.html b/index.html
index b1b7196..244e843 100644
--- a/index.html
+++ b/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>
 
diff --git a/style/style.css b/style/style.css
index 2464afa..15f82fe 100644
--- a/style/style.css
+++ b/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 {