From 3a833a95d8b8ddf172cd7802df6982bcb23cd408 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Wed, 12 Oct 2022 22:54:30 -0300
Subject: [PATCH] Adiciona mais responsividade ao site

---
 index.html       |   4 +-
 styles/style.css | 132 +++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 130 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 7ca3edf..3867e4b 100644
--- a/index.html
+++ b/index.html
@@ -95,8 +95,8 @@
             <section class="end-footer">
                 <div class="footer-images">
                     <div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>
-                    <div><img src="assets/images/facebook-logo.svg" alt="facebook logo"></div class="footer-img">
-                    <div><img src="assets/images/youtube 2.svg" alt="youtube logo"></div class="footer-img">
+                    <div><img src="assets/images/facebook-logo.svg" alt="facebook logo"class="footer-img"></div >
+                    <div><img src="assets/images/youtube 2.svg" alt="youtube logo" class="footer-img"></div >
                 </div>
                 <p class="footer-p">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
                 </p>
diff --git a/styles/style.css b/styles/style.css
index 6ea720a..bbde2d9 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -150,7 +150,7 @@
     justify-content: center;
     align-items: center;
     gap: 16px;
-    padding: 191px 72px 79px 72px;
+    padding: 191px 72px 0px 72px;
 }
 
 .second-card-p {
@@ -230,7 +230,9 @@
 }
 
 .bottom-banner-img {
+    max-width: 1360px;
     width: 100%;
+    padding: 0px 30px 0px 30px;
 }
 
 .end-footer {
@@ -253,6 +255,97 @@
     padding-bottom: 38px;
 }
 
+@media screen and (min-width: 3500px){
+    .header-logo {
+        width: 500px;
+    }
+
+    .first-content-p {
+        font-size: xx-large;
+    }
+
+    .first-content-h2 {
+        font-size: 70px;
+    }
+
+    .first-content-p {
+        font-size: 30px;
+    }
+
+    .block {
+        min-width: 500px;
+        min-height: 700px;
+    }
+
+    .row-image-desktop {
+        width: 2000px;
+    }
+
+    .bottom-banner-img {
+        min-width: 2000px;
+    }
+}
+
+@media screen and (min-width: 2500px) {
+    .header-logo {
+        min-height: 130px;
+    }
+
+    .first-content-h2 {
+        font-size: 50px;
+    }
+
+    .first-content-h1 {
+        padding-top: 10px;
+        font-size: 60px;
+    }
+
+    .first-content-p {
+        font-size: 26px;
+    }
+
+    .first-card-image {
+        width: 200px;
+    }
+
+    .first-card-p {
+        font-size: 30px;
+    }
+
+    .image-row-background {
+        min-height: 650px;
+    }
+
+    .row-image-desktop {
+        width: 700px;
+    }
+
+    .second-card-image {
+        width: 500px;
+        height: 200px;
+    }
+
+    .second-card-p {
+        font-size: 30px;
+    }
+
+    .second-content-h2 {
+        font-size: 44px;
+    }
+
+    .second-content-p {
+        font-size: 26px;
+    }
+
+    .footer-img {
+        min-height: 35px;
+    }
+
+    .footer-p {
+        font-size: 18px;
+    }
+}
+
 @media screen and (max-width: 1024px) {
     .first-content-text {
         max-width: 367px;
@@ -313,17 +406,23 @@
     .bottom-banner-desktop {
         display: none;
     }
+
     .bottom-banner-img {
         width: 60%;
     }
+
     .second-content {
-        padding: 50px 32px;
+        padding: 50px 32px 0px;
     }
 
     .bottom-banner {
         display: none;
     }
 
+    .bottom-banner-img {
+        padding: 0px;
+    }
+
     .second-content2 {
         display: none;
     }
@@ -352,8 +451,12 @@
 }
 
 @media screen and (max-width: 500px) {
+    .block {
+        width: 200px;
+    }
+    
     .row-image-mobile {
-        width: 70%;
+        width: 75%;
     }
 
     .image-row-background {
@@ -365,10 +468,31 @@
     }
 
     .row-image-mobile2 {
-        width: 150%;
+        width: 160%;
     }
 
     .bottom-banner-img {
         width: 100%;
     }
+}
+
+@media screen and (max-width: 330px) {
+    .row-image-mobile {
+        width: 80%;
+    }
+    
+    .row-image-mobile2 {
+        width: 170%;
+    }
+
+}
+
+@media screen and (max-width: 300px) {
+    .row-image-mobile {
+        width: 90%;
+    }
+    
+    .row-image-mobile2 {
+        width: 185%;
+    }
 }
\ No newline at end of file