From c9b18843d2587ebb26387a1da0b8d813b030fc8f Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Sat, 8 Oct 2022 20:49:28 -0300
Subject: [PATCH] feat(home): terminei a producao agora, vamos pra correcao

---
 assets/images/facebook-logo.svg  |  3 +
 assets/images/instagram-logo.svg |  5 ++
 assets/images/youtube-logo.svg   |  3 +
 assets/styles/main.css           | 96 ++++++++++++++++++++++++++++----
 index.html                       | 29 +++++++++-
 5 files changed, 125 insertions(+), 11 deletions(-)
 create mode 100644 assets/images/facebook-logo.svg
 create mode 100644 assets/images/instagram-logo.svg
 create mode 100644 assets/images/youtube-logo.svg

diff --git a/assets/images/facebook-logo.svg b/assets/images/facebook-logo.svg
new file mode 100644
index 0000000..411b9bc
--- /dev/null
+++ b/assets/images/facebook-logo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13088 2.31828 9.13088 5.90643V8.62969H6.00164C5.73124 8.62969 5.51227 8.84891 5.51227 9.11932V13.065C5.51227 13.3354 5.73149 13.5544 6.00164 13.5544H9.13088V23.5106C9.13088 23.781 9.34985 24 9.62026 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
+</svg>
diff --git a/assets/images/instagram-logo.svg b/assets/images/instagram-logo.svg
new file mode 100644
index 0000000..b4ca66b
--- /dev/null
+++ b/assets/images/instagram-logo.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
+<path d="M11.9999 6.05847C8.58993 6.05847 5.81577 8.94822 5.81577 12.5003C5.81577 16.0522 8.58993 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.76421 16.7236 7.94515 14.829 7.94515 12.5002C7.94515 10.1711 9.76407 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
+<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
+</svg>
diff --git a/assets/images/youtube-logo.svg b/assets/images/youtube-logo.svg
new file mode 100644
index 0000000..c2ef882
--- /dev/null
+++ b/assets/images/youtube-logo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.98 2.34C22.329 1.182 21.6225 0.969 20.184 0.888C18.747 0.7905 15.1335 0.75 12.003 0.75C8.8665 0.75 5.2515 0.7905 3.816 0.8865C2.3805 0.969 1.6725 1.1805 1.0155 2.34C0.345 3.4965 0 5.4885 0 8.9955C0 8.9985 0 9 0 9C0 9.003 0 9.0045 0 9.0045V9.0075C0 12.4995 0.345 14.5065 1.0155 15.651C1.6725 16.809 2.379 17.019 3.8145 17.1165C5.2515 17.2005 8.8665 17.25 12.003 17.25C15.1335 17.25 18.747 17.2005 20.1855 17.118C21.624 17.0205 22.3305 16.8105 22.9815 15.6525C23.658 14.508 24 12.501 24 9.009C24 9.009 24 9.0045 24 9.0015C24 9.0015 24 8.9985 24 8.997C24 5.4885 23.658 3.4965 22.98 2.34ZM9 13.5V4.5L16.5 9L9 13.5Z" fill="white"/>
+</svg>
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 051df7e..067075a 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -125,30 +125,56 @@ body{
     font-size: 16px;
     line-height: 24px;
 }
+.page-footer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 38px 0 66px;
+    background-color: #000;
+}
+.footer-icons{
+    display: flex;
+    margin-bottom: 17px;
+    gap: 21px;
+    list-style: none;
+}
+.footer-text{
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: uppercase;
+    color: #BDBDBD;
+}
+.footer-text-mobile{
+    display: none;
+}
+/* o incone do youtube ficou um pouco acima do que deveria */
+#youtube-icon{
+    margin-top: 4%;
+}
 
-
-@media screen and (min-width:2500px) {
+@media screen and (min-width:2200px) {
     .header-logo{
         height: 84px;
     }
-        .page-header{
+    .page-header{
         padding: 56px 0
     } 
     .top-infocard-text{
         margin-right: 248px;
         max-width: 52%;
     }
-        .top-infocard-title{
+    .top-infocard-title{
         font-size: 96px;
     }
     .top-infocard-image{
         width: 100%;
         max-width: 550px;
     }
-        .top-infocard-description{
+    .top-infocard-description{
         font-size: 32px;
     }
-        .top-inforcard-subtitle{
+    .top-inforcard-subtitle{
         font-size: 64px;
     }
     .top-card{
@@ -164,10 +190,6 @@ body{
         font-size: 32px;
         line-height: 48px;
     }
-
-}
-
-@media screen and (min-width: 1920px){
     .main-banner-desktop,
     .middler-banner-desktop {
         width: 100%;
@@ -175,7 +197,36 @@ body{
     }
     .top-infocard-description,
     .top-card-description{
+        font-size: 32px;
+    }
+    .bottom-card-description {
+        font-size: 32px;
+        line-height: 48px;
+    }
+    .bottom-infocard-description {
+        font-size: 32px;
+        line-height: 48px;
+    }
+    .bottom-infocard-image {
+        margin-right: 80px;
+    }
+    .bottom-infocard-title {
+        margin-bottom: 36px;
+        font-size: 64px;
+        line-height: 40px;
+    }
+    .footer-icons{
+
+        margin-bottom: 34px;
+        gap: 42px;
+    }
+    .footer-text{
         font-size: 20px;
+        line-height: 24px;
+    }
+    .icons{
+        min-width: 48px;
+        min-height: 16px;
     }
 }
 
@@ -183,6 +234,11 @@ body{
     .top-infocard-text{
         margin-right: 70px;
     }
+    .top-infocard {
+        padding: 80px 96px;
+    }.bottom-card-wrapper {
+        padding: 0 13%;
+    }
 }
 @media screen and (min-width: 769px) and (max-width: 993px) {
     .top-cards{
@@ -254,4 +310,24 @@ body{
     .bottom-infocard-title{
         font-size: 24px;
     }
+    .page-footer{
+        padding-bottom: 26px;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .footer-text{
+        display: none;
+    }
+    .footer-text-mobile{
+        display: flex;
+        max-width: 261px;
+        min-width: 261px;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-align: center;
+        text-transform: uppercase;
+        color: #BDBDBD;
+        }   
 }}
\ No newline at end of file
diff --git a/index.html b/index.html
index a96c365..e52893d 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="pt-br">
     <head>
-        
+
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
@@ -115,5 +115,32 @@
 
             </section>
         </main>
+            <footer class="page-footer">
+                <ul class="footer-icons">
+                    <li>
+                        <a href="#" target="_blank"> 
+                        <img  class="icons" src="./assets/images/instagram-logo.svg" alt="Icone Instagram"/> </a>
+                    </li>
+
+                    <li>
+                        <a href="#" target="_blank"> 
+                        <img class="icons" src="./assets/images/facebook-logo.svg" alt="Icone facebook"/> </a>
+                    </li>
+
+                    <li id="youtube-icon">
+                        <a href="#" target="_blank"> 
+                            <img class="icons" src="./assets/images/youtube-logo.svg" alt="Icone Youtube" /> </a>
+                    </li>
+                </ul>
+
+                <p class="footer-text">
+                    Copyright © 2020 - Loja  Comércio Eletrônico | CNPJ: 000.000.000/0001-00
+                </p>
+                <p class="footer-text-mobile"> <!-- coloquei 2 por causa do "|" do <p> de cima -->
+                    Copyright © 2020 - Loja  Comércio Eletrônico 
+                    CNPJ: 000.000.000/0001-00
+                </p>
+            </footer>
+
     </body>
 </html>
\ No newline at end of file