assets/css/main.css

@@ -22,6 +22,39 @@ body{
     display: block;
     width: 100%;
 }
+.botom-cards{
+    margin-top: 140px;
+    background:linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
+}
+.div-wrapper{
+    justify-content: center;
+    gap: 20px;
+    padding: 36px 32px 66px;
+    display: grid;
+    grid-template-columns: repeat(2,max-content);
+    position: relative;
+    top: -60px;
+}
+.botom-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #ffffff;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0,23);
+}
+.botom-card-image{
+    display: block;
+    margin-bottom: 16px;
+}
+.botom-card-description{
+    max-width: 368px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    /* or 150% */
+
+    text-align: center;
+}
 .top-infocard  {
     display: flex;
     align-items: center;
@@ -81,15 +114,29 @@ body{
         display: none;
     } 
 }
+@media screen and (min-width: 415px) {
+    .main-banner-mobile, .mid-banner-desktop{
+        display: none;
+    }
+}
 @media screen and (max-width: 768px) {
     .top-cards{
         grid-template-columns: 1fr;
         padding: 36px 26px;
     }
-}
-@media screen and (min-width: 415px) {
-    .main-banner-mobile, .mid-banner-desktop{
-        display: none;
+    .botom-card{
+        padding: 26px;
+    }
+    .botom-cards{
+        margin-top: 114px;
+        padding: 0 16px;
+    }
+    .botom-card-description{
+        font-size: 14px;
+    }
+    .div-wrapper{
+        grid-template-columns: 1fr;
+        gap: 16px;
     }
 }
 @media  screen and (max-width: 992px) {
@@ -118,6 +165,15 @@ body{
         grid-template-columns: repeat(2,max-content);
         padding: 36px 26px;
     }
+    .div-wrapper{
+        grid-template-columns: repeat(2,max-content);
+        padding: 36px 26px;
+    }
+}
+@media screen and (min-width: 769) and (max-width: 1200){
+    .botom-card-description{
+        max-width:280px;
+    }
 }
 @media screen and (min-width: 993px) and (max-width: 1280px) {
         .top-infocard-text {

index.html

@@ -45,10 +45,31 @@
                             <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="top-card-description">
                         </div>
                 </section>
+                        
                 <section>
                     <img class="mid-banner mid-banner-desktop" src="/assets/Image/mid-banner-desktop.png" alt="Banner Principal desktop"/>
                     <img class="mid-banner mid-banner-mobile""  src="/assets/Image/middle-banner-mobile.png" alt="Banner Principal mobile"/>
                 </section>
+                <section class="botom-cards">
+                    <div class="div-wrapper">
+                        <div class="botom-card">
+                            <img class="botom-card-image"  src="/assets/Image/money (1) 2.png"alt=="icone de notas de dinheiro">
+                            <p class="botom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="botom-card-description">
+                        </div>
+                        <div class="botom-card">
+                            <img class="botom-card-image"  src="/assets/Image/compra.png"alt=="icone de carrinho descrição">
+                            <p class="botom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="botom-card-description">
+                        </div>
+                        <div class="botom-card">
+                            <img class="botom-card-image"  src="/assets/Image/coin 2.png"alt=="icone da segunda moeda">
+                            <p class="botom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="botom-card-description">
+                        </div>
+                        <div class="botom-card">
+                            <img class="botom-card-image"  src="/assets/Image/celular.png"alt=="icone do celular">
+                            <p class="botom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="botom-card-description">
+                        </div>
+                    </div>
+                </section>
         </main>
         <footer></footer>
     </body>