<feat>(bottom-banner): desktop somente

assets/styles/main.css

@@ -117,12 +117,13 @@ body{
     align-items: center;
     width: 23%;
     padding: 35px 32px 65px;
-    gap: 15px;
+    gap: 17px;
     min-height: 332px;
     background: #FFF;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
 }
 .bottom-figures-image{
+    height: 100%;
     width: 34%;
 }
 .bottom-figcapiton{
@@ -130,6 +131,38 @@ body{
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
+}
+/* bottom-banner */
+.bottom-banner{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 54px 0 106px;
+    gap: 50px;
+}
+.bottom-banner-text{
+    width: 29%;
+    text-align: center;
+}
+.bottom-banner-subtitle{
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+}
+.bottom-banner-describition{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+.bottom-banner-images{
+    width: 71%;
+}
+.bottom-banner-desktop{
+    display: block;
+    width: 100%;
+}
+.bottom-banner-mobile{
+    display: none;
 }
             /* layout 4K */
 @media screen and (min-width: 2500px) {
@@ -204,4 +237,12 @@ body{
     .bottom-figures-card{
         width: 94%;
     }
+    /* bottom-banner */
+    .bottom-banner-desktop{
+        display: none;
+    }
+    .bottom-banner-mobile{
+        display: block;
+        width: 100%;
+    }
 }

index.html

@@ -114,6 +114,18 @@
                 </figure>
             </div>
             
+            <div class="bottom-banner">
+                    <figcaption class="bottom-banner-text">
+                        <h2 class="bottom-banner-subtitle">Lorem ipsum dolor sit amet</h2>
+                        <p class="bottom-banner-describition">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>
+                    </figcaption>
+                <figure class="bottom-banner-images">
+                    <img class="bottom-banner-desktop" src="./assets/imagens/bottom-banner-desktop.png" alt="Banner-do-fundo"/>
+                    <img class="bottom-banner-mobile" src="./assets/imagens/bottom-banner-mobile.png" alt="Banner-do-fundo"/>
+                </figure>
+            </div>
         </main>
     </body>
     </html>