assets/Css/Styles.css

@@ -114,10 +114,97 @@ background: #000000;
     display: block;
     width: 100%;
 }
+.BottomCards{
+    display: grid;
+    grid-template-columns: 22% 22% 22% 22%;
+    padding: 126px 0 108px;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+}
+.bottomcard{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    padding: 32px 0 0;
+    
+}
+.BottomImage{
+    margin-bottom: 14px;
+}
+.imgdescripton{
+    padding: 0px 32px 65px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+}
+.BotomDescription{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 108px 0 50px;
+}
+.BlockText{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 158px;
+    width: 550px;
+}
+.BotdescriptionTitlte{
+    width: 420px;
+    height: 39px;
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 40px;
+    text-align: center;
+}
+.Botdescription{
+    width: 550px;
+    height: 120px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
 
 
+}
+.downBannerBox{
+    display: flex;
+    justify-content: center;
+    padding: 50px 0 106px;
+}
+.lastBanner{
+    width: 70%;
+}
+.footer{
+    padding: 38px 0;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #000000;
+}
+.icons{
+    display: flex;
+    list-style: none;
+}
+.icon{
+    margin: 0 8px 16px;
+}
+.footerText{
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: uppercase;
+        color: #BDBDBD; 
+    }
 @media screen  and (max-width: 1023px) {
-        .MainBannerDesktop{
+        .MainBannerDesktop, .footerDesk{
             display: none;
         }
         .TopInfocard{
@@ -144,12 +231,32 @@ background: #000000;
             max-width: 358px;
             max-height: 116px;
         }
+        .BotomDescription{
+            padding: 50px 32px 87px;
+        }
+       
+        .BotdescriptionTitlte{
+            font-size: 24px;
+            line-height: 30px;
+        }
+        .Botdescription{
+            font-size: 16px;
+            line-height: 24px;
+            padding: 0 28px;
+            max-width: 358px;
+            max-height: 116px;
+        }
         .Cards{
             grid-template-columns: 1fr;
             padding: 90px 32px ;
             gap:24px;
             justify-items: center;
         }
+        .BottomCards {
+            grid-template-columns: 1fr;
+            padding: 80px 22px 100px;
+        }
+
         .wrapper{
             gap: 14px;
             grid-template-columns: none;
@@ -167,9 +274,18 @@ background: #000000;
         .img3{
             grid-area:img3;
         }
+        .BotomDescription{
+            justify-items: center;
+            justify-content: center;
+            align-items: center;
+        }
+        .footerText{
+            max-width: 280px;
+            text-align: center;
+        }
 }
 @media screen and (min-width: 1024px) {
-    .MainBannerMobile{
+    .MainBannerMobile,.footermob{
         display: none;
     }
 }

index.html

@@ -70,7 +70,83 @@
                         </figure>
                     </div>
                 </div>
+                <div class="BottomCards">
+                    <figure class="bottomcard" >
+                        <img class="BottomImage" src="/assets/Image/money (1) 2.png" alt="icone de Money">
+                        <figcaption class="imgdescripton">
+                            Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                            Cras euismod enim non dui fringilla interdum. 
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Cras euismod enim non dui fringilla interdum. 
+                        </figcaption>
+                    </figure>
+                    <figure class="bottomcard">
+                        <img class="BottomImage" src="/assets/Image/coin 2.png" alt="icone de Dinheiro">
+                        <figcaption class="imgdescripton">
+                            Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                            Cras euismod enim non dui fringilla interdum. 
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Cras euismod enim non dui fringilla interdum. 
+                        </figcaption>
+                    </figure>
+                    <figure class="bottomcard">
+                        <img class="BottomImage" src="/assets/Image/laptop 1.png" alt="icone de Laptop">
+                        <figcaption class="imgdescripton">
+                            Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                            Cras euismod enim non dui fringilla interdum. 
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Cras euismod enim non dui fringilla interdum. 
+                        </figcaption>
+                    </figure>
+                    <figure class="bottomcard">
+                        <img class="BottomImage" src="/assets/Image/Group.png" alt="icone de Celular">
+                        <figcaption class="imgdescripton">
+                            Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                            Cras euismod enim non dui fringilla interdum. 
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Cras euismod enim non dui fringilla interdum. 
+                        </figcaption>
+                    </figure>
+                </div>
+                <section class="BotomDescription">
+                    <div class="BlockText">
+                        <h2 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h2>
+                        <p class="Botdescription">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>
+                    </div>
+                </section>
+                <figure class="downBannerBox">
+                    <img  class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
+                    <img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile">
+                </figure>
         </main>
-        <footer></footer>
+        <footer>
+            <div class="footer">
+                <ul class="icons">
+                    <li class="icon" >
+                        <a href="#" target="_blank">
+                            <img src="/assets/Image/instagram.png" alt="icone do instragram">
+                        </a>
+                    </li>
+                    <li class="icon">
+                        <a href="#" target="_blank">
+                            <img src="/assets/Image/facebook.png" alt="icone do facebook">
+                        </a>
+                    </li>
+                    <li class="icon">
+                        <a href="#" target="_blank">
+                            <img src="/assets/Image/youtube 2.png" alt="icone do youtube">
+                        </a> 
+                    </li>
+                </ul>
+                <p class="footerText">Copyright © 2020 - Loja  Comércio Eletrônico | CNPJ: 000.000.000/0001-00</p>
+            </div>
+        </footer>
     </body>
 </html>