Adiciona o Footer

index.html

@@ -16,6 +16,7 @@
     <header class="header">
       <img src="./img/Logo M3 [branco] (4) 1.png" alt="M3 Logo" />
     </header>
+    <main>
     <section class="banner">
       <img
         src="./img/desktop banner.png" alt="Banner principal" class="banner-desktop"/>
@@ -83,5 +84,30 @@
           Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
       </div>
     </section>
+  </main>
+  <footer class="footer">
+    <div>
+      <ul class="footer-icons">
+        <li>
+          <a href="#" target="_blank">
+            <img src="./img/iglogo.png" alt="Ícone do Instagram">
+          </a>
+        </li>
+        <li>
+          <a href="#" target="_blank">
+            <img src="./img/fblogo.png" alt="Ícone do Facebook">
+          </a>
+        </li>
+        <li>
+          <a href="#" target="_blank">
+            <img src="./img/ytlogo.png" alt="Ícone do Youtube">
+          </a>
+        </li>
+      </ul>
+    </div>
+    <p class="footer-desc">
+      Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
+    </p>
+  </footer>
   </body>
 </html>

styles.css

@@ -146,6 +146,29 @@ body{
   font-size: 32px;
   font: 600;
 }
+.footer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #000000;
+  padding:38px;
+}
+.footer-desc{
+  text-transform: uppercase;
+  list-style: 12px;
+  font-size: 10px;
+  color: #bdbdbd;
+}
+.footer-icons{
+  display: flex;
+  list-style: none;
+  margin-bottom: 16px;
+}
+.footer-icons li{
+  margin: 0 8px;
+}
+
+
 @media screen and (max-width: 414px) {
   .banner-desktop,
   .middle-banner-desktop{
@@ -169,6 +192,14 @@ body{
     grid-template-columns: 1fr;
     gap:16px;
   }
+  .footer{
+    padding-bottom: 26px;
+  }
+  .footer-desc{
+    max-width: 280px;
+    text-align: center;
+  }
+
 }
 
 @media screen and (max-width: 992px) {