From f7267c98112e79542ed7a8fc95a3597a3797ddf0 Mon Sep 17 00:00:00 2001
From: Affonsok <affonsok@gmail.com>
Date: Thu, 13 Oct 2022 00:59:46 -0300
Subject: [PATCH 1/4] fix: Corrige Bottom banner CSS e renomeia Media Queries

---
 _assets/css/main.css | 140 +++++++++++++------------------------------
 index.html           |   1 +
 2 files changed, 42 insertions(+), 99 deletions(-)

diff --git a/_assets/css/main.css b/_assets/css/main.css
index 42ee35e..29e500b 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -96,34 +96,25 @@ body {
 }
 
 .fig-container {
-  background-color: #E0E0E0;
-  
+  background-color: #E0E0E0;  
+  max-height: 530px;
+
 }
 
 .fig-wrapper {
-  height: 530px;
-display: flex;
-justify-content: center;
-align-items: center;
-gap: 39px;
-
-
+  max-height: 530px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 39px;
+  padding: 0;
 }
 
 .fig-image {
-
-
-  width: 29%;
-  
+  max-width: 566px;
+  width: 29%;  
 }
 
-
-
-
-
-
-
-
 .cards-wrapper2 {
 
   gap: 16px;
@@ -174,21 +165,15 @@ gap: 39px;
   
 }
 
-
-
-
-
-
-
 .bottom-banner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.bottom-banner-image-desktop,
-.bottom-banner-image-mobile {
-  width: 100%;
+.bottom-banner-desktop {
+  max-width: 1360px;
+  width: 71%;
 }
 
 .page-footer {
@@ -222,12 +207,12 @@ gap: 39px;
 
 
 
+/* Tablet e Mobile - 280px to 1024px */
+@media only screen 
+  and (min-device-width: 280px) 
+  and (max-device-width: 1024px) {
 
-
-
-@media screen and (max-width: 414px) {
-  .top-banner-image-desktop,
-  .bottom-banner-desktop {
+  .top-banner-image-desktop {
     display: none;
   }
 
@@ -297,7 +282,8 @@ gap: 39px;
     grid-row: span 2;
     width: 43%;
   }
-}
+
+};
 
 
 
@@ -309,61 +295,17 @@ gap: 39px;
 
 
 
+/* Desktop - 1025px to 2500px */
+@media only screen 
+  and (min-device-width: 1025px) 
+  and (max-device-width: 2500px) {
 
-@media screen and (min-width: 415px) and (max-width: 1200px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-    display: none;
-  }
+    .top-banner-image-mobile,
+    .bottom-banner-mobile {
+      display: none;
+    }
 
-  .infocard {
-    margin: 73px 6%;
-  }
-
-  .infocard-subtitle {
-    font-size: 20px;
-    line-height: 24px;
-  }
-
-  .infocard-title {
-    font-size: 28px;
-    line-height: 34px;
-  }
-  .infocard-description {
-    padding-top: 19px;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-  }
-  .pc-icon {
-    margin-top: 65px 0 91px;
-  }
-
-  .pc-icon-image {
-    width: 58%;
-  }
-
-  .cards-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 91px;
-    padding-bottom: 80px;
-  }
-
-  .card {
-    padding: 35px 26px 28px;
-    background: #ffffff;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-  }
-
-  .card-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    margin-top: 27px;
-  }
-}
+};
 
 
 
@@ -373,12 +315,12 @@ gap: 39px;
 
 
 
+/* Desktop 4k - 2501px above */
+@media only screen 
+  and (min-device-width: 2501px) {
 
-
-
-@media screen and (min-width: 1024px) and (max-width: 2500px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-    display: none;
-  }
-}
+    .top-banner-image-mobile,
+    .bottom-banner-mobile {
+      display: none;
+    }
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index 5ced229..191f42b 100644
--- a/index.html
+++ b/index.html
@@ -105,6 +105,7 @@
 
 
         <div class="fig-container">
+
           <figure class="fig-wrapper">
             <img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
             <img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">

From 85c9e2a8a053bb14841ecd82dbfe15e6e783833d Mon Sep 17 00:00:00 2001
From: Affonsok <affonsok@gmail.com>
Date: Thu, 13 Oct 2022 17:42:14 -0300
Subject: [PATCH 2/4] Fix: Corrige responsividade Desktop

---
 _assets/css/main.css | 201 ++++++++++++-------------------------------
 index.html           |  23 ++---
 2 files changed, 69 insertions(+), 155 deletions(-)

