Merge pull request 'feature/4k' (#9) from feature/4k into development

Reviewed-on: #9

assets/css/style.css

@@ -30,10 +30,8 @@ body {
   flex-direction: column;
   align-items: center;
   padding: 74px 0 180px;
-}
-
-.top-inforcard-text {
   max-width: 40%;
+  margin: 0 auto 0;
 }
 
 .top-infocard-subtitle {
@@ -59,10 +57,12 @@ body {
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
-  line-height: 150%;
+  line-height: 24px;
-  margin-bottom: 74px;
   text-align: center;
 }
+.top-infocard-text {
+  margin-bottom: 74px;
+}
 
 .top-cards {
   display: grid;
@@ -136,7 +136,7 @@ body {
   flex-direction: column;
   align-items: center;
   background: #ffffff;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
 }
 
 .bottom-card-image {
@@ -218,11 +218,11 @@ body {
   .top-infocard {
     padding: 73px 32px 90px;
     margin: 0 auto 0;
-  }
-  .top-inforcard-text {
-    margin-bottom: 65px;
     max-width: 100%;
   }
+  .top-infocard-text {
+    margin-bottom: 65px;
+  }
 
   .top-infocard-subtitle {
     font-size: 20px;
@@ -272,6 +272,7 @@ body {
   .bottom-card-description {
     font-size: 14px;
   }
+
   .bottom-infocard {
     flex-direction: column-reverse;
     margin: 0;
@@ -307,3 +308,87 @@ body {
     display: none;
   }
 }
+
+@media screen and (min-width: 2500px) {
+  .page-header {
+    padding: 56px 0;
+  }
+  .header-logo {
+    width: 200%;
+  }
+  .top-infocard-text {
+    margin-bottom: 0;
+  }
+  .top-infocard-subtitle {
+    font-size: 64px;
+    line-height: 78px;
+  }
+  .top-infocard-title {
+    font-size: 96px;
+    line-height: 116px;
+  }
+  .top-infocard-description {
+    font-size: 32px;
+    line-height: 48px;
+    margin-bottom: 100px;
+  }
+
+  .top-infocard-image {
+    height: 600px;
+    margin: 20px 0 84px;
+  }
+  .top-card-description {
+    font-size: 40px;
+    line-height: 40px;
+    margin: 50px 30px;
+  }
+  .top-card-image {
+    height: 200px;
+    margin-top: 100px;
+  }
+  .bottom-card-description {
+    font-size: 33px;
+    line-height: 52px;
+    margin: 25px 100px 73px;
+  }
+  .bottom-card-image {
+    height: 200px;
+    margin-top: 70px;
+  }
+  .bottom-banner-desktop {
+    width: 2500px;
+  }
+
+  .bottom-infocard {
+    margin-bottom: 210px;
+    padding: 200px 280px 0px;
+  }
+  .bottom-infocard-text {
+    width: 1174px;
+  }
+
+  .bottom-infocard-subtitle {
+    font-size: 75px;
+    margin-bottom: 40px;
+    line-height: 80px;
+  }
+
+  .bottom-infocard-description {
+    font-size: 40px;
+    margin-top: 20px;
+    line-height: 50px;
+  }
+
+  .page-footer {
+    padding: 74px 0 74px;
+  }
+
+  .rede-social-imagem {
+    height: 66px;
+    margin-bottom: 12px;
+  }
+
+  .footer-text {
+    font-size: 20px;
+  }
+}

index.html

@@ -35,7 +35,7 @@
         </section>
 
         <section class="top-infocard">
-            <div class="top-inforcard-text">
+            <div class="top-infocard-text">
                 <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
                 <h1 class="top-infocard-title">dolor sit amet</h1>
                 <p class="top-infocard-description">
@@ -45,7 +45,7 @@
                     dui.
                 </p>
             </div>
-            <figure>
+            <figure class="top-infocard-picture">
                 <img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png"
                     alt="Banner do Infocard do Topo">
             </figure>
@@ -164,29 +164,31 @@
                     alt="Banner do Infocard de Baixo Mobile">
             </figure>
         </section>
-        <footer class="page-footer">
+
-            <ul class="footer-icons">
-                <li class="footer-icon">
-                    <a href="#" target="_blank">
-                        <img src="./assets/imagens/instagram-icon.png" alt="Icone do Instagram" />
-                    </a>
-                </li>
-                <li class="footer-icon">
-                    <a href="#" target="_blank">
-                        <img src="./assets/imagens/facebook-icon.png" alt="Icone do Facebook" />
-                    </a>
-                </li>
-                <li class="footer-icon">
-                    <a href="#" target="_blank">
-                        <img src="./assets/imagens/youtube-icon.png" alt="Icone 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>
+    <footer class="page-footer">
+        <ul class="footer-icons">
+            <li class="footer-icon">
+                <a href="#" target="_blank">
+                    <img class="rede-social-imagem" src="./assets/imagens/instagram-icon.png"
+                        alt="Icone do Instagram" />
+                </a>
+            </li>
+            <li class="footer-icon">
+                <a href="#" target="_blank">
+                    <img class="rede-social-imagem" src="./assets/imagens/facebook-icon.png" alt="Icone do Facebook" />
+                </a>
+            </li>
+            <li class="footer-icon">
+                <a href="#" target="_blank">
+                    <img class="rede-social-imagem" src="./assets/imagens/youtube-icon.png" alt="Icone do Youtube" />
+                </a>
+            </li>
+        </ul>
+        <p class="footer-text">
+            Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+        </p>
+    </footer>
 </body>
 
 </html>