desafio-react-e-typescript/src/components/Footer/Footer.module.scss

@@ -165,3 +165,159 @@
     }
   }
 }
+
+.footer-bottom {
+  background: #000000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 100px;
+  height: 64px;
+
+  @media screen and (min-width: 2500px) {
+    height: 96px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 15px 16px;
+    height: 134px;
+  }
+
+  p {
+    font-family: "Roboto", sans-serif;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: capitalize;
+    color: #ffffff;
+    margin: 0;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+      line-height: 23px;
+    }
+  }
+
+  .first-text {
+    width: 22%;
+    min-width: 234px;
+
+    @media screen and (max-width: 1024px) {
+      display: flex;
+      order: 1;
+      margin: 15px 0;
+      width: 22%;
+      min-width: 234px;
+    }
+  }
+
+  .cards {
+    display: flex;
+    align-items: center;
+
+    .icons {
+      width: 36px;
+      height: 20px;
+      margin-right: 12px;
+
+      @media screen and (min-width: 2500px) {
+        width: 70px;
+        height: 40px;
+      }
+
+      @media screen and (max-width: 428px) {
+        width: 30px;
+        height: 17px;
+      }
+    }
+
+    .divisor {
+      border: 1px solid #c4c4c4;
+      height: 24px;
+      width: 1px;
+    }
+
+    .icon-vtex {
+      width: 55px;
+      height: 34px;
+      margin-left: 12px;
+
+      @media screen and (min-width: 2500px) {
+        width: 106px;
+        height: 66px;
+      }
+
+      @media screen and (max-width: 428px) {
+        max-width: 45px;
+        height: 28px;
+      }
+    }
+  }
+
+  .powered {
+    display: flex;
+    align-items: center;
+
+    @media screen and (min-width: 2500px) {
+      width: 100%;
+      max-width: 404px;
+    }
+
+    @media screen and (max-width: 1024px) {
+      order: 2;
+    }
+
+    .vtexP {
+      width: 45px;
+      height: 16px;
+      margin: 0 13px;
+
+      @media screen and (min-width: 2500px) {
+        width: 84px;
+        height: 30px;
+      }
+    }
+
+    .m3 {
+      width: 28.66px;
+      height: 15.65px;
+      margin-left: 13px;
+
+      @media screen and (min-width: 2500px) {
+        width: 54.95px;
+        height: 30px;
+      }
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .whatsapp-container {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    height: 73px;
+    padding-top: 40px;
+    top: 85%;
+    right: 1%;
+
+    @media screen and (min-width: 2500px) {
+      display: none;
+    }
+
+    button {
+      background: transparent;
+      border: none;
+    }
+
+    img {
+      width: 100%;
+      max-width: 34px;
+      height: 34px;
+    }
+  }
+}