feat: Adiciona o texto do infocard de baixo desktop e mobile

assets/styles/main.css

@@ -144,8 +144,8 @@ body {
     gap: 16px;
     justify-content: center;
     align-items: center;
-    margin: auto auto 80px;
+    margin: auto auto 108px;
-    width: 100%;
+    width: 88%;
 }
 
 .bottom-card {
@@ -158,13 +158,16 @@ body {
     min-height: 287px;
     gap: 25px;
     height: auto;
+    width: 22%;
 }
 
 .bottom-card-image {
     display: block;
-    max-width: 102px;
+    /*max-width: 102px;*/
+    width: 29%;
 }
 
+
 .bottom-card-description {
     max-width: 367px;
     font-size: 16px;
@@ -172,6 +175,49 @@ body {
     text-align: center;
 }
 
+/*Infocard de baixo*/
+
+.bottom-infocard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0 178px;
+    width: 100%;
+    padding: 0 72px;
+}
+
+
+.bottom-infocard-text {
+    text-align: center;
+    margin-bottom: 50px;
+    width: 29%;
+}
+
+.bottom-infocard-title {
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 39px;
+}
+
+.bottom-infocard-description {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.bottom-infocard-image {
+    display: block;
+    width: 100%;
+}
+
+.bottom-infocard-image-desktop {
+    width: 71%;
+}
+
+.bottom-infocard-image-mobile {
+    display: none;
+}
+
 /*Versão mobile*/
 
 @media screen and (max-width: 320px) {
@@ -233,13 +279,17 @@ body {
         max-width: 102px;
     }
 
+    .gallery-area {
+        padding: 0;
+    }
+
     .gallery-wrapper {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         width: 89%;
         gap: 23px 14px;
         transform: translateY(32px);
-        margin-bottom: 80px;
+        margin-bottom: 98px;
     }
 
     .gallery-area-images-01 {
@@ -258,12 +308,10 @@ body {
     .bottom-cards {
         flex-direction: column;
         margin-bottom: 131px;
-        
     }
     
     .bottom-card {
         width: 88%;
-        max-height: 332px;
     }
     
     .bottom-card-image {
@@ -273,11 +321,45 @@ body {
     .bottom-card-description {
         font-size: 14px;
     }
+
+    .bottom-infocard {
+        margin: 0;
+        padding: 0;
+    }
+    
+    
+    .bottom-infocard-text {
+        margin-bottom: 50px;
+        gap: 10px;
+        width: 84%;
+        align-items: center;
+    }
+    
+    .bottom-infocard-title {
+        font-size: 24px;
+        line-height: 29px;
+    }
+    
+    .bottom-infocard-description {
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    .bottom-infocard-image-desktop {
+        display: none;
+    }
+
+    .bottom-infocard-image-mobile {
+        display: flex;
+        width: 100%;
+        margin-bottom: 50px;
+    }
 }
+
 /*Versão telas 4k*/
+    /*rever as fontes, precisam estar no dobro do tamanho do desktop*/
 
 @media screen and (min-width: 2500px) {
-    /*rever as fontes, precisam estar no dobro do tamanho do desktop*/
     .top-infocard-text {
         width: 52%;
         margin: 95px 0 95px;
@@ -296,10 +378,9 @@ body {
         font-size: 21px;
         line-height: 31px;
         padding: 0 0 36px;
-
     }
 
     .top-infocard-image {
         width: 20%;
-        }
+    }
 }

index.html

@@ -73,7 +73,7 @@
                     </figcaption>
                 </figure>    
            </section>
-           
+
            <!-- Área da galeria-->
 
            <div class="gallery-area">
@@ -96,7 +96,7 @@
 
            <section class="bottom-cards">
             <figure class="bottom-card">
-                <img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: " />
+                <img class="bottom-card-image bottom-card-image-01" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: Nota dinheiro" />
                 
                 <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.
@@ -104,7 +104,7 @@
             </figure>    
 
             <figure class="bottom-card">
-                <img class="bottom-card-image" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: " />
+                <img class="bottom-card-image bottom-card-image-02" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: Moeda" />
                 
                 <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.
@@ -112,7 +112,7 @@
             </figure>    
 
             <figure class="bottom-card">
-                <img class="bottom-card-image" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: " />
+                <img class="bottom-card-image bottom-card-image-03" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: Computador" />
                 
                 <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.
@@ -120,13 +120,31 @@
             </figure>    
 
             <figure class="bottom-card">
-                <img class="bottom-card-image" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: " />
+                <img class="bottom-card-image bottom-card-image-04" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: Celular" />
                     
                 <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>    
-       </section>
+            </section>
+
+            <!--Infocard de baixo-->
+            <div class="bottom-infocard">
+                <article 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>
+                </article>
+
+                <figure class="bottom-infocard-image">
+                    <img class="bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo" />
+                    <img class="bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo" />
+                </figure>
+            </div>
         </main>
     </body>
 </html>