From b23c12282b013fd9cfb2d4f4332b00fd7f925d7f Mon Sep 17 00:00:00 2001
From: Humberto Ferro <hcorreiaferro@gmail.com>
Date: Tue, 11 Oct 2022 19:42:51 -0300
Subject: [PATCH] modificar responsividade do mobile

---
 assets/style/main.css | 154 ++++++++++++++++++++-------------
 index-backup.html     |  91 ++++++++++++++++++++
 index.html            | 194 ++++++++++++++++++++++++------------------
 3 files changed, 295 insertions(+), 144 deletions(-)
 create mode 100644 index-backup.html

diff --git a/assets/style/main.css b/assets/style/main.css
index 0e5bb31..16d21c5 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -15,6 +15,46 @@ body{
 }
 .header-logo{
     display: block;
+    width: 100%;
+}
+
+.main-banner-desktop {
+    display: block;
+    width: 100%;
+  }
+  .main-banner-mobile {
+    display: none;   
+  }
+@media (max-width: 1024px) {
+  .main-banner-desktop {
+    display: none;
+  }
+  .main-banner-mobile {
+    display: block;
+    width: 100%;
+  }
+}
+  @media screen and (max-width:1024px) {
+    .top-infocard{
+        padding: 65px 0 90px;
+        flex-direction: column;
+        
+    }
+    
+    .top-infocard-subtitle{
+        font-size: 20px;
+    }
+    .top-infocard-title{
+        font-size: 28px;
+        margin-bottom: 20px;
+    }
+    .top-infocard-test{
+        margin: 0 0 66px
+    }
+    .top-infocard-image{
+        max-width: 240px;
+        width: 100%;
+    }
 }
 
 .top-infocard{
@@ -24,9 +64,7 @@ body{
     gap: 72px;
     flex-direction: column;
     padding: 84px 38px 179px;
-    
-
-} 
+}
 .top-infocard-test{
     width: 40%;
     margin: 0 auto;
@@ -40,6 +78,7 @@ body{
 .top-infocard-description{
     font-size: 16px;
     line-height: 24px;
+    text-align: center;
 }
 .top-infocard-title{
     text-transform: uppercase;
@@ -52,14 +91,7 @@ body{
     text-align: center;
 }
 
-.main-banner-desktop {
-    display: block;
-    width: 100%;
-  }
-  .main-banner-mobile {
-    display: none;   
-  }
-  .top-cards{
+.top-cards{
     display: grid;
     grid-template-columns: repeat(3, max-content);
     background: #F0F0F0;
@@ -75,6 +107,7 @@ body{
     align-items: center;
     padding: 26px 26px 34px;
     
+    
   }
   .top-card-image{
     display: block;
@@ -86,7 +119,15 @@ body{
     line-height: 24px;
     font-size: 16px;
   }
-  .cards-desktop{
+
+  @media screen and (max-width:1024px){
+    .top-cards{
+        grid-template-columns: 1fr;
+        padding: 90px 32px 80px;
+    }
+}
+
+.cards-desktop{
     padding: 0 72px;
     margin: 80px 0 190px;
     background-color: #E0E0E0;
@@ -114,6 +155,7 @@ body{
     grid-column: initial;
 
   }
+
   .bottom-cards{ 
     display: grid;
     grid-template-columns: repeat(4, max-content);
@@ -144,7 +186,48 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
  }
+ .bottom-description{
+    max-width: 600px;
+    color: #000;
+ }
+ .bottom-subtitle{
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+    text-align: center;
+ }
+ .bottom-descriptions{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
+@media screen and (max-width: 1024px){
+    .bottom-cards{
+        grid-template-columns: 1fr;
+        padding: 80px 24px 98px;
+    }
+
+}
+
+@media screen and (min-width: 1024px) and (max-width: 2048px){
+    .bottom-cards{
+        grid-template-columns: 1fr 1fr;
+        padding: 80px 24px 98px;
+    }
+  
+  }
+
+.bottom-text{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+ }
+
  .bottom-description{
     max-width: 550px;
  }
@@ -159,51 +242,4 @@ body{
     font-size: 16px;
     line-height: 24px;
     text-align: center;
-}
-@media (max-width: 1024px) {
-  .main-banner-desktop {
-    display: none;
-  }
-  .main-banner-mobile {
-    display: block;
-    width: 100%;
-  }
-
-}
-@media screen and (max-width:1024px) {
-    .top-infocard{
-        padding: 65px 0 90px;
-        flex-direction: column;
-        
-    }
-    
-    .top-infocard-subtitle{
-        font-size: 20px;
-    }
-    .top-infocard-title{
-        font-size: 28px;
-        margin-bottom: 20px;
-    }
-    .top-infocard-test{
-        margin: 0 0 66px
-    }
-    .top-infocard-image{
-        max-width: 240px;
-        width: 100%;
-    }
-}
-@media screen and (max-width:1024px){
-    .top-cards{
-        grid-template-columns: 1fr;
-        padding: 90px 32px 80px;
-    }
-@media screen and (max-width: 1024px){
-    .bottom-cards{
-        grid-template-columns: 1fr;
-        padding: 80px 24px 98px;
-    }
-
-}
-    
-    
 }
\ No newline at end of file
diff --git a/index-backup.html b/index-backup.html
new file mode 100644
index 0000000..3a3423b
--- /dev/null
+++ b/index-backup.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <meta charset="UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Page M3 Academy</title>
+        <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 &family= Roboto+Mono:wght@100 & family= Shadows+Into+Light & display=swap" rel="stylesheet">
+        <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@600 &family= Roboto+Mono:wght@100 & display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="assets/style/main.css"/>
+    </head>
+    <body>
+        <header class="page-header">
+            <a href="/">
+                <img class="header-logo" src="assets/image/Logo-M3Academy 1.svg" alt="Logo M3 Academy">
+            </a>
+        </header>
+        <div>
+        <main>
+            <section>
+                <img class="main banner main-banner-desktop" src="assets/image/main-banner-desktop.png" alt="banner principal desktop"/>
+                <img class="main banner main-banner-mobile" src="assets/image/main-banner-mobile.png" alt="banner principal mobile"/>
+            </section>
+            <section class="top-infocard">                 
+                    <div class="top-infocard-test">
+                        <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+                        <h1 class="top-infocard-title">dolor sit amet</h1>
+                        <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>              
+                    <img class="top-infocard-image" src="assets/image/top-infocard-image.png" alt="Banner do infocard do topo"/>                
+            </section>
+            <section class="top-cards">
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-01.png" alt="Imagem do primeiro card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-02.png" alt="Imagem do segundo card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-03.png" alt="Imagem do terceiro card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                
+
+            </section>
+            <section class="cards-desktop">
+                <div class="card-dentro">
+                    <figure class="card-desktop card-01">
+                        <img class="image-card-desktop" src="assets/image/image-desktop01.png" alt="Imagem do primeiro card"/>
+                    </figure>
+                    <figure class= "card-desktop card-02">
+                        <img class="image-card-desktop" src="assets/image/image-desktop02.png" alt="Imagem do segundo card"/>
+                    </figure> 
+                    <figure class= "card-desktop card-03">
+                        <img class="image-card-desktop" src="assets/image/image-desktop03.png" alt="Imagem do terceiro card"/>
+                    </figure>
+                </div>
+            </section>
+            <section class="bottom-cards">
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-01.png" alt="Imagem do primeiro card de baixo">
+                    <p class="bottom-card-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-card">
+                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-02.png" alt="Imagem do segundo card de baixo">
+                    <p class="bottom-card-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-card">
+                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-03.png" alt="Imagem do terceiro card de baixo">
+                    <p class="bottom-card-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-card">
+                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-04.png" alt="Imagem do quarto card de baixo">
+                    <p class="bottom-card-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>
+            </section>
+            <section class="bottom-text">
+                <div class="bottom-description">
+                    <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
+                    <p class="bottom-descriptions">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>
+                </div>
+                
+            </section>
+        </main>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 27fa5ba..0c6741a 100644
--- a/index.html
+++ b/index.html
@@ -1,90 +1,114 @@
 <!DOCTYPE html>
 <html lang="pt-br">
-    <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <meta charset="UTF-8"/>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <title>Page M3 Academy</title>
-        <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 &family= Roboto+Mono:wght@100 & family= Shadows+Into+Light & display=swap" rel="stylesheet">
-        <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@600 &family= Roboto+Mono:wght@100 & display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="assets/style/main.css"/>
-    </head>
-    <body>
-        <header class="page-header">
-            <a href="/">
-                <img class="header-logo" src="assets/image/Logo-M3Academy 1.svg" alt="Logo M3 Academy">
-            </a>
-        </header>
-        <main>
-            <section>
-                <img class="main banner main-banner-desktop" src="assets/image/main-banner-desktop.png" alt="banner principal desktop"/>
-                <img class="main banner main-banner-mobile" src="assets/image/main-banner-mobile.png" alt="banner principal mobile"/>
-            </section>
-            <section class="top-infocard">                 
-                    <div class="top-infocard-test">
-                        <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
-                        <h1 class="top-infocard-title">dolor sit amet</h1>
-                        <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>              
-                    <img class="top-infocard-image" src="assets/image/top-infocard-image.png" alt="Banner do infocard do topo"/>                
-            </section>
-            <section class="top-cards">
-                <div class="top-card">
-                    <img class="top-card-image" src="assets/image/Top-card-image-01.png" alt="Imagem do primeiro card do topo"/>
-                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
-                </div>
-                <div class="top-card">
-                    <img class="top-card-image" src="assets/image/Top-card-image-02.png" alt="Imagem do segundo card do topo"/>
-                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
-                </div>
-                <div class="top-card">
-                    <img class="top-card-image" src="assets/image/Top-card-image-03.png" alt="Imagem do terceiro card do topo"/>
-                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
-                </div>
-                
 
-            </section>
-            <section class="cards-desktop">
-                <div class="card-dentro">
-                    <figure class="card-desktop card-01">
-                        <img class="image-card-desktop" src="assets/image/image-desktop01.png" alt="Imagem do primeiro card"/>
-                    </figure>
-                    <figure class= "card-desktop card-02">
-                        <img class="image-card-desktop" src="assets/image/image-desktop02.png" alt="Imagem do segundo card"/>
-                    </figure> 
-                    <figure class= "card-desktop card-03">
-                        <img class="image-card-desktop" src="assets/image/image-desktop03.png" alt="Imagem do terceiro card"/>
-                    </figure>
-                </div>
-            </section>
-            <section class="bottom-cards">
-                <div class="bottom-card">
-                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-01.png" alt="Imagem do primeiro card de baixo">
-                    <p class="bottom-card-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-card">
-                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-02.png" alt="Imagem do segundo card de baixo">
-                    <p class="bottom-card-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-card">
-                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-03.png" alt="Imagem do terceiro card de baixo">
-                    <p class="bottom-card-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-card">
-                    <img class="bottom-card-image" src="assets/image/Bottom-card-image-04.png" alt="Imagem do quarto card de baixo">
-                    <p class="bottom-card-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>
-            </section>
-            <section class="bottom-text">
-                <div class="bottom-description">
-                    <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
-                    <p class="bottom-descriptions">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>
-                </div>
-                
-            </section>
-        </main>
-    
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Page M3 Academy</title>
+    <link
+        href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 &family= Roboto+Mono:wght@100 & family= Shadows+Into+Light & display=swap"
+        rel="stylesheet">
+    <link
+        href="https: //fonts.googleapis.com/css2? família= Inter:wght@600 &family= Roboto+Mono:wght@100 & display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="assets/style/main.css" />
+</head>
+
+<body>
+    <header class="page-header">
+        <a href="/">
+            <img class="header-logo" src="assets/image/Logo-M3Academy 1.svg" alt="Logo M3 Academy">
+        </a>
+    </header>
+    <main>
+    <section>
+        <img class="main-banner main-banner-desktop" src="assets/image/main-banner-desktop.png" alt="banner principal desktop" />
+        <img class="main-banner main-banner-mobile" src="assets/image/main-banner-mobile.png" alt="banner principal mobile" />
+    </section>
+    <section class="top-infocard">
+        <div class="top-infocard-test">
+            <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+            <h1 class="top-infocard-title">dolor sit amet</h1>
+            <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>
+        <img class="top-infocard-image" src="assets/image/top-infocard-image.png" alt="Banner do infocard do topo" />
+    </section>
+
+    <section class="top-cards">
+        <div class="top-card">
+            <img class="top-card-image" src="assets/image/Top-card-image-01.png"
+                alt="Imagem do primeiro card do topo" />
+            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim
+                non dui fringilla interdum. </p>
+        </div>
+        <div class="top-card">
+            <img class="top-card-image" src="assets/image/Top-card-image-02.png" alt="Imagem do segundo card do topo" />
+            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim
+                non dui fringilla interdum. </p>
+        </div>
+        <div class="top-card">
+            <img class="top-card-image" src="assets/image/Top-card-image-03.png"
+                alt="Imagem do terceiro card do topo" />
+            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim
+                non dui fringilla interdum. </p>
+        </div>
+
+
+    </section>
+
+    <section class="cards-desktop">
+        <div class="card-dentro">
+            <figure class="card-desktop card-01">
+                <img class="image-card-desktop" src="assets/image/image-desktop01.png" alt="Imagem do primeiro card" />
+            </figure>
+            <figure class="card-desktop card-02">
+                <img class="image-card-desktop" src="assets/image/image-desktop02.png" alt="Imagem do segundo card" />
+            </figure>
+            <figure class="card-desktop card-03">
+                <img class="image-card-desktop" src="assets/image/image-desktop03.png" alt="Imagem do terceiro card" />
+            </figure>
+        </div>
+    </section>
+
+    <section class="bottom-cards">
+        <div class="bottom-card">
+            <img class="bottom-card-image" src="assets/image/Bottom-card-image-01.png"
+                alt="Imagem do primeiro card de baixo">
+            <p class="bottom-card-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-card">
+            <img class="bottom-card-image" src="assets/image/Bottom-card-image-02.png"
+                alt="Imagem do segundo card de baixo"/>
+            <p class="bottom-card-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-card">
+            <img class="bottom-card-image" src="assets/image/Bottom-card-image-03.png" alt="Imagem do terceiro card de baixo">
+            <p class="bottom-card-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-card">
+            <img class="bottom-card-image" src="assets/image/Bottom-card-image-04.png" alt="Imagem do quarto card de baixo">
+            <p class="bottom-card-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>
+    </section>
+    <section class="bottom-text">
+        <div class="bottom-description">
+            <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
+            <p class="bottom-descriptions">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>
+        </div>
+
+    </section>
+</main>
 </body>
 </html>
\ No newline at end of file