From 5e2733e295eea8ba16101615167e80bc103f6102 Mon Sep 17 00:00:00 2001
From: Izabela Balizardo <izah_rb@hotmail.com>
Date: Thu, 13 Oct 2022 23:19:48 -0300
Subject: [PATCH] Acabou meu tempo, nao consegui arrumar o responsivo 100%

---
 assets/styles/main.css | 115 +++++++++----
 index.html             | 370 ++++++++++++++++++++---------------------
 2 files changed, 270 insertions(+), 215 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index adf6849..9211047 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -214,6 +214,46 @@ body {
   color: #bdbdbd;
 }
 
+@media screen and (max-width: 414px) {
+  .footer-texto {
+    max-width: 280px;
+    text-align: center;
+  }
+}
+
+
+@media screen and (max-width: 415px) {
+  .middle-banner-mobile {
+      display: none;
+  }
+}
+
+
+.middle-banner-img-mobile-3{
+  max-width: 372px;
+}
+
+
+.middle-banner-mobile1{
+  display: flex;
+  gap: 14px;
+}
+
+
+.middle-banner-img-mobile{
+  max-width: 177px;
+  display: block;
+  
+}
+
+@media screen and (max-width:414px){
+.main-banner-desktop,
+.middle-banner-desktop {
+  display: none;
+  }
+}
+
+
 @media screen and (max-width: 412px) {
   .top-infocard-subtitulo {
     font-size: 20px;
@@ -224,14 +264,26 @@ body {
   }
 
   .top-infocard-paragrafo {
-    font-size: 16px;
+    font-size: 17px;
     line-height: 24px;
     text-align: center;
-    padding: 0 30px;
+    padding: 0 32px;
   }
 
   .middle-banners {
     height: 484px;
+
+  }
+
+  .middle-banner-mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    max-width: 368px;
+    margin: 0 auto;
+
   }
 }
 
