Merge pull request 'Feat(main): Cria Bottom-cards' (#7) from Feat/Bottom-cards into develop

Reviewed-on: #7

assets/styles/main.css

@@ -105,3 +105,31 @@ body{
 .mid-banner-image{
    width: 100%;
 }
+
+.bottom-cards{   
+    display: grid;
+    grid-template-columns: repeat(4, 23%);
+    gap: 16px;
+    justify-content: center;
+    padding: 0 0 108px;
+}
+
+.bottom-card{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.bottom-card-image{
+    display: block;
+    padding: 36px 164px 0;
+}
+
+.bottom-card-description{
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    padding: 16px 32px 66px;
+}

index.html

@@ -39,7 +39,7 @@
 
         <section class="top-cards">
            <div class="top-card">
-               <img class="top-card-image" src="./assets/images/top-card-01.png" alt="Image 1" />
+               <img class="top-card-image" src="./assets/images/top-card-01.png" alt="Top Image 1" />
                
                <p class="top-card-description" >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
@@ -48,7 +48,7 @@
            </div>
 
            <div class="top-card">
-               <img class="top-card-image" src="./assets/images/top-card-02.png" alt="Image 2" />
+               <img class="top-card-image" src="./assets/images/top-card-02.png" alt="Top Image 2" />
 
                <p class="top-card-description" >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
@@ -57,7 +57,7 @@
            </div>
 
            <div class="top-card">
-               <img class="top-card-image" src="./assets/images/top-card-03.png" alt="Image 3" />
+               <img class="top-card-image" src="./assets/images/top-card-03.png" alt="Top Image 3" />
 
                <p class="top-card-description" >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
@@ -82,6 +82,41 @@
             </div>
         </div>
 
+        <section class="bottom-cards">
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-01.png" alt="Bottom Image 1" />
+
+                <p 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. 
+                </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="Bottom Image 2" />
+
+                <p 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. 
+                </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="Bottom Image 3" />
+
+                <p 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. 
+                </p>
+            </div>
+
+            <div class="bottom-card">
+                <img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Bottom Image 4" />
+
+                <p 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. 
+                </p>
+            </div>
+
+        </section>
+
        </main>
 
     </body>