Styles/index.css

@@ -24,8 +24,6 @@ body{
     display: none;
 }
 
-
-
 .text-infocard{
     display: flex;
     flex-direction: column;
@@ -88,6 +86,28 @@ body{
     max-height: 104px;
 }
 
+.banner-midle-back{
+    background: #E0E0E0;
+    padding: 0 72px;
+    
+}
+
+.banners-midle{
+    display: flex;
+    gap: 39px;
+}
+
+.banners-midle img{
+    position: relative;
+    top: 62px;
+    
+}
+
+.banner-midle{
+    display: flex;
+    gap: 39px;
+}
+
 
 @media screen and (max-width: 414px){
     .banner-principal-desktop,
@@ -98,19 +118,21 @@ body{
     .infocard-image-mobile{
         display: unset;
     }
+   
 }
 
 @media screen and (max-width: 768px){
-    .text-subtitle{
+    .infocard-subtitle{
         font-size: 20px;
         line-height: 24px;
     }
-    .text-title{
+    .infocard-title{
         font-size: 28px;
         line-height: 34px;
     }
-    .text-description{
+    .infocard-description{
         width: 100%;
+        padding: 0 40px;
     }
     .top-cards{
         flex-direction: column;

index.html

@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
-    <link rel="stylesheet" href="/Styles/index.css"/>
+    <link rel="stylesheet" href="./Styles/index.css"/>
 
     <link href="https: //fonts.googleapis.com/css2? family= Inter:wght@400;500 & display=swap" rel="stylesheet"/>
 
@@ -43,12 +43,11 @@
             </div>
             
             <div class="infocard-image"> 
-                <img  class="infocard-image-desktop"  src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop">
+                <img  class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop">
                 <img  class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile">
             </div>
         </section>
         
-        
         <div class="top-cards">
             <div class="top-card">
                 <img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
@@ -67,7 +66,7 @@
             </div>
 
             <div class="top-card">
-                <img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon">
+                <img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
 
                 <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Cras euismod enim non dui fringilla interdum. 
@@ -75,7 +74,18 @@
             </div>
 
         </div>
-        
+
+        <div class="banner-midle-back">
+            <div class="banners-midle">
+                <div class="banner-midle">
+                    <img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first">
+                    <img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second">
+                </div>
+                <img  src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
+            </div>
+
+        </div>
+
     </main>
 </body>
 </html>