Merge pull request 'feat(index): adiciona infocard de baixo desktop e mobile' (#6) from feature/bottom-inforcard into main

Reviewed-on: #6

index.html

@@ -108,7 +108,18 @@
                 </figure>
             </div>
         </div>
-        
+
+        <!-- bottom infocard-->
+        <article class="bottom-infocard">
+            <figure class="bottom-infocard-image-container">
+                <img class="bottom-infocard-image" src="assets/images/bottom-infocard-image.png" alt="banner do infocard de baixo" />
+            </figure>
+
+            <div class="bottom-infocard-content">
+                <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
+                <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>
+        </article>
     </main>
 </body>
 

styles/main.css

@@ -22,15 +22,18 @@ body {
 }
 
 /*Banners*/
-.main-banner, .middle-banner {
+.main-banner,
+.middle-banner {
     width: 100%;
 }
 
-.main-banner-desktop, .middle-banner-desktop {
+.main-banner-desktop,
+.middle-banner-desktop {
     display: block;
 }
 
-.main-banner-mobile, .middle-banner-mobile {
+.main-banner-mobile,
+.middle-banner-mobile {
     display: none;
 }
 
@@ -119,7 +122,7 @@ body {
 
     position: relative;
     top: -60px;
-    
+
 }
 
 .bottom-card {
@@ -146,7 +149,42 @@ body {
     width: 86%;
 }
 
+/*bottom Infocard*/
+.bottom-infocard {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    padding: 142px 0 179px;
+}
+
+.bottom-infocard-image-container {
+    width: 31%;
+}
+
+.bottom-infocard-image {
+    width: 100%;
+}
+
+.bottom-infocard-content {
+    width: 29%;
+}
+
+.bottom-infocard-title {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 32px;
+    margin-bottom: 18px;
+}
+
+.bottom-infocard-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
 @media screen and (max-width: 1024px) {
+
     /*top infocard*/
     .top-infocard {
         padding: 84px 26px 158px;
@@ -210,16 +248,43 @@ body {
     .bottom-card-image {
         max-width: 120px;
     }
+
+    .bottom-infocard {
+        flex-direction: column;
+        gap: 50px;
+        padding: 80px 0 135px;
+    }
+
+    .bottom-infocard-image-container {
+        width: 100%;
+    }
+
+    .bottom-infocard-image {
+        max-height: 414px;
+        object-fit: cover;
+        object-position: bottom;
+    }
+
+    .bottom-infocard-content {
+        width: 100%;
+        padding: 0 26px;
+    }
+
+    .bottom-infocard-title {
+        font-size: 24px;
+    }
 }
 
 @media screen and (max-width: 414px) {
 
     /*banners*/
-    .main-banner-desktop, .middle-banner-desktop {
+    .main-banner-desktop,
+    .middle-banner-desktop {
         display: none;
     }
 
-    .main-banner-mobile, .middle-banner-mobile {
+    .main-banner-mobile,
+    .middle-banner-mobile {
         display: block;
     }