From 8c151fada73023a067de8095475d1fddbc9291d3 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Thu, 13 Oct 2022 00:14:48 -0300
Subject: [PATCH] feat(home): cria footer desktop e mobile

---
 index.html                        |  26 ++++++++++++++++++++++++
 src/assets/img/facebook-icon.png  | Bin 0 -> 297 bytes
 src/assets/img/instagram-icon.png | Bin 0 -> 493 bytes
 src/assets/img/youtube-icon.png   | Bin 0 -> 348 bytes
 src/styles/main.css               |  32 ++++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+)
 create mode 100644 src/assets/img/facebook-icon.png
 create mode 100644 src/assets/img/instagram-icon.png
 create mode 100644 src/assets/img/youtube-icon.png

diff --git a/index.html b/index.html
index 319e8ea..f53cce4 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/img/facebook-icon.png b/src/assets/img/facebook-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb5779683f34f7a33d8979c0785402e1ecae1532
GIT binary patch
literal 297
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#eV#6kAr*{or(EPcWWeJhdxRm!!7ZVs=K$LV
zMj+AQsUduTBj*6e6wWiDkCX$XV=u4ws+=TxbW`oBw;?GEtE3X$Z#e&cvv!VU<ZkVK
zhYDMD=LlT37hYF!r0`$xomL?RPO+s7+gzm&Uq7UG^RM1g3uj*+z1vFN(>SG+KcqCB
zk*wLKma3OseXXN9^}AY&Lv5&f!G(u8Yon5*TnuX&-!C+^|33E%d+nt6p?f_w&pAgM
m?JPYJx`68g)1CYq4|t7)<^~s)3xooF!r<xZ=d#Wzp$Py1`fIuX

literal 0
HcmV?d00001

diff --git a/src/assets/img/instagram-icon.png b/src/assets/img/instagram-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..10509ad034a07c51fac67c5a0c3fecb423e5a673
GIT binary patch
literal 493
zcmV<J0TTX+P)<h;3K|Lk000e1NJLTq000;O000>X1^@s6D=Y3@00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0fI?HK~#7FtyYV1
zgD?ygnSc%I5g36HvO(D(bOPuEp%cI+X(yl?m<?zrP^CsD3TG2=cy~H1+0v800zd%~
zbCQ<C;&xc^HQ)nvRJb217dLUi=~IjCi=-nNU>gj{i6j&KElHAwgB!(M!;|0`DxLvZ
zH^w(af_zUTJ;|%+7m4{lgI<&)M1cHKmGLOHqv#e?XSNWekgTi-w+lsJr+`=6wCtMT
z#S_@58Tw#ljFBYLtprx}H!^jWPT6}Gc$U~Q0qLdKNAxTo+oX?C#}HVt7ZBbXcO=J6
z1bBZk(glJv;6D)@0=`pFx{W^}f~7u(!=nL@W}wvH)dZB;Kp&S~31PU)IRt0pTSKu=
z8@S>Wm9xH8r-(ODU$Pc&_u#DT)<eGOCR+@H6EM*P%7LGOPm)1|+r`58OcPjXN4=&2
z0{5EstTdurU?<>h@7j4qtKdoCeQh_cCi5{n%NVX~9}riQxuWHwzti2QHFJ&op$<)t
jm#f3L|Dr*Ba~<;!D*GM_2wF(_00000NkvXXu0mjf#kt4i

literal 0
HcmV?d00001

diff --git a/src/assets/img/youtube-icon.png b/src/assets/img/youtube-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a80747c121232d81f3017f12255f286c428d7e9
GIT binary patch
literal 348
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#kDe}$Ar*{or@rNFG7xCve_SugsAk}o;9kI7
z$mCwg3Zx&g>|!isy7OSq^eHVG+pc&0ub9-Vyt9AW?zql0rj*0{X?k;JS$7^SbKHF9
zQuKqp9;Yu~R7jhCX6>$pFDtvIa96&0VgEop++#ziM6}mo1xLY6lNL?=WTm1KHF?>N
zy{4~Ji_&a!&3GQ%JQ!hpeaQ{m%xMolu8r}oOLg48anXgw6jo(Bw<Tdei()1gPZWNg
z`S421nwSsD$NMMW4yt)C@`BCK<+w!G^G2n3(YCfrJ08d^;5K*@bZj#}&u-u48yC%2
qc3i7<WZtJk8~1)He0b(Z1*2R<A@@!_;Tb^BGkCiCxvX<aXaWE+`HVsU

literal 0
HcmV?d00001

diff --git a/src/styles/main.css b/src/styles/main.css
index dee68b1..29c8db1 100644
--- a/src/styles/main.css
+++ b/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) {