feat: adicionando banner final

index.html

@@ -118,6 +118,19 @@
                 </div>
             </div>         
         </div>
+        <section class="banner-final">
+            <figure>
+                <div class="banner-final-text">
+                    <h3>Lorem ipsum dolor sit amet</h3>
+                    <figcaption>
+                        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.
+                    </figcaption>
+                </div>              
+                <img src="./assets/imgs/banner-final.png" alt="">
+            </figure>
+        </section>
     </main>
 </body>
 </html>

styles/main.css

@@ -166,6 +166,50 @@
     color: #000000;
 }
 
+/* seção final com título, texto e imagem */
+.banner-final {
+    width: 100%;
+    padding: 36px 7% 116px 7%;
+}
+
+.banner-final figure {
+    max-width: 1360px;
+    height: 484px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    margin: auto;
+}
+
+.banner-final figure img {
+    width: 100%;
+    height: 276px;
+    object-fit: cover;
+    object-position: 25% 55%;
+}
+
+.banner-final figure .banner-final-text h3 {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+    text-align: center;
+    color: #000000;
+}
+
+.banner-final .banner-final-text figcaption {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #000000;
+    margin-bottom: 50px;
+    max-width: 550px;
+    width: 100%;
+    text-align: center;
+}
+
 @media screen and (max-width: 1025px) {
     .background-main figure img {
         height: 100%;
@@ -289,9 +333,56 @@
         gap: 16px;
     }
 
+    .first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img {
+        margin-bottom: 15px;
+    }
+
+    .banner-final {
+        width: 100%;
+        padding: 0;
+    }
+
+    .banner-final figure {
+        max-width: 414px;
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column-reverse;
+        position: relative;
+        margin: auto;
+    }
+
+    .banner-final figure img {
+        width: 100%;
+        height: auto;
+        margin-bottom: 50px;
+    }
+
+    .banner-final-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .banner-final figure .banner-final-text h3 {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 29px;
+        margin-bottom: 9px;
+    }
+
+    .banner-final .banner-final-text figcaption {
+        margin-bottom: 87px;
+        max-width: 350px;
+        width: 100%;
+    }
+
 }
 
-@media screen and (max-width: 281px){
+@media screen and (max-width: 281px) {
     .cards-macbook {
         height: auto;
     }
@@ -308,6 +399,11 @@
     .bottom-cards {
         max-height: 1640px;
     }
+
+    .banner-final .banner-final-text figcaption {
+        margin-bottom: 87px;
+        padding: 0 32px 0 32px;
+    }
 }
 
 @media screen and (min-width: 2500px) {