index.html

@@ -97,8 +97,7 @@
             </div>
             </section>
         </div>
-        <!-- REGIAO ABAIXO DO BANNER MOSAICO -->
+        <!-- REGIAO ABAIXO DO BANNER MOSAICO(CONTAINER CARD QUADRUPLO) -->
-        <!-- CONTAINER CARD QUADRUPLO-->
         <div class="container-cards container-infocard">
             <div class="card-1">
                 <figure>
@@ -133,7 +132,28 @@
                 </figure>
             </div>
         </div>
-    </main>
-</body>
 
-</html>
+        <div class="bottom-flex">
+            <section class="bottom-text">
+                <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
+                <p class="bottom-paraphase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                    Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
+                </section>
+                <figure>
+                    <img src="assets/banner/banner-footer.png"
+                        alt="imagem de um oculos. de frente para uma tela de computador."
+                        class="botton-img-desktop"></img>
+                </figure>
+
+                <figure>
+                    <img src="assets/banner/banne-footer-mobile.png"
+                        alt="imagem de um oculos. de frente para uma tela de computador."
+                        class="botton-img-mobile"></img>
+                </figure>
+
+            </div>
+        </main>
+    </body>
+    
+    </html>

style/style.css

@@ -26,6 +26,10 @@ header {
     background-color: var(--black);
 }
 
+img {
+    display: block;
+}
+
 .header-logo {
     display: block;
 }
@@ -35,7 +39,6 @@ header {
 
 .banner-img {
     width: 100%;
-    display: block;
 }
 
 .banner-img-mobile {
@@ -192,16 +195,48 @@ header {
     display: block;
 }
 
+
+/* AREA BOTTON, ANTES DO FOOTER */
+.bottom-flex,
+.bottom-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.bottom-subtitle {
+    width: 100%;
+    max-width: 22%;
+    font-weight: 600;
+    font-size: 32px;
+    margin: 0 40% 5px;
+}
+
+.bottom-paraphase {
+    width: 100%;
+    max-width: 28%;
+    margin-bottom: 50px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.botton-img-mobile {
+    display: none;
+}
+
+
+
 /* Medias Queries*/
 @media screen and (min-width:2500px) {
     .container-cards {
         padding: 6% 30% 4%;
     }
 
-    .container-infocard {
 
-        padding: 130px 72px;
-    }
 }
 
 @media screen and (max-width:1024px) {
@@ -313,9 +348,30 @@ header {
         min-height: 90%;
     }
 
+    /* AREA BOTTON, ANTES DO FOOTER */
+    .botton-img-desktop {
+        display: none;
+    }
+
+    .botton-img-mobile {
+        display: block;
+        width: 100%;
+    }
+    .bottom-paraphase{
+    max-width: 84%;
+    }
+    .bottom-subtitle{
+        max-width: 76%;
+        margin: 50px 50px 10px;
+        font-size: 24px;
+        line-height: 30px;
+    }
+    .bottom-flex{
+        flex-direction: column-reverse;
+    }
+    }
 
 
 
 
 
-}