assets/css/main.css

@@ -130,12 +130,16 @@
 
 @media screen and (min-width:1025px) {
   .services {
-    width: 55%;
+    width: 57%;
     margin: 0 auto;
   }
 
-  .card {
-    max-width: 350px;
+  .services-container {
+    padding: 0;
+  }
+
+  .services .card {
+    min-width: 350px;
   }
 }
 
@@ -182,6 +186,47 @@
   }
 }
 
+/*----------*\
+=  FEATURES  =
+\*----------*/
+.features {
+  padding: 0px 24px;
+}
+
+.features-container {
+  --hs-flex-space: 1rem;
+
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 98px;
+  margin: 0;
+}
+
+.features .card {
+  width: 100%;
+  min-height: 332px;
+
+}
+
+@media screen and (min-width:1025px) {
+  .features-container {
+    flex-direction: row;
+    width: 92%;
+    padding-bottom: 108px;
+    margin: 0 auto;
+  }
+
+  .features .card {
+    width: 22.5%;
+  }
+
+  .card-image {
+    width: 29%;
+    height: auto;
+  }
+}
+
+
 /*CUBE CSS styles*/
 
 /*-------------*\

index.html

@@ -111,6 +111,42 @@
     </div>
 
     <!--=============== Features ===============-->
+    <section class="features">
+      <div class="features-container flex-box center">
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/money.svg" alt="Dinheiro" />
+          <figcaption class="card-description text-center">
+            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>
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/handle-coin.svg" alt="Mão estendida com uma moeda" />
+          <figcaption class="card-description text-center">
+            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>
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/laptop.svg" alt="Um laptop aberto em umas de suas páginas do seu ecommerce" />
+          <figcaption class="card-description text-center">
+            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>
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/phone-notificated.svg" alt="Um celular que contém suas notificações" />
+          <figcaption class="card-description text-center">
+            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>
+      </div>
+    </section>
 
     <!--=============== Blog ===============-->