From b63c391e7119821fe4da9aebb58b5a7e4c68f7d8 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Mon, 10 Oct 2022 11:44:08 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionando=20adapta=C3=A7=C3=A3o=20par?=
 =?UTF-8?q?a=20=20telas=204k?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        |   8 +--
 styles/footer.css |  20 ++++++
 styles/header.css |  11 +++
 styles/main.css   | 175 ++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 204 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 4a18caf..3391230 100644
--- a/index.html
+++ b/index.html
@@ -129,15 +129,15 @@
                         Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
                     </figcaption>
                 </div>              
-                <img src="./assets/imgs/banner-final.png" alt="">
+                <img src="./assets/imgs/banner-final.png" alt="banner com uma imagem de um óculos em frente a um notebook">
             </figure>
         </section>
     </main>
     <footer>
         <div class="social-media">
-          <a href="#"><img src="./assets/svg/instagram.svg"></a>
-          <a href="#"><img src="./assets/svg/facebook.svg"></a>
-          <a href="#"><img src="./assets/svg/youtube.svg"></a>
+          <a href="#"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
+          <a href="#"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
+          <a href="#"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
         </div>
         <span>Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
         </span>
diff --git a/styles/footer.css b/styles/footer.css
index f6e8a13..81fa58b 100644
--- a/styles/footer.css
+++ b/styles/footer.css
@@ -31,4 +31,24 @@ footer span {
         width: 261px;
         text-align: center;
     }
+}
+
+@media screen and (min-width: 2500px) {
+    footer {
+        height: 256px;
+    }
+    
+    footer .social-media {
+        margin-bottom: 32px;
+        width: 208px;
+    }
+
+    footer .social-media a img {
+        width: 48px;
+    }
+    
+    footer span {
+        font-size: 20px;
+        line-height: 24px;
+    }
 }
\ No newline at end of file
diff --git a/styles/header.css b/styles/header.css
index 470a542..b1f810c 100644
--- a/styles/header.css
+++ b/styles/header.css
@@ -14,3 +14,14 @@ header {
 header a img {
     display: block;
 }
+
+
+@media screen and (min-width: 2500px) {
+    header {
+        height: 202px;     
+    }
+
+    header a img {
+        width: 452px;
+    }
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 6ad4c81..1e3d1e3 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -4,7 +4,6 @@
     height: 700px;
     top: 0;
     max-height: 700px;
-
     object-fit: cover;
 
 }
@@ -91,6 +90,11 @@
     width: 100%;
     height: auto;
     text-align: center;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #000000;
 }
 
 /* cards com imagem de macbook */
@@ -328,7 +332,10 @@
         width: 100%;
         height: 100%;
         grid-template-columns: repeat(1, 1fr);
-        justify-content: space-around;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
         padding: 0 23px;
         gap: 16px;
     }
@@ -408,11 +415,167 @@
 
 @media screen and (min-width: 2500px) {
     .background-main figure img {
+        width: 100%;   
+        height: 70%;    
+        max-height: 700px;
+    }
+
+    .first-section h2 {
+        font-size: 64px;
+        line-height: 78px;
+    }
+
+    .first-section h1 {
+        font-size: 96px;
+        line-height: 116px;
+    }
+
+    .first-section figcaption {
+        font-size: 32px;
+        line-height: 48px;
+        max-width: 55%;
+    }
+
+    .first-section figure img {
+        width: 16%;
+    }
+
+    .first-content-card {
+        margin-top: 358px;
+        margin-bottom: 124px;
+    }
+
+    .content-card-container {
+        width: 100%;
+        max-width: 60%;
+        height: 574px;
+        display: flex;
+        justify-content: center;
+        gap: 42px;
+    }
+
+    .first-card figure, .second-card figure, .three-card figure {
+        width: 650px;
+        height: 574px;
+        max-width: none;
+    }
+
+    .first-card figure img, .second-card figure img, .three-card figure img {
+        width: 100%;
+        max-width: 25%;
+    }
+
+    .first-card figcaption, .second-card figcaption, .three-card figcaption {
+        max-width: 90%;
+        font-size: 32px;
+        line-height: 48px;
+    }
+
+    .cards-macbook {
         width: 100%;
         height: 100%;
-        top: 0;
-        object-fit: cover;
-        position: relative;
-
     }
+
+    .cards-macbook-container {
+        max-width: none;
+        width: 100%;
+        height: 100%;
+        top: 124px;
+        padding: 0 72px;
+    }
+   
+    .first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
+        max-width: 754px;
+        height: 706px;
+        width: 100%;
+        
+    }
+    
+    .bottom-cards {
+        margin-top: 382px;
+        margin-bottom: 216px;
+        max-width: none;
+        width: 100%;
+        height: 664px;
+        padding: 0 72px;
+    }
+    
+    .bottom-cards-container {
+        max-width: none;
+        width: 100%;
+        height: 664px;
+        gap: 32px;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        margin: auto;   
+    }
+    
+    .first-bottom-card , .second-bottom-card , .three-bottom-card , .four-bottom-card {
+        width: 100%;
+        max-width: 840px;
+        height: 664px;
+      
+    }
+
+    .first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
+        width: 100%;
+        max-width: 840px;
+        height: 664px;
+        padding: 27px;
+    }
+
+    .first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img{
+        width: 100%;
+        max-width: 25%;
+    }
+    
+    .first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption {
+        max-width: 734px;
+        width: 100%;
+        font-size: 32px;
+        line-height: 48px;
+    }
+    
+    .banner-final {
+        padding: 144px 14% 464px 14%;
+    }
+    
+    .banner-final figure {
+        max-width: 2720px;
+        height: 484px;
+    }
+    
+    .banner-final figure img {
+        width: 100%;
+        height: 484px;
+    }
+    
+    .banner-final figure .banner-final-text h3 {
+        font-size: 64px;
+        line-height: 78px;
+    }
+    
+    .banner-final .banner-final-text figcaption {
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 100px;
+        max-width: 1100px;
+    }
+}
+
+@media screen and (min-width: 3500px) {
+    .background-main figure img {
+        width: 100%;   
+        height: 100%;    
+        max-height: 1400px;
+    }
+
+    .first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
+        max-width: 1132px;
+        height: 1060px;
+        width: 100%;      
+    }
+
+    
 }
\ No newline at end of file