Merge branch 'feature/footer' into development

index.html

@@ -123,6 +123,32 @@
         <img class="lower-section-image lower-section-image-desktop" src="./src/assets/img/lower-section-image-desktop.png" alt="Imagem Principal da Seção Inferior" />
         <img class="lower-section-image lower-section-image-mobile" src="./src/assets/img/lower-section-image-mobile.png" alt="Imagem Principal da Seção Inferior" />
       </section>
+
+      <footer class="page-footer">
+        <ul class="footer-icons">
+          <li class="footer-icon">
+            <a href="#" target="_blank">
+              <img src="./src/assets/img/instagram-icon.png" alt="Ícone do Instagram" />
+            </a>
+          </li>
+
+          <li class="footer-icon">
+            <a href="#" target="_blank">
+              <img src="./src/assets/img/facebook-icon.png" alt="Ícone do Facebook" />
+            </a>
+          </li>
+
+          <li>
+            <a href="#" target="_blank">
+              <img src="./src/assets/img/youtube-icon.png" alt="Ícone do Youtube" />
+            </a>
+          </li>
+        </ul>
+
+        <p class="footer-text">
+          Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+        </p>
+      </footer>
     </main>        
   </body>
 </html>

src/styles/main.css

@@ -201,6 +201,30 @@ body {
   display: block;
 }
 
+/* ----- FOOTER ----- */
+.page-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 38px 0;
+  background: #000000;
+}
+
+.footer-icons {
+  display: flex;
+  gap: 22px;
+  list-style: none;
+  margin-bottom: 16px;
+}
+
+.footer-text {
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 12px;
+  font-size: 10px;
+  color: #BDBDBD;
+}
+
 /* ----- RESPONSIVIDADE ----- */
 @media screen and (min-width: 2500px) {
 
@@ -373,6 +397,14 @@ body {
     grid-area: image;
     display: block;
   }
+
+  .page-footer {
+    padding: 32px 0;
+  }
+
+  .footer-text {
+    max-width: 64%;
+  }
 }
 
 @media screen and (max-width: 320px) {