Responsivo/Alterações

css/style.css

@@ -35,15 +35,11 @@
   margin: 73px;
 }
 
-.image-computer {
-  margin-bottom: 3rem;
-}
-
 p {
   font-size: 16px;
-  line-height: 24px;
   font: weight 400px;
   text-align: center;
+  line-height: 24px;
   justify-content: center;
 }
 
@@ -75,6 +71,8 @@ p {
 }
 
 .container-3 {
+  margin-top: 6rem;
+  margin-bottom: 3rem;
   display: flex;
   gap: 1em;
   flex-wrap: wrap;
@@ -83,16 +81,24 @@ p {
 
 /*----------------Section-3--------------------------*/
 .container-notebooks {
-  background-color: #e0e0e0;
-  width: 100%;
   display: flex;
-  gap: 1em;
+  text-align: center;
   justify-content: center;
+  background-color:  #E0E0E0;
+  gap: 0,1em;
+  padding: 1em;
+}
+
+.notebook{
+ width: 100%;
+ translate: 0px 64px;
+ margin-top: -62px;
 }
 
 /*----------------Section-4--------------------------*/
 .container-4 {
-  margin-top: 108px;
+  margin-top: 62px;
+  width: 100%;
 }
 
 .title {
@@ -110,7 +116,9 @@ p {
 
 .text-p {
   align-items: center;
-  width: 29%;
+  width: 550px;
+    height: 120px;
+    line-height: 24px;
   margin-bottom: 50px;
 }
 
@@ -120,7 +128,9 @@ p {
 }
 
 .image-container {
-  width: 100%;
+display: flex;
+justify-content: center;
+margin-bottom: 4rem;
 }
 
 .retangle {
@@ -139,8 +149,55 @@ footer {
   gap: 1em;
 }
 
+
 .text-footer {
   color: white;
   font-size: 10px;
   font-weight: 400;
 }
+
+@media only screen and (min-width: 2500px){
+  p{
+    font-size: 32px;
+  }
+}
+@media only screen and (max-width:1024px){
+  .container-4{
+    display: flex;
+    flex-direction: column;
+  }
+  .section-4{
+    order: 2;
+  }
+  .image-final{
+    order: 1;
+    width: 100%;
+  }
+  .image-container{
+  width: 414px;
+  height: 414px;
+  object-fit: fill;
+  }
+
+  .retangle{
+    width: 100%;
+    object-fit: fill;
+    transform: scale(-3,1);
+    zoom: normal;
+  }
+}
+@media only screen and (max-width:700px){
+  .text-p{
+    width: 350px;
+    height: 152px;
+    margin-bottom: 6rem;
+  }
+}
+@media only screen and (max-width:1024px){
+  .container-notebooks{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+}

index.html

@@ -18,7 +18,7 @@
         <figure class="header-logo">
             <img class="logo" src="./assets/img/Logo-M3Academy 1.png" alt="Logo-M3Academy" />
         </figure>
-        <figure>
+        <figure class="banner">
             <img class="header-computer" src="./assets/img/Rectangle 9.jpg" alt="Capa-notebook" />
         </figure>
     </header>
@@ -72,14 +72,14 @@
 
         <!--------------Section-3------------------>
         <div class="container-notebooks">
-            <figure class="notebook">
+            <figure class="container-notebooks ima1">
-                <img src="./assets/img/Rectangle 13.jpg" alt="notebook">
+                <img class="notebook" src="./assets/img/Rectangle 13.jpg" alt="notebook">
             </figure>
-            <figure class="notebook">
+            <figure class="container-notebooks imag2">
-                <img src="./assets/img/Rectangle 16.png" alt="notebook">
+                <img class="notebook"src="./assets/img/Rectangle 16.png" alt="notebook">
             </figure>
-            <figure class="notebook">
+            <figure class="container-notebooks image3">
-                <img src="./assets/img/Rectangle 17.png" alt="notebook">
+                <img class="notebook" src="./assets/img/Rectangle 17.png" alt="notebook">
             </figure>
         </div>
 
@@ -117,7 +117,7 @@
 
         <!--------------Section-4------------------>
         <section class="container-4">
-            <div>
+            <div class="section-4">
                 <h3 class="title">Lorem ipsum dolor sit amet</h3>
                 <div class="text-container">
                     <p class="text-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non
@@ -125,12 +125,13 @@
                         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>
+                    </div>
                 </div>
                 <div class="image-final">
                     <figure class="image-container">
-                        <img class="rectangle" src="./assets/img/Rectangle 15.jpg" alt="">
+                        <img class="retangle" src="./assets/img/Rectangle 15.jpg" alt="">
                     </figure>
-                </div>
+
             </div>
         </section>
     </main>
@@ -138,9 +139,12 @@
     <!--------------Footer------------------>
     <footer>
         <div class="image-footer">
-            <img src="./assets/img/instagram.svg" />
+            <a href="/">
-            <img src="./assets/img/facebook.svg" />
+                 <img class="contato" src="./assets/img/instagram.svg" alt="instagram" /></a>
-            <img src="./assets/img/youtube.svg" />
+            <a href="/"> 
+                <img class="contato" src="./assets/img/facebook.svg" alt="facebook" /></a>
+            <a href="/"> 
+                <img class="contato" src="./assets/img/youtube.svg" alt="youtube" /></a>
         </div>
         <div>
             <p class="text-footer">