From eb27cd036abed83d7cd6625f730efcb60d407606 Mon Sep 17 00:00:00 2001
From: matheus <matheusbrollo201@gmail.com>
Date: Thu, 13 Oct 2022 16:10:57 -0300
Subject: [PATCH] fix(css): responsive

---
 src/index.html       | 16 +++-----
 src/styles/style.css | 87 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/src/index.html b/src/index.html
index 44134a3..dbe9e81 100644
--- a/src/index.html
+++ b/src/index.html
@@ -61,14 +61,10 @@
 
             <section class="blocks2">
                 <div class="blocks-wrapper">
-                    <div class="img-square">
-                        <img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop">
-                    </div>
-                    <div class="img-square">
-                        <img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
-                    </div>
-                    <div class="img-square">
-                        <img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
+                    <div class="block-desktop">
+                        <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 13.png" alt="Imagem de um laptop"></div>
+                        <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop"></div>
+                        <div class="img-square"><img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop"></div>
                     </div>
 
                     <div class="img-square-mobile">
@@ -76,7 +72,7 @@
                         <img class="block-img2" src="assets/img/Rectangle 16.png" alt="Imagem de um laptop">
                     </div>
                     <div class="img-square-mobile2">
-                        <img class="block-img2" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
+                        <img class="block-img3" src="assets/img/Rectangle 17.png" alt="Imagem de um laptop">
                     </div>
                 </div>
             </section>
@@ -128,7 +124,7 @@
                 </section>
             </article>
         </main>
-        
+
         <footer>
             <picture>
                 <img src="assets/insta.png" alt="Icone do instagram">
diff --git a/src/styles/style.css b/src/styles/style.css
index ee3ef22..94a6861 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -102,6 +102,7 @@ article {
 
 .blocks2 {
     margin-bottom: 190px;
+    padding: 0px 72px 0px 72px;
     background: #E0E0E0;
 }
 
@@ -110,6 +111,14 @@ article {
     top: 62px;
 }
 
+.block-desktop {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+}
+
 .block-img2 {
     width: 100%;
 }
@@ -142,8 +151,7 @@ article {
 
 .bottom-text p {
     line-height: 24px;
-    height: 120px;
-    padding-bottom: 50px;
+    padding-bottom: 10%;
 }
 
 .bottom-img2 {
@@ -168,8 +176,7 @@ picture img {
     .bottom-text p {
         padding: 9px 32px 0px 32px;
         line-height: 20px;
-        padding: 0 0 0 0;
-        height: 192px;
+        height: auto;
     }
 }
 
@@ -217,7 +224,7 @@ picture img {
 @media screen and (min-width: 356px) and (max-width: 1024px) {
     .bottom-text p {
         line-height: 24px;
-        padding: 9px 32px 130px 32px;
+        padding: 9px 32px 20% 32px;
     }
 }
 
@@ -228,6 +235,32 @@ picture img {
         width: auto;
     }
 
+    .img-square-mobile {
+        margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 14px;
+    }
+
+    .img-square-mobile2 {
+        margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 23px;
+    }
+
+    .block-img2 {
+        width: 100%;
+        max-width: 177px;
+    }
+
+    .block-img3 {
+        width: 100%;
+        max-width: 368px;
+    }
+
     .bottom-banner-desktop {
         display: none;
     }
@@ -255,6 +288,18 @@ picture img {
     }
 }
 
+@media screen and (max-width: 500px) {
+    .block-img3 {
+        width: 160%;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .block-img2 {
+        width: 75%;
+    }
+}
+
 @media screen and (min-width: 1025px) {
     .img-square-mobile, .img-square-mobile2 {
         display: none;
@@ -265,7 +310,7 @@ picture img {
     }
 
     .bottom-text h2 {
-        font-size: 1.5em;
+
         font-weight: 600;
     }
 }
@@ -295,4 +340,34 @@ picture img {
         grid-template-columns: repeat(2, max-content);
         padding: 36px 26px;
     }
+}
+
+@media screen and (min-width: 2000px) {
+    .cicle-text h1 {
+        font-size: 3.8em;
+    }
+
+    .bottom-text h1 {
+        font-size: 2.5em;
+    }
+
+    .cicle-text h2 {
+        font-size: 2.5em;
+    }
+
+    .bottom-text h2 {
+        font-size: 2.5em;
+    }
+    
+    p {
+        font-size: 1.5em;
+    }
+
+    .block-text, .block-text2 {
+        font-size: 1.4em;
+    }
+
+    footer > p {
+        font-size: 1.3em;
+    }
 }
\ No newline at end of file