index.html

@@ -82,17 +82,17 @@
       <div class="grids">
         <div class="grid">
           
-            <div>
+            <div class="grid-a">
               <figure>
                 <img class="grid-img" src="assets/imagens/gird1.png" alt="Notebook 1">
               </figure>
             </div>
-             <div>
+             <div class="grid-b">
             <figure>
               <img class="grid-img" src="assets/imagens/grid2.png" alt="Notebook 2">
             </figure>
           </div>
-          <div>
+          <div class="grid-c">
             <figure>
               <img class="grid-img" src="assets/imagens/grid3.png" alt="Notebook 3">
             </figure>
@@ -101,68 +101,57 @@
       </div>
 
       <div class="cards">
-
+        <div class="card">
-        <figure class="card1">
+          <figure>
-
             <img src="assets/imagens/mine-foto-1-grupo2.png" alt="Card 1">
-
             <figcaption>
-
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
             </figcaption>
-
           </figure>
-
         </div>
-
+        <div class="card" >
-      <div>
+          <figure>
-
-        <figure class="card2">
-
             <img src="assets/imagens/mine-foto-2-grupo2.png" alt="card 2">
-
             <figcaption>
-
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
             </figcaption>
-
           </figure>
-
         </div>
-
+        <div class="card">
-      <div>
+          <figure>
-
-        <figure class="card3">
-
             <img src="assets/imagens/mine-foto-3-grupo2.png" alt="card 3">
-
             <figcaption>
-
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
             </figcaption>
-
           </figure>
-
         </div>
-
+        <div class="card">
-      <div>
+          <figure >
-
-        <figure class="card4">
-
             <img src="assets/imagens/mine-foto-4-grupo2.png" alt="card 4">
-
             <figcaption>
-
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
             </figcaption>
-
           </figure>
-
         </div>
+      </div>
+
+      <section class="sessao-oculos">
+        <div class="texto-oculos">
+          <h2>Lorem ipsum dolor sit amet</h2>
+          <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>
+        </div>
+        <picture class="picture-oculos">
+          <source media="(max-width: 1024px )" srcset="assets/imagens/image-oculos-mobile.png">
+          <img class="image-oculos" src="assets/imagens/image-oculos.png" alt="imagem de um oculos">
+        </picture>
+
+      </section>
 
 
 

style.css

@@ -125,10 +125,183 @@
 
 .cards {
     display: flex;
+    flex-wrap: wrap;
     gap: 16px;
     justify-content: center;
     text-align: center;
-    padding: 303px;
+    margin-top: 191px;
+    margin-bottom: 108px;
+}
+
+.card{
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    max-width: 432px;
+    padding: 35px 32px 65px 32px;
+}
+
+.card figcaption{
+    margin-top: 15px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.texto-oculos{
+    max-width: 550px;
+    margin-bottom: 50px;
+
+}
+
+.texto-oculos h2{
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+}
+
+.texto-oculos p{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.sessao-oculos{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 116px;
+}
+
+.image-oculos{
+    max-width: 1360px;
+    width: 100%;
+}
+
+@media screen and (max-width: 1024px ) {
+
+    .one-p{
+        text-align: center;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    .BL{
+        padding: 0 24px;
+        margin-top: 73px;
+    }
+    
+    .sentence{
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 34px;
+    }
+
+    .sentence2{
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .computadores{
+        margin-top: 65px;
+
+    }
+
+    .sessao1{
+        padding: 0 32px;
+    }
+
+    .icones{
+        margin-top: 90px;
+        flex-direction: column;
+        gap: 24px;
+        
+    }
+
+    .icone1, .icone2, .icone3 {
+        max-width: unset;
+    }
+
+    .grids{
+        padding: 0 24px;
+    }
+
+    .grid{
+        row-gap: 24px;
+        column-gap: 14px;
+        bottom: -32px;
+        display: grid;
+        grid-template-areas: 
+            "b a" 
+            "c c";
+    }
+
+    .grid-a{
+        grid-area: a;
+    }
+
+    .grid-b{
+        grid-area: b;
+    }
+
+    .grid-c{
+        grid-area: c;
+    }
+
+    .grid-img{
+        max-width: unset;
+    }
+
+    .img1 img ,.img2 img ,.img3 img{
+        margin-bottom: 38px;
+    }
+    
+    figcaption{
+
+    }
+
+    .cards{
+        margin-top: 112px;
+        flex-direction: column;
+        padding: 0 24px;
+        margin-bottom: 68px;
+    }
+
+    .card{
+        max-width: unset;
+    }
+    
+    .image-oculos{
+
+    }
+    
+    .picture-oculos{
+        width: 100%;
+    }
+    
+    .sessao-oculos{
+        flex-direction: column-reverse;
+        margin-top: 98px;
+    }
+    
+    .texto-oculos{
+        margin-top: 50px;
+    }
+
+    .texto-oculos h2{
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 29px;
+    }
+
+    .texto-oculos p{
+        margin-top: 9px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+    }
 
 
 }