@@ -243,8 +295,7 @@ body {
 
   .bottom-infocard-flex {
     flex-direction: column;
-
-}
+  }
 
   .bottom-infocard-img-mobile {
     margin-bottom: 50px;
@@ -252,58 +303,62 @@ body {
 }
 
 @media screen and (min-width: 415px) {
-  .main-banner-mobile,
+  
   .bottom-infocard-img-mobile {
     display: none;
   }
 }
 
-
 @media screen and (max-width: 415px) {
-
-  .bottom-infocard{
-      flex-direction: column;
-      padding: 80px 0 136px;
+  .bottom-infocard {
+    flex-direction: column;
+    padding: 80px 0 136px;
   }
 
-  .bottom-infocard-img{
-      margin:0 0 50px;
-      width: 100%;
-      max-width: 596px;
-      display: none;
-      
+  .bottom-infocard-img {
+    margin: 0 0 50px;
+    width: 100%;
+    max-width: 596px;
+    display: none;
   }
 
-  .bottom-infocard-texto{
-      padding: 0 26px;
+  .bottom-infocard-texto {
+    padding: 0 26px;
   }
 
-  .bottom-infocard-titulo{
-      font-size: 24px;
+  .bottom-infocard-titulo {
+    font-size: 24px;
+  }
+
+  .middle-banner-mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    max-width: 368px;
+    margin: 0 auto;
+
   }
 }
 
-@media screen and (max-width:768px) {
+@media screen and (max-width: 768px) {
   .top-cards {
-      grid-template-columns: 1fr;
-      padding: 36px 26px;   
+    grid-template-columns: 1fr;
+    padding: 36px 26px;
   }
 
   .bottom-cards {
     flex-direction: column;
     grid-template-columns: 1fr;
     padding: 80px 23px;
-
-}
-
+  }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1200px) {
-
   .top-cards {
-      grid-template-columns: repeat(2, max-content);
-      flex-direction: column;
-
+    grid-template-columns: repeat(2, max-content);
+    flex-direction: column;
   }
 }
 
diff --git a/index.html b/index.html
index 943932c..ae0308f 100644
--- a/index.html
+++ b/index.html
@@ -18,198 +18,198 @@
     </header>
 
 
-        <section>
-            <img class="main-banner main-banner-desktop" src="assets/img/main-banner-desktop.png"
-                alt="Banner Principal Desktop">
-            <img class="main-banner main-banner-mobile" src="assets/img/main-banner-mobile.png"
-                alt="Banner Principal Mobile">
-        </section>
+    <section>
+        <img class="main-banner main-banner-desktop" src="assets/img/main-banner-desktop.png"
+            alt="Banner Principal Desktop">
+        <img class="main-banner main-banner-mobile" src="assets/img/main-banner-mobile.png"
+            alt="Banner Principal Mobile">
+    </section>
 
-        <section class="top-infocard">
+    <section class="top-infocard">
 
-            <div class="top-infocard-text">
-                <h2 class="top-infocard-subtitulo">
-                    Lorem ipsum
-                </h2>
-                <h1 class="top-infocard-titulo">
-                    Dolor sit amet
-                </h1>
-                <p class="top-infocard-paragrafo">
-                    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-img" src="assets/img/top-infocard.png" alt="Banner infocard do Topo">
-        </section>
-
-        <section class="top-cards">
-
-            <div class="top-card"><img class="top-card-img" src="assets/img/topo card 1.png"
-                    alt="Imagem do topo do card 01">
-                <p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 2.png"
-                    alt="Imagem do topo do card 02">
-                <p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 3.png"
-                    alt="Imagem do topo do card 03">
-                <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
-                    enim non dui fringilla interdum. </p>
-            </div>
-
-
-        </section>
-
-
-        <section class="middle-banners">
-
-            <div class="middle-wraper">
-
-                <div class="middle-banner-desktop">
-                    <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop1.png"
-                        alt="Banner do meio Desktop">
-                    <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop2.png"
-                        alt="Banner do meio Desktop">
-                    <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop3.png"
-                        alt="Banner do meio Desktop">
-
-                </div>
-            </div>
-
-            <div class="middle-banner-mobile">
-                <div class="middle-banner-mobile1">
-
-                    <img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile1.png"
-                        alt="Banner do meio mobile">
-                    <img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile2.png"
-                        alt="Banner do meio mobile">
-                </div>
-                <img class="middle-banner-img-mobile-3" src="assets/img/banner-meio-mobile3.png"
-                    alt="Banner do meio mobile">
-            </div>
-
-
-        </section>
-
-
-
-        <section class="bottom-cards">
-
-            <div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card1.png"
-                    alt="Imagem do topo do card 01">
-                <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card2.png"
-                    alt="Imagem do topo do card 02">
-                <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card3.png"
-                    alt="Imagem do topo do card 03">
-                <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card4.png"
-                    alt="Imagem do topo do card 04">
-                <p class="bottom-card-paragrafo"> 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-infocard">
-
-            <div class="bottom-infocard-flex">
-                <img class="bottom-infocard-img-mobile" src="./assets/img/bottom-infocard-img-mobile.png"
-                    alt="Banner do Infocard de Baixo">
-
-                <div class="bottom-inforcad-texto">
-                    <h2 class="bottom-infocard-titulo">Lorem ipsum dolor sit amet</h2>
-
-                    <p class="bottom-infocard-paragrafo">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
-                        faucibus interdum.Ineget 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>
-            </div>
-
-            <img class="bottom-infocard-img" src="assets/img/bottom-infocard.png" alt="">
-
-
-
-
-
-
-        </section>
-
-        </main>
-
-
-        <footer class="page-footer">
-            <ul class="footer-icons">
-
-                <li class="footer-icon">
-
-                    <a href="#" target="_blank">
-                        <img src="./assets/img/instagram-icon.png" alt="Icone Instagram">
-                    </a>
-
-                </li>
-
-                <li class="footer-icon">
-
-                    <a href="#" target="_blank">
-                        <img src="./assets/img/facebook-icon.png" alt="Icone Facebook">
-                    </a>
-
-                </li>
-
-                <li class="footer-icon">
-
-                    <a href="#" target="_blank">
-                        <img src="./assets/img/youtube-icon.png" alt="Icone Youtube">
-                    </a>
-
-
-                </li>
-
-            </ul>
-
-            <p class="footer-texto">
-                Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+        <div class="top-infocard-text">
+            <h2 class="top-infocard-subtitulo">
+                Lorem ipsum
+            </h2>
+            <h1 class="top-infocard-titulo">
+                Dolor sit amet
+            </h1>
+            <p class="top-infocard-paragrafo">
+                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-img" src="assets/img/top-infocard.png" alt="Banner infocard do Topo">
+    </section>
+
+    <section class="top-cards">
+
+        <div class="top-card"><img class="top-card-img" src="assets/img/topo card 1.png"
+                alt="Imagem do topo do card 01">
+            <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
+                enim non dui fringilla interdum. </p>
+        </div>
 
 
 
-        </footer>
+        <div class="top-card"><img class="top-card-img" src="assets/img/topo card 2.png"
+                alt="Imagem do topo do card 02">
+            <p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 3.png"
+                alt="Imagem do topo do card 03">
+            <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
+                enim non dui fringilla interdum. </p>
+        </div>
+
+
+    </section>
+
+
+    <section class="middle-banners">
+
+        <div class="middle-wraper">
+
+            <div class="middle-banner-desktop">
+                <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop1.png"
+                    alt="Banner do meio Desktop">
+                <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop2.png"
+                    alt="Banner do meio Desktop">
+                <img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop3.png"
+                    alt="Banner do meio Desktop">
+
+            </div>
+        </div>
+
+        <div class="middle-banner-mobile">
+            <div class="middle-banner-mobile1">
+
+                <img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile1.png"
+                    alt="Banner do meio mobile">
+                <img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile2.png"
+                    alt="Banner do meio mobile">
+            </div>
+            <img class="middle-banner-img-mobile-3" src="assets/img/banner-meio-mobile3.png"
+                alt="Banner do meio mobile">
+        </div>
+
+
+    </section>
+
+
+
+    <section class="bottom-cards">
+
+        <div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card1.png"
+                alt="Imagem do topo do card 01">
+            <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card2.png"
+                alt="Imagem do topo do card 02">
+            <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card3.png"
+                alt="Imagem do topo do card 03">
+            <p class="bottom-card-paragrafo"> 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-img" src="assets/img/bottom-card4.png"
+                alt="Imagem do topo do card 04">
+            <p class="bottom-card-paragrafo"> 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-infocard">
+
+        <div class="bottom-infocard-flex">
+            <img class="bottom-infocard-img-mobile" src="./assets/img/bottom-infocard-img-mobile.png"
+                alt="Banner do Infocard de Baixo">
+
+            <div class="bottom-inforcad-texto">
+                <h2 class="bottom-infocard-titulo">Lorem ipsum dolor sit amet</h2>
+
+                <p class="bottom-infocard-paragrafo">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
+                    faucibus interdum.Ineget 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>
+        </div>
+
+        <img class="bottom-infocard-img" src="assets/img/bottom-infocard.png" alt="">
+
+
+
+
+
+
+    </section>
+
+    </main>
+
+
+    <footer class="page-footer">
+        <ul class="footer-icons">
+
+            <li class="footer-icon">
+
+                <a href="#" target="_blank">
+                    <img src="./assets/img/instagram-icon.png" alt="Icone Instagram">
+                </a>
+
+            </li>
+
+            <li class="footer-icon">
+
+                <a href="#" target="_blank">
+                    <img src="./assets/img/facebook-icon.png" alt="Icone Facebook">
+                </a>
+
+            </li>
+
+            <li class="footer-icon">
+
+                <a href="#" target="_blank">
+                    <img src="./assets/img/youtube-icon.png" alt="Icone Youtube">
+                </a>
+
+
+            </li>
+
+        </ul>
+
+        <p class="footer-texto">
+            Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+
+        </p>
+
+
+
+    </footer>
 
 </body>