feat(index): adiciona os cards de baixo desktop e mobile

index.html

@@ -23,7 +23,7 @@
     </header>
 
     <main>
-        <!-- banner -->
+        <!-- main banner -->
         <div>
             <figure>
                 <!-- banner desktop -->
@@ -49,7 +49,7 @@
         </section>
 
          <!-- top cards-->
-         <div class="top-cards">
+        <div class="top-cards">
             <figure class="top-card">
                 <img class="top-card-image" src="assets/images/top-card-image-01.png" alt="imagem do primeiro card do topo" />
                 <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
@@ -71,6 +71,7 @@
             </figure>
         </div>
 
+        <!-- middle banner-->
         <div>
             <figure>
                 <!-- banner desktop -->
@@ -81,6 +82,32 @@
                     alt="imagem de um computador" />
             </figure>
         </div>
+
+        <!-- bottom cards -->
+        <div class="bottom-cards">
+            <div class="bottom-cards-wrapper">
+                <figure class="bottom-card">
+                    <img class="bottom-card-image" src="assets/images/bottom-card-image-01.png" alt="imagem do primeiro card de baixo" />
+                    <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
+                    </figcaption>
+                </figure>
+                <figure class="bottom-card">
+                    <img class="bottom-card-image" src="assets/images/bottom-card-image-02.png" alt="imagem do segundo card de baixo" />
+                    <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
+                    </figcaption>
+                </figure>
+                <figure class="bottom-card">
+                    <img class="bottom-card-image" src="assets/images/bottom-card-image-03.png" alt="imagem do terceiro card de baixo" />
+                    <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
+                    </figcaption>
+                </figure>
+                <figure class="bottom-card">
+                    <img class="bottom-card-image" src="assets/images/bottom-card-image-04.png" alt="imagem do terceiro card de baixo" />
+                    <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
+                    </figcaption>
+                </figure>
+            </div>
+        </div>
         
     </main>
 </body>

styles/main.css

@@ -104,6 +104,48 @@ body {
     width: 86%;
 }
 
+/*bottom card*/
+
+.bottom-cards {
+    margin-top: 140px;
+    background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
+}
+
+.bottom-cards-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 23%);
+    justify-content: center;
+    gap: 20px;
+
+    position: relative;
+    top: -60px;
+    
+}
+
+.bottom-card {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    padding: 36px 32px 66px;
+}
+
+.bottom-card-image {
+    width: 24%;
+    display: block;
+}
+
+.bottom-card-description {
+    margin-top: 15px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    width: 86%;
+}
+
 @media screen and (max-width: 1024px) {
     /*top infocard*/
     .top-infocard {
@@ -154,6 +196,20 @@ body {
     .top-card-image {
         max-width: 120px;
     }
+
+    /*bottom cards*/
+    .bottom-cards {
+        padding: 26px;
+    }
+
+    .bottom-cards-wrapper {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .bottom-card-image {
+        max-width: 120px;
+    }
 }
 
 @media screen and (max-width: 414px) {