Merge pull request 'Adiciona os 4 infocards de baixo' (#6) from feature/bottom-infocards into develop

Reviewed-on: #6

assets/styles.css

@@ -85,7 +85,6 @@ body {
     grid-template-columns: repeat(3, max-content);
     gap: 20px;
     justify-content: center;
-    padding: 0 0;
 }
 
 .top__card {
@@ -141,14 +140,39 @@ body {
 }
 
 
-.bottom-card-image-3 {
+.bottom__card-image-3 {
     grid-column: initial;
 }
 
+/* BOTTOM INFOCARDS */ 
 
+.bottom__infocards {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    padding: 0 76px 108px;
+}
 
+.bottom__infocard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 33px 32px 65px; 
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+    min-width: 22%;
+}
 
+.bottom__infocard-image {
+    display: block;
+    margin-bottom: 30px;
+}
 
+.bottom__infocard-description {
+    min-width: 15%;
+    font-size: 16px;
+    text-align: center;
+}
 
 
 
@@ -211,8 +235,6 @@ body {
         flex-direction: column;
         align-items: center;
         padding: 26px 26px 34px; 
-        background: #FFFFFF;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
     }
 
     /* BOTTOM CARDS */
@@ -235,11 +257,31 @@ body {
     .bottom__card-3 {
         grid-column: 1/3;
     }
+
+    .bottom__infocards {
+        display: grid;
+        grid-template-columns: repeat(3, max-content);
+        gap: 20px;
+        justify-content: center;
+        padding: 0 0;
+    }
+    
+    .bottom__infocard {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 26px 26px 34px; 
+    }
+
 }
 
 
 @media screen and (min-width: 769px) and (max-width: 1200px) {
-    .top-cards {
+    .top__cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+
+    .bottom__infocards {
         grid-template-columns: repeat(2, max-content);
     }
 }
@@ -248,16 +290,17 @@ body {
 @media screen and  (max-width: 1200px) {
     .top__cards {
         grid-template-columns: 1fr;
-        padding: 0 32px;
+        padding: 0 24px;
+    }
+
+    .bottom__infocards {
+        grid-template-columns: 1fr;
+        padding: 0 24px;
     }
 }
 
 
 
-@media screen and (min-width: 993px ) and (max-width: 1280px) {
-    .top__infocard-text {
-        max-width: 520px;
-    }
-}
+
 
 

index.html

@@ -63,6 +63,29 @@
                     </figure>
                 </div>
             </section>
+
+            <section class="bottom__infocards">
+                <div class="bottom__infocard">
+                    <img class="bottom__infocard-image" src="./assets/images/money-icon.png" alt="Icon de dinheiro do primeiro card de baixo">
+                    <p class="bottom__infocard-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.  </p>
+                </div>
+                <div class="bottom__infocard">
+                    <img class="bottom__infocard-image" src="./assets/images/handcoin-icon.png" alt="Icone de uma mão com uma moeda do segundo card de baixo">
+                    <p class="bottom__infocard-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.  </p>
+                </div>
+                <div class="bottom__infocard">
+                    <img class="bottom__infocard-image" src="./assets/images/laptop-icon.png" alt="Icone de um laptop do terceiro card de baixo">
+                    <p class="bottom__infocard-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.  </p>
+                </div>
+                <div class="bottom__infocard">
+                    <img class="bottom__infocard-image" src="./assets/images/smartphone-icon.png" alt="Icone de um celulara do quarto card de baixo">
+                    <p class="bottom__infocard-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.  </p>
+                </div>
+               
+                </div>
+                </div>
+            </section>
+
         </main>
 </body>
 </html>