Adicionando icones no rodapé

index.html

@@ -92,7 +92,7 @@
       <section class="bottom-infocard">
        <img class="bottom-infocard-image" src="./assest/bottom-inforcard-image.png" alt="Banner do infocard de baixo">
         <div class="bottom-infocard-text">
-          
+
           <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
           <p class="bottom-infocard-description">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
@@ -103,5 +103,26 @@
       </section>
 
     </main>
+    <footer class="page-footer">
+      <ul class="footer-icons">
+        <li class="footer-icon">
+          <a href="#" target="_blank">
+            <img src="./assest/instagram-icon.png" alt="icone do Instagram"/>
+          </a>
+        </li>
+        <li class="footer-icon">
+          <a href="#" target="_blank">
+            <img src="./assest/facebook-icon.png" alt="icone do Facebook"/>
+          </a>
+        </li>
+        <li class="footer-icon">
+          <a href="#" target="_blank">
+            <img src="./assest/youtube-icon.png" alt="icon do Youtube"/>
+          </a> 
+        </li>
+      </ul>
+      <p class="footer-text">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>
+  
+    </footer>
   </body>
 </html>

main.css

@@ -155,6 +155,30 @@ body {
   line-height: 24px;
 }
 
+.page-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 38px 0 ;
+  background-color: #000000;
+}
+
+.footer-icons {
+  list-style: none;
+  display: flex;
+}
+
+.footer-icon {
+  margin: 0 8px;
+  margin-bottom: 16px;
+}
+
+.footer-text {
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: uppercase;
+  color: #BDBDBD;
+}
 
 @media screen and (max-width: 414px) {
   .main-banner-desktop, .middle-banner-desktop {
@@ -187,6 +211,16 @@ body {
   .bottom-card-description {
     font-size: 14px;
   }
+
+  .page-footer {
+    margin-bottom: 26px;
+    text-align: center;
+  }
+
+  .footer-text {
+    max-width: 280px;
+    text-align: center;
+  }
 }
 
 @media screen and (max-width:992px) {