From 46044a946fa9f3cc9687e7cab700b6816e166018 Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Thu, 13 Oct 2022 21:35:43 -0300
Subject: [PATCH] feat: texto e imagem e footer mobile desktop

---
 ...xo-desktop.png => banner-baixo-mobile.png} | Bin
 assets/Styles/main.css                        |  94 +++++++++--
 index.html                                    | 146 +++++++++---------
 3 files changed, 154 insertions(+), 86 deletions(-)
 rename assets/Images/{banner-baixo-desktop.png => banner-baixo-mobile.png} (100%)

diff --git a/assets/Images/banner-baixo-desktop.png b/assets/Images/banner-baixo-mobile.png
similarity index 100%
rename from assets/Images/banner-baixo-desktop.png
rename to assets/Images/banner-baixo-mobile.png
diff --git a/assets/Styles/main.css b/assets/Styles/main.css
index dd05a81..5cb46fe 100644
--- a/assets/Styles/main.css
+++ b/assets/Styles/main.css
@@ -89,8 +89,8 @@ body {
   font-size: 16px;
   line-height: 24px;
 }
-
 .img-baixo {
+  height: 530px;
   background: #e0e0e0;
 }
 .wrapper {
@@ -113,8 +113,7 @@ body {
 }
 
 .infocard-baixo {
-  background: white;
-  padding: 191px 72px;
+  margin: 191px 0px;
   display: grid;
   grid-template-columns: 432px 432px 432px 432px;
   gap: 16px;
@@ -140,7 +139,7 @@ body {
   line-height: 24px;
 }
 
-.very-low-titulo-h1 {
+.very-low-titulo {
   text-align: center;
   font-weight: 600;
   font-size: 32px;
@@ -157,14 +156,18 @@ body {
 }
 
 .very-low-infocard {
-  background: white;
+  padding: 0 32px;
+  width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
 .very-low-img {
-  padding: 50px 280px 116px;
+  height: auto;
+  width: 100%;
+  max-width: 1360px;
+  padding: 50px 0 116px;
 }
 
 .page-footer {
@@ -183,6 +186,7 @@ body {
 }
 
 .footer-icons-ul {
+  align-items: center;
   display: flex;
   list-style: none;
   margin-bottom: 16px;
@@ -191,6 +195,20 @@ body {
   margin: 0 21px;
 }
 
+.very-low-img-mobile {
+  display: none;
+}
+
+.banner-principal-mobile {
+  display: none;
+}
+
+@media (max-width: 1900px) {
+  .infocard-baixo {
+    grid-template-columns: 432px 432px;
+  }
+}
+
 @media screen and (max-width: 1180px) {
   .top-titulo-h2 {
     font-size: 20px;
@@ -225,6 +243,46 @@ body {
   }
 }
 
+@media (max-width: 1024px) {
+  .infocard-baixo {
+    grid-template-columns: 432px;
+  }
+
+  .very-low-img {
+    display: none;
+  }
+  .very-low-img-mobile {
+    width: 100%;
+    max-width: 414px;
+    height: auto;
+    display: block;
+  }
+  .very-low-paragrafo {
+    margin: 0 0 32px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #000000;
+  }
+  .very-low-titulo {
+    margin: 50px 0 9px;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    color: #000000;
+  }
+
+  .very-low-infocard {
+    padding: 0;
+  }
+
+  .very-low-div {
+    max-width: 350px;
+  }
+}
+
 @media screen and (max-width: 700px) {
   .notebook-esquerda-mobile {
     width: 177px;
@@ -258,11 +316,27 @@ body {
   }
 }
 
+@media (max-width: 480px) {
+  .infocard-baixo {
+    grid-template-columns: 100%;
+    justify-items: center;
+    padding: 0 16px;
+  }
+  .card-baixo {
+    max-width: 350px;
+    width: 100%;
+    padding: 35px 26px 27px;
+    height: 287px;
+  }
+}
+
 @media screen and (max-width: 414px) {
+  .banner-principal-mobile {
+    display: block;
+  }
   .banner-principal-desktop {
     display: none;
   }
-
   .notebook-esquerda-mobile {
     width: 100%;
     grid-area: header;
@@ -276,9 +350,3 @@ body {
     grid-area: main;
   }
 }
-
-@media screen and (min-width: 415px) {
-  .banner-principal-mobile {
-    display: none;
-  }
-}
diff --git a/index.html b/index.html
index 686dccb..39c6a10 100644
--- a/index.html
+++ b/index.html
@@ -106,97 +106,97 @@
             alt="Imagem de um notebook 3"
           />
         </div>
-        <section class="infocard-baixo">
-          <div class="card-baixo">
-            <img
-              class="cards-de-baixo"
-              src="./assets/Images/low-card-esquerda-exterior.png"
-              alt="Inforcard de baixo da esquerda exterior"
-            />
-            <p class="paragrafos-baixo">
-              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="card-baixo">
-            <img
-              class="cards-de-baixo"
-              src="./assets/Images/low-card-esquerda.png"
-              alt="Infocard de baixo da esquerda"
-            />
-            <p class="paragrafos-baixo">
-              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="card-baixo">
-            <img
-              class="cards-de-baixo"
-              src="./assets/Images/low-card-direita.png"
-              alt="Infocard da direita"
-            />
-            <p class="paragrafos-baixo">
-              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="card-baixo">
-            <img
-              class="cards-de-baixo"
-              src="./assets/Images/low-card-direta-exterior.png"
-              alt="Infocard da direita"
-            />
-            <p class="paragrafos-baixo">
-              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="very-low-infocard">
-          <div class="very-low-div">
-            <h1 class="very-low-titulo-h1">Lorem ipsum dolor sit amet</h1>
-            <p class="very-low-paragrafo">
-              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>
+      <section class="infocard-baixo">
+        <div class="card-baixo">
           <img
-            class="very-low-img"
-            src="./assets/Images/banner-baixo.jpg"
-            alt="Banner de baixo"
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-esquerda-exterior.png"
+            alt="Inforcard de baixo da esquerda exterior"
           />
-        </section>
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-esquerda.png"
+            alt="Infocard de baixo da esquerda"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-direita.png"
+            alt="Infocard da direita"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+        <div class="card-baixo">
+          <img
+            class="cards-de-baixo"
+            src="./assets/Images/low-card-direta-exterior.png"
+            alt="Infocard da direita"
+          />
+          <p class="paragrafos-baixo">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+      </section>
+      <section class="very-low-infocard">
+        <img
+          class="very-low-img-mobile"
+          src="./assets/Images/banner-baixo-mobile.png"
+          alt="Banner de baixo mobile"
+        />
+        <div class="very-low-div">
+          <h2 class="very-low-titulo">Lorem ipsum dolor sit amet</h2>
+          <p class="very-low-paragrafo">
+            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>
+        <img
+          class="very-low-img"
+          src="./assets/Images/banner-baixo.jpg"
+          alt="Banner de baixo"
+        />
       </section>
     </main>
     <footer class="page-footer">
       <ul class="footer-icons-ul">
         <li class="footer-icon">
           <a
-            href="https://www.instagram.com/patrckreis/?hl=pt-br"
+            href="https://www.instagram.com/m3.ecommerce/?hl=pt-br"
             target="_blank"
           >
             <img src="./assets/Images/insta-icon.png" alt="Ícone instagram" />
           </a>
         </li>
         <li class="footer-icon">
-          <a href="" target="_blank">
+          <a href="https://www.facebook.com/digitalm3" target="_blank">
             <img src="./assets/Images/face-icon.png" alt="Ícone facebook" />
           </a>
         </li>
         <li class="footer-icon">
-          <a href="" target="_blank">
+          <a
+            href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
+            target="_blank"
+          >
             <img src="./assets/Images/yt-icon.png" alt="Ícone youtube" />
           </a>
         </li>