feat: responsividade de telas menores concluida

assets/styles/landing-page.css

@@ -180,16 +180,25 @@ header {
 
 footer{
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     width: 100%;
-    height: 128px;
+    height: 130px;
     background-color: #000000;
 }
 
+.social{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
 .social-networks{
-    width: 1.3%;
+    width: 6%;
     margin: 20px;
 }
 
@@ -199,6 +208,7 @@ footer{
 
 footer p{
     color: #ffffff;
+    width: 63%;
 }
 
 @media (max-width: 1024px) {
@@ -213,6 +223,7 @@ footer p{
 
     .banner-top-mob{
         width: 100%;
+        height: 598px;
     }
 
     .network{
@@ -225,7 +236,7 @@ footer p{
     }
     .card, .card-small{
         width: 85%;
-        height: 332px;
+        height: 380px;
     }
 
     .card-img, .img-card-small{
@@ -239,7 +250,14 @@ footer p{
     .computers-area{
         display: grid;
         grid-template-columns: repeat(2,1fr);
+        justify-items: center
     }
+
+    .computers-img{
+        width: 89%;
+        margin: 14px;
+    }
+
     #item1{
         grid-area: 1/2/1/2;
     }
@@ -252,6 +270,30 @@ footer p{
 
     .information-code{
         display: grid;
+        justify-items: center
+    }
+
+    .computer-code{
+        grid-area: 1/1/1/1;
+        width: 100%;
+    }
+
+    .banner-bottom{
+        visibility: hidden;
+        width: 0px;
+        position: relative;
+    }
+
+    .banner-bottom-mob{
+        width: 100%;
+        height: 414px;
+    }
+
+    .information-code p{
+        width: 85%;
+    }
+    .information-code p{
+        width: 85%;
     }
 
 }
@@ -262,4 +304,10 @@ footer p{
         width: 0px;
         position: absolute;
     }
+
+    .banner-bottom-mob{
+        visibility: hidden;
+        width: 0px;
+        position: fixed;
+    }
 }

landing-page.html

@@ -98,17 +98,19 @@
                 </p>
             </div>
         </section>
-        <section class="information-code">
+        <div class="information-code">
             <h1>Lorem ipsum dolor sit amet</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
                 Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
                 Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
                 <figure class="computer-code">
-                    <img src="./assets/images/banner 2.png" alt="comptador ofuscado"/>
+                    <img class="banner-bottom-mob" src="./assets/images/banner 2-mob.png" alt="comptador ofuscado e oculos no cenario"/>
+                    <img class="banner-bottom" src="./assets/images/banner 2.png" alt="comptador ofuscado"/>
                 </figure>
-        </section>
+        </div>
     </main>
     <footer>
+        <div class="social">        
         <a class="social-networks" href="https://www.instagram.com/m3.ecommerce/">
             <img src="./assets/images/instagram.png" alt="icone instagram"/>
         </a>
@@ -118,6 +120,8 @@
         <a class="social-networks" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
             <img src="./assets/images/youtube 2.png" alt="icone youtube"/>
         </a>
+    </div>
+
         <p>
             Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
         </p>