Merge branch 'feature/lower-section' into development

index.html

@@ -76,6 +76,53 @@
           <img class="grid-image-mobile grid-image-mobile-03" src="./src/assets/img/grid-image-mobile-03.png" alt="Terceira Imagem do Grid de Imagens"/>
         </div>
       </div>
+
+      <section class="lower-section">
+        <div class="lower-section-cards">
+          <div class="lower-card">
+            <img class="lower-card-image lower-card-image-01" src="./src/assets/img/lower-card-image-01.png" alt="Imagem do Primeiro Card da Seção Inferior"/>
+
+            <p class="lower-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="lower-card">
+            <img class="lower-card-image" src="./src/assets/img/top-card-image-03.png" alt="Imagem do Segundo Card da Seção Inferior"/>
+
+            <p class="lower-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="lower-card">
+            <img class="lower-card-image" src="./src/assets/img/lower-card-image-03.png" alt="Imagem do Terceiro Card da Seção Inferior"/>
+
+            <p class="lower-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="lower-card">
+            <img class="lower-card-image" src="./src/assets/img/lower-card-image-04.png" alt="Imagem do Quarto Card da Seção Inferior"/>
+
+            <p class="lower-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>
+
+        <div class="lower-section-text">
+          <h2 class="lower-section-subtitle">Lorem ipsum dolor sit amet</h2>
+
+          <p class="lower-section-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>
+        </div>
+
+        <img class="lower-section-image lower-section-image-desktop" src="./src/assets/img/lower-section-image-desktop.png" alt="Imagem Principal da Seção Inferior" />
+        <img class="lower-section-image lower-section-image-mobile" src="./src/assets/img/lower-section-image-mobile.png" alt="Imagem Principal da Seção Inferior" />
+      </section>
     </main>        
   </body>
 </html>

src/styles/main.css

@@ -105,6 +105,7 @@ body {
   text-align: center;
 }
 
+/* ----- IMAGE GRID ----- */
 .image-grid-container {
   display: flex;
   justify-content: center;
@@ -125,6 +126,81 @@ body {
   display: block;
 }
 
+/* ----- LOWER SECTION ----- */
+.lower-section {
+  display: grid;
+  grid-template-columns: repeat(1, auto);
+  grid-template-areas:
+  "cards"
+  "text"
+  "image";
+  /* column-gap: 14px;
+  row-gap: 24px;
+  top: 32px; */
+}
+
+.lower-section-cards {
+  /* max-width: 92%; */
+  margin: 192px 0 108px;
+  grid-area: cards;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.lower-card {
+  max-width: 22.5%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 35px 0 64px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.lower-card-image {
+  max-width: 24%;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.lower-card-description {
+  padding: 0 32px;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.lower-section-text {
+  margin-bottom: 50px;
+  grid-area: text;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lower-section-subtitle {
+  /* line-height: 39px; */
+  font-size: 32px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.lower-section-description {
+  max-width: 28%;
+  line-height: 24px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.lower-section-image-desktop {
+  max-width: 70%;
+  margin: 0 auto 116px;;
+  grid-area: image;
+  display: block;
+}
+
 /* ----- RESPONSIVIDADE ----- */
 @media screen and (min-width: 2500px) {
 
@@ -132,7 +208,8 @@ body {
 
 @media screen and (min-width: 769px) {
   .main-banner-mobile,
-  .grid-image-mobile {
+  .grid-image-mobile,
+  .lower-section-image-mobile {
     display: none;
   }
 }
@@ -171,7 +248,8 @@ body {
 
 @media screen and (max-width: 768px) {
   .main-banner-desktop,
-  .grid-image-desktop {
+  .grid-image-desktop,
+  .lower-section-image-desktop {
     display: none;
   }
 
@@ -242,6 +320,59 @@ body {
   .grid-image-mobile-03 {
     grid-area: imagem3;
   }
+
+  .lower-section {
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    grid-template-areas:
+    "cards"
+    "image"
+    "text";
+    /* column-gap: 14px;
+    row-gap: 24px;
+    top: 32px; */
+  }
+
+  .lower-section-cards {
+    margin: 112px 0 98px;
+    grid-area: cards;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: center; */
+  }
+
+  .lower-card {
+    max-width: 88%;
+  }
+
+  .lower-card-image {
+    max-width: 28%;
+  }
+
+  .lower-card-description {
+    font-size: 14px;
+  }
+
+  .lower-section-text {
+    margin-bottom: 88px;
+  }
+
+  .lower-section-subtitle {
+    /* line-height: 29px; */
+    margin-bottom: 8px;
+    font-size: 24px;
+  }
+
+  .lower-section-description {
+    max-width: 84%;
+  }
+
+  .lower-section-image-mobile {
+    margin-bottom: 50px;
+    grid-area: image;
+    display: block;
+  }
 }
 
 @media screen and (max-width: 320px) {