From aba6504f095c586f0da7ad262839e2829792ad33 Mon Sep 17 00:00:00 2001
From: Nicolas Oliveira <110689312+thedevnicolas@users.noreply.github.com>
Date: Wed, 12 Oct 2022 21:44:21 -0300
Subject: [PATCH] Adiciona ajustes finais de responsividade

---
 assets/styles.css | 152 +++++++++++++++++++++++++++++++++-------------
 index.html        |  41 ++++++++-----
 2 files changed, 136 insertions(+), 57 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index 7a8f141..942a1df 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,24 +1,20 @@
-/* ---------- INITIAL ---------- */
-
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: 'Inter' sans-serif;
+    color: #000;
 }
 
-img{
-    max-width:100%;
-    height:auto;
-  }
-
 body {
     color: #000000;
     font-family: 'Inter', sans-serif;
 }
 
-/* ---------- HEADER E MAIN BANNER ---------- */
+/* HEADER E MAIN BANNER */
 
 .page__header {
+    width: 100%;
     display: flex;
     justify-content: center;
     background: #000000;
@@ -39,7 +35,7 @@ body {
 }
 
 
-/* ---------- TOP TEXTS ---------- */
+/* TOP TEXTS */
 
 .top__text {
     display: flex;
@@ -80,13 +76,14 @@ body {
 }
 
 
-/* ---------- TOP CARDS ---------- */
+/* TOP CARDS */
 
 .top__cards {
     display: grid;
     grid-template-columns: repeat(3, max-content);
     gap: 20px;
     justify-content: center;
+    width: 100%
 }
 
 .top__card {
@@ -96,7 +93,6 @@ body {
     padding: 26px 26px 34px; 
     background: #FFFFFF;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-    width: 100%;
 }
 
 .top__card-image {
@@ -112,7 +108,7 @@ body {
 }
 
 
-/* ---------- BOTTOM CARDS ---------- */
+/* BOTTOM CARDS */
 
 .bottom__cards {
     background: #E0E0E0;
@@ -137,7 +133,6 @@ body {
     height: auto;
 }
 
-
 .bottom__card-image {
     display: block;
 }
@@ -147,13 +142,15 @@ body {
 }
 
 
-/* ---------- BOTTOM INFOCARDS ---------- */ 
+/* BOTTOM INFOCARDS */ 
 
 .bottom__infocards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     padding: 0 76px 108px;
+    width: 100%;
+
 }
 
 .bottom__infocard {
@@ -163,7 +160,6 @@ body {
     padding: 33px 32px 65px; 
     background: #FFFFFF;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
-    min-width: 22%;
 }
 
 .bottom__infocard-image {
@@ -172,13 +168,13 @@ body {
 }
 
 .bottom__infocard-description {
-    min-width: 15%;
+    max-width: 300px;
     font-size: 16px;
     text-align: center;
 }
 
 
-/* ---------- BOTTOM BANNER CONTAINER ---------- */
+/* BOTTOM BANNER CONTAINER */
 
 .bottom__banner-container {
     display: flex;
@@ -212,7 +208,8 @@ body {
     line-height: 24px;
 }
 
-/* ---------- FOOTER ----------- */
+
+/* FOOTER */
 
 .footer {
     display: flex;
@@ -226,10 +223,7 @@ body {
     display: flex;
     list-style-type: none;
     margin-bottom: 16px;
-}
-
-.footer__icon {
-    margin: 0 8px;
+    gap: 20px;
 }
 
 .footer__text {
@@ -244,7 +238,7 @@ body {
 
 @media screen and  (max-width: 1024px) {
 
-    /* ---------- MAIN BANNER  ---------- */
+    /* MAIN BANNER  */
     .main__banner-desktop {
         display: none;
     }
@@ -263,7 +257,7 @@ body {
     }
 
 
-    /* ---------- TOP TEXTS ---------- */
+    /* TOP TEXTS */
     .top__text {
         flex-direction: column;
         padding: 88px 32px 90px;
@@ -293,24 +287,15 @@ body {
         text-align: center;
     }
 
-    /* ---------- TOP CARDS ---------- */
-    .top__cards {
-        display: grid;
-        grid-template-columns: repeat(3, max-content);
-        gap: 20px;
-        justify-content: center;
-    }
 
-    .top__card {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 26px 26px 34px; 
+    /* TOP CARDS */
+    .top__infocards {
         width: 100%;
     }
-    
+
     .top__card-image {
-        max-width: 34%;
+        align-items: center;
+        width: 34%;
     }
 
     /* ---------- BOTTOM CARDS ---------- */
@@ -344,6 +329,7 @@ body {
         gap: 20px;
         justify-content: center;
         padding: 0 0;
+        width: 100%;
     }
     
     .bottom__infocard {
@@ -351,11 +337,11 @@ body {
         flex-direction: column;
         align-items: center;
         padding: 26px 26px 34px; 
-        width: 100%;
     }
 
     .bottom__infocard-image {
-        max-width: 34%;
+        align-items: center;
+        width: 34%;
     }
 
     /* ---------- BOTTOM BANNER CONTAINER ---------- */
@@ -385,6 +371,9 @@ body {
      /* ---------- FOOTER ---------- */
     .page__footer {
         padding-bottom: 26px;
+        display: flex;
+        flex-direction: center;
+        align-items: center;
     }
 
     .footer__text {
@@ -394,13 +383,13 @@ body {
 }
 
 
-@media screen and (min-width: 769px) and (max-width: 1200px) {
+@media screen and (min-width: 769px) and (max-width: 1024px) {
     .top__cards {
-        grid-template-columns: repeat(2, max-content);
+        grid-template-columns: repeat(2, 1fr);
     }
 
     .bottom__infocards {
-        grid-template-columns: repeat(2, max-content);
+        grid-template-columns: repeat(2, 1fr);
     }
 }
 
@@ -418,3 +407,80 @@ body {
 }
 
 
+@media screen and  (min-width: 2560px) {
+
+/* TOP TEXTS */
+
+    .top__text {
+        padding: 84px 30px 179px;
+        gap: 72px;
+    }
+    
+    .top__infocard-subtitle {
+        font-size: 64px;
+    }
+    
+    .top__infocard-title {
+        margin-bottom: 48px;
+        font-size: 96px;
+    }
+    
+    .top__infocard-description {
+        line-height: 48px;
+        font-size: 32px;
+    }
+
+
+/* BOTTOM BANNER CONTAINER */
+
+    .bottom__title {
+        font-size: 64px;
+    }
+
+    .bottom__description {
+        font-size: 32px;
+        line-height: 48px;
+    }
+
+
+    /* FOOTER */
+
+    .footer__text {
+
+        line-height: 24px;
+        font-size: 20px;
+    }
+
+
+    /* TOP CARDS */
+
+    .top__cards {
+        display: grid;
+        grid-template-columns: repeat(3, max-content);
+        gap: 20px;
+        justify-content: center;
+        width: 100%
+    }
+
+    .top__card-image {
+        display: block;
+        margin-bottom: 26px;
+    }
+
+    .top__card-description {
+        font-size: 32px;
+        line-height: 48px;
+    }
+
+    
+    /* BOTTOM INFOCARDS */ 
+
+    .bottom__infocard-description {
+        max-width: 300px;
+        font-size: 32px;
+
+    }
+}
+
+
+
diff --git a/index.html b/index.html
index 972d721..6ce81b4 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=], initial-scale=1.0">
+
     <title>Desafio 1 - M3 Academy</title>
 
     <link rel="stylesheet" href="./assets/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 </head>
+
+
 <body>
     <header class="page__header">
         <a href="/">
@@ -16,11 +22,13 @@
     </header>
 
     <main>
+        <!-- HEADER PRINCIPAL -->
         <figure>
             <img class="main__banner main__banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal Desktop">
             <img class="main__banner main__banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal Mobile">
         </figure>
 
+        <!-- TEXTOS DO TOPO -->
         <section class="top__text">
             <div class="top__infocard-text">
                 <h2 class="top__infocard-subtitle">Lorem ipsum</h2>
@@ -28,11 +36,13 @@
                 <p class="top__infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
             </div>
 
+            <!-- IMAGEM DO TOPO -->
             <figure>
                 <img class="top__infocard-image" src="./assets/images/top-image.png" alt="Imagem de 3 monitores">
             </figure>
             </section>
 
+            <!-- 3 CARDS DO TOPO COM DESCRIÇÕES -->
             <section class="top__cards">
                 <figure class="top__card">
                     <img class="top__card-image" src="./assets/images/shop-icon.png" alt="Imagem de um shop icon do primeiro card do topo">
@@ -48,6 +58,7 @@
                 </figure>
             </section>
 
+            <!-- 3 IMAGENS DE BAIXO -->
             <section class="bottom__cards">
                 <div class="bottom__cards-container">
                     <figure class="bottom__card bottom__card-1">
@@ -64,26 +75,27 @@
                 </div>
             </section>
 
+            <!-- 4 CARDS DE BAIXO COM DESCRIÇÕES -->
             <section class="bottom__infocards">
-                <div class="bottom__infocard">
+                <figure class="bottom__infocard">
                     <img class="bottom__infocard-image" src="./assets/images/money-icon.png" alt="Icon de dinheiro do primeiro card de baixo">
-                    <p class="bottom__infocard-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.  </p>
-                </div>
-                <div class="bottom__infocard">
+                    <figcaption class="bottom__infocard-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.  </p>
+                </figure>
+                <figure class="bottom__infocard">
                     <img class="bottom__infocard-image" src="./assets/images/handcoin-icon.png" alt="Icone de uma mão com uma moeda do segundo card de baixo">
-                    <p class="bottom__infocard-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.  </p>
-                </div>
-                <div class="bottom__infocard">
+                    <figcaption class="bottom__infocard-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.  </p>
+                </figure>
+                <figure class="bottom__infocard">
                     <img class="bottom__infocard-image" src="./assets/images/laptop-icon.png" alt="Icone de um laptop do terceiro card de baixo">
-                    <p class="bottom__infocard-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.  </p>
-                </div>
-                <div class="bottom__infocard">
+                    <figcaption class="bottom__infocard-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.  </p>
+                </figure>
+                <figure class="bottom__infocard">
                     <img class="bottom__infocard-image" src="./assets/images/smartphone-icon.png" alt="Icone de um celulara do quarto card de baixo">
-                    <p class="bottom__infocard-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.  </p>
-                </div>
-                </div>
+                    <figcaption class="bottom__infocard-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.  </p>
+                </figure>
             </section>
 
+            <!-- BANNER DE BAIXO COM TEXTO -->
             <section class="bottom__banner-container">
                 <div class="bottom__text">
                     <h2 class="bottom__title">Lorem ipsum dolor sit amet</h2>
@@ -97,6 +109,7 @@
                 </figure>
             </section>
 
+            <!-- FOOTER -->
             <footer class="footer">
                 <ul class="footer__icons">
                     <li class="footer__icon">