Feature: added banner-bottom desktop/mobile

Styles/index.css

@@ -20,7 +20,8 @@ body{
 }
 
 .banner-principal-mobile,
-.infocard-image-mobile{
+.infocard-image-mobile,
+.banner-bottom-mobile{
     display: none;
 }
 
@@ -139,14 +140,20 @@ body{
     align-items: center;
     text-align: center;
     width: 80%;
+    padding: 0 0 50px;
 }
 
-.text-bottom-infocard-title{
+.bottom-infocard-title{
     font-weight: 600;
     font-size: 32px;
     line-height: 39px;
 }
 
+.bottom-infocard img{
+    justify-content: center;
+    width: 70%;
+}
+
 @media screen and (max-width: 414px){
     .banner-principal-desktop,
     .infocard-image-desktop{
@@ -159,6 +166,9 @@ body{
     .text-bottom-infocard{
         width: 100%;
     }
+    .bottom-infocard img{
+        width: 100%;
+    }
 }
 
 @media screen and (max-width: 768px){
@@ -187,10 +197,23 @@ body{
     .bottom-card{
         max-width: 350px;
     }
+    .bottom-infocard{
+        flex-direction: column-reverse;
+    }
+    .text-bottom-infocard{
+        padding: 50px 0 87px;
+    }
+    .banner-bottom-desktop{
+        display: none;
+    }
+    .banner-bottom-mobile{
+        display: unset;
+    }
 }
 
 @media screen and (min-width: 2000px){
-    .infocard-subtitle{
+    .infocard-subtitle,
+    .bottom-infocard-title{
         font-size: 40px;
     }
     .infocard-title{

index.html

@@ -135,6 +135,9 @@
                     Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
                 </p>  
             </div>
+            
+            <img class="banner-bottom-desktop" src="./Assets/Images/Bannner-bottom-desktop.png" alt="Bannner bottom desktop"/>
+            <img class="banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="Banner bottom mobile"/>
         </section>
 
     </main>