diff --git a/_assets/css/main.css b/_assets/css/main.css
index 29e500b..ba50ac2 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -1,3 +1,4 @@
+/* Reset */
 * {
   margin: 0;
   padding: 0;
@@ -20,15 +21,19 @@ body {
   display: block;
 }
 
-.top-banner-image-desktop,
+.top-banner-image-desktop {
+  width: 100%;
+}
 .top-banner-image-mobile {
   width: 100%;
+  display: none;
 }
 
 .infocard {
   margin: 73px 25%;
   justify-content: center;
 }
+
 .infocard-title {
   text-align: center;
   font-weight: 500;
@@ -65,18 +70,15 @@ body {
 }
 
 .cards-wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, max-content);
-  gap: 21px;
+  gap: 16px;
   justify-content: center;
-  padding-top: 179px;
-  padding-bottom: 74px;
   text-align: center;
+  margin: 129px 72px 74px 72px;
+  display: flex;
 }
 
 .card {
   max-width: 350px;
-  display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 26px 28px;
@@ -88,6 +90,7 @@ body {
   margin-top: 35px;
   margin-bottom: 15px;
 }
+
 .card-description {
   font-weight: 400;
   font-size: 16px;
@@ -96,36 +99,57 @@ body {
 }
 
 .fig-container {
+  display: flex;
   background-color: #E0E0E0;  
-  max-height: 530px;
-
 }
 
-.fig-wrapper {
-  max-height: 530px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 39px;
-  padding: 0;
+.figure-wrapper {
+  margin-left: 72px;
+  margin-right: 72px;
 }
 
 .fig-image {
+  width: 100%;
   max-width: 566px;
-  width: 29%;  
 }
 
-.cards-wrapper2 {
+.flex-img {
+  max-width: 100%;
+  display: block; 
+}
 
+.flex {
+/*   background-color: #E0E0E0; */
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+.flex > div {
+  flex: 1 1 566px;
+  margin: 0 20px;
+}
+
+
+
+
+
+
+
+
+
+/* bloco 4 cards */
+.cards-wrapper2 {  
   gap: 16px;
   justify-content: center;
   text-align: center;
-  margin: 179px 72px 74px 72px;
+  margin: 129px 72px 74px 72px;
   display: flex;
 }
 
 .card2 {
-
+  max-width: 350px;
   flex-direction: column;
   align-items: center;
   padding: 0 26px 28px;
@@ -145,8 +169,10 @@ body {
   margin-top: 27px;
 }
 
+
+/* bloco Article */
 .article {
-  margin-top: 108px;  
+  margin-top: 108px;
 }
 
 .article-title {
@@ -162,9 +188,10 @@ body {
   font-size: 16px;
   line-height: 24px;
   margin: 0 auto 50px auto;
-  
 }
 
+
+/* bloco bottom banner */
 .bottom-banner {
   display: flex;
   align-items: center;
@@ -176,6 +203,13 @@ body {
   width: 71%;
 }
 
+.bottom-banner-mobile {
+  width: 100%;
+  display: none;
+}
+
+
+/* bloco footer */
 .page-footer {
   margin-top: 116px;
   display: flex;
@@ -191,7 +225,6 @@ body {
 }
 
 .footer-text {
-  color: #ffffff;
   text-align: center;
   margin: 17px 0 38px;
   font-size: 10px;
@@ -202,125 +235,3 @@ body {
 
 
 
-
-
-
-
-
-/* Tablet e Mobile - 280px to 1024px */
-@media only screen 
-  and (min-device-width: 280px) 
-  and (max-device-width: 1024px) {
-
-  .top-banner-image-desktop {
-    display: none;
-  }
-
-  .infocard {
-    margin: 73px 6%;
-  }
-
-  .infocard-subtitle {
-    font-size: 20px;
-    line-height: 24px;
-  }
-
-  .infocard-title {
-    font-size: 28px;
-    line-height: 34px;
-  }
-  .infocard-description {
-    padding-top: 19px;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-  }
-
-  .pc-icon {
-    margin-top: 65px 0 91px;
-  }
-
-  .pc-icon-image {
-    width: 58%;
-  }
-
-  .cards-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 91px;
-    padding-bottom: 80px;
-  }
-
-  .card {
-    padding: 35px 26px 28px;
-    background: #ffffff;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-  }
-
-  .card-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    margin-top: 27px;
-  }
-
-  .imageblock-wrapper {
-    background-color: #e0e0e0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .imageblock-image {
-    align-items: center;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .image2 .image1 {
-    grid-row: span 2;
-    width: 43%;
-  }
-
-};
-
-
-
-
-
-
-
-
-
-
-
-/* Desktop - 1025px to 2500px */
-@media only screen 
-  and (min-device-width: 1025px) 
-  and (max-device-width: 2500px) {
-
-    .top-banner-image-mobile,
-    .bottom-banner-mobile {
-      display: none;
-    }
-
-};
-
-
-
-
-
-
-
-
-
-/* Desktop 4k - 2501px above */
-@media only screen 
-  and (min-device-width: 2501px) {
-
-    .top-banner-image-mobile,
-    .bottom-banner-mobile {
-      display: none;
-    }
-};
\ No newline at end of file
diff --git a/index.html b/index.html
index 191f42b..61e7c78 100644
--- a/index.html
+++ b/index.html
@@ -104,20 +104,23 @@
       </div>
 
 
-        <div class="fig-container">
-
-          <figure class="fig-wrapper">
-            <img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
-            <img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
-            <img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
-          </figure>
 
+      <section class="flex">
+        <div>
+          <img class="flex-img" src="./_assets/images/image1.png" alt="">
         </div>
-
-
+        <div>
+          <img class="flex-img" src="./_assets/images/image2.png" alt="">
+        </div>
+        <div>
+          <img class="flex-img" src="./_assets/images/image3.png" alt="">
+        </div>
+      </section>
 
 
       
+
+
       <!-- Cards2 | Desktop and Mobile -->
       <div class="cards-wrapper2">
         <figure class="card2">
@@ -165,7 +168,7 @@
         <figure class="card2">
           <img
             class="card-image2"
-            src="./_assets/images/card2-image3.svg"
+            src="./_assets/images/card2-image4.svg"
             alt="Card Image 4"
           />
           <figcaption class="card-description2">

From 7d91dc25e42f2afdbed9c4e1920a8d982a7de692 Mon Sep 17 00:00:00 2001
From: Affonsok <affonsok@gmail.com>
Date: Thu, 13 Oct 2022 19:50:08 -0300
Subject: [PATCH 3/4] Fix: Corrige @media 414

---
 _assets/css/main.css | 114 +++++++++++++++++++++++++++++++++++++------
 index.html           |   8 +++
 2 files changed, 108 insertions(+), 14 deletions(-)

diff --git a/_assets/css/main.css b/_assets/css/main.css
index ba50ac2..a088ebd 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -21,13 +21,11 @@ body {
   display: block;
 }
 
-.top-banner-image-desktop {
+.top-banner-image-desktop,
+.top-banner-image-mobile  {
   width: 100%;
 }
-.top-banner-image-mobile {
-  width: 100%;
-  display: none;
-}
+
 
 .infocard {
   margin: 73px 25%;
@@ -66,7 +64,8 @@ body {
 }
 
 .pc-icon-image {
-  width: 315px;
+  width: 100%;
+  max-width: 315px;
 }
 
 .cards-wrapper {
@@ -132,13 +131,6 @@ body {
 }
 
 
-
-
-
-
-
-
-
 /* bloco 4 cards */
 .cards-wrapper2 {  
   gap: 16px;
@@ -205,7 +197,7 @@ body {
 
 .bottom-banner-mobile {
   width: 100%;
-  display: none;
+
 }
 
 
@@ -235,3 +227,97 @@ body {
 
 
 
+
+
+
+
+@media screen and (max-width: 414px) {
+  .top-banner-image-desktop,
+  .bottom-banner-desktop {
+      display: none;
+  }
+
+  .column-reverse {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .infocard-subtitle {
+    font-size: 20px;    
+  }
+
+  .infocard-title {
+    font-size: 28px;
+    line-height: 12px;
+  }
+
+  .infocard-description {
+    text-align: center;
+    justify-content: center;
+    padding-top: 19px;    
+  }
+
+  .infocard {    
+    margin: 73px 27px 0;
+  }
+
+  .cards-wrapper {
+    display: block;    
+    margin: 90px 32px 80px 32px;
+  }
+
+  .card {
+    width: 350px;
+    margin-top: 16px;
+    align-items: center;
+  }
+
+  .pc-icon-image {
+    max-width: 239px;
+  }
+
+  .cards-wrapper2 {
+    display: block;    
+    margin: 80px 23px 98px 23px;
+  }
+
+  .card2 {
+    width: 350px;
+    margin-top: 16px;
+    align-items: center;
+  }
+
+  .article-description {
+    margin: 0 auto 0 auto;
+  }
+
+  .page-footer {
+    margin-top: 87px;
+  }
+
+  .article {
+    margin-top: 50px;
+}
+
+.footer-text {
+  max-width: 261px;
+  text-align: center;
+
+}
+
+
+}
+
+
+
+
+
+
+
+@media screen and (min-width: 415px) {
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
+      display: none;
+  }
+
+}
diff --git a/index.html b/index.html
index 61e7c78..91f9397 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
 
       <!-- Bloco Infocard | Desktop and Mobile -->
       <section class="block-main">
+        
         <div class="infocard">
           <h2 class="infocard-subtitle">Lorem ipsum</h2>
           <h1 class="infocard-title">dolor sit amet</h1>
@@ -180,6 +181,9 @@
         </figure>
       </div>
 
+
+
+      <section class="column-reverse">
       <article class="article">
         <h1 class="article-title">Lorem ipsum dolor sit amet</h1>
         <p class="article-description">
@@ -205,6 +209,10 @@
         />
       </figure>
 
+    </section>
+
+
+
       <!-- Footer | Desktop and Mobile -->
       <footer class="page-footer">
         <ul class="page-footer-icon">

From ac6ec42ddc89400c0f63a0433612618394a3d46e Mon Sep 17 00:00:00 2001
From: Affonsok <affonsok@gmail.com>
Date: Thu, 13 Oct 2022 21:49:20 -0300
Subject: [PATCH 4/4] hotfix: Altera responsividade

---
 _assets/css/main.css | 277 ++++++++++++++++++++++++++++++++++++++-----
 index.html           |   8 +-
 2 files changed, 250 insertions(+), 35 deletions(-)

diff --git a/_assets/css/main.css b/_assets/css/main.css
index a088ebd..ee1b2fa 100644
--- a/_assets/css/main.css
+++ b/_assets/css/main.css
@@ -232,15 +232,136 @@ body {
 
 
 @media screen and (max-width: 414px) {
-  .top-banner-image-desktop,
-  .bottom-banner-desktop {
+    .top-banner-image-desktop,
+    .bottom-banner-desktop {
+        display: none;
+    }
+
+    .column-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+
+    .infocard-subtitle {
+      font-size: 20px;    
+    }
+
+    .infocard-title {
+      font-size: 28px;
+      line-height: 12px;
+    }
+
+    .infocard-description {
+      text-align: center;
+      justify-content: center;
+      padding-top: 19px;    
+    }
+
+    .infocard {    
+      margin: 73px 27px 0;
+    }
+
+    .cards-wrapper {
+      display: block;    
+      margin: 90px 32px 80px 32px;
+    }
+
+    .card {
+      width: 350px;
+      margin-top: 16px;
+      align-items: center;
+    }
+
+    .pc-icon-image {
+      max-width: 239px;
+    }
+
+    .cards-wrapper2 {
+      display: block;    
+      margin: 80px 0 98px 0;
+    }
+
+    .card2 {
+      width: 350px;
+      margin: 7% 0 0 6%;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .article-description {
+      text-align: center;
+      justify-content: center;
+      margin: 0 auto 0 auto;
+      margin: 0 32px 0 32px;
+    }
+
+    .page-footer {
+      margin-top: 87px;
+    }
+
+    .article {
+      margin-top: 50px;
+    }
+
+    .footer-text {
+      max-width: 261px;
+      text-align: center;
+    }
+
+
+    /* imagens pequenas e invertidas grid */
+    .img-small1 {
+      grid-area: foto1;
+    }
+    .img-small2 {
+      grid-area: foto2;
+    }
+    .img-big3 {
+      grid-area: foto3;
+      width: 368px;
+    }
+
+    .grid2 {
+      display: grid;
+      grid-template-columns: auto auto ;
+      grid-template-rows: auto;
+      direction: rtl;      
+      grid-template-areas: 
+      "foto2 foto1"
+      "foto3 foto3"
+      ;}
+
+    .img-small1 {
+      grid-area: foto1;
+    }
+    .img-small2 {
+      grid-area: foto2;
+    }
+    .img-big3 {
+      grid-area: foto3;
+      width: 368px;
+    }
+
+    .flex  {
+      background-color: #E0E0E0;
+      height: 574px;
+      margin-bottom: 112px;
+
+    }
+}
+
+
+
+
+
+/* Tablet e Mobile - 415px to 1024px */
+@media only screen and (min-device-width: 415px) and (max-device-width: 1024px){
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
       display: none;
   }
 
-  .column-reverse {
-    display: flex;
-    flex-direction: column-reverse;
-  }
+
 
   .infocard-subtitle {
     font-size: 20px;    
@@ -262,7 +383,7 @@ body {
   }
 
   .cards-wrapper {
-    display: block;    
+    display: grid;    
     margin: 90px 32px 80px 32px;
   }
 
@@ -276,19 +397,24 @@ body {
     max-width: 239px;
   }
 
+
   .cards-wrapper2 {
-    display: block;    
-    margin: 80px 23px 98px 23px;
+    display: grid;    
+    margin: 80px 0 98px 0;
   }
 
   .card2 {
     width: 350px;
-    margin-top: 16px;
+    margin: 7% 0 0 6%;
+    justify-content: center;
     align-items: center;
   }
 
   .article-description {
+    text-align: center;
+    justify-content: center;
     margin: 0 auto 0 auto;
+    margin: 0 32px 0 32px;
   }
 
   .page-footer {
@@ -297,27 +423,116 @@ body {
 
   .article {
     margin-top: 50px;
-}
-
-.footer-text {
-  max-width: 261px;
-  text-align: center;
-
-}
-
-
-}
-
-
-
-
-
-
-
-@media screen and (min-width: 415px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-      display: none;
   }
 
+  .footer-text {
+    max-width: 261px;
+    text-align: center;
+  }
+
+
+  /* imagens pequenas e invertidas grid */
+  .img-small1 {
+    grid-area: foto1;
+  }
+  .img-small2 {
+    grid-area: foto2;
+  }
+  .img-big3 {
+    grid-area: foto3;
+    width: 368px;
+  }
+
+  .grid2 {
+    display: grid;
+    grid-template-columns: auto auto ;
+    grid-template-rows: auto;
+    direction: rtl;      
+    grid-template-areas: 
+    "foto2 foto1"
+    "foto3 foto3"
+    ;}
+
+  .img-small1 {
+    grid-area: foto1;
+  }
+  .img-small2 {
+    grid-area: foto2;
+  }
+  .img-big3 {
+    grid-area: foto3;
+    width: 368px;
+  }
+
+  .flex-img {
+    max-width: 100%;
+    display: block; 
+  }
+  
+  .flex {
+  /*   background-color: #E0E0E0; */
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+  
+  .flex > div {
+    flex: 1 1 566px;
+    margin: 0 20px;
+  }
+
+  .article-description {
+    max-width: 550px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 auto 50px auto;
+  }
 }
+
+
+
+/* Desktop - 1025px to 2500px */
+@media only screen and (min-device-width: 1025px) and (max-device-width: 2500px) {
+
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
+    display: none;
+  }
+
+  .cards-wrapper2 {
+    margin: 179px 72px 74px 72px;
+  }
+}
+
+
+
+/* Desktop 4k - 2501px above */
+@media only screen and (min-device-width: 2501px) {
+
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
+    display: none;
+  }
+
+  .infocard-description {
+    font-size: 32px;
+    line-height: 36px;
+  }
+
+  .cards-wrapper2 {
+    margin: 179px 370px 74px 370px;
+  }
+
+  .fig-wrapper {
+    padding-top: 62px;
+  }
+
+  .article-description {
+    font-size: 32px;
+    line-height: 36px;
+    max-width: 850px;
+  }
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 91f9397..9f55eab 100644
--- a/index.html
+++ b/index.html
@@ -106,15 +106,15 @@
 
 
 
-      <section class="flex">
+      <section class="flex grid2">
         <div>
-          <img class="flex-img" src="./_assets/images/image1.png" alt="">
+          <img class="flex-img img-small1" src="./_assets/images/image1.png" alt="Imagem 1">
         </div>
         <div>
-          <img class="flex-img" src="./_assets/images/image2.png" alt="">
+          <img class="flex-img img-small2" src="./_assets/images/image2.png" alt="Imagem 2">
         </div>
         <div>
-          <img class="flex-img" src="./_assets/images/image3.png" alt="">
+          <img class="flex-img img-big3" src="./_assets/images/image3.png" alt="Imagem 3">
         </div>
       </section>