index.html

@@ -47,13 +47,13 @@
             </figure>
         </section>
         <section class="corpoPt4">
-            <figure>
+            <figure class="retangulo1">
                 <img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
             </figure>
-            <figure>
+            <figure class="retangulo2">
                 <img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
             </figure>
-            <figure>
+            <figure class="retangulo3">
                 <img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
             </figure>
         </section>
@@ -84,11 +84,13 @@
             </figure>
         </section>
         <section class="corpoPt6">
+            <img class="retanguloMobile" src="imagens/Rectangle 15 (2).png" alt="imagem de retangulo">
             <h1>Lorem ipsum dolor sit amet</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
                 Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
                 Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
-            <img src="imagens/Rectangle 15.png" alt="imagem de retangulo">
+            <img class="retanguloDesktop" src="imagens/Rectangle 15.png" alt="imagem de retangulo">
+            
         </section>
     </main>
     <footer>

style.css

@@ -178,8 +178,12 @@ footer{
     align-items: center;
 }
 .divRodape{
-    margin-top: 38px ;
+    margin-top: 38px;
     gap: 21.5px;
+    width: 5%;
+}
+.divRodape img{
+    width: 23%;
 }
 .paragrafoRodape{
     color:#BDBDBD;
@@ -187,4 +191,96 @@ footer{
     font-size: 10px;
     text-transform: uppercase;
     margin-bottom: 38px;
+}
+.retanguloMobile{
+    display: none;
+}
+@media(max-width:1024px){
+    .corpoPt3{
+        flex-direction: column;
+        align-items: center;
+        gap: 24px;
+    }
+    section figure {
+        text-align: center;
+        width: 84%;
+        background: #FFFFFF;
+    }
+    .imagem2{
+        width: 58%;
+    }
+    .corpoPt5{
+        margin-top: 129px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+    }
+    .corpoPt5 figure{
+        width: 89%;
+    }
+    .divRodape{
+        width: 25%;
+    }
+    .corpoPt6 p{
+        width: 84%;
+    }
+    .corpoPt6 h1{
+        width: 76%;
+    }
+    .retangulo2{
+        order: 1;
+    }
+    .retangulo1{
+        order: 2;
+    }
+    .retangulo3{
+        order: 3;
+    }
+    .corpoPt6 img{
+        width: 100%;
+        order: 1;
+        height: 414px;
+    }
+    .corpoPt6 p{
+        order: 3;
+    }
+    .corpoPt6 h1{
+        order: 2;
+    }
+    .retanguloDesktop{
+        display: none;
+    }
+    .retanguloMobile{
+        display: flex;
+        margin-bottom: 50px ;
+    }
+}
+
+@media(min-width: 2500px){
+    .corpoPt1 h2{
+        font-size: 64px;
+        margin-bottom: 18px;
+    }
+    .corpoPt1 h1{
+        font-size: 96px;
+    }
+    .corpoPt1 p{
+        font-size: 32px;
+    }
+    section figure figcaption p{
+        font-size: 32px;
+    }
+    .corpoPt5 figure p{
+        font-size: 32px;
+    }
+    .corpoPt6 p{
+        font-size: 32px;
+    }
+    .corpoPt6 h1{
+        font-size: 64px;
+    }
+    .paragrafoRodape{
+        font-size: 20px;
+    }
 }