assets/CSS/main.css

@@ -118,6 +118,37 @@ body {
     max-width: 566px;
 }
 
+.bottom-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,432px);
+    gap: 16px;
+    justify-content: center;
+    width: 100%;
+    padding: 192px 72px 110px 72px;
+}
+.bottom-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px  34px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+    width: 100%;
+}
+
+.bottom-card-image {
+    display: block;
+    margin-bottom: 26px;
+}
+
+.bottom-card-description {
+    display: flex;
+    margin: 0 auto;
+    max-width: 368px;
+    font-weight: 400;
+    font-size: 16px;
+    text-align: center;
+}
+
 @media screen and (max-width:1024px) {
     .middle-banner-container {
         display: grid;

index.html

@@ -173,6 +173,35 @@
                 </figcaption>
              </figure>
         </div>
+
+        <section class="bottom-infocard">
+            <div 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>
+              </div>
+              <div class="bottom-image-desktop">
+                <img 
+                src="./assets/images/Rectangle 15.png" 
+                alt="Banner Infocard Debaixo-Desktop" 
+                class="bottom-infocard-image-desktop" 
+                />
+              </div>
+    
+              <div class="bottom-image-mobile">
+                <img 
+                src="./assets/images/bottom-infocard-image-mobile.png" 
+                alt="Banner Infocard Debaixo-Mobile" 
+                class="bottom-infocard-image-mobile" 
+                />
+              </div>
+            
+        </section>
     </main>
 </body>
 </html>