feat(index): adiciona a estrutura do HTML dos cards de baixo para desktop e mobile

index.html

@@ -88,6 +88,32 @@
                 </figure>
             </div>
         </div>
+
+        <!-- Bottom cards -->
+        <div class="cards bottom-cards">
+            <figure class="card bottom-card">
+                <img class="bottom-card-image" src="assets/images/card-image-money.png"
+                    alt="imagem do primeiro card do bottomo" />
+                <figcaption class="bottom-card-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="card bottom-card">
+                <img class="bottom-card-image" src="assets/images/card-image-coin.png" alt="imagem do segundo card do bottomo" />
+                <figcaption class="bottom-card-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="card bottom-card" />
+                <img class="bottom-card-image" src="assets/images/card-image-laptop.png"
+                    alt="imagem do terceiro card do bottomo">
+                <figcaption class="bottom-card-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="card bottom-card" />
+                <img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
+                    alt="imagem do terceiro card do bottomo">
+                <figcaption class="bottom-card-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>
     </main>
 </body>
 

styles/main.css

@@ -138,6 +138,7 @@ body {
 /*middle images*/
 .middle-images {
     background: #E0E0E0;
+    margin-bottom: 190px;
 }
 
 .middle-images-wrapper {
@@ -238,7 +239,6 @@ body {
 }
 
 /*4K*/
-
 @media screen and (min-width: 2500px) {
     /*top infocard*/
     .top-infocard-subtitle {