feat: adiciona bottom infocard mobile e desktop

assets/styles/main.css

@@ -111,7 +111,7 @@ body {
     gap: 40px;
     justify-content: center; 
     position: relative;
-    bottom: -62px;
+    top: 32px;
 }
 
 
@@ -150,21 +150,48 @@ body {
     padding: 28px 26px 28px 26px;
     max-width: 300px;
 }
-
+.bottom-infocard {
-@media screen and (max-width: 414px) {
+    margin-top: 108px;
-
+    padding: 32px;
-    .main-banner {
-        content: url('../image/main-banner-mobile.png');
-        
-    }   
-    .header-logo {
-        padding: 24px 0 33px;
-    }
-    
-    
 }
 
- @media screen and (max-width: 768px) {
+.bottom-infocard-title {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+    text-align: center;
+}
+
+.bottom-infocard-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 550px;
+    text-align: center;
+    margin: 0 auto;
+    padding-bottom: 50px;
+}
+
+.bottom-infocard-image {
+   display: flex;
+   justify-content: center;
+   width: 100%;
+   margin-bottom: 116px;
+}
+
+.bottom-infocard-image img {
+    max-width: 1360px;
+    width: 100%;
+}
+   
+ 
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+    .top-cards,.bottom-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
+@media screen and (max-width: 768px) {
     .top-infocard-subtitle {
         font-size: 20px;
         line-height: 24px;
@@ -192,7 +219,6 @@ body {
     .middle-banner {
         padding: 0 23px; 
     }
-
     .middle-banner-image-wrapper {
         display: grid;
         grid-area: auto;
@@ -203,6 +229,8 @@ body {
         "c c";
         column-gap: 14px;
         row-gap: 24px;
+        width: 90%;
+        margin: 0 32px;   
     }
 
     .middle-banner-image img {
@@ -213,39 +241,71 @@ body {
     .middle-banner-image.a {
         grid-area: a;
         width: 100%;
+        
     }
     
     .middle-banner-image.b {
         grid-area: b;
         width: 100%;
+       
+        
     }
 
     .middle-banner-image.c {
         grid-area: c;
         width: 100%;
+       
+       
     }
+       
     .bottom-cards {
         grid-template-columns: 1fr;
         padding: 0 32px;
         margin-top: 190px;
-    
     }
+
+
+    .bottom-infocard-text {
+        padding: 0 32px;
+    }
+
+    .bottom-infocard-title {
+    font-size: 24px;
+    }
+
+    .bottom-image {
+        content: url('../image/bottom-banner-mobile.png');
+        width: 100%;
+    }
+
+
+    .bottom-infocard {
+        display: flex;
+        flex-direction: column-reverse;
+        padding: 0;
+    }
+
+    .bottom-infocard-image {
+        margin-bottom: 50px;
+    }
+
+
+
 }
 
+@media screen and (max-width: 414px) {
 
+    .main-banner {
+        content: url('../image/main-banner-mobile.png');
         
+    }   
+    .header-logo {
+        padding: 24px 0 33px;
+    } 
+}
 
 @media screen and (max-width: 290px) {
     .top-infocard-title {
         font-size: 26px;
     }    
 }
-
-@media screen and (min-width: 769px) and (max-width: 1200px) {
-    .top-cards {
-        grid-template-columns: repeat(2, max-content);
-    }
-    .bottom-cards {
-        grid-template-columns: repeat(2, max-content);
-    }
-}

index.html

@@ -81,32 +81,45 @@
 
             <div class="bottom-cards">
                 <figure class="bottom-card">
-                    <img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando ">
+                    <img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando uma nota">
                     <figcaption class="bottom-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>                
                 </figure>
 
                 <figure class="bottom-card">
-                    <img class="bottom-card-image" src="assets/image/bottom-card-image2.svg" alt="Figura representando uma sacola de compras">
+                    <img class="bottom-card-image" src="assets/image/bottom-card-image2.svg" alt="Figura representando uma mão com uma moeda acima">
                     <figcaption class="bottom-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.     
                     </figcaption>                
                 </figure>
 
                 <figure class="bottom-card">
-                    <img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando uma mão com uma moeda acima">
+                    <img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando um notebook">
                     <figcaption class="bottom-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>
                 </figure>
                 <figure class="bottom-card">
-                    <img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando uma mão com uma moeda acima">
+                    <img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando um celular">
                     <figcaption class="bottom-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>                
                 </figure>
             </div>
+            <section class="bottom-infocard">
+            
+            <section class="bottom-infocard-text">
+                <h1 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h1>
+                <p class="bottom-infocard-description">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>
+            </section>
+                <div class="bottom-infocard-image">
+                    <img class="bottom-image" src="assets/image/bottom-banner.png" alt="Imagem com telas com códigos de programação">
+                </div>   
+            </section>
+            
         </main>
     </body>
 </html>