index.html

@@ -58,20 +58,75 @@
         <div class="container-middle-cards">
             <figure class="middle-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card1.png"
-                    alt="Primeira imagem principal">
+                    alt="Primeira imagem principal" />
             </figure>
 
             <figure class="middle-banner second-img-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card2.png"
-                    alt="Segunda imagem principal">
+                    alt="Segunda imagem principal" />
             </figure>
 
             <figure class="middle-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card3.png"
-                    alt="Terceira imagem principal">
+                    alt="Terceira imagem principal" />
             </figure>
         </div>
+
     </div>
+
+    <div class="bottom-cards">
+        <figure class="container-bottom-cards">
+            <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
+                alt="Primeiro card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
+
+        <figure class="container-bottom-cards">
+            <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
+
+        <figure class="container-bottom-cards">
+            <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
+                alt="Terceiro card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
+
+        <figure class="container-bottom-cards">
+            <img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
+                alt="Primeiro card da parte de baixo" />
+            <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+        </figure>
+    </div>
+
+    <section class="bottom-infocards">
+        <div class="bottom-infocard-text">
+            <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>
+        <figure class="container-infocard-img">
+            <img class="bottom-infocard-img bottom-infocard-img-desktop" src="assets/imgs/bottom-infocard-desktop.png"
+                alt="Banner inforcard desktop">
+            <img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
+                alt="Banner infocard mobile">
+        </figure>
+
+    </section>
 </main>
 
 <body>

style/main.css

@@ -46,6 +46,7 @@
   justify-content: center;
   width: 100%;
   gap: 21px;
+  margin-bottom: 50px;
 }
 
 .main .top-card {
@@ -61,7 +62,7 @@
 
 .main .card-img {
   display: block;
-  width: 34%;
+  width: 30%;
 }
 
 .main .card-description {
@@ -75,8 +76,7 @@
 }
 
 .main .container-middle-cards {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(3, 1fr);
   gap: 39px;
   justify-content: center;
   position: relative;
@@ -89,6 +89,78 @@
   width: 100%;
 }
 
+.main .bottom-cards {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 0 72px;
+}
+
+.main .container-bottom-cards {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
+  max-width: 100%;
+}
+
+.main .bottom-img-card {
+  display: block;
+  padding: 35px 25px;
+}
+
+.main .bottom-description {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  width: 84%;
+  padding-bottom: 17px;
+}
+
+.main .bottom-infocards {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 108px;
+  max-width: 100%;
+}
+
+.main .bottom-infocard-title {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 600;
+  max-width: 100%;
+}
+
+.main .bottom-infocard-text {
+  align-self: center;
+  text-align: center;
+  width: 40%;
+}
+
+.main .bottom-infocard-description {
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 32px;
+}
+
+.main .container-infocard-img {
+  display: flex;
+  justify-content: center;
+  max-width: 100%;
+}
+
+.main .bottom-infocard-img {
+  display: block;
+  align-self: center;
+  margin-bottom: 116px;
+  width: 70%;
+}
+
+.main .bottom-infocard-img-mobile {
+  display: none;
+}
+
 /* --------------------------------------- */
 
 /* Banner-desktop / Banner-mobile*/
@@ -165,14 +237,9 @@
   .main .container-middle-cards {
     padding: 0 23px;
   }
-}
-
-@media (max-width: 768px) {
-  .main .middle-cards {
-    margin-top: 44px;
-  }
 
   .main .container-middle-cards {
+    display: grid;
     grid-template-columns: repeat(2, 1fr);
     column-gap: 14px;
     margin-bottom: 80px;
@@ -186,8 +253,54 @@
   }
 }
 
+@media (max-width: 768px) {
+  .main .middle-cards {
+    margin-top: 44px;
+  }
+}
+
 @media (max-width: 480px) {
   .main .second-img-banner {
     grid-area: 1/1;
   }
 }
+
+/* Bottom cards */
+
+@media (max-width: 1024px) {
+  .main .bottom-cards {
+    display: flex;
+    flex-direction: column;
+    padding: 0 23px;
+  }
+}
+
+/*Bottom infocards*/
+
+@media (max-width: 1024px) {
+  .main .bottom-infocards {
+    flex-direction: column-reverse;
+  }
+
+  .main .bottom-infocard-img {
+    width: 100%;
+    margin-bottom: 50px;
+  }
+
+  .main .bottom-infocard-text {
+    width: 80%;
+  }
+
+  .main .bottom-infocard-title {
+    font-size: 24px;
+    margin-bottom: 9px;
+  }
+
+  .main .bottom-infocard-img-desktop {
+    display: none;
+  }
+
+  .main .bottom-infocard-img-mobile {
+    display: block;
+  }
+}