Merge pull request 'feature/landingPage' (#12) from feature/landingPage into develop/landingPage

Reviewed-on: #12

index.html

@@ -72,39 +72,39 @@
             </figure>
         </div>
 
-        <div class="bottom-cards">
+    </div>
-            <figure class="container-bottom-cards">
-                <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
-                    alt="Primeiro card da parte de baixo" />
-                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
-                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
-            </figure>
 
-            <figure class="container-bottom-cards">
+    <div class="bottom-cards">
-                <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png"
+        <figure class="container-bottom-cards">
-                    alt="Segundo card da parte de baixo" />
+            <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
-                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                alt="Primeiro card da parte de baixo" />
-                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
-            </figure>
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
 
-            <figure class="container-bottom-cards">
+        <figure class="container-bottom-cards">
-                <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
+            <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo card da parte de baixo" />
-                    alt="Terceiro card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
-                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
-                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
-            </figure>
 
-            <figure class="container-bottom-cards">
+        <figure class="container-bottom-cards">
-                <img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
+            <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
-                    alt="Primeiro card da parte de baixo" />
+                alt="Terceiro card da parte de baixo" />
-                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
-                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
-            </figure>
+        </figure>
-        </div>
+
+        <figure class="container-bottom-cards">
+            <img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
+                alt="Primeiro card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
     </div>
 
     <section class="bottom-infocards">
@@ -125,10 +125,35 @@
             <img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
                 alt="Banner infocard mobile">
         </figure>
-
     </section>
 </main>
 
+<footer class="footer">
+    <ul class="container-footer-icons">
+        <li class="footer-icon">
+            <a href="#" target="_blank">
+                <img src="assets/imgs/footer-insta.png" alt="Icone instagram">
+            </a>
+        </li>
+
+        <li class="footer-icon">
+            <a href="#" target="_blank">
+                <img src="assets/imgs/footer-face.png" alt="Icone facebook">
+            </a>
+        </li>
+
+        <li class="footer-icon">
+            <a href="#" target="_blank">
+                <img src="assets/imgs/footer-yt.png" alt="Icone youtube">
+            </a>
+        </li>
+    </ul>
+    <p class="footer-text">
+        Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+    </p>
+
+</footer>
+
 <body>
 
 </body>

style/colors.css

@@ -3,4 +3,5 @@
   --white: #fff;
   --bg-light-gray: #e5e5e5;
   --middlebg-gray: #e0e0e0;
+  --letter-footer: #bdbdbd;
 }

style/footer.css

@@ -0,0 +1,38 @@
+.footer {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background: var(--black);
+  flex-direction: column;
+  padding: 38px 0;
+  max-width: 100%;
+}
+
+.container-footer-icons {
+  display: flex;
+  list-style: none;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+
+.footer-icon {
+  width: 20%;
+}
+
+.footer-text {
+  color: var(--letter-footer);
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+
+@media (max-width: 414px) {
+  .footer {
+    max-width: 100%;
+    padding: 32px 77px;
+  }
+
+  .footer-text {
+    width: 63%;
+  }
+}

style/main.css

@@ -46,6 +46,7 @@
   justify-content: center;
   width: 100%;
   gap: 21px;
+  margin-bottom: 50px;
 }
 
 .main .top-card {
@@ -75,8 +76,7 @@
 }
 
 .main .container-middle-cards {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(3, 1fr);
   gap: 39px;
   justify-content: center;
   position: relative;
@@ -237,14 +237,9 @@
   .main .container-middle-cards {
     padding: 0 23px;
   }
-}
-
-@media (max-width: 768px) {
-  .main .middle-cards {
-    margin-top: 44px;
-  }
 
   .main .container-middle-cards {
+    display: grid;
     grid-template-columns: repeat(2, 1fr);
     column-gap: 14px;
     margin-bottom: 80px;
@@ -258,6 +253,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  .main .middle-cards {
+    margin-top: 44px;
+  }
+}
+
 @media (max-width: 480px) {
   .main .second-img-banner {
     grid-area: 1/1;

style/style.css

@@ -3,3 +3,4 @@
 @import url("colors.css");
 @import url("header.css");
 @import url("main.css");
+@import url("footer.css");