Merge pull request 'Feat/Media-Querrys' (#12) from Feat/Media-Querrys into develop

Reviewed-on: #12

assets/styles/main.css

@@ -41,7 +41,7 @@ body{
 
 .top-infocard-text{
     width: 40%;
-    padding: 72px 0;
+    margin: 72px 0;
 }
 
 .top-infocard-subtitle{
@@ -66,7 +66,7 @@ body{
 
 .top-infocard-image{
     width: 17%;
-    padding: 0 0 178px;
+    margin: 0 0 178px;
 }
 
 .top-cards{   
@@ -74,7 +74,7 @@ body{
     grid-template-columns: repeat(3, 18%);
     gap: 20px;
     justify-content: center;
-    padding: 0 0 80px;
+    margin: 0 0 80px;
 }
 
 .top-card{
@@ -110,9 +110,9 @@ body{
     gap: 38px;
     position: relative;
     top: 62px;   
-    
 }
 
+
 .mid-banner-image{
     width: 100%;
  }
@@ -131,8 +131,8 @@ body{
     align-items: center;
     background: #FFFFFF;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
-    gap: 15px;
+    gap: 16px;
-    padding: 36px 32px 65px;
+    padding: 36px 32px 64px;
 }
 
 .bottom-card-image{
@@ -154,6 +154,7 @@ body{
     justify-content: center;
     flex-direction: column;
     gap: 50px;
+    margin: 0 0 116px;
 }
 
 .bottom-section-text{
@@ -173,10 +174,6 @@ body{
     line-height: 24px;
 }
 
-.bottom-section-image{
-    padding: 0 0 116px;
-}
-
 .bottom-section-image-desktop{
     width: 71%;
 }
@@ -194,6 +191,7 @@ body{
     flex-direction: column;
     width: 21%;
     align-items: center;
+    text-align: center;
 }
 
 .footer-icons{
@@ -216,3 +214,130 @@ body{
     text-transform: uppercase;
     color: #BDBDBD;
 }
+
+@media screen and (min-width: 2500px) {
+    .top-infocard-subtitle{
+        font-size: 64px;
+        line-height: 78px;   
+    }
+    .top-infocard-title{
+        font-size: 96px;
+        line-height: 116px;
+    }
+    .bottom-section-text-title{
+        font-size: 64px;
+        line-height: 78px;
+    }
+
+    .top-infocard-description,
+    .top-card-description,
+    .bottom-card-description,
+    .bottom-section-text-description {
+        font-size: 32px;
+        line-height: 48px;
+    }
+    .footer-text{
+        font-size: 20px;
+        line-height: 24px;
+    }
+}
+
+@media screen and (min-width: 1025px) {
+    .top-banner-mobile,
+    .bottom-section-image-mobile{
+        display: none;
+    }
+    
+}
+
+@media screen and (max-width: 1024px) {
+    .top-banner-desktop,
+    .bottom-section-image-desktop{
+        display: none;
+    }
+    .header-link{
+        width: 55%;
+    }
+    .top-infocard-text{
+        width: 86%;
+        margin: 72px 0 64px;
+    }
+    .top-infocard-subtitle{
+        font-size: 20px;
+        line-height: 24px;
+    }
+    .top-infocard-title{
+        font-size: 28px;
+        line-height: 34px;
+    }
+    .top-infocard-image{
+        width: 58%;
+        margin: 0 0 91px;
+    }
+    .top-cards{   
+        display: grid;
+        grid-template-columns: repeat(1, 85%);
+        gap: 20px;
+        justify-content: center;
+        margin: 0 0 80px;
+    }
+    .top-card{
+        padding: 36px 26px 28px;
+        gap: 24px;
+    }
+
+    .mid-banners{
+        margin: 0 0 112px;
+    }
+    .mid-banner-wrapper{
+        display: grid;
+        grid-template-columns: repeat(2, 43%);
+        justify-content: center;
+        column-gap: 14px;
+        row-gap: 24px;
+        position: relative;
+        top: 32px;  
+    }
+    .area2{
+        grid-area: 1/1/1/1 ;
+    }
+    .area3{
+        grid-area: 2/1/4/3;
+    }
+    .bottom-cards{   
+        display: grid;
+        grid-template-columns: repeat(1, 89%);
+        gap: 16px;
+        justify-content: center;
+        margin: 0 0 98px;
+    }
+    .bottom-card-image{
+        display: block;
+        width: 29%
+    }
+    .bottom-section{
+        flex-direction: column-reverse;
+        margin: 0 0 87px;
+    }
+    .bottom-section-image,
+    .bottom-section-image-mobile{
+        width: 100%;
+    }
+    .bottom-section-text{
+        width: 85%;
+        text-align: center; 
+    }
+    .bottom-section-text-title{
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 29px;
+    }
+    .page-footer{
+        padding: 32px 0;
+    }
+    .page-footer-content{
+        width: 63%;
+        align-items: center;
+    }
+
+}

index.html

@@ -28,6 +28,7 @@
         <div>
             <figure>
                  <img class="top-banner top-banner-desktop" src="./assets/images/top-banner-desktop.png" alt="Imagem de um notebook" />
+                 <img class="top-banner top-banner-mobile" src="./assets/images/top-banner-mobile.png" alt="Imagem de um notebook">
             </figure>
            </div> 
          
@@ -75,15 +76,15 @@
 
         <div class="mid-banners">
             <div class="mid-banner-wrapper">
-                <figure>
+                <figure class="area1">
                     <img class="mid-banner-image" src="./assets/images/mid-image-01.png" alt="Notebook meio aberto primeiro angulo" />
                 </figure>
     
-                <figure>
+                <figure class="area2">
                     <img class="mid-banner-image" src="./assets/images/mid-image-02.png" alt="Notebook meio aberto segundo angulo" />
                 </figure>
     
-                <figure>
+                <figure class="area3">
                     <img class="mid-banner-image" src="./assets/images/mid-image-03.png" alt="Notebook meio aberto terceiro angulo" />
                 </figure>
             </div>
@@ -136,7 +137,9 @@
            </div>
 
            <figure class="bottom-section-image">
+
             <img class="bottom-section-image-desktop" src="./assets/images/bottom-image-desktop.png" alt="Imagem" />
+            <img class="bottom-section-image-mobile" src="./assets/images/bottom-image-mobile.png" alt="Imagem" />
 
            </figure>