assets/styles.css

@@ -1,3 +1,5 @@
+/* ---------- INITIAL ---------- */
+
 * {
     margin: 0;
     padding: 0;
@@ -14,7 +16,7 @@ body {
     font-family: 'Inter', sans-serif;
 }
 
-/* HEADER E BANNER */
+/* ---------- HEADER E MAIN BANNER ---------- */
 
 .page__header {
     display: flex;
@@ -37,7 +39,7 @@ body {
 }
 
 
-/* TOP TEXTS */
+/* ---------- TOP TEXTS ---------- */
 
 .top__text {
     display: flex;
@@ -78,7 +80,7 @@ body {
 }
 
 
-/* TOP CARDS */
+/* ---------- TOP CARDS ---------- */
 
 .top__cards {
     display: grid;
@@ -109,7 +111,7 @@ body {
 }
 
 
-/* BOTTOM CARDS */
+/* ---------- BOTTOM CARDS ---------- */
 
 .bottom__cards {
     background: #E0E0E0;
@@ -139,12 +141,12 @@ body {
     display: block;
 }
 
-
-.bottom__card-image-3 {
+.bottom__card-3 {
     grid-column: initial;
 }
 
-/* BOTTOM INFOCARDS */ 
+
+/* ---------- BOTTOM INFOCARDS ---------- */ 
 
 .bottom__infocards {
     display: grid;
@@ -175,13 +177,46 @@ body {
 }
 
 
+/* ---------- BOTTOM BANNER CONTAINER ---------- */
 
-/* MEDIAS QUERIES */
+.bottom__banner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+}
+
+.bottom__banner-desktop {
+    width: 100%;
+    padding: 0 280px 116px;
+    margin-top: 50px;
+}
+
+.bottom__banner-mobile {
+    display: none;
+}
+
+.bottom__title {
+    font-weight: 600;
+    font-size: 32px;
+}
+
+.bottom__text {
+    max-width: 550px;
+}
+
+.bottom__description {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+
+/* ---------- MEDIAS QUERIES ---------- */
 
 @media screen and  (max-width: 1024px) {
 
-    /* MAIN BANNER */
-
+    /* ---------- MAIN BANNER  ---------- */
     .main__banner-desktop {
         display: none;
     }
@@ -191,8 +226,16 @@ body {
         width: 100%;
     }
 
-    /* TOP CARDS */
+    .bottom__banner-desktop {
+        display: none;
+    }
 
+    .bottom__banner-mobile {
+        display: block;
+    }
+
+
+    /* ---------- TOP TEXTS ---------- */
     .top__text {
         flex-direction: column;
         padding: 88px 32px 90px;
@@ -222,12 +265,12 @@ body {
         text-align: center;
     }
 
+    /* ---------- TOP CARDS ---------- */
     .top__cards {
         display: grid;
         grid-template-columns: repeat(3, max-content);
         gap: 20px;
         justify-content: center;
-        padding: 0 0;
     }
 
     .top__card {
@@ -237,8 +280,8 @@ body {
         padding: 26px 26px 34px; 
     }
 
-    /* BOTTOM CARDS */
 
+    /* ---------- BOTTOM CARDS ---------- */
     .bottom__cards {
         padding: 0 24px;
         margin-bottom: 112px;
@@ -258,6 +301,12 @@ body {
         grid-column: 1/3;
     }
 
+    .bottom__card-2 {
+        grid-row: 1;
+    }
+
+
+    /* ---------- BOTTOM INFOCARDS ---------- */
     .bottom__infocards {
         display: grid;
         grid-template-columns: repeat(3, max-content);
@@ -273,6 +322,31 @@ body {
         padding: 26px 26px 34px; 
     }
 
+
+    /* ---------- BOTTOM BANNER CONTAINER ---------- */
+
+    .bottom__banner-container {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .bottom__title {
+        font-size: 24px;
+    }
+
+    .bottom__text {
+        padding: 0 32px 87px;
+    }
+
+    .bottom__banner-desktop {
+        display: none;
+    }
+
+    .bottom__banner-mobile {
+        width: 100%;
+        display: block;
+        margin-bottom: 50px;
+    }
 }
 
 
@@ -290,17 +364,13 @@ body {
 @media screen and  (max-width: 1200px) {
     .top__cards {
         grid-template-columns: 1fr;
-        padding: 0 24px;
+        padding: 0 32px;
     }
 
     .bottom__infocards {
         grid-template-columns: 1fr;
-        padding: 0 24px;
+        padding: 0 24px 98px;
     }
 }
 
 
-
-
-
-

index.html

@@ -81,9 +81,20 @@
                     <img class="bottom__infocard-image" src="./assets/images/smartphone-icon.png" alt="Icone de um celulara do quarto card de baixo">
                     <p class="bottom__infocard-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>
+            </section>
 
+            <section class="bottom__banner-container">
+                <div class="bottom__text">
+                    <h2 class="bottom__title">Lorem ipsum dolor sit amet</h2>
+                    <p class="bottom__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>
-                </div>
+                <figure>
+                    <img class="bottom__banner-desktop" src="./assets/images/bottom-banner-desktop.png" alt="Banner do infocard de baixo">
+                    <img class="bottom__banner-mobile" src="./assets/images/bottom-banner-mobile.png" alt="">
+                </figure>
             </section>
 
         </main>