criar texto final, ajuste galeria,banner,final

assents/style/estilo.css

@@ -80,21 +80,49 @@ body {
     padding: 0 28px;
     width: 45%;
 }
+/*texto final*/
+
+.text-title-final {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+}
+
+.text-description-final {
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.text-final {
+    display: block;
+    margin: 0 36% 50px;
+    width: 29%;
+}
 
 /*Cards do topo*/
 
 .cards-top {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(3, max-content);
+    align-items: center;
-    gap: 20px;
     justify-content: center;
+    padding: 0 72px;
+}
+
+.card-top-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    width: 100%;
 }
 
 .card {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 36px 26px 27px ;
+    justify-content: center;
+    padding: 35px 25px 26px ;
     background: #FFFFFF;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
 }
@@ -113,11 +141,13 @@ body {
     text-align: center;
 }
 /*Card de baixo */
-.amiga {
+
+.card-bottom {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 4.5rem;
+    padding: 0 72px;
+    margin-top: 81px;
 
 }
 
@@ -154,7 +184,8 @@ body {
     background-color: #E0E0E0;
     height: 14%;
     max-height: 570px;
-    padding-top: 62px;
+    padding-top: 31px;
+    margin: 0 0 5%;
 }
 
 .gallery-box {
@@ -164,6 +195,7 @@ body {
     gap: 39px;
     width: 30%;
     height: 89%;
+    transform: translateY(31px);
 }
 
 .gallery-foto {
@@ -174,6 +206,24 @@ body {
     max-height: 530px;
 }
 
+/*foto final*/
+
+.foto-final {
+    display: block;
+    align-items: center;
+    width: 71%;
+    height: 7%;
+    margin: 0 15%;
+}
+
+.foto-final-reverse {
+    display: none;
+    width: 100%;
+    height: 8%;
+    margin-bottom: 50px;
+
+}
+
 @media screen and (max-width: 1023px) { 
     .banner-big {
         display: none;
@@ -189,8 +239,10 @@ body {
         width: 100%;
     }
 
-    .text-card {
+    .text-final {
-        max-width: max-content;
+        text-align: center;
+        margin: 0 0 50px;
+        width: 100%;
     }
 
     .theree-computer {
@@ -199,7 +251,43 @@ body {
     }
 
     .cards-top {
-        grid-template-columns: 1fr;
+        padding: 0 32px;
+    }
+
+    .card-top-box {
+        flex-direction: column;
         margin: 0 32px;
     }
+
+    .gallery {
+        padding: 0;
+    }
+
+    .gallery-box {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        width: 100%;
+        padding: 0 23px;
+    }
+
+    .gallery-foto-mobile-3 {
+        grid-column: 1/3 ;
+        grid-row: 2/3;
+    }
+
+    .card-bottom {
+        padding: 0 8% 1rem;
+    }
+
+    .card-total-bottom {
+        flex-direction: column;
+    }
+
+    .foto-final-reverse {
+        display: block;
+    }
+
+    .foto-final {
+        display: none;
+    }
 }

index.html

@@ -38,6 +38,7 @@
             </section>
 
             <section class="cards-top">
+                <div class="card-top-box">
                     <figure class="card">
                         <img class="card-foto"  src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>
                         <figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
@@ -52,41 +53,42 @@
                         <img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>
                         <figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
                     </figure>
+                </div>
             </section>
 
             <div class="gallery">
                 <div class="gallery-box">
-                    <img class="gallery-foto" src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
+                    <img class="gallery-foto gallery-foto-mobile1-1" src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
-                    <img class="gallery-foto" src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
+                    <img class="gallery-foto gallery-foto-mobile-2" src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
-                    <img class="gallery-foto" src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
+                    <img class="gallery-foto gallery-foto-mobile-3" src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
                 </div>
             </div>
 
-            <section class="amiga">
+            <section class="card-bottom">
                 <div class="card-total-bottom">
 
-                <figure class="card card-bottom">
+                <figure class="card">
                     <img class="card-foto-bottom" src="./assents/imagens/card-bottom-money.png" alt="foto de dinheiro">
                     <figcaptionet class="text-card-bottom">
                         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>
 
-                <figure class="card card-bottom">
+                <figure class="card">
                     <img class="card-foto-bottom" src="./assents/imagens/card-bottom-coin.png" alt=" foto de moeda">
                     <figcaption class="text-card-bottom">
                         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>
 
-                <figure class="card card-bottom">
+                <figure class="card">
                     <img class="card-foto-bottom" src="./assents/imagens/card-bottom-laptop.png" alt="foto de um laptop">
                     <figcaption class="text-card-bottom">
                         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>
 
-                <figure class="card card-bottom">
+                <figure class="card">
                     <img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">
                     <figcaption class="text-card-bottom">
                         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.
@@ -95,8 +97,18 @@
             </div>
             </section>
 
-           
+            <section class="text" >
+                <img class="foto-final-reverse" src="./assents/imagens/banner-bottom-reverse.png" alt="Foto de um computador e um óculos">
+                <div class="text-final">
+                    <h3 class="text-title-final">Lorem ipsum dolor sit amet</h3>
+                    <p class="text-description-final">
+                            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>
+                <img class="foto-final" src="./assents/imagens/banner-bottom.png" alt="Foto de computador embasado">
+            </section>
         </main>        
-        
     </body>
 </html>