Merge pull request 'feat: adiciona infocard inferior' (#11) from feature/bottom_infocard into development

Reviewed-on: #11

assets/styles/styles.css

@@ -179,6 +179,34 @@ header {
   line-height: 24px;
 }
 
+.bottom-ifocard-desktop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 116px;
+  width: 100%;
+}
+
+.bottom-ifocard-desktop img {
+  width: 100%;
+}
+
+.bottom-ifocard-desktop-container {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  width: 70%;
+  margin-bottom: 50px;
+}
+
+.bottom-ifocard-desktop-container div {
+  width: 40%;
+}
+
+.bottom-ifocard-mobile {
+  display: none;
+}
+
 @media (max-width: 414px) {
   .banner-desktop {
     display: none;
@@ -220,6 +248,10 @@ header {
     margin-top: 0;
   }
 
+  .gallery {
+    margin-bottom: 112px;
+  }
+
   .gallery-container {
     gap: 24px 14px;
   }
@@ -240,6 +272,42 @@ header {
   .bottom-cards-container {
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
+
+  .bottom-ifocard-desktop {
+    display: none;
+  }
+
+  .bottom-ifocard-mobile {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 87px;
+  }
+
+  .bottom-ifocard-mobile img {
+    width: 100%;
+  }
+
+  .bottom-ifocard-mobile-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 0 32px;
+  }
+
+  .bottom-ifocard-mobile-container h1 {
+    margin: 50px 0 9px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .top-cards-container {
+    display: flex;
+  }
+
+  .bottom-cards-container {
+    display: flex;
+  }
 }
 
 @media (min-width: 1623px) and (max-width: 1912px) {
@@ -261,6 +329,12 @@ header {
   }
 }
 
+@media (min-width: 600px) and (max-width: 1123px) {
+  .bottom-ifocard-desktop-container div {
+    width: 75%;
+  }
+}
+
 @media (min-width: 415px) and (max-width: 599px) {
   .gallery-container {
     grid-template-columns: repeat(auto-fill, minmax(94%, 1fr));
@@ -273,6 +347,10 @@ header {
   .bottom-cards-container {
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
+
+  .bottom-ifocard-desktop-container div {
+    width: 85%;
+  }
 }
 
 @media (min-width: 350px) and (max-width: 380px) {

index.html

@@ -164,6 +164,41 @@
           </div>
         </div>
       </div>
+      <section class="bottom-ifocard-desktop">
+        <div class="bottom-ifocard-desktop-container">
+          <div>
+            <h1>Lorem ipsum dolor sit amet</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+              vulputate sapien non libero faucibus interdum. In eget tincidunt
+              ipsum. <br />
+              Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi
+              eget hendrerit. Curabitur venenatis felis vitae sagittis
+              venenatis. <br />
+              Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+            </p>
+          </div>
+        </div>
+        <figure>
+          <img src="./assets/images/bottom-banner-desktop.svg" alt="" />
+        </figure>
+      </section>
+      <section class="bottom-ifocard-mobile">
+        <figure>
+          <img src="./assets/images/bottom-banner-mobile.svg" alt="" />
+        </figure>
+        <div class="bottom-ifocard-mobile-container">
+          <h1>Lorem ipsum dolor sit amet</h1>
+          <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>
+      </section>
     </main>
   </body>
 </html>