adicionado segundo infor-texto e banner final

index.html

@@ -110,44 +110,77 @@
         </div>
       </div>
 
-<!-- second-card -->
+      <!-- second-card -->
-<section class="descricao-container">
+      <section class="descricao-container">
-
+        <div class="second-cards">
-  <div class="second-cards">
-    <figure class="second-card">
-      <img class="second-card-img" src="/src/img/second-card1.png" alt="" />
-      <figcaption class="top-card-text">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-        euismod enim non dui fringilla interdum.
-      </figcaption>
-    </figure>
-      <figure class="second-card">
-        <img class="second-card-img" src="/src/img/second-card2.png" alt="" />
-        <figcaption class="top-card-text">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-          euismod enim non dui fringilla interdum.
-        </figcaption>
-      </figure>
-        <figure class="second-card">
-          <img class="second-card-img" src="/src/img/second-card3.png" alt="" />
-          <figcaption class="top-card-text">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-            euismod enim non dui fringilla interdum.
-          </figcaption>
-        </figure>
           <figure class="second-card">
-            <img class="second-card-img" src="/src/img/second-card4.png" alt="" />
+            <img
+              class="second-card-img"
+              src="/src/img/second-card1.png"
+              alt=""
+            />
             <figcaption class="top-card-text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
               euismod enim non dui fringilla interdum.
             </figcaption>
           </figure>
+          <figure class="second-card">
+            <img
+              class="second-card-img"
+              src="/src/img/second-card2.png"
+              alt=""
+            />
+            <figcaption class="top-card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </figcaption>
+          </figure>
+          <figure class="second-card">
+            <img
+              class="second-card-img"
+              src="/src/img/second-card3.png"
+              alt=""
+            />
+            <figcaption class="top-card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </figcaption>
+          </figure>
+          <figure class="second-card">
+            <img
+              class="second-card-img"
+              src="/src/img/second-card4.png"
+              alt=""
+            />
+            <figcaption class="top-card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              euismod enim non dui fringilla interdum.
+            </figcaption>
+          </figure>
+        </div>
 
-  </div>
+        <div class="second-texto-inforcard">
-
+          <h1>Lorem ipsum dolor sit amet</h1>
-</section>
+          <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>
 
+        <div>
+          <figure>
+            <img
+        
+              src="/src/img/second-banner-final.png"
+              alt=""
+            />
 
+        </div>
+      </section>
     </main>
   </body>
 </html>

src/style/style.css

@@ -9,6 +9,8 @@
 body {
   font-family: "Inter", sans-serif;
   color: #000000;
+  display: inline-block;
+  overflow-x: hidden;
 }
 /* header-logo */
 .page-header {
@@ -33,7 +35,8 @@ body {
 /* inforcar principal */
 
 .descricao-container,
-.texto-inforcard {
+.texto-inforcard,
+.second-texto-inforcard {
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -46,33 +49,34 @@ body {
 }
 
 .texto-inforcard {
-  width: 50%;
+  width: 42%;
 }
 .texto-inforcard h2 {
   font-size: 32px;
   font-weight: 400;
 }
 
-.texto-inforcard h1 {
+.texto-inforcard h1
+ {
   font-size: 48px;
   font-weight: 500;
 }
 
 .top-card-text,
 .texto-inforcard p {
+
   font-size: 16px;
   font-weight: 400;
+  padding: 25px 0;
 }
-.top-cards
+.top-cards {
- {
   display: grid;
   grid-template-columns: repeat(3, max-content);
   gap: 21px;
   background: #f0f0f0;
 }
 
-.top-card
+.top-card {
-{
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -94,15 +98,12 @@ body {
 
 /* Container Middle banner */
 
-
-
 .mini-banner {
   margin-bottom: 130px;
   background: #e0e0e0;
   width: 100%;
 }
 
-
 .middle-img,
 .middle-mini-img {
   display: block;
@@ -124,17 +125,15 @@ body {
 }
 /* second-card */
 
-
+.second-cards {
-.second-cards{
   display: grid;
   grid-template-columns: repeat(4, max-content);
   gap: 16px;
   background: #f0f0f0;
-
 }
 
-.second-card{
+.second-card {
-display: flex;
+  display: flex;
   flex-direction: column;
   align-items: center;
   padding: 65px 65px 60px;
@@ -142,6 +141,24 @@ display: flex;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
 }
 
+.second-texto-inforcard {
+  width: 32%;
+  margin: 60px 0;
+}
+.second-texto-inforcard h1{
+  font-size: 32px;
+  font-weight: 500;
+}
+
+.second-texto-inforcard p{
+  font-size: 16px;
+  font-weight: 400;
+
+}
+
+
+
+
 @media screen and (max-width: 1024px) {
   .descktop-banner,
   .middle-img {
@@ -153,9 +170,10 @@ display: flex;
   }
 
   .top-cards,
-  .texto-inforcard {
+  .texto-inforcard,
+  .second-cards {
     grid-template-columns: 1fr;
-    margin: 0 32px;
+    margin: 0 26;
   }
 
   .texto-inforcard h2 {
@@ -166,18 +184,12 @@ display: flex;
     font-size: 28px;
   }
 
-  .texto-inforcard
+  .texto-inforcard {
-   {
     width: 70%;
-    
-    
   }
 
-  
-
-
   .top-card-text,
-  .texto-inforcard p{
+  .texto-inforcard p {
     font-size: 18px;
   }
   .middle-card {
@@ -192,10 +204,6 @@ display: flex;
     display: flex;
     align-items: center;
   }
-
-  
-
-  
 }
 
 @media screen and (min-width: 1025px) {