Merge pull request 'develop' (#6) from develop into main

Reviewed-on: #6

_assets/css/main.css

@@ -95,38 +95,46 @@ body {
   margin-top: 27px;
 }
 
-.imageblock-wrapper {
-  border: #00c8ff 1px solid;
-  background-color: #e0e0e0;
-  display: grid;
-  grid-template-columns: repeat(3, max-content);
-  gap: 39px;
-  justify-content: center;
+.fig-container {
+  background-color: #E0E0E0;
+  
 }
 
-.imageblock-image {
-  border: #00c8ff 1px solid;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  bottom: -62px;
+.fig-wrapper {
+  height: 530px;
+display: flex;
+justify-content: center;
+align-items: center;
+gap: 39px;
+
+
 }
 
+.fig-image {
+
+
+  width: 29%;
+  
+}
+
+
+
+
+
+
+
+
 .cards-wrapper2 {
-  display: grid;
-  grid-template-columns: repeat(4, max-content);
+
   gap: 16px;
   justify-content: center;
-  padding-top: 179px;
-  padding-bottom: 74px;
   text-align: center;
+  margin: 179px 72px 74px 72px;
+  display: flex;
 }
 
 .card2 {
-  max-width: 350px;
-  display: flex;
+
   flex-direction: column;
   align-items: center;
   padding: 0 26px 28px;
@@ -147,8 +155,7 @@ body {
 }
 
 .article {
-  border: #00c8ff 1px solid;
-  margin-top: 108px;
+  margin-top: 108px;  
 }
 
 .article-title {
@@ -159,16 +166,20 @@ body {
 }
 
 .article-description {
-  justify-content: center;
+  max-width: 550px;
   text-align: center;
-  font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  max-width: 550px;
-  margin-bottom: 50px;
+  margin: 0 auto 50px auto;
   
 }
 
+
+
+
+
+
+
 .bottom-banner {
     display: flex;
     flex-direction: column;
@@ -181,15 +192,15 @@ body {
 }
 
 .page-footer {
-  margin-top: 106px;
+  margin-top: 116px;
   display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: #000000;
-    padding: 38px 0;
+  flex-direction: column;
+  align-items: center;
+  background: #000000;
 }
 
 .page-footer-icon {
+  margin-top: 38px;
   display: flex;
   list-style: none;
 }
@@ -197,7 +208,11 @@ body {
 .footer-text {
   color: #ffffff;
   text-align: center;
-  padding-bottom: 38px;
+  margin: 17px 0 38px;
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: uppercase;
+  color: #BDBDBD;
 }
 
 
@@ -210,11 +225,6 @@ body {
 
 
 
-
-
-
-
-
 @media screen and (max-width: 414px) {
   .top-banner-image-desktop,
   .bottom-banner-desktop {

index.html

@@ -103,21 +103,20 @@
         </figure>
       </div>
 
-      <!-- Imageblock | Desktop and Mobile -->
-      <div class="imageblock-wrapper">
-        <figure class="imageblock-image image1">
-          <img src="./_assets/images/image1.png" alt="Imagem 1" />
-        </figure>
 
-        <figure class="imageblock-image image2">
-          <img src="./_assets/images/image2.png" alt="Imagem 2" />
-        </figure>
+        <div class="fig-container">
+          <figure class="fig-wrapper">
+            <img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
+            <img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
+            <img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
+          </figure>
 
-        <figure class="imageblock-image image3">
-          <img src="./_assets/images/image3.png" alt="Imagem 3" />
-        </figure>
-      </div>
+        </div>
 
+
+
+
+      
       <!-- Cards2 | Desktop and Mobile -->
       <div class="cards-wrapper2">
         <figure class="card2">
@@ -202,6 +201,7 @@
         />
       </figure>
 
+      <!-- Footer | Desktop and Mobile -->
       <footer class="page-footer">
         <ul class="page-footer-icon">
           <li class="footer-icon">